Over the past few years, it has become extremely popular to have full-width designs with page-width content on websites… and for good reason.
Volatyl makes it easy for you to have that type of HTML structure if you’d like. Likewise, you can have a strictly page-width site as well. The choice is yours.
To toggle between full-width and page-width, go to Dashboard => Appearance => Volatyl Options => Structure Settings => Wide (100%) HTML Structure.
If you plan to use the “Custom Layout” option on Pages, you can tap into the Volatyl HTML with an understanding of the following HTML structure.
Full-width HTML Structure
The full-width structure is activated by default. What makes your site full-width is the way the HTML is structured. Take a look at the HTML itself:
<div class="class-area full"> <div class="main"> <div class="class inner"> <!--Your content goes here.--> </div> </div> </div>
Let’s take a look at this HTML.
div is has two classes:
class-area class is totally generic and you can name it whatever you want like
full class is what sets that area as full-width. So if you wanted your area to have a dark blue background that spans the full width of your site, apply your CSS to your
The next nested
div has a class of
main. This class is used to keep all of your site content within a page width.
Just because you have a full width design does not mean you should have full width content!
Using CSS to adjust the width of the
.main class is how you determine the width of your site content.
The final piece to the puzzle is the third nested
div with classes of
inner class is the important one. Technically, you don’t need it. However, it’s an easy way to control things like padding if all of your
inner elements will share the same formatting.
For styles unique to one particular section of your site, use the additional
class class to add styles so other sections aren’t affected if they use the
Page-width HTML Structure
Your other option is a lot easier to manage if you are not fluent in HTML and CSS. However, it’s very limiting in regards to site design.
Basically, everything on a page-width site is wrapped in one container like so:
<div id="container"> <header class="site-header"> <!-- Header junk --> </header> <div class="main-content"> <!-- Content jazz --> </div> <footer class="site-footer"> <!-- Footer fluff --> </footer> </div>
As you can see, everything on the site is wrapped in one
div with an ID of
Typically, that container is set to your desired content width and everything inside of it is free to span the container 100%. Of course, you could set the container
div to be 100% width and then each direct descendant element have a page-width… but that’s the point of the full-width option. 😉
Return to docs