How to Design a Restaurant Menu in Elementor

Design your restaurant menu in Elementor with the JelloPoint widget. Select your centrally managed WordPress content, then adjust columns, headings, prices and spacing for each screen size.

Select the content first

Select Restaurant Menu (JelloPoint) and choose the intended Menu under Data Source. Sections narrows the result; Max Items limits it, with 0 meaning no limit.

When neither Menu nor Section is selected, Fallback to all items when no Menu/Section can show a broader item list. An explicit Menu selection makes the result predictable.

Choose columns and spacing

Under Layout, set Columns and Column gap. Check desktop, tablet and mobile responsive controls separately; one column is a useful starting point for phones.

Use Split mode and the split-after-section controls where available to influence column breaks. Leave enough room for long dish names and price labels.

Display headings and descriptions

Under Sections and Menus, choose whether to show the Menu title and description, Section names and descriptions, and Main Section Headings. Set the Menu title position as needed.

Enable Show Even If Empty (No Items) only when empty headings are intentional. Otherwise check item assignments if a section is missing.

Choose item ordering

Use Order (menu order) to follow manual item ordering, or choose Title or Price for a different sort. Check the direction.

Item order per Section can override the overall ordering. Review these settings before rearranging the underlying content to solve a display issue.

Arrange labels and badges

Prices and Labels controls currency and label presentation. Labels Layout controls the desktop layout and Tablet & Mobile behaviour. Inline-below layouts have separator settings; matrix layouts have a placeholder setting.

Section Overrides lets a selected section use a different layout. Use Badges for visibility, position and icon/text presentation. Edit the underlying values using Prices & Badges.

Use consistent styles

Use Elementor’s global colors and typography where available, then refine the widget’s style controls. Keep item titles more prominent than descriptions and prices easy to scan.

Use Info Blocks for reusable messages beside sections. Their website styling is controlled in Elementor.

Verify smaller screens

Check tablet columns and long item titles.
At mobile width, review the longest description, the most price rows and several badges together.
Adjust responsive gaps, columns and label behavior.
Update the page and inspect the public result.
Confirm no text is clipped and the page does not scroll sideways.

Prepare a separate print design

Print / PDF uses dedicated presets, fonts, margins and columns. It does not copy the full Elementor page layout. Follow Print & PDF to prepare the paper version.