Once you have converted your website to FLEX Pro, the Site Designer tab within the SNO Design Options page will be your hub for editing the appearance of the three main portions of your homepage: the header, widget areas, and the footer.
This tab consolidates others that existed elsewhere before, streamlining your overall design process. Learn more about what tools are stored within the Site Designer tab below.
Designing Your Header and Footer in the Site Designer
If your website has been converted to FLEX Pro, the number of design elements and options available to you when customizing your header and footer areas will significantly increase.
To start taking advantage of these new tools, go to your SNO Design Options page under the Appearance tab on the left navigation bar in the WordPress dashboard. Click on the Site Designer section of the SNO Design Options page and direct your attention to the Header Design or Footer Design portion of the page.
Once you’re here, you will see the current structure of your header or footer, broken down into content blocks. At this point, you can either make adjustments to those pre-existing blocks, or delete them and start from scratch.
Here are some tips and pointers to get started:
- Your header and footer are each made up of two different types of spaces: Horizontal areas (rows) and vertical areas (columns). Rows can be added by clicking “Add Row.” Columns can be created by clicking on the gear icon to the right of a row, and then clicking “Add column.”
- To increase the height of a row or the width of a column, simply place your cursor on the side of that space and drag to resize the area in real time.
- If you see a “Legacy” label attached to a content block, that means there is a newer element available that encapsulates the functionality of that older element. You’ll want to swap those out for their updated replacements.
- Note: When you open a content block with the Legacy label you'll see a blue message box that will inform you about what new element to use to replace the Legacy one.
- If you would like consistent design styles applied to multiple content blocks within the same row, set the background color of each element to “Transparent,” click the gear icon on the right of the row, and click “Edit Row Settings.”
- Use the purple toggle bar above the header or footer designer to create different versions of your header or footer that are optimized for tablet or mobile devices.
- Note: This is also where you can select and design any custom headers or footers that you created in the Story Templates section of design option. Each custom header and footer will have a desktop, tablet, and mobile view you can design.
Homepage Widget Area Customization in the Site Designer
Once you convert your website to FLEX Pro, you are given the opportunity to create your own customized widget area configuration for your site’s homepage.
To start taking advantage of this new tool, go to the Design Options page on your website, and then find the “Site Designer” tab on the left. If you’re visiting this tab for the first time, you’ll see a large green button prompting you to import your existing site settings in the FLEX Pro drag-and-drop editor. When you click that button, the site will clone an exact replica of your prior widget areas.
Once this layout has been imported, you are free to start altering it by adding, deleting or resizing widget areas. The video above will walk you through each of these.