Welcome to our Help Center

How to Edit Page Layouts Using Page Builder

 

Page Builder provides an easy way to add content or change your page layouts. This tool is intended for advanced users who feel comfortable editing portions of their site. Note that deleting or adding content that breaks the site is irreversible, so caution is advised.

If page layouts are enabled on your site, you can edit Text Pages and Dynamic SEO Pages in Page Builder, but the most common use of Page Builder is to edit your home page, header, or footer.

  1. In the left-side menu, search for "layout" to bring up the "HomePage Layout", "Header Layout", and "Footer Layout" section, and choose the one you would like to edit. You can also reach these sections by clicking on "Cart Settings", then "Appearance & Content", then selecting the layout you would like to edit.
    1-1.png
  2. All elements of Page Builder work similarly, so for this article we will focus on parts of the "HomePage Layout" section.
    1-2.png
  3. Along the top of the page, there are 4 options.
    1-3.png
    • A toggle switch on whether this page is enabled. For new Text or Dynamic SEO Pages, this will be off by default.
    • A gear icon. This is intended for advanced users, and allows you to edit the layout in code form. If you copy the entire text block, you can paste it somewhere on your end for backup purposes.
      1-3-1.png
    • The "Add Section" button will add an empty section to the bottom of the layout.
    • The "Save Layout" button saves the page layout. It's important to note that if you make changes within a section and save that section, you still must save the layout for those changed to reflect on the site.
  4. In each section, there are 5 options.
    1-4.png
    • The arrow icon allows you to click-and-drag the section above or below other sections on the page.
    • The pencil and paper icon allows you to edit the HTML ID and classes for this section, the background or background image, the text color, and a few other minor tweaks.
      1-4-1.png
    • The trash icon will delete this section. There is a confirmation dialogue if you accidentally click this, but if you confirm the deletion and save the layout, there is no way to retrieve this section again and it will need to be rebuilt.
      1-4-2.png
    • The download arrow icon will allow you to export the code of this page section. This can be useful if you plan to duplicate the section in its entirety on another page.
    • The "Add Row" button is what allows you to add actual content to the section. When you click this button, a dialogue box will appear that asks you how you would like this row laid out.
      1-4-3.png
  5. Once rows have been added to the section, there are 3 row buttons, along with two options for each individual column.
    1-5.png
    • The arrow icon allows you to drag this row above or below other rows in this section.
    • The pencil and paper icon allows you to edit the HTML ID and classes for this row.
      1-5-1.png
    • The trash icon allows you to remove this row.
    • Under the column, the pencil and paper icon allows you to edit the HTML ID and classes for that column, along with the module arrangement and the text alignment.
      1-5-2.png
    • The "+" icon (add) allows you to add actual content to the column in the form of modules. Clicking the "+" brings up a list of pre-built modules that you can plug into your page. You also have the ability to add a custom HTML field under the "Text and Custom" section, which you can use to display text, code, or whatever else you'd like. 
      1-5-3.png
      Please note that due to the sheer volume of modules available, and because we are always adding more, we will not touch on specific modules in this article. We believe that they are user-friendly for an advanced user that understands HTML and CSS concepts, and we encourage you to browse through the available modules at your convenience.
  6. Once you have added modules to the column, you have the ability to edit the module by simply clicking on it. You also have the ability to delete the module by clicking on the trash icon, or move the module by clicking the arrows and dragging it to another column.
    1-6.png

 


EVERYTHING BELOW THIS BLOCK IS MANAGE-ONLY CONTENT.

This text will not appear on the finished article.

 

 

Note that the navigation is slightly different in the video than it is in Manage, but the core concepts remain the same.

Page Builder provides an easy way to add content or change your page layouts. This tool is intended for advanced users who feel comfortable editing portions of their site.

  1. Log into your Manage dashboard at manage.revolutionparts.com.
  2. Click on the gear in the upper-right corner of the site.
    2-1.png
  3. Click on the "Store Settings" section in the left-side menu.
    2-2.png
  4. Select your store, then click on "Design", then the "Layouts" section.
    2-3.png
  5. From here, you can see all of the sections you can edit the layouts for. Edit the layout for a section by clicking on the pencil icon to the right of that section.
    2-4.png
    Note that you can reset any layout to it's default state by clicking the 2-4-1.png button.
  6. Along the top of the page, there are 4 options.
    2-5.png
    • The 2-5-1.png button is intended for advanced users, and allows you to edit the layout in code form. It also allows you to add a script to this specific page.
      1-3-1.png
    • The 2-5-2.png button will add an empty section to the bottom of the layout.
    • The 2-5-3.png button will import an existing section that you've previously exported.
    • The 2-5-4.png button saves the current layout. It's important to note that if you make changes within a section and save that section, you still must save the layout for those changed to reflect on the site.
  7. In each section, there are 5 options.
    1-4.png
    • The arrow icon allows you to drag this section above or below other sections on the page.
    • The pencil and paper icon allows you to edit the HTML ID and classes for this section, the background or background image, the text color, and a few other minor tweaks.
      1-4-1.png
    • The trash icon will delete this section. There is a confirmation dialogue if you accidentally click this, but if you confirm the deletion and save the layout, there is no way to retrieve this section again and it will need to be rebuilt.
      1-4-2.png
    • The download arrow icon will allow you to export the code of this page section. This can be useful if you plan to duplicate the section in its entirety on another page.
    • The "Add Row" button is what allows you to add actual content to the section. When you click this button, a dialogue box will appear that asks you how you would like this row laid out.
      1-4-3.png
  8. Once rows have been added to the section, there are 3 row buttons, along with two options for each individual column.
    1-5.png
    • The arrow icon allows you to drag this row above or below other rows in this section.
    • The pencil and paper icon allows you to edit the HTML ID and classes for this row.
      1-5-1.png
    • The trash icon allows you to remove this row.
    • Under the column, the pencil and paper icon allows you to edit the HTML ID and classes for that column, along with the module arrangement and the text alignment.
      1-5-2.png
    • The "+" icon (add) allows you to add actual content to the column in the form of modules. Clicking the "+" brings up a list of pre-built modules that you can plug into your page. You also have the ability to add a custom HTML field under the "Text and Custom" section, which you can use to display text, code, or whatever else you'd like. 
      1-5-3.png
      Please note that due to the sheer volume of modules available, and because we are always adding more, we will not touch on specific modules here. We believe that they are user-friendly for an advanced user that understands HTML and CSS concepts, and we encourage you to browse through the available modules at your convenience.
  9. Once you have added modules to the column, you have the ability to edit the module by simply clicking on it. You also have the ability to delete the module by clicking on the trash icon, or move the module by clicking the arrows and dragging it to another column.
    1-6.png

If you have any questions, feel free to reach out to us by emailing
support@revolutionparts.com or calling 480-779-7278!

RevolutionParts Logo
Powered by Zendesk