WordPress Layout Terms Demystified (Quick Reference)

Are you trying to understand what WordPress layout terms mean?

Many beginners come across WordPress layout terms and vocabulary when working on their website. These are words used by designers and developers and average users may find them confusing.

In this guide, we’ll explain some of the most commonly used WordPress layout terms. This will help you understand the lingo used for WordPress website layouts and work on your website like a total pro.

Why Learn WordPress Layout Terms?

WordPress themes control the appearance of your website. You can customize them by visiting the Appearance » Customizer page.

All top WordPress themes come with options to modify your website design using customizer settings, but your options are limited depending on the theme.

For even more flexibility, you can use WordPress page builder plugins like SeedProd.

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

It also comes with dozens of templates that you can use as a starting point. Plus, it supports WooCommerce which helps you create layouts for your online store as well.

However, as you work on creating a layout for your website, you may come across web design terms that you may not be familiar with.

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

That being said, 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’ll explain in this article.

Understanding a Typical WordPress Layout

• Header
• Custom Header
• Custom Background
• Content Area
• Sidebars
• Footer

Other Common Components of a WordPress Layout

• Navigation Menus
• Widgets
• Blocks
• Featured Images
• Cover Images
• Patterns
• Buttons
• Custom CSS

Layout Terms in WordPress Page Builders

• Templates
• Blocks and Modules
• Sections

Understanding a Typical WordPress Layout

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

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 is viewing, the layout might be different. For instance, on a WordPress blog page, it may include a sidebar next to the content area.

This basic layout is then filled with other elements, which we’ll talk about 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 that you want users to see first.

Here is how the header section looks on WPBeginner.

Custom Header in WordPress Theme Customizer

Many popular WordPress themes come with additional features to customize the header area of your WordPress layout. This feature is sometimes called a custom header.

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 position of the logo, navigation menus, and header image.

Custom Background in WordPress Theme Customizer

Similar to the custom header feature, some WordPress themes may allow you to set a custom background color or an image across your WordPress website.

You can usually find this option under the theme customizer. However, it is sometimes buried inside other tabs. For more details, take a look at our guide on how to add a background image in WordPress.

Content Area in WordPress

The content area comes right after the header part of a layout. This 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.

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

A WordPress blog may use a content-heavy layout with excerpts and images from recent articles, a newsletter sign up form, and more.

Here is how WPBeginner’s homepage layout looks. It is a content-rich website, and that’s why the recent articles take the whole content area.

By default, WordPress uses a blog layout showing your most recent blog posts as the frontpage of your website. However, you can change that and use any page as your front page.

Simply go to Settings » Reading page and choose ‘A static page’ under the ‘Your homepage displays’ option.

After that, you can choose a page that you want to use as your homepage and another one for your blog page. For more details, see our guide on how to create a separate page for your blog posts in WordPress.

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

Now you can edit the page you choose to be your homepage and create a custom homepage layout.

Sidebars in WordPress Layouts

As the name suggests, Sidebars typically appear to the right or the left side of the content area.

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

Footer Area in WordPress Layouts

The Footer area appears at the bottom of a page layout below the content area. It usually includes a footer widget area where you can display links to important pages like privacy policy, terms and conditions, about page, and more.

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

Other Components of a WordPress Layout

Next, we’ll take a 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 in WordPress

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

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.

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

Using Widgets in a WordPress Layout

Widgets are elements that you can add to the widget-ready areas or sidebars of your WordPress website. Most WordPress themes come with multiple widget-ready areas where you can add widgets.

WordPress comes with several built-in widgets that you can use. Many popular WordPress plugins also come with their own widgets. For example, you can use widgets to add popular post lists, contact forms, banner ads, social media feeds, and more.

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

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

Using Blocks in WordPress Layouts

WordPress comes with a powerful content editor called the block editor. This editor is designed to help you create beautiful layouts for your WordPress posts and pages using blocks.

There are different types of blocks for the most common elements of any 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 the homepage of WPBeginner, you’ll notice thumbnail images next to each article title. These are called featured images.

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.

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

Using Patterns in WordPress Editor

Patterns were introduced to the WordPress block editor in WordPress 5.5. Each pattern is a collection of blocks arranged in a particular order for commonly used layouts.

You can choose from buttons, header styles, galleries, columns, and more. This makes it easy for beginners to quickly build layouts using common patterns.

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

Adding Buttons in WordPress Layout

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

The default block editor comes with its own buttons that you can use in any WordPress post or page.

Your WordPress theme may also come with a call to action button settings under the theme customizer. Most popular WordPress page builder plugins also come with buttons in various styles that you can use.

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. Simply go to the Appearance » Customize page and then click on the Additional CSS tab.

From here, you can add your custom CSS rules and you’ll be able to see them applied in the live preview. For more on this topic, see our full guide on how 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.

For instance, SeedProd has templates for different types of pages that you may need, including landing pages, sales pages, 404 pages, coming soon pages, and more.

Modules and Blocks in WordPress Page Builders

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

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

Using Sections in Your WordPress Layouts

