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
There are a variety of design elements available for you to add to your header or footer designs. You can read a description of each element/content block in our Header and Footer Design Elements support article.
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 and Widget Layout Customization in the Site Designer
With SNO's Site Designer, you can customize the layout of your homepage and any custom widget-based pages you've added to your site.