Get to Know the Page Editor

Learn how to customize the design and layout of your pages.

Updated over a week ago

Watch the below video for a short but comprehensive overview of how the page editor works.


Layout navigation menu

  1. Layout navigation menu - Use this menu to easily select sections, rows, or columns on your page.

  2. Once selected you can then use these menus to move content around via the arrows.

Page Settings

To access the Page settings, click on an empty space on the page outside of any section. Here you can modify a number of fields.

  • Page Name - This will determine what the page is called. This name will be displayed in the content menu and in the Product Content section.

  • Slug - This is what will be the part of the URL that will bring your end users to this page.

  • Estimated Time - This can be used to indicate to your end users how long you think this page will take to complete. If this page is in a product, then the time you place in this field will also contribute to the total time estimate for that product.

Add more content to a page

Edit Content design

Click on any content to access the setting and design options.

Basic tab:

  • Change media

    • Based on what type of media you're editing and supported on images, videos, files, or audio.

  • Change thumbnail

    • Only supported on videos or files by default.

  • Info

    • Only supported on audio or files by default.
      โ€‹

Design tab:

Width

  • Fit - Sets media to the full width of the column.

  • Custom - Allows you to adjust media size and set alignment.

Spacing

  • Adjust Padding and Margins. (px)

Border

  • Set width and color.

Mobile options

  • Enable if you want to hide this specific content on mobile devices.
    โ€‹

CSS tab:

CSS Id

CSS Classes

  • Set a custom CSS ID or Class to the element to apply your own custom styles in your themes CSS.

Advanced CSS

  • Manually edit ALL CSS styles added to the element.

Did this answer your question?