Tag - Page

How to Create a Custom Home Page in WordPress


Often users ask us if it’s possible to create a custom homepage in WordPress.

By default, WordPress shows your blog posts on the homepage. However as a business website, you may want to create a more engaging homepage that helps users find what they need and boost your sales conversion.

In this article, we will show you how to easily create a custom homepage in WordPress. We will show multiple methods, and you can choose the one that’s easier for you.

Creating a custom homepage in WordPress

What is a homepage?

A homepage is a default introductory page or the frontpage of a website. It is the page that appears when someone enters your website’s domain name in their browser’s address bar.

Homepage example

The main purpose of the homepage is to introduce users to your website or business. Ideally, it should provide users essential information about your business, so they can continue exploring other pages on your site.

By default, WordPress displays your recent blog posts on the homepage. This is not good as it only shows a few of your current articles.

If you run a business website, then the default homepage does not tell users about your business, products or services. It also doesn’t provide users a way to contact you.

The good news is that WordPress already comes with a built-in functionality to create custom home page.

Selecting a Custom Page to be Used as Homepage in WordPress

WordPress allows you to easily use any page on your website as your homepage. You can simply go to Pages » Add New page inside WordPress admin area to create a new page.

Let’s give this page a title ‘Home’ and publish it. You will use this page as your custom homepage.

Don’t worry about layout or design at the moment. We will show you how to design your homepage later in this article.

Now, if you want to run a blog on your site, then you need to create a separate blog page to display your posts.

Once again, go to Pages » Add New page and create a page titled ‘Blog’. Go ahead and publish the blank page.

After creating the pages, you need to visit Settings » Reading page in your WordPress admin. From here select ‘A static page’ option under ‘Your homepage displays’ section.

Select home and blog pages

Next, you need to select the homepage and the blog pages you created earlier.

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

Now that you have set up a page to be used as your custom homepage, let’s start designing the custom home page for your WordPress site.

Method 1. Create a Custom Homepage in WordPress using Gutenberg

WordPress introduced a new block-based eidtor called Gutenberg in December 2018. This new editor allows users to not just write content but create beautiful layouts as well.

It uses blocks for each content element which enables you to organize content blocks to create a page structure that you like.

WordPress includes blocks that can be used for design purposes like cover images, columns, tables, text and media, galleries, and more.

Editing your custom homepage layout using Gutenberg

Each block comes with its own settings, which allows you to customize its appearance to meet your design requirements.

You can extend available blocks with Gutenberg block plugins to add more blocks to your arsenal. These plugins allow you to use advanced elements like testimonials, sliders, services, and other common design features.

Using advanced block library plugins to make homepage layout

You can also use Gutenberg ready WordPress themes which give you more flexibility to work with blocks.

We recommend using Astra, it comes with Gutenberg website templates that you can install using their Astra Starter Sites plugin.

Once you import a template, you can edit it using the default WordPress editor and create a highly professional looking homepage for your website.

Method 2. Create a Custom Homepage in WordPress using Page Builders

This method is very easy and does not require any coding or design skills. For this method, you will be using a WordPress page builder plugin.

A page builder plugin allows you to easily create custom page layouts by using a simple drag and drop interface.

We recommend using Beaver Builder because it is the most beginner-friendly page builder plugin on the market. It comes with dozens of custom homepage templates that you can install with a single click.

Once installed, you can edit the template using point and click tools. You can replace content and images with your own content, and even extend the template by adding more modules, widgets, and sections.

Creating a custom homepage using Beaver Builder

Beaver Builder also gives you access to Beaver Themer, which allows you to make your own custom WordPress theme without writing any code.

For more details, see our guide on how to easily create custom WordPress layouts using Beaver Builder.

As an alternative, you can also try Elementor. It is also an immensely popular WordPress page builder plugin. It also comes with drag and drop templates and an easy to use interface.

Creating a homepage layout using Elementor

For details, see our tutorial on creating custom page layouts with Elementor.

Method 3. Manually Create a Custom Homepage in WordPress (Coding Required)

This method is not recommended for beginners as it requires coding. You need to be familiar with the WordPress coding practices, PHP, HTML, and CSS to use this method.

Let’s see how this works.

Your WordPress theme is made up of different files. Some of these files are called templates and control the display of certain areas of your website. See our WordPress template hierarchy cheat sheet for more details.

One of these templates is called front-page.php. If your theme has this template, then WordPress will automatically use it to display your custom homepage.

front-page.php template

However, if your theme does not have it, then you can create one for yourself/

Simply create a blank file and save it as front-page.php. After that you need to upload it to your current theme’s folder on your WordPress hosting account using FTP.

As soon as you upload this file, WordPress will start using it to display your homepage. However, since this file is completely empty, you will see a blank white page.

To fix this, you can start adding your HTML code to display contents of your custom homepage. An easier approach is to use the existing code and templates in your WordPress theme.

For example, you can use the same header and footer. WordPress makes it super easy to include those templates.

Here is a sample code where we removed the content and sidebars while preserving the header and navigation templates from the theme.

<?php /* 
This page is used to display the static frontpage. 
*/ 

// Fetch theme header template
get_header(); ?>
	<div id="primary" <?php astra_primary_class(); ?>>

	<div class="custom-homepage-container"> 

	You custom homepage code goes here

	</div> 

	</div><!-- #primary -->
