Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Layout Terms Demystified (Quick Reference)

Understanding WordPress layout terms can be tricky for beginners. While working on your site, you might come across terms used by designers and developers that seem confusing at first.

We’ve seen many WordPress users struggle with these technical words, but once you grasp their meaning, it becomes much easier to navigate your WordPress site. Knowing the right terms will also help you communicate more effectively with developers and designers.

In this guide, we will break down the most commonly used WordPress layout terms. With this quick reference, you’ll feel more confident managing your website’s layout like a pro.

Learning WordPress layout and design terms

Why Learn WordPress Layout Terms?

WordPress themes control the appearance and layout of your website. Depending on your theme, you can customize it in multiple ways.

You can customize themes that support the full site editor by visiting the Appearance » Editor page.

WordPress site editor

If you use a classic theme (a theme that doesn’t currently support the full site editor), then you can customize it by visiting the Appearance » Customize page.

This will launch the theme customizer, which looks like this:

Theme customizer in classic themes

All top WordPress themes have options to modify your website design using the theme customizer or the full site editor, but your options are limited depending on the theme.

You can use WordPress page builder plugins like SeedProd for even more flexibility.

SeedProd a popular WordPress page builder plugin

SeedProd allows you to easily create custom layouts using simple drag-and-drop tools without writing any code.

SeedProd also has dozens of templates you can use as starting points. It supports WooCommerce, which helps you create layouts for your online store.

However, as you create a website layout, you might encounter unfamiliar web design terms.

Learning these website layout terms will help you understand the building blocks of WordPress website design, allowing you to create more easily any design you can imagine.

Let’s demystify these common WordPress layout terms to learn what they mean and how to use them. Here is a quick list of the concepts and terms we will explain in this article:

Understanding a Typical WordPress Layout

Most websites use a very familiar layout. It looks something like this:

A single column website layout example

The top area of a website is called the header, followed by a content area, and then a footer at the bottom of the page.

Depending on which page a user views, the layout might differ.

For instance, a WordPress blog page may include a sidebar next to the content area.

WordPress two column layout example

This basic layout is filled with other elements, which we will discuss later in this article.

Let’s first talk about each of these main sections in more detail.

Header in WordPress Layout

The header in a WordPress layout is the top section of any page. It usually contains your website logo, title, navigation menus, a search form, and other important elements you want users to see first.

Here is how the header section looks on WPBeginner.

Example of Header section in a website layout

Custom Header in WordPress Themes

Many popular WordPress themes include additional features to customize the header area of your WordPress layout, which is sometimes called a custom header.

If you use a block theme with site editor support, then you can change the header by clicking on the header area in the site editor.

Edit header in site editor

From here, you can customize the header to your liking. You can change colors and the navigation menu and add blocks like search, site logo, buttons, and more.

You can find the custom header settings under the ‘Header Options’ tab for classic themes.

Edit header in theme customizer

Depending on your WordPress theme, you may be able to add a full-width image to the header with a tagline or a call-to-action button.

Some WordPress themes may allow you to change the logo’s position, navigation menus, and header images.

Custom Background in WordPress

Some WordPress themes also allow you to easily change the background color or use a background image for your website.

If you use a theme with site editor support, then you can change the background color by going to ‘Styles’ in the full site editor.

Edit styles under site editor

Simply choose the ‘Colors’ option from the Styles panel.

After that, you can click on ‘Background’ to pick a background color for your website.

Change theme background color in site editor

For classic themes, the settings will depend on your theme features.

Many classic themes come with custom background support. You can find these settings in the ‘Colors’ or ‘Background Image’ options in the theme customizer.

Background color and image in theme customizer

Often, these options are buried inside other tabs, and you will have to look around to find them.

For more details, you can see our guides to adding a background image in WordPress or changing the background color in WordPress.

Content Area in WordPress

The content area is located right after the header in a site layout. It is where the main content of the page is displayed.

For a custom homepage layout, the content section may include a call to action followed by services or products, testimonials, and other important information.

Content area example

Online stores typically use this area to promote ongoing sales, featured products, best-selling items, and more.

