Weebly gives you four ways to put a restaurant menu on your website: type it with Title and Text elements on a page, upload a PDF and attach it to a link or show it in the Document element, install a menu app from the Weebly App Center, or paste an embed code, a short piece of code that places a menu hosted elsewhere inside your page, into an Embed Code element. Typing is the quickest to set up and to edit when the fish runs out at 7:30, a PDF is the quickest if the menu already exists as a designed file, an app gives you a menu layout inside Weebly's editor, and an embed is the route to a menu with search and dietary filters that you edit somewhere else and that changes on your Weebly page without a new publish. Whichever you choose, every route starts in the drag-and-drop Build tab, a new page takes its place in your navigation from its position in the Pages list, and nothing reaches guests until you click Publish.
This guide covers the four routes, the Weebly labels for each, how the page lands in your navigation, what your plan changes, how to check the result on a phone, and where MenuFramer fits.
Which way to add your menu on Weebly
A guest opens your site at 6 pm on a phone and taps Menu. What they get depends on which route you took, and the differences show up later, when a price changes, a dish sells out, or someone asks which dishes have nuts.
| Typed with Title and Text | PDF on a link or in the Document element | App Center menu app | Embedded menu | |
|---|---|---|---|---|
| Where you edit | The elements on the page, in the Weebly editor | Your design file, then a new upload | The app's own editor, opened from the element | The menu service's own editor |
| What guests get | Text on the page in your theme's fonts | A file that opens in the browser or downloads, or a document viewer on the page | The app's layout inside your page | The service's menu inside your page |
| Dish photos | An image element beside each dish | Whatever the PDF contains | The Menu app's listing says images can be added to items | Depends on the service |
| Dietary filters and search | None; marks are typed into descriptions | Whatever the PDF contains | Depends on the app | Depends on the service |
| Changing a price | Edit the text and publish | Export a new PDF, upload it, relink and publish | Change it in the app's editor | Change it in the service |
| What Weebly needs | A Standard Page | A Standard Page and the link dialog, or the Document element | The app connected to your site | The Embed Code element, which Weebly's pricing page lists under every plan |
Choose by how often the menu changes
If prices or dishes change weekly, a typed page, an app or an embed keeps up and a PDF falls behind, because every change means a new export, a new upload and a new link. If the menu is fixed for a season and already exists as a designed file, the PDF gets you live today. If you want each dish to carry a photo and guests to narrow the menu to what they can eat, that is what an embedded menu is for, because the typed route has no filters. Our guide to PDF menus and online menus covers what a PDF looks like on a phone and in search.
Before you start: the editor, publishing and your plan
Weebly's help page on navigating the editor names six tabs across the top of the editor: Build, Pages, Themes, Store, Apps and Settings. Build shows every element in the left sidebar, organized into categories, and adding content means dragging an element from there onto the page. Pages is where you add, rearrange, copy, delete and edit pages. Apps opens the Weebly App Center. Themes is where fonts are set for the text-based elements, so the fonts your menu appears in are chosen there.
Create the menu page
Weebly's help page on creating pages and navigation gives these steps.
- Click the Pages tab.
- Click the + button at the top of the Pages sidebar.
- Choose Standard Page. Weebly's help says this is the page type you will probably use most, and that choosing it creates the page and prompts you for a name.
- Type a name such as Menu.
- Click done, as Weebly's help writes it, to save and return to the list of pages. The new page appears at the bottom of the list.
The Pages list is also your navigation. Weebly's help says dragging pages up and down the list changes the order they appear in the navigation, that dragging a page to the very top makes it the home page, marked with a house icon, and that dragging a page underneath and to the right of another makes it a subpage, shown in a drop-down when a guest hovers over the main item. Keep Menu as a main page: it is the page guests tap most, and a subpage hidden under About costs them a tap on a phone.
What publishing does
Weebly's help page on publishing says the Publish button sits in the upper right corner of the editor, that a confirmation message tells you the site has been published successfully, and that whenever you make changes and want them to appear on your live site, you click Publish again. Every route in this guide ends with that click.
What your Weebly plan changes
Weebly's pricing page in November 2026 lists four plans, named Free, Personal, Professional and Performance. Two lines on it matter for a menu page. Add 3rd party embed code appears under all four plans, so the embed route does not depend on upgrading. Connect a Custom Domain appears under three of the four, which matters if the address on your table cards should be your own domain. None of the Weebly help pages on the elements in this guide names a plan requirement.
How to type your menu with Title and Text elements
The typed route suits a short menu that changes often and a site where someone on staff will make the edits. Everything below uses the labels from Weebly's help pages on text, content elements and columns.
Add the elements and type the menu
- Click the Build tab and drag a Title element onto the menu page. Weebly's help describes Title as an H2 headline, a second-level heading, which is the right level for a section name such as Starters.
- Click the Title element and type the section name.
- Drag a Text element under it and click it to start typing. Type each dish on its own line as a name, a short description and a price, pressing Enter between dishes.
- Repeat for each section. Weebly's help says a site is easier to read and looks cleaner with a separate text element for each new paragraph, so one Text element per section, with a line per dish, keeps each section movable as a unit.
- Use the text toolbar for emphasis. Weebly's help lists its icons from left to right as bold, italic, underline, make it bigger, make it smaller, change the color, create a link, adjust alignment, bulleted and numbered lists, and remove formatting. Bold works for dish names.
Keep dietary marks in the description line; our guide to allergens on restaurant menus covers the allergen notices US rules expect, which apply to a typed page as much as to paper.
Put prices in their own column
If you want prices lined up on the right, Weebly's columns come from placement. Weebly's help says placing elements side by side automatically creates columns across the page, and that a vertical blue line appears as you drag an element next to another.
- Drag a second Text element to the right of the dish list until the vertical blue line appears, then drop it.
- Type the prices, one per line, in the same order as the dishes.
- Drag the blue vertical line between the two columns to set their widths. Weebly's help says it snaps into place, and that holding Shift while you drag gives more precise control.
- Use the alignment icon in the text toolbar to align the price column to the right.
Two columns stay in step only while both have the same number of lines, so a description that wraps to a second line on a phone pushes every price below it out of place. Check the page on a phone, and if the lines drift, go back to one line per dish with the price at the end. For a grid instead, Weebly's Simple Table app, added from the Build tab, lets you set the number of rows and columns and a display style, though its help says rows and columns cannot be added or removed in between existing ones, so plan the structure first and keep it to two columns for a phone screen.
Add a photo to a dish
Weebly's help page on pictures says an image element is dragged from the Build tab, that clicking it opens the image selection dialog, and that you upload by dragging a file onto the window or clicking the green upload button. Clicking the placed photo opens its settings, where Advanced holds the Alt Text field, the words a screen reader reads in place of the picture, so type the dish name there. Weebly's help also says you can drag an image element into a text element, with one image per text element. Give every file a unique name before uploading, because Weebly's help says an image uploaded with the same file name as an earlier one overwrites the original. Our guide to menu photos on a phone covers light, angles and export sizes.
Make the daily edit
When the halibut runs out at 7:30, open the editor, click the Text element for that section, delete the line or add sold out after the name, click outside the element, and click Publish. Weebly's help says changes appear on the live site only after that click, so the publish is part of the edit.
How to link a PDF menu on Weebly
A PDF is the right route when the menu already exists as a designed file and changes rarely. Weebly's help pages on creating links and on linking to documents give the labels below, and a separate page covers the Document element, which shows the file on the page itself.
Attach the PDF to a button or a text link
- Drag a Button element onto the menu page and type its text, such as View the menu. Weebly's help says the ideal length is no more than five or six words. For a text link, highlight words in a Text element and click the chain link icon in the text toolbar.
- Select Link from the button's toolbox. The link dialog opens with its options, which Weebly's help lists as a website URL, a Standard Page or Item Page on your own site, a File, and an Email Address.
- Click File. Weebly's help says you can select a file from the menu or click Upload New to find the file on your computer, and that a search field higher in the dialog finds files you uploaded through the link setting by name.
- Decide whether the file opens in a new window. Weebly's help says you can choose that, and that if a visitor's browser cannot display the file type, it attempts to download the file instead. A PDF opens in current phone browsers, so tick it and the menu opens beside your site.
- Click outside the dialog. Weebly's help says the link is saved automatically, and that you must publish the site to make links active.
Weebly's help gives no size limit and no list of accepted types for linked files; it says you can upload and link to pretty much any kind of document. Keep the file small anyway, because a guest on a slow connection waits for the whole thing before the first page appears.
Show the PDF on the page with the Document element
Weebly's help describes the Document element as powered by its partner Scribd, letting you upload and display documents on your site for online viewing.
- Drag the Document element from the Build tab onto the page. Weebly's help says a sample document appears, asking you to click it to upload a file. Square's support site files this article under the Weebly App Center, so if the element is missing from your Build tab, look for it in the Apps tab.
- Click Upload File and choose the PDF, or drag it to the upload window. Weebly's help says the element supports PDF and DOC/DOCX file types.
- Wait for the upload and conversion, which Weebly's help says continues in the background if you leave the editor, then click the element and choose the height option that fits the document.
- Publish.
A document viewer is a window inside your page with its own scrolling, so on a phone the guest scrolls the viewer to read the menu and scrolls the page to get past it. Try the link and the viewer on your own phone and keep the one that reads more easily.
When the menu changes
Export a new PDF, open the button's link settings, click File and Upload New, choose the new file, click outside the dialog and publish. For the Document element, click it and upload the new file. There is no shortcut for a single price.
How to add a menu with a Weebly App Center app
The App Center is Weebly's directory of add-ons, and some of them add a menu layout to the editor. Weebly's help page on App Center apps gives the steps.
Install an app element
- Click the Apps tab in the editor, or go to weebly.com/app-center.
- Search for menu, or browse the collections.
- Click an app to see its details, reviews and developer information, then click Add.
- Follow the prompts to select the site the app should connect to, then click Connect.
- Weebly's help says you are then taken into the editor with the newly installed app highlighted in the Build tab. Drag it onto the menu page like any other element and fill in your dishes in the app's own editor.
One listing in the App Center is called Menu, by POWR. Its own page describes it as a way to engage your hungry visitors with a beautiful menu, says you can quickly build and manage multiple menus for your restaurant or products, highlight specials and featured selections, and add images, description and icons to any item, and lists a free tier and paid tiers. We have not tested it, and we describe it only as its listing does.
What Weebly says about third-party apps
Weebly's help says Weebly does not provide direct support for third-party apps, and that support comes from the developer through the app's page in the App Center. Installed apps are managed from the manage link in the Build tab, the My Apps section of the Settings tab, or the My Apps link on the Apps tab, where the help says you can remove or reconnect an app. Your dishes and prices live inside the app, so keep a copy of them somewhere you control.
How to embed a menu in an Embed Code element
An embedded menu comes from a service that hosts the menu and gives you the embed code that places it inside your page. The menu is edited in the service, and the code on your Weebly page stays the same. Weebly's help page on embed code gives the steps.
Paste the code
- Copy the embed code from the menu service.
- Click the Build tab and drag the Embed Code element onto the menu page, wherever the menu should appear.
- Click inside the element and select Edit Custom HTML.
- Paste the code in place and click outside the element.
- Click Publish.
What Weebly says about the element
Four things come from the help page itself. When you click outside the element, your content should show on the page, with the caveat that some types of code display nothing in the editor, so an empty element is not yet a failure. The site must be published for the embedded content to reach visitors. Pasting invalid or incomplete code can cause problems with the website, so check that the whole code was pasted, and if the page misbehaves, delete the Embed Code element, publish again and check with the code provider. And Weebly says it cannot provide in-depth troubleshooting for problems arising from third-party embed code.
The help page does not say which kinds of code the element accepts. Weebly's pricing page lists Add 3rd party embed code under every plan, including Free, so the element itself is available whatever you pay, and the test is the published page on a phone.
How to put the page in your navigation and check it on a phone
Where the page sits
Weebly adds a Standard Page to the navigation on its own, in the order of the Pages list, so the work is placing it. Drag Menu up the list until it sits beside Home, and keep it off the very top, because Weebly's help says the top page becomes the home page. If your navigation is long, Weebly's help describes a Nonclickable Menu item, added with the + button and named like a page, that holds subpages in a drop-down; a heading such as Food with Menu beneath it works, at the cost of one extra tap on a phone.
Give the page a description
Weebly's help page on descriptions and keywords says each page's Description lives under Pages, then Edit Page, then Advanced, that the Description is what search engines display for the page in their results, and that two to three sentences is the right length. Write what the page is: the restaurant's name, the kind of food, the services the menu covers and the neighborhood, then publish, because Weebly's help says the fields take effect only then. None of this promises a position in search results; it tells a search engine what the page is. Our guide to restaurant menu SEO covers what Google documents about reading a menu.
Check it as a guest
Publish, then open the site on a phone from the address a guest would use, in a private browser window so no editing session gets in the way, open the navigation, tap Menu, and read the first section without zooming. If dish names need a pinch to read, the Title and Text elements need a size step up, the two-column prices have drifted, or the PDF needs to become a page. Point your table QR code at the menu page itself, which our guide to QR code menus covers, and put the same address in your Google Business Profile menu link, which our guide to adding your menu to Google walks through.
How MenuFramer fits a Weebly site
MenuFramer replaces the contents of the menu page on a website you already have, including a Weebly site, with a photo-first menu that guests can search and filter by dietary need. You keep Weebly for everything else. The menu itself is edited in MenuFramer, so when a dish sells out you hide it there and the change shows on your Weebly page without opening the editor or publishing again, because the code you pasted stays the same and the menu it shows comes from MenuFramer.
MenuFramer's embed documentation gives three steps. Open Share in the MenuFramer studio and choose On your website. Pick how the menu should sit in your page: Just the menu drops the menu in as one piece, in a frame, and is the simplest to paste, while Menu + a page per dish writes the menu into your page as real text and gives every dish its own address on your domain, which is what makes the menu eligible to be found in search. Copy the code and paste it where the PDF link or menu photos used to be, which on Weebly means an Embed Code element on the menu page as described above, then publish. MenuFramer's pricing page lists Embed on your website on the Pro plan and above and the search-ready menu on Business.
Two honest notes. MenuFramer's embed page lists builder notes for Squarespace, WordPress.com and Wix, with no note for Weebly, and we have not tested the Menu + a page per dish code inside a Weebly page, so we make no claim about how Weebly handles it; the framed Just the menu option is the one to try first, because a frame (an iframe, a window in your page that shows a page from another address) keeps the menu's own code inside that window, and Weebly's own help says to publish before judging what an embed shows. And an embedded menu is still a page on your Weebly site, so the page, its place in the navigation and the publish are still your job. The embed documentation has the steps, the pricing page has the plan details, and the menus page shows how lunch, dinner and happy hour each get their own menu on the one page. Our guide to online menu options for restaurants compares the routes more broadly, and the same job on other builders is in our guides for Squarespace, Wix, WordPress and Webflow.
Frequently asked questions
Does Weebly have a built-in restaurant menu element?
Weebly's help pages on content elements name Title, Text, images, maps, contact forms and Sections, and the help we read describes no menu element. A menu on Weebly is therefore typed with Title and Text elements, attached as a PDF, added through an App Center app, or embedded from a menu service in the Embed Code element. The table above compares the four.
Can I use the Embed Code element on a free Weebly site?
Weebly's pricing page lists Add 3rd party embed code as a site feature under every plan, including Free. Weebly's help adds that some types of code display nothing in the editor and that the site must be published for the content to reach visitors. Publish, then open the page on a phone to confirm the menu loads.
How big can my PDF menu be?
Weebly's help gives no file size limit and no list of accepted types for files attached through the link dialog; it says you can upload and link to pretty much any kind of document. The Document element supports PDF and DOC/DOCX files, according to its help page. Export the menu at a modest size anyway, because a guest on a slow connection waits for the whole file.
Why is my embedded menu blank in the editor?
Weebly's help says there are some types of code that will not display anything in the editor, and that you publish the site to make the content available to visitors. Publish and check the live page on a phone before changing anything. If the published page misbehaves, Weebly's help says to delete the Embed Code element, publish again and check with the code provider.
How do I put prices in a column on the right?
Drop a second Text element to the right of the dish list, which Weebly's help says creates columns automatically, type the prices one per line, and drag the blue line between the columns to set the widths, holding Shift for precision. The Simple Table app gives a grid with the rows and columns set up front. Check either one on a phone, because a wrapped description or a wide table pushes prices out of place.
How do I mark a dish sold out?
With a typed menu, click the Text element, change the line and click Publish. With a PDF, export a new file, open the link settings, choose File and Upload New, and publish. With an embedded menu, change it in the menu service and the Weebly page shows the change without a publish, because the pasted code has not changed.
Sources
- Square Support Center, Weebly, Navigate the Editor, Intro to Content Elements and Working With Columns, read November 2026.
- Square Support Center, Weebly, Add and Edit Text on Your Weebly Site, read November 2026.
- Square Support Center, Weebly, Adding Pictures to a Site, read November 2026.
- Square Support Center, Weebly, Create Links and Link to Documents, PDF, Powerpoint Slides, and More, read November 2026.
- Square Support Center, Weebly, Display Documents on Your Site, read November 2026.
- Square Support Center, Weebly, Create Widgets, Embed Code and Add External Content, read November 2026.
- Square Support Center, Weebly, Create Pages and Navigation and Descriptions and Keywords, read November 2026.
- Square Support Center, Weebly, Publish Your Site, read November 2026.
- Square Support Center, Weebly, Add and manage Weebly App Center apps and Simple Table, read November 2026.
- Weebly, Pricing, read November 2026, for plan features only.
- Weebly App Center, Menu by POWR, read November 2026, for the app's own description only.
- MenuFramer, Embed on your site, Pricing and Menus, read November 2026.