//Fetch the theme footer template 
<?php get_footer(); ?>

Tips on Making an Effective Custom Homepage in WordPress

Your website’s homepage is the most important page on your website. Users look at it to learn more about your business, products, and services.

We recommend keeping your homepage design as simple as possible. On our own websites, we have learned that our users find simpler layouts more helpful.

Try to avoid clutter, but don’t hide important information that your users would want to see on the homepage. You also need to prioritize which content appears first in your layout.

Write down the goals you want to achieve before making a custom homepage for your website. This exercise will help you come up with a clear design goal.

For most businesses and blogs, the number one goal is to convert website visitors into customers. To achieve this, you’ll need OptinMonster.

It is the best WordPress popup plugin and lead generation software. It helps you convert website visitors into subscribers and paying customers.

Next, you would want to track how your custom homepage is performing. For this, you need to install Google Analytics on your website. It helps you see where your users are coming from and what they do on your website.

You would also want to make it easier for your users to contact you. For this, you will need the WPForms plugin which is the best WordPress form plugin on the market.

You can also add a click to call button your website, so people can easily call your business phone.

Lastly, we recommend you to look around at your competitors and other popular sites in your industry/niche. We are not asking you to copy their design, but to learn from their best practices and then apply it on your own homepage layout.

We hope this article helped you easily create a custom homepage in WordPress. You may also want to see our proven tips to increase your blog traffic.

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 How to Create a Custom Home Page in WordPress appeared first on WPBeginner.



Source link

60 Best Landing Page Templates for WordPress (2019)


Are you looking for the best landing page templates for WordPress?

Landing pages help you get more leads and increase conversions. They are designed to guide users towards taking the required actions on your website.

In this article, we will share the best landing page templates for WordPress to help you get more sales and conversions.

Best landng page templates for WordPress

Bonus: some of these templates offer 100% drag & drop functionality, so you can easily customize it to match your needs within few minutes.

Best Landing Page Templates for WordPress

Landing page templates are focused on achieving an objective or goal like getting more subscribers, boost your sales, etc.

There are many landing page plugins that you can use to create a landing page on your WordPress website. You will also find dozens of landing page templates that are designed specifically for certain industries and goals.

The best way to build landing pages in WordPress is to use a drag and drop page builder, so you can easily customize the landing page without writing any code.

Below are the top landing page design providers that we recommend:

Elegant Themes Divi

Divi

Elegant Themes Divi is a popular WordPress page builder that you can use to design your landing page templates. It has multiple built-in elements and content modules to add on your page. Divi Builder allows you to click and type the text anywhere on the layout. It comes with responsive editing and looks great on all devices.

You can fully customize each element with the drag and drop builder. It gives you complete control over the fonts, colors, background, and spacing. Divi offers over 100 pre-built landing page templates with demos that are ready to use.

Beaver Builder

Beaver Builder

Beaver Builder is a powerful WordPress page builder plugin. It comes with multiple landing page templates for fashion, photography, web agency, education, mobile apps, etc. With Beaver Builder, you can drag and drop the content on your landing pages quickly. It allows you to organize your text and images in the columns to create beautiful custom page templates.

The best part with Beaver Builder plugin is that it works with all simple WordPress themes. It offers live, front-end editing for easy customization. It fully supports WooCommerce, multisite network, and WPML for translations.

Themify Ultra

Themify Ultra

Themify Ultra is an all-purpose WordPress theme with a full-width background image. It ships with Themify drag and drop builder that works similarly as Divi Builder or Beaver Builder. You can use this page builder to design your custom page templates. It also offers pre-built landing page templates that reduce the efforts and save time.

It has smart layout options for header, sidebar, footer, and other parts of your website. Themify Ultra has parallax scrolling for both vertical and horizontal layouts.

Astra

Astra

Unlike the solutions above, Astra is not a page builder. It is a fast and lightweight WordPress theme that’s designed to work with drag & drop page builders like BeaverBuilder.

The best part about Astra is that it comes with dozens of ready-made websites and page templates. You can install the Astra theme and use these templates to create landing pages for fitness, manufacturing, transport services, barber shop, musical bands, etc. The theme fully supports WooCommerce.

Best Landing Page Template Examples

The above theme and plugin companies have a variety of landing page templates. We have also added several other top theme companies offering templates that can be used to create landing pages.

Let’s take a look at our expert pick of the best landing page templates for WordPress.

1. Divi Cafe

Divi Cafe

Divi Cafe is a WordPress landing page template for cafes, restaurants, and food-related businesses. It has a simple design with a full-width layout featuring images and content beautifully. You can also use this landing page template to showcase your featured content and case studies.

2. Divi Interior

Divi Interior

Divi Interior is a modern landing page template for interior designers, house decorators, and architects. It has an attractive design and offers the space to display eye-catching images in a full-width layout. You can also add featured content side by side with images.

3. Divi Elegant

Divi Elegant

Divi Elegant is a beautiful landing page template for digital and web agency. It has multiple folds or sections to add your featured work, team members, images, testimonials, etc. You can use the Divi Builder to customize each section and change the order of the built-in template.

4. Extra

Extra

Extra is a powerful WordPress theme with tons of amazing landing page templates for online magazines, fashion websites, and lifestyle blogs. It uses the Divi Builder to drag and drop elements on the template. The theme is fully customizable and let you create multiple landing pages to boost your readership.