On the other hand, a content-rich site like a blog or magazine site may use a content-heavy layout.

It will show the latest articles with excerpts and images, display a newsletter sign-up form to build an email list, or use content discovery areas to help users find more ways to spend time on the site.

Here is how WPBeginner’s blog page layout looks.

Homepage example from a content focused site

It showcases our most popular content with a call to action for users to join our email list. (See: other methods we use to grow our email list)

By default, WordPress uses a blog layout showing your most recent blog posts as the front page of your website.

However, you can change that setting and use any page as the front page of your website.

Go to the Settings » Reading page and select ‘A static page’ under the ‘Your homepage displays’ option.

Set static homepage

After that, you can choose a page to use as your homepage and another for your blog page.

For more details, see our guide on creating a separate page for your blog posts in WordPress.

Don’t forget to click the ‘Save Changes’ button to store your settings.

Now, you can edit the page you picked as your homepage and create a custom homepage layout.

Sidebars in WordPress Layouts

As the name suggests, sidebars typically appear on the content area’s right or left side.

Example of sidebar in a WordPress website layout

In WordPress, sidebars are also widget-ready areas. This means that you can add widgets to this area and display elements like archives, newsletter sign-up forms, categories, popular content, and more.

To edit your sidebars, go to the Appearance » Widgets page. From here, you can add blocks to your sidebars and edit them to your liking.

Edit sidebar widgets

However, not all WordPress themes come with widget-ready areas or sidebars.

If you cannot see a Widgets menu under Appearance, then your theme doesn’t support sidebars or have any widget-ready areas.

Footer Area in WordPress Layouts

The footer area appears below the content area at the bottom of a page layout.

If you use a WordPress theme with site editor support, then you can edit the footer area by clicking on it.

You can also edit the footer area by clicking on ‘Patterns’ in the site editor navigation. The footer area will appear under the ‘Template Parts’ menu item.

Editing footer in site editor

While editing the footer area in the site editor, you can add any blocks to display different elements.

For instance, you can add a list of your most important pages, show a navigation menu, add a contact form, and more.

Editing footer in site editor

If you are using a classic theme, there is a good chance that it comes with a footer widget area.

Simply go to the Appearance » Widgets page and look for a footer widget area.

Footer widget areas

Like the site editor, you can use blocks to add different elements to footer widgets in your theme.

Wondering what to put in the footer of your site? See our checklist of things to add to the footer of your WordPress site.

Other Components of a WordPress Layout

Next, we will look at some of the components of a WordPress layout that you can add to your header, content, sidebar, or footer sections. These are the building blocks that help you make a functioning layout.

Navigation menus or menus are horizontal or vertical lists of links. Most websites have at least one primary navigation menu in the header area.

Multiple navigation menus

However, some websites use multiple navigation menus in the header area.

WordPress also allows you to display navigation menus as a widget. These menus appear as a vertical list of links, and you can place them in sidebars or the footer widget areas.

Navigation links in footer

For more details, see our guide on how to add navigation menus in WordPress.

Using Widgets in a WordPress Layout

If your WordPress theme supports widgets, then you can use them to rearrange your website layout. Plus, with block widgets, your theme can now also use blocks in the widget areas.

You can add widgets to your WordPress website’s widget-ready areas or sidebars. Some WordPress themes come with multiple widget-ready areas to add widgets or blocks.

WordPress comes with several built-in widgets and blocks that you can use. Many popular WordPress plugins also provide their own widgets and blocks.

For example, you can use widgets/blocks to add popular post lists, a contact form, banner ads, social media feeds, and more.

You can see all these widgets by visiting the Appearance » Widgets page in the WordPress admin area.

Editing widget areas

Note: If your theme does not have widget areas, you may not see the ‘Widgets’ page in the WordPress admin area.

For more details, see our guide on how to add and use widgets in WordPress.

Using Blocks in WordPress Layouts

WordPress uses the block editor to write content, manage widget areas, or edit your website. It uses blocks for all common web elements, which is why it’s called the block editor.

