Apr 06, 2021 What are they? We are talking about pre-designed and pre-built layouts that you can apply to your website. If the WordPress dashboard allows you to take care of the content of your site (categories, subcategories, sections, pages, text and so on) a theme will define what the site looks like. Its visual design and its interactions. Responz is a multi-purpose WordPress responsive theme. It features a beautiful three column layout with elegant design and great typography. It has multiple layout options like 2 sidebars, 1 sidebar, or a full-width homepage. You can also choose from the list view or grid view post layouts.

• Wordpress Layout Tutorial
• Wordpress Layout Builder
• Wordpress Layout Grids Background
• Wordpress Layout Settings

The layout of your homepage is instrumental in retaining visitors. If it doesn’t look just right, you may lose out on traffic. Changing the WordPress homepage layout can be done two different ways without excessive HTML coding. One method relies on the theme’s built-in functionality while the other centers more around using shortcodes from plugins. Out of these two methods, using the customization in the theme may be much easier.

Changing Your WordPress Homepage Layout with a Theme

To change the layout of WordPress using a theme, click the “Appearance” option on the left. This will default to the Theme’s page. Hover over the theme you want to change and click the “Activate” button.

This will immediately change the overall appearance of WordPress to the new layout. This will also change the entire layout of the website, and not just the homepage.

Accessing the Appearance

From the WordPress dashboard, go to “Appearance” and then “Widgets.” Most of your changes will be done from this screen. In this control, you should see things like the right sidebar, header, footer, and other sections. These all pertain to areas of your website. If you put something into the right sidebar, then it will show on the right side of your page.

Some themes will have layout options available in the widget area. For example, the “Color Mag” theme has the ability to display featured posts or content from specific categories in a couple of different ways. You would drag the available widget into the “Front Page Top” area and adjust it to your liking. Before you begin installing plugins for shortcodes and layout changes, explore the “Customize” and “Widgets” areas of your theme. It may already have something you’d like to use for the homepage.

Using Shortcodes to Alter the Homepage

Many things can be done in WordPress by using shortcodes. These small snippets of information can be pasted virtually anywhere in the system to show specific information. While WordPress already has some shortcodes available, there are plugins you can install that will expand what you can do with the layout of your content. Go to “Plugins,” click the “Add New” button on the top left and then search for “content layout.” The available plugins are extensive and can help you develop the perfect look for the WordPress homepage layout.

There are two ways you can use shortcodes efficiently: in a widget or on a page.

In a Widget

As mentioned earlier, many themes have sections available for nearly every area on the WordPress site. What do you do if your theme doesn’t have a layout widget?

1. Copy the shortcode you need from the plugin controlling your layout.
2. Drag a text widget to the “Front Page” or similar section.
3. Expand the text widget and paste the shortcode.
4. Save the widget.

On a Static Page

Many people find it useful to set up a static page as the homepage and use shortcodes to fine-tune the appearance. In order to do this, you:

1. Click on “Pages” from your dashboard.
2. Click the “Add New” button on the top and create a new page called, “Homepage.”
3. Go to “Settings” from the dashboard, and click on “Reading.”
4. The first option available is called “Front Page Displays.” Change it to “A static page.”
5. In the “Front Page” drop-down, you should see your new homepage. Select it and save your changes.
6. Go back into “Pages” and click on your homepage.
7. Add the shortcodes you want to display.
8. Update your homepage.

You may want to go into the “Menus” area of WordPress in “Appearance” and either remove the new homepage from the menu structure or change your “Home” link to reflect the new page. Otherwise, you may have two home links that will go to different areas of your site. It will be confusing to anyone who visits.

Changing the homepage layout may seem convoluted, but it can be incredibly easy especially if you have a theme that already supports various layouts. However, handpicking plugins and using shortcodes could offer a greater level of customization for your site. Pick the method that works best for you and give your visitors a unique experience.

What kind of plugins have you used for creating a unique look to your site? Do you find it easier to just use the theme layouts or handpicking specific plugins and shortcodes?

Author: Kaumil Patel

Kaumil Patel is the Chief Operating Officer of GreenGeeks and has over 13 years of experience in the web hosting industry working for and owning web hosting companies. Kaumil’s expertise is in marketing, business development, operations, acquisitions and mergers.

Before Kathryn Presner became a WordPress.com Happiness Engineer (our name for customer support specialists), she spent several years as a freelance website designer, charging clients to build sites with customized WordPress themes.

Though she had the chops — “my job took a lot of technical skill,” she says — she realized the inherent inefficiencies in her line of work. “To build a site designed from scratch that matches the brand and has custom features, the cost can add up,” she says. “And some business owners I worked with never became comfortable with managing their own website.”

“The whole point of building a WordPress website is having the ability to update it, and it’s a shame when people are so wary of touching their own content,” she adds.

These days, Kathryn helps people overcome obstacles and gain the confidence to create their own websites on WordPress.com.

Building blocks for a better website