5. Beaver Builder Small Business

Beaver Builder Small Business

Beaver Builder’s Small Business landing page template is designed with a focus to help you get more customers online. It offers multiple sections to add content, CTA, featured services, and images. You can fully customize the background, fonts, colors, and buttons using Beaver Builder plugin.

6. Beaver Builder Crossfit

Beaver Builder Fitness Gym

Beaver Builder’s Crossfit landing page template is perfect for the websites of gyms, fitness institutions, and health advisors. It comes with a full-width background image and custom logo. Below you can add fitness schedules, programs, etc.

7. Beaver Builder Editorial

Beaver Builder Editorial

Beaver Builder’s Editorial landing page template is for bloggers, writers, and fashion-related websites. It has the space to add attractive fullscreen images. You can use the Beaver Builder drag and drop builder to showcase featured content with the image.

8. Beaver Builder Law Firm

Beaver Builder Law Firm

Beaver Builder’s Law Firm is a landing page template designed specifically for lawyers, legal clinics, and corporate law firms. It has a simple layout to add your text, CTA button, and services professionally. You can add further details about your team and more in the sections below.

9. Beaver Builder Photography

Beaver Builder Photography

Beaver Builder’s Photography landing page template allows photographers to share their profile and portfolio with style. It has a dark layout with crisp typography using beautiful fonts. You can fully customize the template with the page builder.

10. Beaver Builder Musician

Beaver Builder Musician

Beaver Builder’s Musician landing page template is built for the DJs, music bands, instrumentals, and musicians. It comes with an attractive design and sharp colors to get users’ attention. The template has sections to sell tickets of your shows and share details about your band.

11. Beaver Builder Restaurant

Beaver Builder Restaurant

Beaver Builder’s Restaurant landing page template is fully focused on promoting restaurants, food, and eateries. It has a dark layout with elegant typography. The overall design is spacious making page contents more noticeable, and you can use Beaver Builder page builder plugin to customize the background, colors, fonts, etc.

12. Beaver Builder Fullscreen

Beaver Builder Fullscreen

As the name suggests, Beaver Builder’s Fullscreen landing page template is an elegant layout for all types of websites. It has full-width background images and bold colors that make the content readable. You can add the CTA button to redirect users to the important pages.

13. Beaver Builder Creative Agency

Beaver Builder Creative Agency

Beaver Builder’s Creative Agency template for landing pages is perfect for getting more leads online. It has beautiful colors and crisp typography. The template is designed for creative and web agencies to share their portfolio in a professional style.

14. Beaver Builder eBook

Beaver Builder eBook

Beaver Builder’s eBook landing page template is designed for authors, eBooks, libraries, and blogs. It has a stunning book-cover like layout to showcase your featured book and make more sales. You can add all the details of your book and build user interest to take further action on your website.

15. Beaver Builder Educational

Beaver Builder Educational

Beaver Builder’s Education landing page template is perfect for universities, colleges, and educational institutions. It allows you to add a welcome message with a beautiful background image. You can also display courses offered by your university with clear call-to-actions.

16. Beaver Builder Automotive

Beaver Builder Automotive

Beaver Builder’s Automotive is an excellent landing page template for cars, automobiles, and showrooms. It has an attractive and adventurous first impression. You can customize the background, colors, fonts, and content with Beaver Builder page builder plugin.

17. Beaver Builder Mobile App

Beaver Builder Mobile App

Beaver Builder’s Mobile App landing page template is a fully customizable layout for mobile games, apps, and mobile-based solutions. It has a white background with a large image on the front. It offers different sections to add text and call to action buttons.

18. Beaver Builder General Business

Beaver Builder General Business

Beaver Builder’s General Business template is designed to create landing pages for all kinds of business websites. It has a beautiful layout with a custom background image. The template allows you to add content and CTA button in the first section. You can use Beaver Builder drag and drop page builder for any customization.

19. Beaver Builder Construction

Beaver Builder Construction

Beaver Builder’s Construction landing page template is for the websites offering construction services. It has a beautiful design with a full-width background image and stylish typography. It includes sections to add your services and call to action button.

20. Beaver Builder Coming Soon

Beaver Builder Coming Soon

If you want to create a coming soon and maintenance mode page, then Beaver Builder’s Coming Soon template is a perfect choice. It has a customizable design with a newsletter subscription form to get more subscribers. You can use the Beaver Builder page builder to change background and colors easily.

21. Astra Fitness Trainer

Astra Fitness Trainer

Astra’s Fitness Trainer is a landing page template for fitness coaches, trainers, health instructors, and gyms. It looks like a full page website, but it focuses on promoting personal coaches with schedules, training rates, testimonials, clients, etc.

22. Astra Psychiatrist

Astra Psychiatrist

Astra’s Psychiatrist is a WordPress landing page template for medical, doctors, psychiatrists, and hospitals. It has a full-width background image with introduction, text, and CTA. You can add other details below the main banner.

23. Astra Product

Astra Product

Astra’s Product is a perfect landing page template for products. It appears as a complete website with bright colors, navigation menu, featured images, and text. You can also add blurbs and CTA in the sections below. This template is WooCommerce friendly and can be edited with any top page builders.

24. Astra Custom Printing

Astra Custom Printing

