When we began designing websites using WordPress, we encountered a variety of new terms such as ‘headers,’ ‘footers,’ and ‘widgets.’ It felt like we were learning an entirely new language just to create a basic website.
Now, after assisting millions of WordPress users for over 16 years, we have not only mastered these terms but also found the simplest ways to explain them to newcomers.
If you’re still unsure about the meanings of these layout terms and how they function together, don’t worry. You’re not alone, and you’ve come to the right place.
In this clear and concise guide, we will simplify all the key WordPress layout terms into straightforward explanations that you can refer to at any time.
Important Information About WordPress Layouts
As you explore WordPress layouts, you will come across various terms based on your site-building approach. This can differ depending on whether you are using themes that support the full site editor, a classic theme’s customizer, or WordPress page builder plugins.
For instance, when using the Full Site Editor, you will find layout options underAppearance » Editor:
In classic themes, you will access the Theme Customizer underAppearance » Customize.
Here’s an example of what it looks like:
To enhance design options, many users choose page builders like SeedProd, which feature user-friendly drag-and-drop interfaces.
These tools often include additional features not available in standard WordPress tools, such as advanced blocks for enriching your content.
Although these tools may have different terminology and interfaces, the key layout principles remain consistent. Familiarizing yourself with these essential terms will empower you to create improved WordPress designs and custom layouts, regardless of the tools you utilize.
Let’s delve into these crucial WordPress layout terms and understand how they function across various platforms. Here’s what we will discuss:
- Grasping a Standard Layout in WordPress
- Header Section
- Background Color or Image
- Main Content Area
- Sidebar Area (Optional)
- Footer Section
- Additional Elements of a WordPress Layout
- Navigation Menu
- Widgets (Classic Themes)
- Content Blocks
- Featured Images
- Cover Images
- Block Patterns
- Call-to-Action Buttons
- Custom CSS Styles
- Layout Terminology in WordPress Page Builders
- Utilizing Templates in WordPress Page Builders
- Modules and Blocks within WordPress Page Builders
- Incorporating Sections in WordPress Page Builders
- Common Questions
- Additional Resources
Grasping the Basics of a WordPress Layout
Imagine a website’s layout as if it were a friendly letter. It starts with a greeting at the top (the header), followed by the main message in the center (the content area), and concludes with a signature at the bottom (the footer).
Most websites adhere to this straightforward structure, which typically resembles the following format:
The layout may vary depending on the specific page a user is viewing.
For example, a WordPress blog page might feature a sidebar alongside the content area.
This fundamental layout can incorporate various other elements, which we will explore further in this article.
Let’s take a closer look at each of these primary sections.
Header Section
The header in a WordPress layout is the uppermost section of any page. It generally includes your website’s logo, title, navigation menus, a search bar, and other essential components that you want visitors to notice first.
Here’s an example of how the header section appears on CanadaCreate.
Custom Header Options in WordPress Themes
Many popular WordPress themes offer extra features for personalizing the header area of your layout, often referred to as a custom header.
How to Customize the Header in a Block Theme
If you’re using a block theme that supports the site editor, you can modify the header by clicking on the header area within the site editor.
From this point, you can personalize the header to suit your preferences. You can change colors, modify the navigation menu, and incorporate blocks such as search bars, site logos, buttons, and more.
Customizing the Header in a Classic Theme
For classic themes, these settings are typically located in the theme customizer. Look for sections labeled ‘Header,’ ‘Header Options,’ or ‘Site Identity.’
Depending on your WordPress theme, you might have the option to add a full-width image to the header along with a tagline or a call-to-action button.
Certain WordPress themes may allow you to adjust the logo’s position, navigation menus, and header images.
Background Image/Color
Some WordPress themes also provide the option to easily change the background color or apply a background image to your website.
Changing the Background in a Block Theme
If you’re using a theme that supports the site editor, you can change the background color by navigating to ‘Styles’ in the full site editor.
Simply select the ‘Colors’ option from the Styles panel.
After that, click on ‘Background’ to choose a background color for your website.
How to Change the Background in a Classic Theme
The background settings for classic themes vary based on the specific features of your theme.
Many classic themes offer custom background options. You can access these settings under the ‘Colors’ or ‘Background Image’ sections in the theme customizer.
These options may be located within other tabs, so you might need to explore to locate them.
For further information, check out these guides on adding a background image in WordPress or changing the background color in WordPress.
Content Area
The content area is positioned right below the header in a website layout, showcasing the main content of the page.
In a custom homepage layout, this section may feature a call to action, followed by services or products, testimonials, and other key information.
E-commerce sites often utilize this area to highlight current sales, featured products, best-sellers, and more.
Conversely, a content-rich site such as a blog or magazine may adopt a layout focused on extensive content.
This layout typically displays the latest articles with excerpts and images, includes a newsletter sign-up form to grow an email list, or features content discovery sections to engage users further.
This is an overview of the layout for CanadaCreate’s blog page.
It highlights our most popular articles and encourages visitors to subscribe to our email list. (See other strategies we employ to grow our email list.)
By default, WordPress displays a blog layout that features your latest blog posts on the homepage of your website.
However, you have the option to modify this setting and select any individual page as your website’s homepage.
Navigate to theSettings » Readingsection and choose‘A static page’ from the ‘Your homepage displays’ dropdown menu.
Afterward, you can select a specific page to serve as your homepage and another page for your blog posts.
For further information, refer to our guide on setting up a separate page for your blog posts in WordPress.
Remember to click the ‘Save Changes’ button to apply your settings.
Now, you can customize the page you selected as your homepage and design a unique homepage layout.
Sidebar Area (Optional)
Traditionally, sidebars are positioned on either the right or left side of the content area.
That said, many contemporary websites prefer a cleaner look without sidebars, particularly for business and landing pages.
Sidebars in Classic Themes
In traditional WordPress themes, sidebars serve as widget-ready sections where you can add various widgets such as archives, newsletter sign-up forms, categories, and popular posts.
You can find these options under theAppearance » Widgetspage.
Sidebars in block themes
In block themes, sidebars function differently. These themes may include sidebar areas, but they utilize blocks instead of conventional widgets.
You can customize these directly through the Site Editor, providing more flexible design possibilities.
Be aware that some modern WordPress themes may not feature sidebar areas at all, opting for full-width, content-centric layouts instead.
For additional insights on utilizing sidebars, check out our comprehensive guide to WordPress sidebar strategies.
Footer Area
The footer area is located below the content area at the bottom of a page layout.
If your WordPress theme supports the site editor, you can edit the footer area by clicking on it.
This is where you will manage Template Parts. Consider Template Parts as reusable blocks for sections like your header and footer.
The great advantage is that you can edit them once, and the changes will reflect throughout your entire site.
To modify your footer, navigate toNavigate to Appearance » Editorto open the site editor. From there, choose ‘Patterns’ from the left menu and scroll down to the ‘Template Parts’ section to locate and select your footer.
While editing the footer section in the site editor, you can incorporate various blocks to showcase different elements.
For example, you can include a list of your key pages, display a navigation menu, add a contact form, and much more.
If you’re using a classic theme, it likely includes a footer widget area.
Simply navigate to theAppearance » Widgetspage and search for a footer widget area.
Similar to the site editor, you can utilize blocks to add various elements to the footer widgets in your theme.
Unsure about what to include in your site’s footer? Check out our checklist of essential items to add to the footer of your WordPress site.
Additional Elements of a WordPress Layout
Next, we will explore some components of a WordPress layout that you can incorporate into your header, content, sidebar, or footer sections. These elements are essential for creating a functional layout.
Navigation Menu
Navigation menus are lists of links that can be arranged horizontally or vertically. Most websites feature at least one primary navigation menu located in the header.
Some websites opt to use multiple navigation menus within the header area.
WordPress enables you to showcase navigation menus as widgets, which display as a vertical list of links that can be positioned in sidebars or footer widget areas.
For more information, refer to our guides on adding navigation menus in WordPress and styling WordPress navigation menus.
Widgets (Classic Themes)
If your WordPress theme supports widgets, you can utilize them to customize your website layout. Additionally, with block widgets, your theme can incorporate blocks in the widget areas.
You can add widgets to the widget-ready areas or sidebars of your WordPress website. Many themes offer multiple widget-ready areas for adding widgets or blocks.
WordPress includes a variety of built-in widgets and blocks for your use. Additionally, many popular WordPress plugins come with their own widgets and blocks.
For instance, you can use widgets and blocks to display popular post lists, contact forms, banner ads, social media feeds, and more.
You can view all available widgets by navigating to theAppearance » WidgetsThis section is located within the WordPress admin dashboard.
Important:If your theme lacks widget areas, the ‘Widgets’ section may not be visible in the WordPress admin dashboard.
For further information, refer to our comprehensive guide on adding and utilizing widgets in WordPress.
Content Blocks
WordPress employs the block editor for content creation, widget management, and website editing. It utilizes blocks for all standard web components, hence its name, the block editor.
This editor is crafted to assist you in designing stunning layouts for your WordPress posts and pages using blocks.
Various block types are available for the most common content elements. You can easily add paragraphs, headings, images, galleries, video embeds, columns, tables, and more.
This feature enables you to design unique layouts for each post or page on your WordPress site without the need for additional plugins or theme modifications.
In block themes, these blocks can also substitute traditional widgets in areas such as sidebars, headers, and footers.
Featured Images
When you visit CanadaCreate’s homepage, you’ll see thumbnail images accompanying each article title. These images are known as featured images.
In WordPress, you can assign featured images to your posts and pages. Your theme will then display these images in various sections of your website.
For more information, check out our comprehensive guide on adding featured images in WordPress.
Cover Images
A cover image is typically a wide image that serves as a cover photo for a new section within a blog post or page.
You can insert a cover image into your post or page using the Cover block, which also allows you to select a background color instead of an image.
For further details, refer to our in-depth guide comparing cover images and featured images.
Block Patterns
Patterns are groups of pre-arranged blocks that enable you to quickly add various sections to your layouts.
You can utilize patterns to create content and modify posts and pages.
Additionally, patterns can be used in the full site editor of your WordPress block theme and website layout.
Simply open the site editor, and you will find patterns under the ‘Design’ options.
Each pattern consists of blocks organized in a specific sequence for commonly used layouts.
Your WordPress theme may include several patterns, and you can discover additional patterns in the WordPress Patterns Library.
Want to save your design sections? You can save your custom block arrangements as patterns and reuse them later.
Block Patterns are a powerful feature in WordPress, with thousands of free options available in the official WordPress Pattern Directory.
As more WordPress themes and plugins introduce their own patterns, this library continues to expand.
Check out our guide on using block patterns in WordPress for more information.
Buttons
Buttons are essential in modern website design and layouts. They provide users with a clear call to action, helping to boost your business and increase conversions.
The default block editor includes a Button block that you can use in any WordPress post or page, as well as within the site editor.
Your WordPress theme may also offer call-to-action button settings in the theme customizer. Most popular WordPress page builder plugins feature buttons in various styles.
You can even add click-to-call buttons in WordPress using a plugin.
For more information, refer to our guide on how to add call-to-action buttons in WordPress.
Custom CSS
Think of CSS (Cascading Style Sheets) as the paint and decorations for your website. It controls visual details such as colors, fonts, and spacing.
Your WordPress theme and plugins include their own CSS rules, but you might want to make minor adjustments like changing text color or font size. This is where custom CSS becomes useful.
WordPress allows you to easily save your personalized CSS rules.
How to Add Custom CSS in a Block Theme
If you’re using a block theme that supports the site editor, navigate to the Appearance » Editor section.
In the main editor dashboard, click on the ‘Styles’ icon located in the top right corner. This will open the ‘Styles’ panel on the right side.
Next, scroll down and select the ‘Additional CSS’ tab. This will display a text box where you can input your CSS code.
Remember to click the ‘Save’ button to apply your changes once you’re done.
How to Add Custom CSS in a Classic Theme
If you’re using a classic WordPress theme, you can add your custom CSS through the theme customizer.
Simply go to the Appearance » Customize section, then click on the ‘Additional CSS’ tab.
Here, you can enter your custom CSS rules, and you’ll see them applied in the live preview.
How to Add Custom CSS in WordPress Using a Plugin
By default, custom CSS code is saved with your theme settings in WordPress. If you switch themes, your custom CSS will no longer be active.
A more effective way to manage your custom CSS in WordPress is by using the WPCode plugin. This top-rated code snippet plugin allows you to easily add custom code without risking site functionality.
To get started, install and activate the WPCode plugin. For step-by-step instructions, refer to our guide on installing a WordPress plugin.
After activation, navigate to the Code Snippets » + Add New section in the WordPress admin dashboard.
Next, hover over the ‘Add Your Custom Code (New Snippet)’ option in the code snippets library and click the ‘Use snippet’ button.
At the top of the page, enter a title for your custom CSS snippet. Choose a title that will help you easily identify the code later.
Then, write or paste your custom CSS into the ‘Code Preview’ box and select ‘CSS Snippet’ from the dropdown menu to set the ‘Code Type.’
Scroll down to the ‘Insertion’ section and choose the ‘Auto-Insert’ method if you want the code to run across your entire WordPress site.
Alternatively, select the ‘Shortcode’ method if you prefer to execute the code on specific pages or posts.
To finish, scroll back to the top of the page, switch the toggle to ‘Active’, and click the ‘Save Snippet’ button.
This action will save your custom CSS code snippet.
For additional information, refer to our comprehensive guide on adding custom CSS in WordPress.
Understanding Layout Terms in WordPress Page Builders
The simplest way to create custom layouts for your WordPress landing pages is by utilizing a WordPress page builder.
We recommend SeedProd, as it is the most user-friendly WordPress page builder plugin available.
Other page builders typically use similar terminology for common tools and features.
Utilizing Templates in WordPress Page Builders
Templates provide the fastest method for designing a web page layout. Most popular page builder plugins offer a variety of ready-to-use templates to kickstart your design.
For example, SeedProd includes templates for different page types, such as landing pages, sales pages, 404 error pages, coming soon pages, and more.
Modules and Blocks in WordPress Page Builders
Similar to the blocks found in the standard WordPress editor, page builder plugins also incorporate blocks.
Some page builders might refer to them as modules or elements, but they serve essentially the same purpose.
Page builder plugins offer a wider variety of blocks compared to the default editor. For example, SeedProd provides blocks for testimonials, WooCommerce products, Google Maps, contact forms, Facebook embeds, and much more.
You can utilize blocks to design your own layouts, rearrange them, and test different configurations to find what works best for your business.
Understanding Sections in WordPress Page Builders
Similar to the ‘Patterns’ feature in the default editor, a Section consists of a collection of blocks that are grouped together to quickly create common website areas.
For example, you can often use sections for headers, hero images, pricing tables, and additional elements.
Different WordPress page builder plugins may refer to these differently. For instance, SeedProd calls them sections, while Beaver Builder refers to them as saved rows and columns.
Commonly Asked Questions
Here are some frequently asked questions from our readers regarding WordPress layouts:
What is the difference between a block and a widget in WordPress?
Blocks are the fundamental components used to create content in the WordPress editor, such as paragraphs, images, or buttons.
Widgets were traditionally used to add specific content modules to areas outside the main page content, like sidebars and footers.
In contemporary block-based themes, you can utilize blocks in any widget-ready area, offering enhanced flexibility and reducing the reliance on the traditional widget system.
Is it possible to have a unique layout for each page?
Absolutely! The WordPress block editor enables you to craft distinct layouts for every post and page. You can customize columns, incorporate various blocks, and organize content in any way you prefer on a per-page basis.
For even greater customization, page builder plugins like SeedProd allow you to create entirely unique pages from scratch, independent of your theme’s default layout.
Do all WordPress themes include a sidebar?
No, not every theme comes with a sidebar.
Many modern designs prioritize a clean, full-width layout to enhance user experience, particularly on landing pages and business websites.
However, most multipurpose themes still offer a sidebar option that you can enable or disable via the theme customizer or site editor.
Additional Resources
Here are some extra resources for beginners that delve deeper into the fundamentals of WordPress design:
- How to Add Placeholder Content for Theme Development in WordPress
- WordPress Theme Cheat Sheet for Beginners
- Discover How to Identify the Files You Need to Edit in Your WordPress Theme
- A Beginner’s Guide to Understanding WordPress Template Hierarchy (Cheat Sheet)
- Step-by-Step Guide to Creating a Custom WordPress Theme Without Coding
We hope this article has helped you understand the terminology related to WordPress layouts. For further learning, check out our guide on mastering WordPress in just one week or bookmark our WordPress Glossary, which serves as a beginner-friendly dictionary of WordPress terms.
If you enjoyed this article, consider subscribing to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
