Control Site HTML Structure

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.

Volatyl Developers

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.

.full

The outer-most div is has two classes: class-area and full. The class-area class is totally generic and you can name it whatever you want like quote-area or feature.

The 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 .class-area CSS.

.main

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.

.inner

The final piece to the puzzle is the third nested div with classes of class and inner. The 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 inner class.

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 container.

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