Astra’s Custom Printing landing page template gives a clear message to customers to get their t-shirts and mugs customized. It has a simple and neat design with a white background. You can customize the colors, fonts, and background for the template to make it more attractive.

25. Astra Spa

Astra Spa

Astra’s Spa landing page template offers an attractive full-width header background with custom text and phone number to let the users connect with your spa company directly. It has an appointment booking button alongside the navigation menu. You can use the page builders to customize the template as you want.

26. Astra Dental Clinic

Astra Dental Clinic

Astra’s Dental Clinic landing page template is a perfect choice for dentistry and medicals. It allows you to add a number in the header, a CTA button with a text message, and a full-width image. You can add the appointment booking form on the CTA button to boost your sales.

27. Astra Agency

Astra Agency

Astra’s Agency landing page template for WordPress websites is built for web agencies, designers, and developers. It has multiple layout designs with beautiful colors and typography. You can showcase your portfolio and featured work as images to create a powerful first impression on users.

28. Astra Jewellery

Astra Jewellry

Astra’s Jewellery landing page template is beautifully designed to get your users’ attention. It has a dark-colored layout that helps you showcase the jewelry photos and text prominently. It’s compatible with WooCommerce to add cart options on your landing page.

29. Astra Lawyer

Astra Lawyer

Astra’s Lawyer landing page template is for the lawyers and law firms to get new clients online. It displays your address and phone number in a professional way so your customers can contact you easily. It has space for a tagline to impress the visitors.

30. Astra Hotel

Astra Hotel

Astra’s Hotel landing page template is an excellent choice for hotel websites, BnBs, and hotel-related businesses. It has a CTA button to add room booking option to boost your sales. You can add a fullscreen background image of your hotel with an impressive tagline to get users’ attention on the page.

31. Astra Author

Astra Author

Astra’s Author landing page template is a beautiful and attractive layout for writers, authors, libraries, and booksellers. It allows you to showcase the featured book on the front with an image of the book cover and a short text. You can also add the author’s name and other details.

32. Astra Winery

Astra Winery

Astra’s Winery landing page template is built for the wine shops, vineyards, and wine sellers. It has a storytelling layout making it easier for you to create user engagement. It allows you to add an image of your best wine with details and CTA button.

33. Astra Photography Portfolio

Astra Photography

Astra’s Photography Portfolio landing page template is perfect for photographers to showcase their portfolios professionally. You can use the drag and drop page builders to add text with photos easily. It has a white background that adds sharpness to your content.

34. Astra Freelancer

Astra Freelancer

Astra’s Freelancer landing page template is designed for individuals who want to get more online jobs. It has a simple and neat layout with beautiful colors to create a professional first impression. The freelancers can use this template for their introduction to visitors.

35. Astra Charity

Astra Charity

Astra’s Charity landing page template is built with a motive to add more donors to your cause. It is perfect for non-profit organizations, online charities, and NGOs. It has bold and bright colors with excellent readability. The template allows you to add a donate button so the visitors can easily connect with you.

36. Astra Real Estate

Astra Real Estate

Astra’s Real Estate landing page template is a modern and stylish template for real estate agents. It helps in the expansion of your real estate business with its features and options. It displays a quick form template on the front for users to get connected quickly. The template has space to add your phone number and CTA button.

37. Astra Artist

Astra Artist

Astra’s Artist landing page template promotes the artist, agencies, and painters. It is divided into sections to add your featured paintings and other artwork beautifully. You can add the details of your artwork and add a CTA button to redirect users on the cart page. It supports WooCommerce to sell your work online.

38. Astra Nature

Astra Nature

Astra’s Nature landing page template is designed for agencies working on natural habitats. It’s also a perfect choice for nature photographers, nature lovers, and travelers. It comes with an eye-catching background image and CTA button.

39. Astra Financial Advisors

Astra Financial Advisors

Astra’s Financial Advisors landing page template is perfect for large businesses who want to display their financial reports online. It’s a professional template with an elegant and modern design. The template is page builder friendly and compatible with WPML.

40. Astra Conference Event

Astra Conference Event

Astra’s Conference Event landing page template helps in promoting your conferences and events. It allows you to add the details of your event, including date, image, and title. You can also sell tickets online by adding a CTA button on top of the page.

41. Astra Marketer

Astra Marketer

Astra’s Marketer landing page template is for the websites of content and growth marketers. It has bold and bright colors in the background with crisp typography. The template is perfect for individual marketers to get leads and give consultancy online.

42. Astra Industry

Astra Industry

Astra’s Industry landing page template is built for industries. It has a custom background image, CTA button, and about section. This page template is fully customizable using the drag and drop page builders and WordPress live customizer.

43. StudioPress Aspire

StudioPress Aspire

StudioPress Aspire is an elegant WordPress theme with bold and bright colors. This template is built on top of the Genesis theme framework. It has a full-width header background image and a subscription box in the header to increase your subscribers. This theme is perfect to create a landing page for any website.

44. StudioPress Monochrome

StudioPress Monochrome

StudioPress Monochrome is a minimalistic WordPress theme with a simple and neat design. It uses black and white color for the background of the template. The font is inverse to the background and highly readable on all screen sizes. You can use this theme as a landing page template to promote your online business.

45. StudioPress Infinity Pro

StudioPress Infinity Pro

