New Release: June 14th, 2017
Why the update?
Give your website a modern look & feel without the need for complex coding, editing, and graphic design knowledge. With some basic editing options, you can easily give a completely custom look to your website with just a few clicks.
What the update does?
Allows you to make individual rows (content or full row) on any page on your website stretch to the edge of the screen regardless of screen size.
- Gives you the following editing options:
- Insert a background image
- Insert a background color
- Have stretch to edge functionality for any row
- Stretch content to the edges of a screen
- Editor now spans the width of the screen and is the same as the Preview page. No need to switch back & forth between the Editor page and Preview page.
- You’ll now have the option to upload and insert images that are beyond 1200 pixels wide.
How to Update Your Website
- Click Website on the top navigation > Click Change under Theme
- To take advantage of this new feature you must use a layout that does not have a sidebar (Layouts 1, 2, 3, 8, 9, 10 can use this new feature).
- To allow content and rows within the website to stretch to edge check “Website".
- To allow items in the header (logo, navigation bar, social icons) to stretch edge to edge click "Website" and then check “Header”.
- To allow widgets at the bottom of the website (store info, social icons, email signup form) to stretch to the edge check "Website" then check “Footer”.
- For Pre-Created, out-of-the-Box pages (About, Contact, Events, Mailing List, Store, Terms): Click on Website on top navigation > click Website Pages > click into any page and toggle on “stretch content to edge”.
- For home page or any custom page: Edit the page as you normally would.
- Click on any widget. Then, at the top of any widget on the left click “Edit row settings”
- Click Stretch to Edge to stretch row to edge first
- Then, click Stretch Content to Edge if you want the content in that row(background image, text, etc.) to stretch to edge.
- You can now add a background image behind any widget. This allows you to create buttons on top of backgrounds, text on top of backgrounds, etc. This can be used with or without stretch to edge.
- Click on any widget that is in the row you would like to add a background image to and click Select by Background Image
- You can adjust the opacity of the background image to give it the look you want. We recommend adjusting it 20% to 50%
- You can now add a background color behind any widget. This can be used with or without stretch to edge.
- Click on any widget that is in the row that you would like to add a background color to and click the Background Color icon.
Best Practices
- If you have currently have a top navigation bar that has many options across multiple rows change the Header to stretch to edge to try to keep the options on one row.
- Display content near the top of the page as full screen. Adjust rows near the bottom to be full screen, but not the content full screen.
- Alternate background color between stretch to edge rows to make content stand out. (Example: make one row a blue background and the next row white).
- Use images that are at least 1200 pixels wide, but max supported is 5120 pixels.
0 Comments