Visual Builder

At the top of the screen, you are provided with the following information/options:

• • Layout name – To the left, in the little gray box is the name of the layout that is being applied to the page you are viewing. You can click the gear icon to make some general appearance settings for the layout.
    Our layout tutorials have more details on what layouts are, and how they work.
  • Pages dropdown – Navigate to any of your other WordPress pages directly. This is helpful for viewing different pages that use different layouts.
    
  • View Mode – View how the page would appear on different device types (Desktop, Laptop, Tablet and Mobile). As you design and customize, you can confirm that you are getting the desired result on each screen size.
    
  • X-Ray Mode – Highlight all blocks, rows, columns and/or modules in your layout. X-Ray is useful if you want to see exactly how elements are laid out, or if you want to see elements that may be hidden at certain screen sizes.
    
  • Exit – Leave the Visual Builder to view the post/page directly, or go back to the WordPress dashboard.
    
  • Undo/Redo – As you are working you can use these options to undo/redo any changes you’ve made since your last save. This is handy if you want to try something out to see how it looks, but decide to revert back to before your changes.
    
  • Save – When the button is highlighted blue, you have unsaved changes – click to save your work and clear the “undo/redo” history.
    

    I have some changes that need to be saved…

• If you ever try to navigate away from the page/post you are viewing before your changes have been saved, a pop-up warning will appear:
  

  Oops, forgot to save my changes!

On the left-hand side of ProPhoto are five different main option areas that you will use as you customize your site.

• Layouts – Each page layout contains all of the customizations and modules for a specific page or a group of pages. A lot more information is available in our layouts guide. When you navigate to this area of ProPhoto, you will be able to create and assign all the different layouts of your design.
  
• Blocks – The different sections of a layout. Blocks can contain rows/columns of graphics, menus, text, WordPress page content, background images, grids, and lots more.
  

  This is an example of a block.

  The Block section in the sidebar allows you to create new blocks for your layouts, as well as reuse any existing blocks. To use a block, you will simply click/drag into the layout.
• Elements – The different bits of content that you can add inside a block, including menus, grids, galleries and tiles, as well text, graphics and other items called modules. Our modules guide explains what all of the options are in greater detail. To add an element to your site, all you have to do is drag-and-drop into unlocked block in your layout.
  
• Font Styles – Create and edit all font styles used throughout your site design.
  
• Settings – Options presented here are site-wide settings for your site, which aren’t specific to any layout. Link social media accounts like Facebook or Instagram to your site, edit SEO option settings, add custom code to your site, or a variety of other things. See our Settings guide for details on all of the options presented here.
  

As stated in our layouts guide, layouts are what provide style and arrangement to specific pages and/or overall page types. Layouts are what you will be creating and editing in ProPhoto.

The structure of a layout is made up of 3 different components: blocks, rows, and columns.

Blocks are the first component and contain rows. Rows are the next level item and contain columns. Columns are the smallest structural item within a layout and contain the actual content of the layout made up of modules.

You can use these three structural elements to create just about any type of layout that you want.