This editor is designed to help you create beautiful layouts for your WordPress posts and pages using blocks.

Using the WordPress block editor

There are different types of blocks for the most common elements of any type of content. For instance, you can add paragraphs, headings, images, galleries, video embeds, columns, tables, and more.

This allows you to create different layouts for each post or page on your WordPress website without installing a plugin or changing your theme.

Featured Images in WordPress Layouts

If you visit WPBeginner’s homepage, you will notice thumbnail images next to each article title. These are called featured images.

Featured images in WordPress layouts

WordPress allows you to set featured images for your posts and pages. Your WordPress theme then uses these images in different areas of your website.

To learn more, see our guide on how to add featured images in WordPress.

Cover Images in WordPress

A cover image is usually a wide image used as a cover photo for a new section in a blog post or page.

You can add it to your post or page using the Cover block. The Cover block also allows you to use a background color instead of an image.

Using cover image in WordPress layouts

To learn more, see our detailed guide on the difference between the cover image vs. the featured image.

Using Patterns in WordPress Editor

Patterns are collections of pre-arranged blocks that you can use to quickly add different sections to your layouts.

You can use patterns to write content and edit posts and pages.

Adding Patterns in WordPress post and pages

Similarly, you can use patterns in the full site editor in your WordPress theme and website layout.

Simply launch the site editor, and you will see patterns in the ‘Design’ options.

Patterns in site editor

Each pattern is a collection of blocks arranged in a particular order for commonly used layouts.

Your WordPress theme may come with several patterns. You can also find more patterns in the WordPress Patterns Library.

Want to save your design sections? You save your own block arrangements as patterns and reuse them later.

Create patterns

It is a relatively new feature, so a limited set of patterns is available. However, as more WordPress themes and plugins add their patterns to the block editor, more options will become available.

You can see our guide on using block patterns in WordPress to learn more.

Adding Buttons in WordPress Layout

Buttons play an important role in modern website design and layouts. They provide users with a clear call to action, which helps you grow your business and conversions.

The default block editor comes with a Button block that you can use in any WordPress post or page or inside the site editor.

Adding buttons to your WordPress layout

Your WordPress theme may also include call-to-action button settings in the theme customizer. Most popular WordPress page builder plugins also include buttons in various styles.

You can even add click-to-call buttons in WordPress with a plugin.

For more details, see our guide on how to add call-to-action buttons in WordPress.

Using Custom CSS in WordPress Layouts

CSS is the styling language used to create websites. Your WordPress theme and plugins come with their own CSS rules, but from time to time, you may want to change small things like text color, font size, or background color.

This is where custom CSS comes in. WordPress makes it easier for you to save your own custom CSS rules.

If you use a theme with the site editor support, then just go to the Appearance » Editor page to launch the site editor.

Click on any template to start editing, and then click on the ‘Style’ button in the top-right corner of the screen.

Adding custom CSS in site editor

This will show the ‘Styles’ panel in the right column. From here, scroll down and click on the ‘Additional CSS’ tab.

This will show a text box where you can add your additional CSS code.

Saving custom CSS code for your theme in site editor

Don’t forget to click the ‘Save’ button to store your changes when finished.

If you use a classic WordPress theme, you can add your custom CSS in the theme customizer.

Simply go to the Appearance » Customize page and then click on the ‘Additional CSS’ tab.

Additional CSS in Theme Customizer

From here, you can add your custom CSS rules, and you will be able to see them applied in the live preview.

Adding Custom CSS in WordPress Using a Plugin

Normally, if you use the default methods, then your custom CSS code is saved with your theme settings. Changing your theme will disable your custom CSS code.

A better way to store your custom CSS in WordPress is to use the WPCode plugin. It is the best WordPress code snippet plugin, allowing you to easily add custom code snippets without breaking your site.

First, you need to install and activate the WPCode plugin. For details, see our guide on how to install a WordPress plugin.

Upon activation, go to the Code Snippets » + Add New from the WordPress admin dashboard.

Then, hover over the ‘Add Your Custom Code (New Snippet)’ option in the code snippets library and click the ‘Use snippet’ button.

