Design, Development, WordPress. Rebuilding the Flywheel pricing table as a custom block (in about 10 min) The (Gutenberg) block editor is undoubtedly the center of modern WordPress. With full site editing on its way to WordPress Core, Read More. Weekly bestsellers. Tags: blog, business, clean, corporate, creative, ecommerce, gallery.

1. Wordpress Layout Options
2. Blogspot Layout
3. Wordpress Website Templates

Do you want to create custom WordPress layouts for your website to give it a unique look?

Regardless of your skillset, it’s easy to build a custom WordPress layout without having to hire a developer.

In this article, we’ll show you how to create a custom WordPress layout by using a renown WordPress page builder plugin, Beaver Builder.

Wordpress Layout Options

Many of you must be wondering, why to create a custom layout when you can simply pick a premium theme and kick off your page with one of its pre-built layouts.

Why Create Custom WordPress Layouts

You’ll find a number of premium WordPress themes that offer several stunning built-in layouts, which are ready to be used right away. You can definitely opt for these beautiful layouts and give your site an appealing look.

But the problem with such layouts is that because of its ready availability they are widely used by hundreds and thousands of users across the web.

That means if you’re using a prebuilt layout for your WordPress site, you won’t be able to give a distinct look unless you customize it a lot. Additionally, these layouts may not meet your requirements either. Building a custom layout is the best option in these cases.

Creating a Custom WordPress Layout

The best way to create visually stunning custom layouts for your site is to use the Beaver Builder plugin. Beaver Builder is a popular drag and drop page builder plugin that lets you create some of the most stunning layouts within a matter of minutes.

The best thing about this plugin is the level of flexibility if offers. You can take control of almost anything.

Colors, texts, fonts, images – everything can be fully customized to get the exact look that you’ve always dreamt about.

Another thing you’ll love about Beaver Builder is that unlike any other page builder plugins, it’s thoroughly beginner-friendly and you don’t have to spend hours figuring out how to use it. Plus, it also offers dozens of visually stunning templates to help you get started.

Check outour Beaver Builder review here. Let’s now check out how to create your custom layouts using this plugin.

Step 1: Installing and Setting Up Beaver Builder in WordPress

The first step is to install and activate Beaver Builder on your website. You can download the plugin by going to the Beaver Builder’s site. Once it’s activated, go to Settings » Page Builder.

Here you can enter the license key to enable support and receive updates. Once done you’re ready to create your first custom layout.

Step 2: Creating Your First Custom Layout

To create your first custom layout, go to All Pages » Add New on your WordPress dashboard. On your text editor, you’ll have an option to switch to the page builder.

Just click on this option and you’ll see the page builder tab being launched. You’ll see several template options here. So select the one you like the most for your layout. You can also click on the dropdown arrow and select the type of layout you want. This can be for your landing pages or your content pages.

Once that’s done, you’ll be directed to its drag and drop builder. To edit a particular field, you just need to hover over that specific area and then click on it and start customizing your design.

You can add up to 6 columns, sidebars, audios, images, separators and more to your layouts. To add rows and sidebars, click on the Row Layouts tabs. Then drag the number of columns you want and drop it in your visual builder.

Once your columns are added, just click on them and customize it to match your requirements. You can change the background, text color, add links, texts, borders and more to your columns. These columns and rows can also be saved for later use. For that, just click on the Save button at the end of the popup.

For other elements, you need to use the Basic Modules option. You also have several other elements that you can add to your layout like buttons, accordions, pricing tables, maps, countdown timers and a lot more.

You simply need to drag the elements from the right and drop it in the visual builder on your left. Each of these elements is customizable. So for example, if you want to add a new heading, just click on Heading and drag and drop it in your layout. After that click on the Heading element to customize it.

You’ll have 3 different tabs here. General, Style and Advance. The first one lets you add your texts, links, etc. to your headings. The second tab lets you style your heading with different colors, fonts, etc. The Advanced option lets you work on the margins, visibility, responsiveness, animation, etc.

You can add as many elements and modules as you want by using the same method and then customize it to meet your requirements.

After you have edited your layouts, click on the Done button on the top right corner of your screen. You’ll see a new popup with several different options like the ones shown in the screenshot below.

Using these options you can either Save your draft, Publish it or discard it.

Step 3: Reusing Your Layout

Beaver Builder also lets you save your custom WordPress layout and reuse it anytime you want. To use this option, go to Tools on the top right corner of your screen. You’ll see the following options on your screen.

Now depending on your requirements, select the option. If you want to use the template for later use, click on the Save Template option and then name your layout. After that hit the Save button.

Step 4: Managing Your Templates

The layouts that you create with Beaver Builder can be used on unlimited websites. The templates created by its users are stored in a custom post type called templates.

By default, this option is hidden. You can make it visible by going to Settings » Page Builder » Templates tab.

