Restaurant Menu

Restaurant Menu Widget Guide

Create a clean and easy-to-use food and drink menu on your website.
This widget lets you build a simple, organized menu that works well on both computers and phones. Choose a layout, add your menu items, and customize the look to match your website.

1. Choose a Layout

When you add the widget, you’ll see different layout styles. Pick one that fits your menu best.

Layout options:

• Grid View – Menu items in boxes. Great for menus with pictures.

• List View – Items in a simple list. Good for text-based menus.

• Tabbed Categories – Sections with tabs (like Starters, Mains, Drinks).

How to choose:

1. Click on any layout to see how it looks.

2. Click “Continue” to use that layout and open the editor.

2. Use the Three Tabs to Build Your Menu

After choosing a layout, you’ll see three tabs in the editor:

• Content Tab – Add menu items, prices, and organize them into categories.

• Style Tab – Change fonts, colors, spacing, and image settings.

• Settings Tab – Control how your menu looks on different screen sizes and how it behaves when users click on it.

3. Add and Edit Your Menu

🍔 Content Tab

• Add Items – Enter the name, description (optional), and price.

• Create Categories – Group items into sections like Appetizers, Mains, Desserts.

• Add Pictures (Optional) – Upload images to show what each item looks like.

• Focus Items (Optional) – Mark popular or special items.

• Reorder Items – Drag and drop to move items or categories.

🎨 Style Tab

• Text Settings – Choose fonts and sizes for item names and prices.

• Colors – Change background, text, and accent colors.

• Spacing – Adjust space between items, titles, and sections.

• Borders & Shadows – Add outlines or soft shadows if you want.

• Images & Icons – Control image size and alignment.

⚙️ Settings Tab

• Toggle Sections – Choose if categories start open or closed.

• Animations – Set how fast sections open or close.

• Responsive View – Make sure the menu looks good on phones and tablets.

• Custom Code (Optional) – Add your own CSS or JavaScript if needed.

✅ Quick Tips

• Use the Content Tab to add and organize items.

• Use the Style Tab to make it match your website.

• Use the Settings Tab to control how it works on different screens.

• Click Save when you’re done so your changes are applied.