Lesson 1, Topic 1
In Progress

Layout

Layout: The third common element to customize with your theme is the Layout. This refers to the width of your pages.  

Each theme will have different content and wide settings. The content settings are how wide the main content will span across a page (text, images, etc.). The wide settings are how wide the page will be for larger elements (featured images, large quotes, etc.).  

Site width matters since users are viewing your site from a variety of different screen sizes. Think about the variety in desktop monitor and laptop screen sizes. With so many different screen sizes, the site will look slightly different to each user. This is even further complicated when you consider whether someone is visiting your site from full-screen mode, or if they have the browser at a smaller size to view several different programs at once. The zoom level will affect the way your site looks to different users as well. Some users may have their zoom set higher to be able to read small text, while others may zoom out to see more content at once.  

Because of this, a lot of sites will use a boxed design, which means the content is in the center of the page with extra space on either side. Boxed sites typically have more consistent design across devices, but they give you less space to work with. Other sites are full width meaning the content extends further out to the full width of the page. While this is often a more modern approach, it can present challenges with the layout of a page across different browser sizes. 

Usually the width settings installed by your theme don’t need to be changed. However, if you want to create a wider page, you can set the content settings at 960 px, 1024 px, 1140 px, or 1200 px. Wide settings for a more full-width page can then range from 1024-1600 px. If you don’t see the option to set the pixels, click the unit of measurement in the box to change to pixels (px). Regardless of the size you decide to use for the width of your pages, be sure to set it early on. Changing these settings once you’ve begun designing will require you to go back and revise your designs.  

You can also change the padding on the edges of a page. The padding is the amount of empty space around the content. This will act similarly to adjusting the content and wide settings, though you can also add empty space at the top and bottom of your page. Since the theme was designed with certain layout settings in mind, the padding won’t likely need to be changed. 

When you are happy with your layout settings, press Save at the top of the screen, then use the back arrow to return to the main style settings.