Now click on the Enable Templates Admin option and hit the Save Template Settings button. Upon doing this, you’ll notice a new menu item named Templates appearing in your WordPress admin bar. All page layouts that you save as a template will appear on that page.

Exporting Your WordPress Layouts

Since the layouts you create are saved as a custom post type, you can easily export your Beaver Builder templates. For this, you have the built-in export feature in WordPress. To use this feature go to Tools » Export page.

Now select Templates. Click on the dropdown arrow and select the template you want to export. After that, hit the Download Export File button and WordPress will send an XML file for you to download.

Importing Beaver Builder Layouts

To import a layout, go to the dashboard of the website where you want this layout to be imported. Now go to Settings » Import » WordPress. Click on the Install Now option under the WordPress tab. This will download and install the WordPress importer plugin.

Once the plugin is downloaded, you can upload the XML file that you’ve just downloaded. Your layout is now ready to be used on your other site as well.

And that’s it. We hope you liked our article. If you did, you might also want to know some of the other Beaver Builder alternatives you can try out.

Description

Stop wasting time importing, exporting, sorting, digging through, and organizing JSON files on your hard drive or in the cloud. WP Layouts is by far the best way to organize, import, and export your layouts,
especially if you have multiple websites. Save, store and import layouts instantly, all in one place with the click of a button – WP Layouts will change the way you use layouts forever!

Compatible with the WordPress block editor (Gutenberg), Divi Builder (plugin and Divi/Extra theme), Elementor, and Beaver Builder!

All layouts in one place

No more moving content between sites using file-based imports and exports! Now everything is a simple click away.

Easy search with thumbnail images

Grid view displays thumbnail images of all your layouts, making it much easier to find the one you’re looking for.

WP Layouts are exported with CSS and images

Your layouts will look exactly the same on any website with images and CSS preserved with the export.

Expertly designed WP layouts

Your free WP Layouts account comes with over 20 free layouts!

Get Started!

Check out the installation tab for instructions on installing the plugin and creating your free account. Then, take a look at the demo video or quick start guide for the page builder of your choice:

WordPress Block Editor (Gutenberg)

Divi

Elementor

Beaver Builder

Our story: How we created WP Layouts

WP Layouts happened entirely by accident.

You see, we built WP Layouts to solve our own pain points.

We were tired of the time it took importing, exporting and storing layouts the old way and frankly, we’d rather spend our time doing other things like building new layouts.

We knew there had to be a better, more efficient workflow so we created it!

Since then, WP Layouts has revolutionized the process for our team so much that there’s no way we’ll ever go back. And we’re positive that once you try it, you’ll never want to go back either.

So what were our pain points?

The Old Way Was Too Slow

One of the main advantages to building with layouts is that it’s so much faster than starting from scratch. But it was never quite as fast as we wanted it to be.

Our Layouts Didn’t Follow Us From Site to Site

Even the super-useful Divi Library has limitations. The Divi Library makes life a lot easier for website creators because it allows you to save layouts you’ve already created — or layouts you’ve bought — for easy access when you’re building the other pages on your site. This way, you only have to upload it once, and it’s available every time you want to use it to create another page or another module on the same website.

The problem is your layouts don’t follow you from site to site. So if you’ve got a personal collection of layouts that you use over and over to build websites, you need to upload them to each website individually.

Digging Through External Stored Files

Having to upload to each website each time meant going through multiple steps, including finding the right layout either on your hard drive or in a folder somewhere in the cloud, like in Dropbox or Google Drive. Depending on how many layouts you have — and if you make websites for a living, you probably have a lot of them, like we do — this in itself can be a source of frustration.

The Import/Export Process Was Crashing Our Server

The breaking point came when the process of importing layouts started crashing our, and our clients websites. For a while, every time we imported a layout, the site went down. To say this was extremely frustrating is an understatement.

But there was a silver lining to our pain.

Out of necessity, we took a look at the existing process of importing and exporting layouts, and found much to be desired. So our developers got to work building a better import/export protocol — again, for our own use, just so our site would stop crashing.

But our developers, being the clever bunch they are, realized there was so much more we could do with the import/export process beyond just making it more stable.

If we were going to invest time and energy into changing the way the process worked, we might as well go all the way and create a system that would really make our work easier and our lives better.

So we thought:

• Why not have our own cloud storage specifically designed for storing and organizing layouts?
• And why not make it easy to organize, and even easier to search by including thumbnail images?
• And why not integrate it directly into the WordPress Dashboard and the most popular WordPress builders (i.e., Gutenberg, Divi, Elementor, and Beaver Builder)?
• And why not make it super simple and easy to save your current page layout, a section of the page — or even child theme – directly to your library, complete with all content, css and php files?
• Hell, why not just cut out every intermediate step and make it so easy that all you have to do is click a button, and you can import or export a layout to or from your website?
• So that’s what we did.

And it was everything we hoped it could be, and more. It validated the feeling we always had that there was something that just wasn’t quite right about the old way.