Add custom CSS using the WPCode plugin

Next, at the top of the page, add a title for your custom CSS snippet. This can be anything that helps you identify the code.

After that, write or paste your custom CSS into the ‘Code Preview’ box and set the ‘Code Type’ by choosing the ‘CSS Snippet’ option from the dropdown menu.

Paste CSS in WPCode

Then, scroll down to the ‘Insertion’ section and select the ‘Auto-Insert’ method if you want to execute the code across your entire WordPress website.

You can choose the’ Shortcode’ method if you only want to execute the code on specific pages or posts.

Choose insertion method

Finally, return to the top of the page, toggle the switch to ‘Active’, and click on the ‘Save Snippet’ button.

This will save your custom CSS code snippet.

Save custom CSS code snippet

For more on this topic, see our full guide on how to add custom CSS in WordPress.

Layout Terms in WordPress Page Builders

The easiest way to build custom WordPress layouts for your landing pages is by using a WordPress page builder.

We recommend using SeedProd. It is the most beginner-friendly WordPress page builder plugin on the market.

Other page builders use similar terms for common tools and features.

Using Templates in WordPress Page Builders

Templates are the quickest way to create a web page layout. All popular page builder plugins come with a bunch of ready-to-use templates that you can use as a starting point.

The SeedProd ready-made templates

For instance, SeedProd has templates for various page types, including landing pages, sales pages, 404 pages, coming soon pages, and more.

Modules and Blocks in WordPress Page Builders

Like the blocks in the default WordPress editor, page builder plugins also use blocks.

Some page builders may call them modules or elements, but they are essentially the same thing.

However, page builder plugins come with more blocks than the default editor. For instance, SeedProd includes blocks for testimonials, WooCommerce blocks, Google Maps, contact forms, Facebook embeds, and more.

SeedProd a popular WordPress page builder plugin

You can use blocks to create your own layouts, move them around, and experiment to determine what works best for your business.

Using Sections in Your WordPress Layouts

Similar to the ‘Patterns’ feature in the default editor, a Section is a set of blocks grouped to instantly create common areas of a website.

For instance, you can typically use a header section, hero image, pricing tables, and more.

SeedProd's ready-made hero sections

Different WordPress page builder plugins may use different terms for them. For instance, SeedProd calls them sections, and Beaver Builder calls them saved rows and columns.

Bonus Resources

Following are a few additional resources for beginners that cover WordPress design basics in more detail:

We hope this article helped you learn about the terms used in WordPress layouts. You may also want to check out our guide on learning WordPress for free in a week or bookmark our WordPress Glossary, a beginner-friendly dictionary of WordPress terms.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

8 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. THANKGOD JONATHAN

    As a blogger, I was constantly confused by all the different WordPress layout terms. This glossary was a lifesaver! Now I finally understand what everything means.

  3. Jiří Vaněk

    Great article especially for someone new to WordPress. There is a great description of how the WordPress layout works, which is usually the first thing a new user gets stuck on. For example, I still didn’t know what a HERO image was and what it was used for. Based on this article, I found the information I wanted and I am a bit smarter again.

    • WPBeginner Support

      Glad we could help clarify these terms :)

      Admin

  4. Moinuddin Waheed

    This is by far the most comprehensive guide on this topic which illustrates all the layouts terms in detail. I had slide confusion in some of then but now I can talk like a pro on this layout terminology.
    it not only helps in understanding the wordpress and website layout terms but also help in designing different sections easily and separately. it is especially helpful when we are using the page builders.

    • WPBeginner Support

      Glad to hear our article was helpful :)

      Admin

  5. Ralph

    This is really good an in depth guide.
    I have a question. If we have infinite scroll on a website footer is almost impossible to reach. Is there a way to set it, so footer is “readable” before more content load? Like it shows but not load immediately but lets say after 1 additional scroll? Or it is just how it is and for footer better use pagination?

    • WPBeginner Support

      For the moment, if you have infinite scroll unless you run out of content you would be better off using pagination if you wanted your visitors to see your footer.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.