Similar to the ‘Patterns’ feature in the default editor, Sections are a set of blocks grouped together to instantly create common areas of a website. For instance, header section, hero image, pricing tables, and more.

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

We hope this article helped you learn about the terms used in WordPress layouts. You may also want to check out our guide on how to learn WordPress for free in a week, or our comparison of the best WordPress hosting companies.

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.

The post WordPress Layout Terms Demystified (Quick Reference) appeared first on WPBeginner.

May 13, 2021 at 02:00PM

How to Create a Landing Page With WordPress

Do you want to create a custom landing page on your WordPress site?

A landing page is a highly optimized marketing page. It helps businesses convert website visitors into customers and leads.

In this article, we’ll show you how to easily create a landing page in WordPress.

Here is a quick overview of what we’ll cover in this guide.

• What is a landing page?
• Difference between homepage and a landing page
• Creating a landing page in WordPress with SeedProd (Recommended)
• Creating a landing page in WordPress with Beaver Builder
• Creating a landing page in WordPress with Divi

What is a Landing Page?

A landing page is a purpose-built page designed to increase sales or generate leads for a business.

They are widely used in paid marketing, email, and social media campaigns. Users coming from these sources will land on this page first, which is why it is called a landing page.

What is the difference between the homepage and a landing page?

A homepage is your website’s front page and what users will see when they enter your domain name in their browser. On the other hand, a landing page can be a standalone page where most visitors land from paid or third-party traffic sources.

Your website’s homepage is designed for visitors to engage with your website, explore other pages, browse products, or sign up. It has more links and provides users with more choices.

On the other hand, a landing page, also called a “squeeze page”, is built for higher conversion rates. It has fewer links and is designed for users to make a purchasing decision or give their information for future outreach.

Your website can have only one homepage, but you can create as many landing pages as you want for different campaigns. For example:

• A landing page for your paid advertising campaigns
• A page for subscribers coming from your email list, visitors from social media, and more
• Users landing on a specific product or service page
• and many more…

That being said, let’s take a look at how to create a beautiful custom landing page in WordPress without needing any CSS, HTML, or PHP know-how.

We’ve chosen the top three solutions for creating landing pages in WordPress. These landing page builders are easy to use, optimized for speed, and affordable for small business. You can pick the solution that best fits your need.

Ready? Let’s get started with the first method.

Method 1. Creating a WordPress Landing Page using SeedProd

This method is the easiest and recommended for all users.

For this method, we’ll be using SeedProd. It is the best WordPress landing page plugin on the market and allows you to create any type of landing page with no coding required. SeedProd is also optimized to be lightweight, fast, and SEO friendly.

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

Note: There is a free version of SeedProd plugin available on WordPress.org, but we will be using the Pro version since it offers more powerful features.

Upon activation, you’ll be asked to enter your license key. You can find this information under your account on the SeedProd website.

Next, you need to visit SeedProd » Pages page and click on the ‘Add New Landing Page’ button.

On the next screen, you’ll be asked to choose a landing page theme.

SeedProd comes with dozens of beautiful landing page templates neatly organized for different campaign types. Simply click to select a template that you want to use as a starting point.

You’ll be asked to provide a title for your page and choose a URL. Choose a catchy page title and don’t forget to add your target keyword in the page URL.

This will load the SeedProd page builder interface. This simple drag and drop builder will show a live preview of your page to the right and a toolbar on the left.

Blocks are the core design tool in SeedProd. You can use them to create any layout you need. You can also use columns to place blocks side by side.

You can simply point and click on any block on the page to customize it. You can also drag and drop blocks to move them up or down.

You can add new blocks to your page from the left column. SeedProd comes with popular landing page design elements that you can simply drag and drop anywhere on your page.

You can also change background colors, add background images, change colors and fonts to match your brand or theme.

Plus, SeedProd comes with ‘Sections’ too. These are common design areas used by landing pages. For instance, header, hero image, call to action, testimonials, contact form, FAQs, features, footer, and more.

SeedProd is also compatible with WooCommerce. This allows you to create product landing pages, eCommerce landing pages, promotional pages for sales and other events.

WooCommerce blocks include add to cart button, checkout, featured products, products grid, and more. This enables you to create truly stunning marketing campaigns without limiting yourself to your WooCommerce theme.

Connecting Your Landing Pages to Third-Party Tools

To create a good landing page for lead generation, you can add email list sign-up forms where users can join your newsletter or provide their contact information.

SeedProd makes it super easy to connect your landing pages to popular email marketing services like Constant Contact or Mailchimp. Simply switch to the ‘Connect’ tab and then select your email service provider.

Need to connect to a service not listed there? Don’t worry, SeedProd works with Zapier which acts as a bridge between SeedProd and more than 3000+ other apps on Zapier.

Saving and Publishing Your Landing Page

Once you are done editing your page you can simply click on the Save button and then choose Publish.

Publishing your landing page will make it go live on your website.

Using a Custom Domain for Your Landing Page

Do you have a custom domain that you want to use for your landing page?