In fact, everything that was wrong with the old way was now painfully obvious, because we had made something that was so much better.

It didn’t take long for us to realize this wasn’t just better for us, it was better for everyone. We saw pretty much right away that this was how everybody should be storing, importing, and exporting their layouts.

So we made it available to everyone. And that’s how WP Layouts was born.

But wait…there’s more! (Sorry, I couldn’t resist :))

Our layouts are some of our most popular products. And there’s a good reason for that. I say this a lot, and I genuinely mean it: I would put our team of developers and designers up against any team in the world.

Using the layouts that our team creates, you can make websites that will absolutely knock people’s socks off.

So we’ve included a whole bunch of them for free!

This is great if you’re a developer or designer who is just starting to branch out into making websites for a living, because it will immediately give you a fantastic library of layouts to build off of. And as you create your own dynamite layouts, you can save those in your WP Layouts library as well. So you’ll always have super convenient, one-click access to all of your favorite layouts, whether you made them yourself or got them from somewhere else.

It’s also great if you’re a developer or designer with a little more professional experience under your belt, and you could use a few fresh new designs in your arsenal.

In fact, we believe anybody creating websites should have these layouts at their disposal. We think you’ll end up coming back to them over and over again.

So when you take everything together:

• The enhanced stability (no more crashes!)
• The super-streamlined one-click import / export process
• The intuitive, easy to navigate library with thumbnails and search functionality
• The free collection of amazing layouts, with easy access to a treasure trove of some of the best layouts on the web

…we truly believe that we’ve created the ultimate plugin for importing/exporting, storing, and managing your layouts. Use it for two weeks (heck, even one day), and you won’t even be able to imagine going back to the “old way.” I guarantee it.

Start using WP Layouts today!

One of the things that makes WordPress special is the community of developers, designers, WordPress business owners, and everyone else who uses the platform, whether it’s for business, hobby, or other personal use.
And one of our guiding principles is that we want to contribute to this community in ways that helps everyone do what they do, and do it better. And that’s equally true for WP Layouts. We’re extremely confident that you’re going to absolutely love WP Layouts.

Thanks for being part of the community,

WP Layouts Team.

P.S. Sorry for the long introduction. People tell me all the time that I talk too much ;). But I wanted to make it clear how excited I am for you to start using WP Layouts, because I know what a difference it’s going to make for you. Thanks again, and drop us a line sometime and let us know what you think about the “new way”!

Important Notice

WP Layouts plugin stores and retrieves layout data on/from the WP Layouts server(s) using the WP Layouts API,
which is an external service provided by WP Layouts (https://wplayouts.space/). You will need to
set up a free account with WP Layouts in order to use the service. Use of the service is subject
to the following:

• Terms and Conditions: https://wplayouts.space/legal/
• Privacy Policy: https://wplayouts.space/privacy-policy/

Installation

1. Click “Plugins” > “Add New” in the WordPress admin menu.
2. Search for “WP Layouts”.
3. Click “Install Now”.
4. Click “Activate Plugin”.

Alternatively, you can manually upload the plugin to your wp-content/plugins directory.

Once you have installed and activated the plugin, click the WP Layouts item in your WordPress admin menu. If this is your first time using WP Layouts on this site, you should see a login form. If you haven’t already, create you free account on the WP Layouts site – you will be redirected to a checkout screen, but don’t worry, we aren’t asking for payment details or charging you anything for your free account! Once your account is set up, enter your email and password in the WP Layouts screen on your site to connect the plugin to your WP Layouts account.

To get started, check out the demo video or quick start guide for the page builder of your choice:

WordPress Block Editor (Gutenberg)

Divi

Elementor

Beaver Builder

FAQ

Yes, you can use it on client’s sites. You can use any design that is included in the WP Layouts on client’s websites without any attribution.

We support layouts with a combined size (content, images, etc.) up to 25 MB.

Yes, WP Layouts plugin is compatible with WordPress multisite.

You can activate WP Layouts plugin on the network admin dashboard or activate on each site admin panel individually.

• Divi Builder Plugin
• Divi Theme
• Extra Theme
• Gutenberg
• Elementor Free and Pro Versions
• Beaver Builder Free and Pro Versions

This may happen if you preview multiple layouts in quick succession. Please try previewing the layout again.

Our thumbnail generation feature still needs refinement. Please bear with us for the time being!

To change the name of your layout stored in your My Layouts collections, go to WP Layouts -> My Layouts. Click the layout. You will see a new window that appears to the right. Type in the new name and click Save.

Blogspot Layout

To remove a layout from your collections, go to WP Layouts -> My Layouts. Click the to-be-deleted template. You will see a new window that appears to the right. Click Delete button.

Wordpress Website Templates

Please make sure you are running Elementor version 2.7 or higher, as we do not support prior versions.

If you want to change your e-mail, please contact support.

You can reset your password here.

Reviews