How to Structure a Web Page

Disclosure: Some of the links on this page are ‘affiliate links.’
This means if you click on the link and purchase the item, I will receive an affiliate commission.

Ready to try out Divi?

For any type of creative activity, staring at a blank page can be so overwhelming that we just never start. But if you’ve been trying for ages to build your website, the last thing you need is more time spent staring at a blank page. But sometimes, you just genuinely don’t know where to start, and you could get analysis paralysis. That’s when we need structure to help us get started building our websites.

I structure all of my website layouts in horizontal sections.

If you look at almost any website, you’ll see that there are bands of content as you scroll down the page. There might be an about section, then a testimonials part, then a section highlighted why you should work with that company, and maybe a pricing part as well. Maybe there’s a contact us section, or a wider section with a bold call to action to sign up for an email list. There are lots of different pieces of content you might have, depending on what sector your business is in. But, no matter what content you have, you can almost always organize it into sections.

Another benefit to organizing your content into sections is that you can easily rearrange the sections to flow better on the page. If you decide you’d like to add or remove sections later on, you can do that without having to rebuild the whole page. Maybe you don’t have any testimonials starting out, but a year or two in, you have plenty. If you built your page in sections, you can add in one more with all your great feedback and not have to completely rebuild your whole landing page.

If you’re using the Divi theme, you have all this structure built right in. The theme is organized into sections, rows, and modules. So it’s very easy to add a new section for each new piece of content. Then, add whatever rows and modules you need to create a layout for that content and you’re all set. Just rinse and repeat and keep adding more and more sections to match the amount of content you have.

Let’s take a closer look at this structure. Even if you’re not using the Divi theme, you can still use a similar structure to build your own website.

Sections:

I sometimes think of sections like ‘bands’ of content, or like paragraphs in writing. You can also think of sections of a layout like different slides of a presentation. Each band has a different kind of content. There might be a contact section, a call to action, an image adn some text, some highlighted text, etc. Whatever type of content you need to help your potential customers understand what you do and how you do it, you can break into sections. Breaking content up into sections makes it easier for your website visitors to understand and to skim through it. It makes it easier to find the information they need and answer whatever questions they might have about working with you. When you’re thinking about how to structure a web page, thinking in sections can really help!

An example of three different sections with three different sets of content- a header call to action, a text highlight, and an about me section:

Rows:

Use rows to organize the content within the sections. The rows can be divided into columns, and there are a variety of ways to split them up. You can use a simple half and half divided row, or you can break them into thirds, quarters, fourths, fifths, and even sixths. With just those divisions, the options are truly endless. Check out this article for some examples of the most common layouts that I use when building websites.

Each row is made of columns, and you can style and edit the columns of each row separately. I like to give only one column a background color and maybe a border. This is a great way to highlight certain content and make it stand out for readers who are just skimming your page.

If you want a more organized look, stick to using the same fractions for each row (ie, always using halves or thirds). To create a website that’s more ‘masonry’ style or has an overlapping layout, switch up the row dividers in each row. In considering how to structure a web page, just make sure to match your content to the layout and you’ll be fine!

Modules:

These are the individual pieces that make up the website. Images and text are the two main kinds of modules that I use when building a website. I also use a lot of buttons and blurbs (an image and text combined). And of course, we all need a contact form and maybe an email opt in from time to time. Plus, if you’re integrating outside services, like Calendly, MailChimp, or YouTube, there’s always the shortcode module. For FAQs, I almost always use the accordion module.

When I’m building a website, I try to pick the module that will best fit the content. If I have a video and some text, then I use those modules and fit them into a row in a way that makes sense. If I have testimonials, I’ll usually put them in a testimonial module or in a slider, depending on if I want to show them all at once or have them rotate through.

One of the great things about Divi is that they also have WooCommerce modules. So if you’re building an online store, you still have all the ease of the visual builder, just with the WooCommerce content. I built this online boutique for a jewelry artist using the Divi modules for WooCommerce. There are currently 25 different eCommerce modules to pick from to help you build your store, and the theme developers are adding new ideas all the time. WooCommerce can be a bit tricky to customize if you don’t know HTML and CSS code. But, with the Divi modules, it’s much easier to edit everything visually.

Need Hosting?
I use & recommend
SiteGround

Related Posts

wordpress.org vs wordpress.com

wordpress.org vs wordpress.com

Which Platform is Right for You? When it comes to building a website or blog, WordPress is a name that often comes to mind. However, there can be some confusion surrounding the difference between WordPress.org and WordPress.com. Both platforms offer powerful tools for...

read more