This allows you to use your WordPress website to create landing pages, coming soon pages, product pages, geo-targeted ad campaigns, microsites, and more with their own domain names.

Instead of creating a WordPress multisite network or installing multiple WordPress websites, you can simply make a landing page and point it to your custom domain name.

Simply switch to the Page Settings tab and then click on the ‘Custom Domain’ section.

Make sure that your WordPress hosting provider allows you to use multiple domains, and you have added the domain name to your hosting dashboard.

For more details see our article on how to add custom domain alias for your WordPress landing page.

Method 2. Creating a Landing Page in WordPress using Beaver Builder

Beaver Builder is another popular drag & drop WordPress page builder. It allows you to easily create a landing page using ready-made templates that you can modify with simple drag and drop tools.

First, you need to do is install and activate the Beaver Builder plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Beaver Builder page to configure plugin settings.

Under the License tab, click on the ‘Enter License Key’ button to add your license key. You can find this information under your account on the Beaver Builder website.

Next, you need to head over to Pages » Add New page from the WordPress dashboard to create your first landing page.

Beaver Builder works with all top WordPress themes. Many of these themes come with a landing page template designed to work with page builder plugins. Typically, they are wide layouts with no sidebar and widgets.

If your theme doesn’t have such a template, then you can create one on your own using a child theme. For detailed instructions, see our guide on how to create a full width page in WordPress.

Select a landing page or full-width template from the ‘Page Attributes’ box in the right column and now save your page to apply the changes.

You are now ready to make a landing page.

Click on the ‘Launch Beaver Builder’ button in the post editor to launch the builder interface.

Beaver Builder will open with your theme’s landing page template. You need to click on the add button on the top right corner of the screen and switch to the Templates tab.

Here, you’ll find several ready-made templates to choose from. Select ‘Landing Pages’ from the group drop-down menu and then choose a template that looks close to what you have in your mind.

Once you select a template, Beaver Builder will load it in the preview window.

You can now point and click on any page content to edit it. You can change the text, change background color or images, adjust the width and height of the rows and columns.

You can add or remove content items from your template. Simply click on the add button and switch to the rows tab. You can add either single or multiple columns.

After adding a row, switch to the modules tab. Modules are content elements that you can add to your landing page. Beaver builder comes with all the essential modules including text, headings, CTA buttons, video, audio, animated countdown timer, and more.

Once you are satisfied with the design, you can click on the ‘Done’ button at the top and then save or publish your page.

You can now visit the page to view your landing page in action. Feel free to edit it again if you need to adjust, add, or remove anything.

Method 3. Creating a Landing Page in WordPress using Divi

Divi is a popular WordPress page builder plugin by the team behind Elegant Themes. It comes as a theme with page builder support, and you can also use it as a standalone page builder.

First, thing you need to do is install and activate the Divi Builder plugin.

Note: If you are installing Divi theme then you don’t need to install the page builder plugin. Simply follow our instructions on how to install a WordPress theme.

Upon activation, you can go to Pages » Add New page to create your landing page. On the page edit screen, click on the ‘Use Divi Builder’ button to launch the Divi page builder.

Next, you will see a welcome popup to familiarize yourself with the editor, you can exit it by clicking on the Start Building button.

After that, you’ll see the option to start from scratch, choose a layout, or clone a page. You need to click on the choose a layout button.

Divi comes with dozens of ready to use landing page templates organized by categories. Simply click to choose a template that you want to use as a starting point.

On the next screen, you’ll see layout details and other templates it includes. Most layout packs will include a landing page template that you can use.

Simply click on the ‘Use this layout’ button to continue.

You may be asked to provide your Divi account username and API key. You can find this information under your account on Elegant Themes website.

Divi would now fetch and install your selected layout from the library. After that, you’ll see a live preview of your page inside the page builder.

You can simply point and click to select and edit element on the screen. For text elements you can simply place the cursor over the text you want to edit and start typing.

For other elements, you’ll see a popup appear on screen with options to try different customizations.

Divi uses sections, rows, and modules to build layouts. You can add a section, row, or module by clicking on the + icon anywhere on the page.

Each module comes with different settings that you can customize after inserting it. Divi comes with lots of advanced options for each element.

Once you are done editing, you can simply click on the Publish button at the bottom right corner of the screen.

You can now click on the Exit Visual Builder button in the WordPress admin tool bar to exit the editor.

The builder will now redirect you back to the live version of your landing page. You can still resume editing by clicking on the ‘Enable Visual Editor’ in the toolbar at the top.

We hope this article helped you learn how to create a landing page with WordPress. You may also want to see our proven tips on driving more traffic to your WordPress site, or our comparison of the best business phone services to optimize your sales conversion.

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.

Note: To help our readers avoid choice paralysis, our article does not include all landing page builders like Elementor, Leadpages, Instapage, Unbounce, ClickFunnels, etc. The top three solutions we have picked are the best solutions for small businesses because they are easy to use, optimized for speed, and affordable for small business.

The post How to Create a Landing Page With WordPress appeared first on WPBeginner.

May 12, 2021 at 02:00PM