This tutorial takes you through the step by step process of creating the Ascend Restaurant Demo. We will also walk you through setting up anchor links.
We have created this tutorial using Ascend Premium theme, however, you can create a single page site using any of our themes. The steps are the same as those below, but the widgets and settings will vary theme to theme.
*Note, you can import the Ascend Restaurant Demo directly to your site using the Kadence Importer.
Creating a Front Page
- From your Admin Panel, navigate to Pages and click Add New.
- Label your page “Home” (or whatever you would like).
- Open the page builder editor (for more info on page builder check out this tutorial).
- Add a single column row.
- Click Add Widget and add an Ascend: Call to Action widget to your row.
- Edit the call to action widget and add in a title and subtitle. This will be the title for your restaurant menu.
- Add a new single column row.
- Add an Ascend: Tabs & Accordions widget to your row.
- Edit the widget and set the display to “Tabs” and the tab style to “Tab Style 2.”
- In your first pane, create your lunch menu using visual editor widgets, then do the same in a new pane for your dinner menu.
- Save changes.
- Create a new single column row.
- Repeat the above steps to create the remaining rows.
- From your admin panel, navigate to Settings > Reading.
- Set the Front page displays to a static page and choose the home page you just created.
- Navigate to Theme Options > Home Page Layout and enable Page Content in the Homepage Layout Manager.
Setting up Your Anchor Menu
- Navigate to your home edit page.
- Hover over the right top toolbar of the first row and click “Edit row.”
- Open the Attributes tab and type “menu” into the Row ID (this will be your first anchor link).
- Repeat this for all the rows you want to be anchored from the menu.
- Navigate to Appearance > Menus and create a new menu.
- Add a Custom Links menu item to your menu. In the URL tab, type your row id with a “#”. Then in the Link Text tab, type your menu item label.
- Repeat this for all your anchor links.
- Navigate to Theme Options > Menu Settings and turn on “Enable animated scroll for menu anchor links”.
Setting up Your Slider
- Navigate to Theme Options > Home Page Header and choose a slider from the drop-down list.
*Note, if using the Kadence Slider Pro, you need to create your slider in the Kadence Slider settings. See here.