StudioPress Infinity Pro is a stylish WordPress theme for digital agencies. It has an elegant design and ready to be used as a landing page template. It allows you to add a CTA button and redirect your users to the products page, which helps to boost your sales. Infinity Pro is fully compatible with WooCommerce to create an online store.

46. StudioPress Parallax Pro

StudioPress Parallax Pro

StudioPress Parallax Pro is a beautiful WordPress storytelling theme. Like its name, the theme has a parallax design which makes your content readable on all devices. This theme is perfect to create your landing page template with a CTA button and featured content.

47. StudioPress Showcase

StudioPress Showcase

StudioPress Showcase is an eye-catching WordPress theme that can be used to create a landing page template. It’s built on top of the Genesis theme framework. The theme is fully customizable with a CTA button to redirect users to relevant pages.

48. StudioPress Agent Focused

StudioPress Agent Focused Pro

StudioPress Agent Focused is a WordPress real estate theme. It has a flexible and page builder friendly layout. It allows you to add a custom header with a full-width background. You can use this page template to promote your real estate and IDX listings.

49. StudioPress Education

StudioPress Education

StudioPress Education landing page template is focused on delivering more content in lesser space. It’s built specifically for students, universities, and other educational institutions to share knowledge. This template is widgetized and easy to set up.

50. Themify Ultra Accountant

Themify Ultra Accountant

Themify Ultra’s Accountant landing page template is designed to sell tax returns and filing services online. It allows you to add a CTA button for users to book an appointment directly from your website. You can also share your featured services on the template.

51. Themify Ultra Wedding

Themify Ultra Wedding

Themify Ultra’s Wedding landing page template is an elegant template to promote wedding planners, wedding photographers, and individual weddings. It has a fullscreen background image with beautiful typography. The template is customizable using the Themify page builder.

52. Themify Ultra Software

Themify Ultra Software

Themify Ultra’s Software landing page template is perfect for getting online jobs for software development. It has a custom built layout with multiple ready-made demos. This template is similar to the Ultra theme template with a focus on selling services online.

53. Themify Ultra Coffee

Themify Ultra Coffee

Themify Ultra’s Coffee is a landing page template for the websites of coffee houses, coffee beans industries, and other coffee related products. It has a beautiful background image showcasing coffee beans and spilled coffee extracts. It displays a CTA button to redirect users to important pages.

54. Themify Ultra Music

Themify Ultra Music

Themify Ultra’s Music landing page template focuses on promoting musicians, DJs, music bands, and instruments. It also allows you to display your upcoming events in a professional style. The template is fully customizable using drag and drop page builder.

55. Themify Ultra App

Themify Ultra App

Themify Ultra’s App landing page template is built for the apps of mobile and all other devices. You can use this template to promote app development services online. This landing page template helps you boost the downloads of your featured apps with a CTA button.

56. Bento

Bento

Bento is a free and all-purpose WordPress theme to create landing page templates. It comes with unlimited color options, vector icons, fonts, and custom background. It integrates WooCommerce to promote your product pages. Bento can be edited using WordPress live customizer with preview.

57. OnePress

OnePress

OnePress is another free WordPress template to create landing pages for creative and web agencies, freelancers, bloggers, and newspapers. It has 2 CTA buttons to redirect users to your services and product page. You can also add featured services in the blurbs below.

58. Hestia Pro

Hestia Pro

Hestia Pro is a popular single-page WordPress theme with a fullscreen background image. It can be used as a landing page template to promote any business. It’s compatible with drag and drop page builders like Elementor, Beaver Builder, etc to customize the layout. Hestia supports WooCommerce to promote your products.

59. Orfeo

Orfeo

Orfeo is a multipurpose and free WordPress theme. It has a single page layout with multiple sections to create a landing page template. It is easy to customize using drag and drop page builders. This theme is compatible with WooCommerce and WPML.

60. Zelle

Zelle

Zelle is a premium one-page layout for WordPress websites. It is perfect to create landing page templates easily. It works excellent with page builders like Visual Composer, Beaver Builder, etc. It comes with unlimited colors, custom backgrounds, and optimized for speed.

Final Thoughts

These are just some of the landing page templates that we could share. The key to building landing pages is to use a drag and drop page builder like Beaver Builder or Divi.

You can use these two to create infinite possibilities of design combinations within just minutes.

If you’re looking for a non-WordPress landing page solution, then we recommend using either LeadPages or Unbounce.

Both of these providers offer hosted landing page solutions and comes with hundreds of pre-made designs that you can choose from. A lot of marketers focusing on PPC end up using these solutions due to their ease of use.

Here’s an example of the goal focused templates that LeadPages offer:

LeadPages Landing Page Templates

Our first preference is to always to use a WordPress page builder like Beaver Builder or Divi because you’ll save a lot of money in the long run.

To put in perspective, the annual cost of a WordPress page builder plugin is 12 times cheaper than the hosted landing page builders.

We hope this article helped you find the best landing page templates for WordPress. You may also want to see our ultimate step by step WordPress SEO guide for beginners.

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 60 Best Landing Page Templates for WordPress (2019) appeared first on WPBeginner.



Source link

Gutenberg vs WordPress Page Builders


As more users upgrade to WordPress 5.0, we’ve been asked several times if the new WordPress block editor, Gutenberg, is meant to be a replacement for drag and drop WordPress page builder plugins.

The new WordPress block editor is quite powerful and allows you to build beautiful content layouts. However, it’s no match for the powerful page builder plugins.