Since joining our team, Kathryn has also seen the launch of an innovation that improves the website editing experience: the WordPress Block editor.

As a web designer who’d worked with many small businesses, Kathryn could see that editing a website with blocks would be “a game-changer for WordPress.”

Blocks are specific components you can use to build pages on your website. There are basic blocks for paragraphs of text, headlines, and images. There are also blocks that provide added functionality such as contact forms, clickable buttons, maps, and slideshows. There are even blocks that integrate with services like Mailchimp and Calendly.

Before the Block editor, you needed at least a little web development experience to customize your site beyond the basics. Now, the Block editor is giving all website owners the power to do more with WordPress.

“It was challenging to create the look of your site as it existed in your head.” But with the Block editor, says Kathryn, “You don’t need to know code or install anything. You have so much more flexibility to put things where you want them and make layouts look the way you want.”

This addresses a roadblock that Kathryn knows all too well — she recalls clients who would contact their developers to make changes to parts of their site (such as updating the hours of operation) that they could have easily done themselves. “The Block editor makes things friendlier for a lot of people,” she says. For example, the business hours block is now an intuitive way to update your hours.

Simplifying the website building experience

WordPress themes drive the look and feel of a website, contributing to its personality, and helping to define the user experience. Yet, even with dozens of free and premium themes to choose from on WordPress.com, people sometimes felt limited or overwhelmed by the design and customization they wanted to do.

As a Happiness Engineer, Kathryn regularly speaks with frustrated customers who want to match the look of a new website to their theme’s demo. Those demos, after all, are often what convince people to start building their site with WordPress.com.

That’s one reason why WordPress.com introduced the Page Layouts feature, which applies a pre-designed template with placeholder content to common pages. This takes some burden off the shoulders of DIY website owners and serves as a guide for customizing those pages with unique text, images, and more.

Types of pages with pre-designed layout options include:

• About Pages
• Blog Pages
• Contact Pages
• Menu Pages
• Portfolio Pages
• Services Pages
• Team Pages
• Homepages

You can now add premade layouts that replicate the look of a demo site much more quickly. Themes are more flexible, too. For example, what if you choose one theme but want your homepage layout to mirror another?

“The cool thing is that all the themes are available to everyone!” Kathryn exclaims. “Maybe they want a color scheme from Balasana, but also want a Brompton homepage layout. That’s now available with all our newest themes.”

Wordpress Layout Tutorial

Kathryn honed in on two sections of a website that are crucial for anyone operating on WordPress — the About and Contact pages — and clarified how each is enhanced through Page Layouts and the Block editor. These are crucial pages for any website, serving a very specific purpose (no matter if the site is personal or professional).

On the About page, you can edit each aspect of the page to your liking. Take, for example, a headshot — if you like a photo, but don’t want it to be circular, you can customize that. This is because the Block editor lets you make these predefined layouts your own as you move and change existing blocks or add new ones to the mix. Maybe you want to add an email form or a photo gallery to your About page. It’s up to you!

Every business needs a Contact page, but most of them are fairly forgettable. A predefined layout from WordPress.com guides you toward creating something that’s engaging and easy on the eyes. Replace the placeholder text and images with your own versions to personalize and customize it until you’re satisfied.

Wordpress Layout Builder

Establishing and updating a clear contact page is rudimentary for a business to succeed. “I used to drill this into clients when I was freelancing,” says Kathryn. The star of the Contact page is the form that connects you with your customers. So why are they all so similar — and boring?

You can edit the form’s call-to-action from the standard “Send us a message” to something more personal like “Say hi!” or “Drop us a line.”

Exploring your options with layouts and the Block editor

Page Layouts from WordPress.com will jumpstart your creativity. These web page templates don’t even have to be used for their intended purpose! A photographer may want to use a Portfolio page layout for an About page, or a restaurant could use a Menu page layout for its homepage.

Wordpress Layout Grids Background

It’s your website, and WordPress.com puts the power to build it in your hands. The Block editor and Page Layouts are the perfect tools for getting the job done.

For those accustomed to what’s now known as the “Classic” WordPress editor, this new website editing experience may take some getting used to. Even Kathryn took a while to switch to using blocks on her own website, but now she’s embraced the new editor.

“It was embarrassing as a Happiness Engineer to retain the status quo, and not try the new thing,” she admits. “I was inspired to switch themes, and I love it.” Kathryn is using the Twenty Twenty theme, which is part of a collection of recommended WordPress themes designed to work well with the blocks.

If you’re feeling inspired to try something new on your website, consider switching themes or experimenting with Page Layouts. If you’re just embarking on a website building adventure, WordPress.com will be there to support you. That’s because people like Kathryn Presner, and other Happiness Engineers, are waiting to help you get the site that’s in your head out into the real world.

Start building your new website today and see how WordPress.com is empowering businesses, bloggers, artists, and freelancers to build something better — block by block.

Wordpress Layout Settings

Watch a video explaining how to use blocks to edit layouts: