How to Edit Page Layouts Using Page Builder

The Page Editor in the Layouts section provides an easy way to add, remove, or edit content on your site! This tool was designed for users who feel comfortable editing portions of their site on their own.

Please note that there's not presently an "undo" button in the Layouts section. Be careful!

To edit a page's layout,

1. Log into your Control Panel at manage.revolutionparts.com.
2. Click on the gear in the upper-right corner of the site.
   
3. At the bottom of the left-side menu under "Selling Channels," click to expand the store you want, then click, "Design," then, "Layouts."
   
4. From here, you can see all of the pages and areas for which you can edit the layout. To edit a layout, click on the pencil icon to the far-right of that section.
   
   Note that you can reset any layout to its default state by clicking the  button.
   
   
5. Along the top of the page, there are 4 buttons:
   
   • The  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.
     
     You can also use this button so save your current layout (in a sense). By copying the entirety of the code in the popup, you can paste it elsewhere on your computer to "save" it as a backup. If you want to revert your Page Builder changes, you can copy your backed-up code and overwrite the code in the "Edit Layout" popup to "restore" that backup.
     
   • The  button will add an empty section to the bottom of the layout. Sections house rows, and rows house modules.
   • The  button will allow you to import an existing section you've previously exported.
   • The  button saves the current layout. It's important to note that if you make changes within a section and save that section, you must also save the layout for those changed to reflect on the site.
6. In each section, there are 5 buttons:
   
   • The arrows icon allows you to drag the section above or below other sections on the page.
   • The pencil and paper icon allows you to edit the section's HTML ID and classes, the background color or image, the text color, whether the section should appear on Desktop or Mobile, and a few other tweaks.
     
   • The trash icon deletes the section. There is a confirmation step if you accidentally click this, but if you confirm the deletion and save the layout, there is no way to retrieve this section again.
     
   • The download arrow icon allows 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 asking how you want the columns in the row to be arranged.
     
7. Once rows have been added to the section, there are 3 row buttons on the left of each row, along with two buttons underneath each individual column.
   
   • The arrows icon on the left allows you to drag the row above or below other rows in this section. Rows can also be moved to other sections if desired.
   • The pencil and paper icon allows you to edit the HTML ID and classes for the entire row.
     
   • The trash icon allows you to delete the row.
   • Under each 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.
     
   • 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. 
     
     Please note that due to the sheer volume of modules available, and because we are always adding more, we can't go into detail about specific modules here. We believe that they are user-friendly for advanced users who understand HTML and CSS concepts, and we encourage you to browse through the available modules at your convenience.
     
     
8. Once modules have been adde to your columns, you have the ability to edit the module by simply clicking anywhere on its grey block. 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.