In this article, we will compare Gutenberg vs WordPress page builder plugins to help you understand the real difference. We’ll also share future roadmap of Gutenberg to help you see how it will change in the future.

Gutenberg vs Page Builder Plugins

Gutenberg vs WordPress Page Builder Plugins (Explained)

Gutenberg is the new default WordPress editor. It uses blocks to add and arrange content elements for posts and pages, hence the name block editor.

New WordPress editor called Gutenberg

Since Gutenberg allows you to easily add custom content styles and drag & drop element, it’s easy to get confused and start calling it a page builder.

But it’s not anywhere close (at least not yet).

WordPress page builder plugins are drag and drop design tools that allow you to create completely custom website designs without writing any code.

Creating a page with Beaver Builder best page builder plugin

Top WordPress page builders like Beaver Builder, Divi, and Visual Composer are significantly more powerful. They come with ready-made templates that you can use and offer a lot more design flexibility than Gutenberg.

Let’s take a deeper look at the differences between Gutenberg vs Page Builders to get a better understanding.

7 Key Difference Between Gutenberg and WordPress Page Builder Plugins

The biggest difference is that Gutenberg is a default WordPress editor and comes built-in with WordPress. On the other hand, page builder plugins are created and supported by third-party developers.

WordPress.org team does not call Gutenberg a page builder. Instead, they call it the block editor, and it’s presented as a modern way to edit content in WordPress.

There’s a big reason for that, and it’ll become very clear as you read the differences between the two.

1. Drag & Drop features

Gutenberg is not a drag and drop page builder (at least, not in its current form). You can add blocks and move them up and down, but you cannot adjust their width / height, add blocks inside other blocks, or create complex layouts using columns and rows.

On the other hand, page Builders allow you to drag and drop blocks/widgets, adjust their height and width, and even create columns and add blocks inside other blocks.

Nested blocks, rows, and columns

2. Theme support and compatibility

Gutenberg relies heavily on your WordPress theme styles. It does add some of its own CSS and even allow you to add custom CSS for blocks, but it doesn’t override your theme styles and settings.

While page builder plugins can work with your theme styles, they also give you the option to completely take over a page and override your theme’s styles. This is extremely helpful if you want to create custom page layouts.

3. Live editing vs backend editor

When you are editing a post or page in Gutenberg, what you see on screen is not a live preview of your actual post or page. Gutenberg is a backend editor, and it does its best to depict what your content will look like when you preview it.

On the other hand, page builder plugins give you an actual live preview of your page as you edit it. You can see exactly how things would appear without saving the page.

Editing pages with live preview

4. Content Layout vs Page Design

Gutenberg blocks give you the freedom to create content layouts, but they’re quite limited. You can use columns, tables, and full-width cover images.

Page builders are more flexible. You can not only add content, but you can also change the whole page layout. They offer more design options for each widget and block.

Creating page designs with page builder

5. Widgets and blocks

Gutenberg comes with a decent set of default blocks covering all the commonly used content elements. You can also save and reuse blocks in other posts and even on other WordPress websites.

It has a powerful API allowing plugin developers to create their own blocks too. All top WordPress plugins already have their own Gutenberg blocks that you can use.

Gutenberg blocks

Page builders come with even more blocks, modules, and widgets. They offer advanced content elements including carousels, sliders, call to action buttons, contact forms, countdown timers, and more. You can also save individual blocks, rows, or entire template to reuse later.

Content modules in Beaver Builder

Popular page builders also have their own APIs allowing other developers to make extensions and blocks. For example, the Ultimate Addons pack for Beaver Builder, and Divi Monk for Divi Page Builder.

6. Formatting and Styling Options

The blocks in Gutenberg come with their own styling and formatting options. However, these options are limited. For more styling and formatting, you’ll have to add your own custom CSS for a block.

Styling options

Page Builders, on the other hand, offer a lot more styling options. You can change background colors of blocks, use gradients, use font-icons, select fonts, line height, adjust width of elements, use styles on images, and more.

7. Scope

The purpose of adding Gutenberg to WordPress is to offer a modern writing experience to users. It is intended to be used by everyone including bloggers, writers, photographers, and businesses.

Page builder plugins provide a visual drag and drop interface to design entire pages. They are intended to be used by small businesses, aspiring designers, WordPress agencies, eCommerce stores, and more.

While Gutenberg helps you create better content, page builder plugins help you create better landing pages that help you increase sales, boost subscribers, and grow your business.

Can or Will Gutenberg Replace WordPress Page Builders?

In its current form, Gutenberg is just a better content editor than what WordPress had before. It is NOT a replacement for the powerful WordPress page builder plugins.

With that said, it is in the WordPress roadmap to expand Gutenberg’s functionality to more areas of the website such as menus, widgets, and even the customizer.

We will have to wait and see the improvements to determine if Gutenberg will ever come close the powerful WordPress page builder plugins.

Which Page Builder Plugin to Use with Gutenberg?

All top WordPress page builder plugins work well with WordPress 5.0, and the new Gutenberg editor. You can take a look at our pick of the best WordPress page builder plugins, and how they stack up against each other.

If you are building a small business website and have little to no technical skills, then we recommend Beaver Builder. It is the most beginner friendly WordPress page builder, and its packed with features.

Our second choice would be Divi. It is easy to use and gives you access to dozens of templates, modules, and a huge community of users.

We hope this article helped you understand the difference between Gutenberg block editor vs WordPress page builder plugins. You may also want to see our guide on how to grow your website on shoestring budget.

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.



Source link

6 Best Drag and Drop WordPress Page Builders Compared (2019)


Looking for an easy way to build and customize your WordPress site? That’s where drag and drop WordPress page builder plugins come in handy.

WordPress page builders allow you to create, edit, and customize your website layout without writing any code. In this article, we will compare the 6 best drag and drop page builders for WordPress.

Best Drag and Drop WordPress Page Builders

Why Use a Drag and Drop Page Builder for WordPress?

When starting a blog, many beginners find it difficult to customize their WordPress page layouts.

While a lot of premium WordPress themes come with different page layouts, most of them are extremely hard to customize for anyone who does not know code (HTML / CSS).

This is why users often ask us questions like: “how can we make WordPress drag and drop?” or “is there an easy drag and drop page builder for WordPress?”

When we talk with people who switch from Weebly to WordPress or from Wix to WordPress, their most common response is: “I wish WordPress had a drag and drop website builder”.

Well, there are several great drag and drop page builder plugins available for WordPress. They allow you to create completely custom website designs in WordPress without writing a single line of code.

Since there are so many different WordPress page builder plugins in the market, we decided to compare and rank the top WordPress page builders, so you can choose the right solution for your need.

Our criteria for comparing these WordPress page builders are: ease of use, flexibility, and the design output.

Having said that, let’s take a look at the best page builders for WordPress in the market.

1. Beaver Builder

Beaver Builder best WordPress page builder plugin

Beaver Builder is a premium drag and drop page builder plugin for WordPress. In our opinion, it is by far the best WordPress page builder in the market.

It is extremely fast and comes with a built in onboarding tour to help you quickly familiarize with their interface.

Beaver Builder comes with a live drag and drop interface. You get to see all your changes as you add them by simply dragging elements from the right sidebar and dropping them on your page. You can click on any element on a page to edit its properties.

There are modules that let you add almost everything you may want including sliders, carousel, backgrounds, content blocks, buttons, and more.

It also comes with over 30 finely designed templates for landing pages that makes it super-easy and super-fast to create stunning website layouts.

We find Beaver Builder to be very beginner friendly. Check out our tutorial on how to create custom WordPress layouts with Beaver Builder.

Wondering if it’s compatible with the new WordPress version? Yes, it is.

Beaver Builder has been updated well along the Gutenberg project. So, it works fine with your new Gutenberg editor.

Pricing: Starting from $99 for Unlimited Sites.

Our Grade: A+

Review: Beaver Builder is the easiest page builder option in the market. It comes with pre-made templates to help you get started. The ability to customize every little detail makes it the perfect solution for WordPress users.

2. Divi

Divi Builder Drag and Drop WordPress Page Builder plugin

Divi is a drag and drop theme and WordPress page builder plugin. It is extremely easy to use and comes with 20+ layouts/templates for different kind of websites.

Just like the Beaver Builder, the Divi Builder is a visual drag and drop page builder, a true WYSIWYG editor (what you see is what you get).

You can directly click on your page and start editing with the real-time preview of all changes. You don’t need to save and click preview to see your new design.

Divi comes with 46 content modules that you can drag and drop anywhere in your layout. You can arrange them in 3 section types, 20 row types, and customize each element using its advanced design settings.

With Divi, you can create any type of custom page layout that you want within minutes. You can then save these Divi layouts for future use on your site. You can also export a layout from one Divi installation into another.

The Divi Builder plugin is the backbone of the Divi theme, yet it works well with any other WordPress theme.

Best of all, Divi has the best pricing out of all options in this. For a single price, you’ll get the Divi theme, the Divi page builder plugin, and all other Elegant Themes products.

This means you can use the Divi theme or install the Divi Builder plugin on any other theme.

Pricing: Starting from $89 per year

Our Grade: A

Review: Divi is a great Beaver Builder alternative. It has a powerful page builder with limitless design possibilities. Their large number of content modules allow you to create literally any type of website that you really want.

3. Visual Composer Website Builder

Visual Composer Website Builder plugin

Visual Composer Website Builder is a user-friendly WordPress website editor that helps you create custom website layouts, fast.

It comes with a simple drag and drop builder, out of box content elements, professional templates, and a host of powerful features to make a website.

Similar to Beaver Builder and Divi, it also provides real frontend editing experience for designing a website. But there’s a lot more you can do with this plugin. Unlike other plugins in the list, Visual Composer Website Builder allows you to edit your logo, menus, headers, footers, sidebars, etc.

That’s why the team decides to call it a website builder, instead of just a page builder.

The plugin features powerful design options to customize the appearance of any element on your page. You have easy options to add stylish backgrounds including parallax, gradient, slideshow, carousel, zoom in/out, video, etc. It also comes with flexible rows and columns for creating grid layouts on your site.

Visual Composer works well with all WordPress themes. This allows you to switch your themes without losing custom layouts that you created with Visual Composer.

It also includes support for the new Gutenberg editor, Google Fonts, and Yoast SEO.

Visual Composer is designed for professionals, and it’s evident by their attention to details such as remembering your color choices, which allows you to easily use the same color palette for consistency throughout your design.

