Finding the Pages feature within Marvelous
Go to Pages in the left-hand navigation bar of your Marvelous dashboard, then click + New Page in the top right-hand corner.
The Page builder dashboard will open. In the left-hand navigation bar click Start from scratch
A pop-up will appear for you to add your page title. The URL will automatically populate. You can always change your page title at a later time in the Page settings.
For detailed instructions, please read our article Navigating Marvelous Pages.
Note: Your URL will appear at the end of your site domain name e.g. if you're creating a thank you page, your URL is thank-you then the full link will be https://my.marvelouspages.com/yourstudioname/thank-you or https://www.mycustomdomain.com/yourstudioname/thank-you if you're using a custom domain.
Learn more about Custom Domains.
Navigating the Page Builder
Learn everything you need to know about using the Start from Scratch page builder in this 7-minute video, or read the guide below.
Figure 1 below shows an overview of the page builder navigation and settings. When reading the guide, you may want to refer back to Figure 1.
Figure 1
There are 3 icons to the left-hand side of the page builder:
Sections
HTML
Typography
Sections
When you click on the [+] icon, it will display a number of pre-designed sections that you can add to your page. To add a section or navigation bar to your page, you simply click on the section design you'd like to use.
You can also click on All Categories to bring up additional layout sections.
HTML
This is the HTML for your entire page. You would only want to use this section if you are familiar with HTML.
Typography
These are Typography Styles that you can apply to your entire page or individual sections.
Section Settings
The cog icon is the section settings. Here you can:
Move the section up and down your page.
Change the height and spacing of the section.
Choose if this section has any animation, or if you want to include a scroll button.
The circle icon allows you to change the background color of the section.
The up and down arrows also allow you to move a section up and down your page.
The icon with the overlapping squares mean you can duplicate a section.
And of course, the trash can is how you delete a section.
Box Settings
You'll also notice some sections display an image icon alongside a tool icon. The tool icon displays the settings for the box.
With the Box Settings you can:
Change the box size.
Choose a gradient background color.
And change the background image to greyscale.
In the Image tab you can choose an animation, overlay color and transparency.
When you click the image icon, it will display a pop-up box where you can choose to upload an image from your computer, use Unsplash. or design with Canva.
Editing your page
Figure 2 below shows an overview settings that appear when editing content on your page. When reading the guide below, you may want to refer back to Figure 2.
Links aren't automatically added. You will need to a link to your product, signup page etc as needed.
Figure 2
When you click into any of the text boxes multiple toolbars display. At the top of the page you have all your Formatting tools (e.g. bold, italic, underline, font type, color, list type, and font style).
To right of the page, formatting options, along with other settings relating to the particular text box you are working on will also display.
For the next part, please refer to Figure 2:
Toolbar 1:
[+] icon means you can add elements into the columns.
[x] icon means you can delete columns
Toolbar 2:
Allows you to move text boxes.
[x] icon = delete text boxes.
The grid icon displays multiple setting options for both a row and a column.
Toolbar 3 (the light grey toolbar).
The [+] icon in the grey toolbar means you can add rows of content underneath, such as a spacer and more text.
The 3 dots opens up some basic setting, plus the same settings showed in the grid icon in Toolbar 2.
[x] icon = deleting the element in that row.
Finally, top right hand corner, you’ve got your undo and redo buttons, Save, and Preview. Clicking the Preview button will open your page in another tab.
Saving a Draft and Publishing your page
When you’re finished with your page. Make sure you click Save, before you click Back.
If the page has not been published a pop-up will appear asking if you want to head back to your pages dashboard without publishing.
If you click Back your page will display as draft in your Pages dashboard. If you’re ready to publish, click Publish.
If you do happen to click Back before you’ve saved, a pop-up window will display letting you know that if you exit the builder without saving, any changes you’ve made will be lost.
Pages dashboard and Settings
By clicking the three dots next to your saved page you can Publish, Duplicate or Delete the page.
To edit your page, click the pencil icon.
The cog icon takes you to your Pages Settings page. This is where you can change the page title the page URL and also include any code from a third-party to be injected into the head tag of this page.
In the SEO tab, you can make the page visible to search engines and include your meta description, plus the page keywords, and of course you can launch the page editor from the page settings.
To learn more about the Page Settings, read our article Navigating Pages.
Contact Us 🧡
For any questions reach out to us in our live chat or send us an email at team@heymarvelous.com 🙂