Pricing: $59 For One Site License

Our Grade: A

Review: Visual Composer is a great plugin for beginners to start a website. It provides powerful features for website making in a simple manner. Website editing is made super simple with the real frontend drag and drop editor.

4. Themify Builder

Themify Page Builder Plugin for WordPress

Themify is a popular WordPress theme shop that offer a built-in Themify builder with all of their WordPress themes. For other non-Themify WordPress themes, you can get the Themify Page Builder plugin.

This simple and highly intuitive page builder comes with several ready to use modules that you can add to your pages or posts. Many of these modules usually require you to install separate WordPress plugins.

The plugin includes 40+ pre-designed layouts for different industries like gym, restaurant, portfolio, music, photography as well as online shops.

You can import a layout with one click, change its content, and build an awesome landing page within minutes.

Themify Builder allows you to edit your pages from the admin area as well as from your live site. With live editing, you get to see exactly how your changes will appear on the site.

Apart from that, Themify Builder comes with ready-to-use layouts that you can quickly apply to your page.

Pricing: $39 For the Builder Addon Bundle (The core plugin is free)

Our Grade: B

Review: Themify Builder is a reliable page builder plugin for WordPress. While the builder comes with promising features, there is a learning curve that can leave a new user frustrated.

5. Elementor

Elementor WordPress Drag and Drop Page Builder plugin

Elementor is another powerful drag and drop WordPress page builder plugin.

It is a live page builder plugin which means you get to see your changes live as you edit it with Elementor. Simply start by creating sections and select the number of columns for each section.

You can then drag and drop widgets from the left panel to your section. Elementor comes with tons of widgets including most commonly used website elements.

From basic image and text widgets to advanced accordions, sliders, testimonials, icons, social media, tabs, etc. Each widget comes with its own settings.

Elementor will also let you add widgets created by other WordPress plugins.

Don’t want to build your own layout?

Elementor comes with many ready-to-use templates that you can easily insert into your pages. You can simply point and click to edit any item on the page, replace the content, and you’re done.

Pricing: Starting from $49 for single site license.

Our Grade: B

Review: Elementor is a popular page builder plugin for WordPress. It is fast, easy to use, and comes with tons of modules / templates.

The biggest thing that we don’t like about Elementor is that their license is very restrictive. If you’re a freelancer or agency looking to use Elementor on client websites, please know that their Pro version is not GPL.

You’re better off using Beaver Builder, Divi, or Visual Composer because they respect the WordPress standards and freedoms.

6. Page Builder by SiteOrigin

Page Builder Plugin by SiteOrigin

With more than one million active installs, Site Origin’s Page Builder is a popular free WordPress page builder on the market. One of the primary reason for its popularity is the price (free). It is available as a fully functional free plugin.

Site Origin Page Builder is a little complicated to use, and new users often struggle to get familiar with it. However we had to include in our list because of it’s popularity.

For components, Site Origin Page Builder allows you to use WordPress widgets. It comes with several widgets of its own, and you can download and install any widget.

See our list of the 25 most useful WordPress widgets because you can use all of them with this page builder.

It also comes with a history tool which allows you to switch back and forth to undo/redo changes that you made. This is a huge time saver, and it gives you a peace of mind knowing that you can revert and undo changes.

The SiteOrigin plugin and all its widgets are fully Gutenberg compatible. There’s also a new SiteOrigin layout block that you can use as a Gutenberg block.

Pricing: Free

Our Grade: C

Review: Site Origin Page Builder is a good free plugin with a drag-and-drop interface to create and customize layouts. Although the live editing is not comparable to other solutions mentioned in this comparison.

Final Thoughts: Best WordPress Page Builder Plugin

As we compared different drag and drop WordPress page builders, one thing became very clear. Beaver Builder and Divi are clearly the top choice.

Visual Composer is a close third option that offer a complete drag & drop WordPress page builder.

If you don’t mind spending a little bit money to get the best solution in the market along with guaranteed support, then go for any of these three, and you won’t regret it.

Do I still Need a Page Builder if I am Using the New WordPress Block Editor?

Recently we’re getting a lot of users asking us this question.

WordPress block editor also known as Gutenberg was officially launched as the new default WordPress editor. The new editor uses blocks which are content elements for creating pages and posts.

Superficially, the block editor looks similar to some of the WordPress page builders above.

Gutenberg blocks most used

Hence there’re hot discussions going on in WordPress about Gutenberg and page builders.

Is Gutenberg a page builder? Does the Gutenberg block editor replace the WordPress page builders? And, do I still need a page builder if I am using the new WordPress block editor?

Well, the answer to the first two questions is ‘No, not quite yet.’

And, Yes, you will need a page builder if you want an easy way to create completely custom WordPress designs.

Gutenberg in its current form is no match to the powerful features these “true” WordPress page builder plugins offer.

Having that said, you can use a plugin like CSS Hero with Gutenberg and probably get away without using a true page builder, but it entirely depends on your needs.

A lot of our readers love using CSS Hero for quick and easy website customization. Read our full CSS Hero review to see if it’s a suitable solution for your needs.

We hope this article helped you find the best WordPress drag and drop page builder plugins for your site. You may also want to see our comparison to find the best WordPress contact form plugins.

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 6 Best Drag and Drop WordPress Page Builders Compared (2019) appeared first on WPBeginner.



Source link