How to Secure WordPress with Password Policy Plugin

Cyber-attacks are becoming a more common occurrence every day.  The attack itself is growing in both number and sophistication, many organizations are increasingly under the gun to protect themselves from compromise. A strong password is the first line of defense in protecting your website from one form of cyber-attack the brute force attack which targets your login page by calculating every possible combination that could make up a password and testing it to see if it’s the correct one.

For that, you may want to consider how critical it is to use a password policy to enforce your website security. The password policy itself entails some important aspects to strengthen the password to help you to protect your website:

  • Set the minimum password length (the longer the better) 8 characters are typical.
  • Impose requirements to use uppercase and lowercase combinations, special characters, and numerical digits.
  • Set password duration if needed

In this tutorial, we will show you how to implement a password policy for your website using the WordPress Policy Manager Plugin.

Password Policy Manager Plugin

The Password Policy Manager Plugin by miniOrange is one of the WordPress security plugins that help you to enforce the use of password policy best practices for your website.

Available as a freemium plugin on WordPress.org, the free version Password Policy Manager could help you to:

  • Set the requirement for the password strength
  • Enable password expiration time
  • Let you reset passwords for all users in one click
  • Let you access and view reports for your users’ logins

Furthermore, if you upgrade it to the Pro version, you will get all of the capabilities of the free version with additional features like:

  • Manage password policies based on user roles
  • Prevent users from using previously used passwords
  • Automatically lock inactive users after a certain period
  • Generate a random strong password based on your policies
  • Support the logins form from another plugin like Woocommerce, Ultimate Member, Elementor Pro, and so on

Now that you know what The Password Policy Manager can do, let’s start to protect your website by installing and activating the password policies manager plugin to your WordPress.

How to Apply Password Policy with The Plugin

Once you installed and activated the plugin, from your WordPress dashboard, click the newly created miniOrange Password Policy menu then you will be taken to the Policy Setting Page.

Password Strength Policy Setting

On this page, you can turn on the password Policy Settings by ticking the checkbox from each of the set to enforce the password strength like:

  • The password Must Contain Lower and Uppercase letters like [a|A]
  • The password Must Contain Numeric digits like [0,9]
  • The password Must Contain characters like [@, #, $, %, etc]
  • Set the Length of the password [between 8 and 25]

There also exists a toggle for the Password Policy Setting which acts as a switch to disable or enable all settings you’ve made on the Password Policy Setting.

Password Expiration Policy Setting

You can also set a password expiration policy on this page. To enable this feature, toggle on the Enable Expiration Time switch in the Expiry Time section, and the default expiration time is 7 weeks.

Once your password policy settings are ready, click on the Save Settings button to apply the settings.

How to Make Existing Users Reset Their Password

What if you already have many existing users that yet to use the password strength policy for their user account? how to make them change their password by following your password policy?

If you want to make the existing user reset their password when they try to log in after you applied the setting, you can do so by ticking the checkbox of the Force reset password on first login setting which is available on the Password Policy Setting and apply your changes by clicking on the Save Settings button.

Or, maybe there was some trouble that happen and you want them to change their password right away, terminating their login session and resetting their password. With the One-Click Reset Password button, you can reset the user’s password and close their login sessions right away at the same time. The users need to set up a new password via a reset link sent to their email.

The Bottom Line

A strong password is the first line of defense in protecting your website from one form of cyber attack the brute force attack that targets your login page. With a strong password, they will have a hard time guessing your password to try to break in and mess up your website. Using a password policy plugin is one of the options you can try to help you strengthen your WordPress security against brute force attacks. We also have covered another way that may help you against the attack in our previous article about redirecting users after they log out from your site.

How to Create Back to Top Button in Brizy

What makes Brizy very special to other page builders out there? Simple and easy to use. Brizy is one of the easiest tools to create and design websites, blogs, online shops, and many more with WordPress. One of the essential parts of web design is navigation. Because navigation contributes to user experience, it helps you allow users to access the information they want as quickly as possible by presenting an enjoyable, intuitive layout while increasing ease of use.

This article will show you how to create back to top button in Brizy. The back-to-top button is a shortcut that allows users to navigate to the top of the page quickly. It will be helpful when users get to the bottom of a long page and want to return to the top page. So, they only need to click the button without scrolling up.

How to Create Back to Top Button in Brizy.

Go to your Brizy editor. You can create new content (post/page) or select existing content. On the Elements panel, pick the Button element and then drag and drop it into the canvas area.

Next, you can edit and style up the button. In this example, we will edit the text and the icon.

  • Text: TOP
  • Icon: Arrow up (⬆️)

Now, we will make the button clickable and link to the top of the page. On the Button settings, go to the Link and click on it.

There are two methods of making the button link to the top of the page that you can choose as your preference.

  • Link to

On the Link toolbar, go to the URL -> Link to option and then fill a hashtag (#) on the field. This option requires you to add CSS id to the top block.

  • Block

On the Link toolbar, go to the Block and click on it. Next, you can choose any of the blocks you want to link with the button. So, when the users click the button, it will bring them to your selected block. For example, you can link the button to the heading block.

As you can see from the GIF above, the button is already clickable. So now, no matter where users are on this page, it jumps them to the top if they click the button.

Next, it’s time to set the position of the button. Commonly, the location of the back-to-top button is on the bottom corner of the page (left/right). We also need to make the button hide when the users are on the top of the page, revealing it when they scroll down.

On the button settings bar, click the gear icon to open the settings panel. After that, go to the Position and set the position to Fixed.

Once you select a fixed position, set the button’s position by setting the value of the Horizontal Offset and Vertical Offset option. You can place the button anywhere you want as your preference. In this example, we place the button on the corner-left-bottom of the page.

That’s it; the back-to-top button is hidden when the users are on the top of the page and revealed when they scroll down. Don’t forget to click the Save Draft button if you want to save the project.

The Bottom Line

One thing that any page builder may not have, but Brizy has, is simplicity. Brizy can retain simplicity while pushing forward and expanding the features. With Brizy, creating a back-to-top button is very seamless. This article shows you how to create back to top button in Brizy. Play around with all the button settings and make your back-to-top button stunning.

How to Create a Contact Form in Brizy

A contact page is one of the most valuable pages on the website. Maybe you are wondering about that. The contact page is a short web-based form published on a website. To make it easier for your visitors to reach you out, you can provide a contact form on the contact page of your website. It can leave a lasting impression on your visitors. Luckily, with Brizy, you can easily create a contact form. Brizy comes with a native element — the Form element — to allow you to add a form to a page. This article will show you how.

The Form element itself is available on Brizy Free and Brizy Pro. Of course, the pro version will give you more features than the free version. The differences feature between the free and pro version will be explained later.

Steps to Create Contact Form in Brizy

Step 1: Add a Form Element to the Contact Page

Go to your Brizy editor. You can create new content (post/page) or select existing content. Select the Form element from the elements panel and then drag and drop it into the canvas area.

As shown in the GIF above, you’ve got three different field elements. The following fields are the email field, select field, and paragraph or text area field. You can format and customize the form, and also, you can load different things and add extra fields as per your preference.

Step 2: Customize the Form

In this example, we will make minor changes to the default form. What we are going to do here is only change the format field as below:

  • 1st field: Change the field type to Text and edit the field text to Name
  • 2nd field: Change the field type to Email and edit the field text to Email
  • 3rd field: Edit the text field to Message
  • Button: Remove the icon and edit the text to SUBMIT

Step 3: Setting the Form Action

As we mentioned earlier, there are different features between Brizy Free and Brizy Pro. With Brizy Pro, you can send the form data (submission) to your WordPress dashboard, email and apps. The free version of Brizy only sends the form to your WordPress dashboard. So, we recommend you upgrade to Brizy Pro to get more options and flexibility in submission destinations.

To set the destination, you can click the button, go to the plug icon (🔌), and click on it. Now, you can choose what happens and how the form works. As we mentioned earlier, if you’re working with the free version of Brizy, you still have the WordPress option to send emails using the standard WordPress sending method.

You also can use a custom template. Once you enable this option, you can insert any information you want into this template that will be used when you send your email. You can also use shortcodes to populate the information based on your form. But don’t worry, Brizy gives an easy way of seeing what exactly shortcodes you can use. By hovering over the question mark icon (?), you will get a link to all the shortcodes related to the various form fields you have inside your form. Copy the shortcodes and paste them into the template field.

But, for this example, let’s disable the custom template option.

As shown in the GIF above, you got three destination options for your form. There are WordPress, SMTP, and Gmail.

You can also link the form to various services by clicking the APPS on the panel settings. Here, you will find many marketing automation platforms and email marketing services.

Setting the Destination of Form Data (Submission) to WordPress

This tutorial will show you how to set WordPress as a sending method.

On the panel settings, go to the EMAIL and click the WordPress option. Next, you need to fill out any relevant information for your form. Once you have filled it, click the Continue button and then the Done button.

Next, publish or update your project, and we will test the new form. Go to your page that you’ve just created, and go ahead to fill out the form and send it by clicking the SUBMIT button,

Now the message that you’ve written was sent successfully. You can check the inbox on your email, or you can also check on your WordPress dashboard like we are going to do.

Go to your WordPress Dashboard -> Brizy -> Leads.

Inside the Leads screen, you can see the email sent through the name, email and message. If you want to create a record of all the emails sent through that specific form, you can export it to the CSV file by clicking the Export to .csv button.

Note: You can use the steps above for other sending methods (SMTP, Gmail).

The Bottom Line

Brizy is a next-gen website builder that everyone can use. Especially when we’re creating a contact form, everything feels so seamless. With Brizy, you can integrate and connect your contact form with various marketing and email apps. It will let you collect and automate sending your leads to your email. With Brizy, you can set the multiple apps only at once.

Why and How to Combine JavaScript Files WordPress Creates

Optimizing your WordPress site regularly is important to keep up the performance. It is recommended that you combine JavaScript files WordPress creates to take your website to the next level.

WordPress gives its members plenty of options in every category, from building a website to upgrading it right from the platform.

It’s worth mentioning that WordPress has a plugin for everything, which makes your work just simpler. Keeping the following suggestions in mind will help you succeed. Let’s first understand why JavaScript is required and why you should combine JS files in WordPress.

Why Combine JavaScript?

JavaScript is a programming language that makes your web pages look more dynamic. On your WordPress website, using JavaScript will help you to embed audio and video files, display image galleries, add interactive navigation, integrate widgets like a countdown timer, and more.

JavaScript files use file extension .js and are inserted into pages via themes or activated plugins. When not optimized following a comprehensive procedure, these files can even make your WordPress website slower. In this case, combining the JS files in WordPress helps.

Is It Mandatory to Combine JS Files?

The Hypertext Transfer Protocol has improved a lot in the past couple of decades which has eliminated the need to combine JavaScript files WordPress has. However, make sure that your website hosting company supports HTTP/2.

If your website is running on HTTP/1.0 or HTTP/1.1, you need to download the JavaScript and CSS files in sequential order. Having said that, first, you need to download one file and wait for the process to complete. Once the file is downloaded, you can start downloading the second file.

With the advanced HTTP/2 version, managing data tasks becomes simpler and parallel downloads are no longer an issue. Think about how much easier file organizing is on a computer when there is a specific system rather than frantic random actions. A similar thing applies to WP.

Since you can download a wide range of external resources simultaneously, there’s no benefit to combining multiple JavaScript files as long as HTTP/2 is available.

However, if you are using HTTP/1.0 or HTTP/1.1, combining JavaScript files is essential. Even today, most websites are running on the older versions of the HTTP; it’s worth learning about the process of combining multiple JS files to maintain your website’s performance.

How to Combine JavaScript in WordPress?

As mentioned earlier, WordPress gives you multiple ways to do a simple task. You can use the SCRIPT <script> tag to add JavaScript function directly to HTML pages. Using the SCRIPT tag separates the code while allowing the JS function to be called by multiple pages altogether.

The browser needs to download each JavaScript file that is required for the proper rendering of a web page. So, when the browser downloads multiple files in a sequential manner, the HTTP request takes time which affects the page load speed. Several search engines recommend combining external JS code into two files.

One of the files contains necessary functions vital to correctly render the initial page load. The second file contains not-so-important functions that the program can call after the page load completes.

So, when a webpage requires five different JavaScript files to display all its elements correctly, you can combine multiple JS files in WordPress to minimize the total HTTP request count for JS code from five to two. Further, if you combine CSS files, it will reduce the HTTP request to an even smaller count.

Once you are done combining JavaScript files, make sure to run performance tests to understand how the page load times might have affected the WordPress site. Let’s learn about some of the tools that you can use to run performance tests.

  • Asset Cleanup

A highly configurable WordPress optimization plugin that helps combine and defer JS or CSS files. Asset Cleanup gives you access to a variety of tools for managing fonts so that you can reduce their effect on page load times.

The plugin integrates JavaScript and CSS Manager, which makes it unique from other products in the same category. The manager enables you to identify the web pages where JS and CSS files have been downloaded recently across the WordPress website.

  • Autoptimize

If you are looking to install one of the most effective WordPress optimization plugins, download and install Autoptimize. The plugin facilitates the minification of HTML, JavaScript, and CSS files and is widely used by a large volume of the WordPress community.

The basic features of the plugin are available for free; however, you can buy the premium version to gain access to advanced features. With automatic optimization, the process is faster, and you can check the web page load times simultaneously to see improvements.

The Conclusion

Regardless of the website platform you are using, load speed is a vital component that very much decides the success of the website. If you find any issues with website loading speeds, try to fix them immediately using WordPress plugins.

How to Redirect Users to Homepage After Logout in WordPress

By default, after you log out from the WordPress dashboard, you will be redirected to the WordPress default login page (wp-login.php). The WordPress login page (wp-login.php) is the default login page for all roles of WordPress users, from the user role with the most capabilities (Administrator) to the least (Subscriber).

With your wp-login page which is a gateway for your site still the default page when you log out, it may encourage people with ill intention to harm your website by trying a brute force attack to get in as users with high capabilities so they can mess up your website from inside.

For the above reasons, you may want to create a custom login page or you can place a login form on your homepage so you can usher the standard user to log in from there. If you are using Elementor as the page builder for your site, we already covered how to create a custom login page with Elementor in our previous article.

And how about the default log-out page, are the users still being redirected to the wp-login page when they log out?

Unfortunately, yes. But no worries, in this article we will show you how to redirect users to the homepage and custom URL after they log out from your site.

Methods to Redirect Users After Logout

Now that you know why redirecting users after they log out is important, there are two ways to do it:

  • Using a WordPress plugin
  • Using custom code

Method 1: Redirect Users Using a WordPress Plugin

In WordPress, you can solve almost any kind of problem and need by using plugins. This time we choose the LoginWP by LoginWP Team for our tutorial.

The free version of the LoginWP plugin allows you to redirect users to the homepage or any page and set the redirection condition by the user role, username, or capabilities you want when they log out, which is exactly what we need for this time. And the Pro version of the plugin includes all functions of the free version with addition you can redirect users to the current page they are logging in from or back to the previous (referrer) page after login, and integrations with top plugins like WooCommerce, WPFroms, LearDash, and many more.

Go ahead to install and activate the plugin to proceed to the next step, and once you are ready let’s get into the matter.

Redirect Users to Homepage or Custom URL

To redirect users to the homepage or custom URL, from your WordPress dashboard, start by going to the LoginWP → Redirections, and continue by adding a new rule by clicking the Add New button.

The next step is selecting the Rule Condition, you can choose who you want to set the redirect rule for, and for this tutorial, we will select the subscriber role which has the least capabilities from the user role.

Move on to the Redirect URLs section. Here you can set the URL to redirect the users after they log in to the website in the Login URL field and after they log out in the Logout URL field. And for the URL you can set your homepage URL to redirect the users to your homepage, or, you can set a custom URL if you want to.

As you can see in the image above, we set the Login URL and Logout URL to our homepage URL to redirect users to the homepage after they log in or log out.

And once the rules and URLs are set, activate the redirect rule by clicking on the Save Rule button.

Method 2: Redirect Users Using a Custom Code

For the second method, we will show you how to redirect the user to the homepage after they log out without using a plugin. Instead, you will use a custom code to achieve that task.

Before you start, you may want to backup your site and use a child theme to avoid breaking the parent theme or losing your changes when you update your theme.

Now for the steps, start from your WordPress dashboard, then go to Appearance Theme File Editor. Once you’ve arrived on the Edit Themes page, select the functions.php file from the Theme Files list by clicking it. You can place the custom code in your functions.php file under the PHP tag <?php and outside of any existing function.

And now for the code, there are two custom codes we will share with you here, the first one is to redirect the user to the homepage. The code is as follows:

  • Redirect the user to the homepage

add_action('wp_logout','auto_redirect_after_logout');
function auto_redirect_after_logout(){
  wp_safe_redirect( home_url() );
  exit();
}

And the second code is to redirect the user to a custom URL. To use the code for redirecting the users to the page you want after they are logged out, you need to replace the https://www.yourcustomurl.com URL with your URL. Here is the code:

  • Redirect the user to a custom URL
add_action('wp_logout','auto_redirect_external_after_logout');
function auto_redirect_external_after_logout(){
  wp_redirect( 'https://www.yourcustomurl.com' );
  exit();
}

Once you have the code in its place, save your changes by clicking on the Update File button.

The Bottom Line

Besides its design and functionality, security is one of the aspects you need to notice when you have a WordPress site. To keep your site secure, you need to update the WordPress core software, plugins, and theme, then add a security plugin to add more protection to your site.

On a daily basis, some people with ill intentions with a whole bunch of malicious robots can try to break in. One of the methods they may try is the brute force attack that targets your login page. Changing your login or logout redirect is one of the methods you may want to try to keep your login page safe and additionally helps you to take the user to the page you want them to be.

How to Fix Form Fields Not Showing Up in Divi Email Optin Module

Divi Builder comes with a native module called Email Optin, which is aimed at creating an email subscription form. The module supports integration with prominent email marketing plugins and services such as MailPoet, MailetLite, and so on. With the module, you can create a stylish email subscription form be it on a page or custom template (e.g., custom single post template). But what if the form fields not showing up after you publish your page/custom template.

Don’t be panic. It is not a bug or a significant issue. Here is how fix it.

The Email Optin module is a module designed to create email subscription form. When creating an email subscription form, you need to add the email field (required). Other fields (such as first name and last name) are optional. In order to make the fields to show up after you publish the page/custom template, you need to connect the form with an email marketing plugin or service. Without an email marketing service, there is no way for Divi Builder to know what form fields are needed so it will ignore the fields on the front end.

So, the solution to fix the issue is simply connect the form with the email marketing or plugin you use.

How to Connect the Email Optin Module with an Email Marketing Service or Plugin

Commonly, most email marketing services require you to enter an API key and username to connect your account with a form builder plugin in WordPress. We already have a post that covers how to integrate Mailchimp with Divi Builder in case you use Mailchimp.

In this post, we will show you how to connect Email Optin module with MailPoet.

First thing first, make sure you have installed and activated the MailPoet plugin on your WordPress dashboard. Once you are ready, edit the Email Optin module on your page/custom template. On the settings panel, open the Email Account block.

Select MailPoet on the Service Provider dropdown and click the ADD button.

Next, enter the email address associated with your MailPoet account on the Account Name field and then click the SUBMIT button.

If the connection is successful, you can select a list on your MailPoet account as shown on the following screenshot.

The Bottom Line

Email Optin is a Divi module that you can use to create an email subscription form on your Divi page or custom template. You can create a stylish email subscription form and connect with plugins and services like MailPoet, MailetLite, and Mailchimp. If you find the form fields not showing after the page is published, you can try the solution we have just covered above.

How to Create a Carousel Content in Brizy

Visual marketing is very popular right now. It strengthens your brand and communicates with your site visitors with the help of images, videos, and other pieces of multimedia content. Create a carousel; content is a part of the more significant way to support the visual marketing works well. Carousel is also known as “slideshows” and “sliders.” It’s an effective way of displaying multiple images or content in a single space.

There are many benefits when you create a carousel content as below:

  • Saving screen space.
  • It improves the overall visual appeal effectively.
  • Encourages visitors to focus on important website content.

This article will show you how to create carousel content in Brizy. Brizy is one of the easiest tools to create and design websites, blogs, online shops, and many more. With Brizy, you can create a carousel very easily.

Steps to Create a Carousel Content in Brizy

Step 1: Add a Carousel Element

Before starting the tutorial, we would like to inform you that Brizy has a feature to create carousel content; it’s called the Carousel element. Whereby the Carousel element is only available on the Brizy Pro. So, make sure that you already have Brizy Pro.

Alright, once everything is ready, let’s get started!

Go to the Brizy editor and continue adding a new block by clicking the (+) icon, which will bring you to the blocks library. Please select the Create your own option because we want to start creating everything from scratch.

Next, add a Carousel element by selecting it from the elements panel and then dragging and dropping it into the canvas area.

Step 2: Edit and Style Up the Carousel

As you can see above, the Carousel element loaded all the settings, and everything in add some default content. You’ve got four blank columns that you can scroll through. Its shows all information you want to add.

Now, it’s time to customize your carousel element. In this example, we want to create content about the new collections of bags in online shops. Some changes are we did as below:

  • Add a title of the content
  • Change the images and enable the Open in a Lightbox option
  • Edit and style up the text
  • Edit and style up the buttons

Let’s say you want to add another blocks column; you can come up to any of the columns and then click the Duplicate. Once you duplicate the column, you can edit and style it.

You can keep it like this if you think it is good enough. But, if you want more customization, you can go to the Carousel settings and play around with all the settings.

That’s it. Don’t forget to click the Save Draft button if you want to save the project.

The Bottom Line

One thing that any page builder may not have, but Brizy have is simplicity. Brizy can retain simplicity while pushing forward and expanding the features. With Brizy, creating a carousel is very seamless. This article shows you how to create carousel content in Brizy. You could have a lot of interactivity and combine the carousel with different components and elements. We hope this article is helpful for you and improve your skill in web designing.

How to Create a Profitable WordPress Blog with Divi (9 Easy Steps)

If you plan to create a profitable WordPress blog and are looking for some insight, you have probably come to the right place. In this article, we will show you the step by step to create a WordPress-based blog. Not just a blog, but a blog that gives you profit. More specifically, we will show you how to create a WordPress blog with Divi.

We write this guide based on our experience in growing WP Pagebuilders, the blog you are currently reading. At this time, our blog has managed to generate enough dollars per month for us — whereby the main revenue resource coming from affiliate marketing. As you can see in this blog, we write about Divi and Elementor a lot. Both are two of the most popular WordPress products that offer interesting affiliate programs. We have been joining the affiliate program of Elementor and Elegant Themes (the developer of Divi) since 2020.

We decided to create an affiliate blog as it requires fewer traffic than blogs that rely on PPC ads (e.g., Google AdSense).

So, are you ready? Read on.

A Brief Intro About Divi

Before stepping further, of course, you need to know about Divi first.

What is Divi?

Divi is a WordPress theme developed by Elegant Themes. It comes with a built-in page builder called Divi Builder — which you can use to create the core pages of your blog (homepage, about page, contact page, etc.). Divi Builder comes with several useful features for blogging, including Theme Builder which you can use to create custom templates for site parts (header, footer, blog post layout, archive pages, etc.)

Divi also supports integrations with newsletter plugins and services such as CoverKit, MailerLite, and Mailchimp. Newsletter is one of most important aspects in blogging. Developing a blog without newsletter is a huge mistake. We will cover about newsletter latter.

Divi itself is a paid theme. You can get it with two ways:

  • By becoming a yearly member of on Elegant Themes: 89/year
  • With a one-time purchase option: $249

Whichever the option you choose, you will have access to the Divi updates and support forever. In addition to Divi, you will also have access to other products developed by Elegant Themes, including Bloom and Monarch. The interesting part about buying the Divi theme from Elegant Themes is that you can install it on as many blogs as you want — without extra fee.


Step 1: Set How You Will Monetize Your Blog

On the opening section above, we mentioned that our main revenue source coming from affiliate marketing. Even so, there are actually several other options to monetize your blog. In general, bloggers earn money from their blogs by applying the following methods.

  • Selling affiliate products (affiliate marketing)
  • Installing PPC ads
  • Selling e-books
  • Accepting sponsored content
  • Offering paid content (membership)

We will narrow down the discussion to affiliate marketing as it is what we have been practicing so far. If you want to learn more about other monetization methods, you can read this useful blog post.

We personally recommend affiliate marketing as it doesn’t require a large number of visitors. More visitors mean higher hosting plan. Higher hosting plan means higher expense.


Step 2: Pick a Blog Niche and Domain

It’s crucial to note that starting a blog is no different to starting other business types. First, you need to find and set the market (audience) of your blog. In the context of blogging, 500 daily targeted visitors are better than 5,000 untargeted daily visitors.

Please note that you are about to create a blog, not an online magazine (even an online magazine needs a niche). If your topic is too general, it would be harder for your blog to compete on search engines. Also, it takes extra effort to build a loyal reader base (email subscribers in particular).

Before eventually ending up with a domain name wppagebuilders.com, we initially wanted to register a different domain name that represents WordPress at large. But we thought that WordPress is too general topic, so we decided to pick a more specific topic (page builder plugins in this case). Another reason, there have been some more established WordPress blogs that are hard to compete with.

By choosing a more specific topic, the chance of your blog posts appearing on the front page of search engine results page is higher as search engines will better understand the topic of your blog. To prove this, take a look at the screenshot below.

The screenshot above shows the search queries (on Google) whereby we win the competition. If you search on Google using one of the queries above, you will find the wppagebuilders.com‘s blog posts on the front page (some even on the top list).

Those are just examples. There are many other keywords in which wppagebuilders.com win the competition on search engines.

Can you guess the reason?

It is because wppagebuilders.com is a blog about WordPress page builder plugins and write articles with the topics around Elementor, Divi Builder, and other page builders on a regular basis. As mentioned, the more specific the topic (called “niche” in the marketing world) of your blog, the bigger the chance it will win the competition on search engines.

— How to Pick a Niche and Name for Your Blog

Remember the rule once again. The more specific the topic (niche) of your blog is better. Three main reasons for this are:

  • It’s easier to convert the traffic into sales
  • It’s easier to build a loyal reader base
  • The bigger the chance to win the competition on search engines

Once you understand, you can start finding the niche of your blog. How to do so?

You can start by defining the general topic first, then break it down into some more specific topics. wppagebuilders.com — as you have read above — is an example you can use as the reference.

Need more examples?

Say you want to create a photography blog. You can search for some photography derivatives such as landscape photography, travel photography, digital photography, mobile photography, and so on. Find a derivative where you are best at and then pick it as the main topic of your blog. As your blog runs, you can write the broader topics, of course, but your focus should be on the main topic you have picked in advance. And you should win on the topic (on search engines).

Once the topic/niche has been picked, you can continue with the blog name. Then, you can check whether the domain of the blog name is available.

To search for a blog niche, you can use a tool like Google Keyword Planner to figure out the competition level as well as the search volume. If you have enough capital, you can use paid tools like Ahrefs, Semrush, and Wordtracker.

Two main metrics you should notice when researching a blog niche are:

  • Monthly searches volume
  • Competition level

It would be great if you could find a blog niche that has a high monthly search volume with low competition.


Step 3: Pick a Reliable Hosting for Divi

Picking a web hosting provider is another crucial step to start a blog. You need to make sure that your hosting provider is reliable enough to run your blog. Including when traffic surge being occurred.

When it comes to Divi, there are two hosting service types we strongly recommend:

— Divi Hosting

Elegant Themes partners up with prominent web hosting providers to offer hosting plans designed specifically for Divi. The partnership is called Divi Hosting.

All hosting plans on Divi Hosting come pre-installed with Divi so that you don’t need to install Divi yourself. Other features included on a Divi Hosting plan are varied depending on the plan and the hosting provider. But in general, you will get the following features:

  • Divi pre-installed (of course)
  • Security
  • CDN and caching
  • Staging environment

Hosting providers that offer Divi Hosting plans are:

— Managed WordPress Hosting

Managed WordPress hosting is the type of web hosting service whereby the resources are optimized for WordPress, not just Divi. A managed WordPress hosting comes with features such as automated software update (WordPress core and plugins), backup, security, and performance optimization (CDN and caching).

Today, nearly all prominent web hosting providers offer managed WordPress hosting plans, including Bluehost. If you prefer using a managed WordPress hosting instead of Divi Hosting, one of our recommendations is Bluehost.

Bluehost is a trusted, reliable web hosting provider widely used by WordPress bloggers and WordPress users in general. In Bluehost, the managed WordPress hosting service is called WP Pro. There are three plans available on WP Pro: Build, Grow, and Scale. You can pick the one according to your needs.

So, should you use a Divi Hosting or managed WordPress hosting?

To make it clear, a Divi Hosting is technically also a managed WordPress hosting. The difference is that on a Divi Hosting you don’t have to install Divi yourself. On top of that, using a Divi Hosting allows you to save your expense as the hosting plan is bundled with Divi. When you use a managed WordPress hosting, you need to spend your budget on two components: hosting service and Divi.

The wise answer to the question is: read the specs offered by each hosting plan before you subscribe.


Step 4: Register Domain and Install Your Blog

Once you have decided a hosting plan you want to subscribe to, the next step is to register your domain.

Domain registration is done on the hosting plan registration. You will be asked to enter a domain name to complete the registration process. In this example, we will show you how to register your domain on Bluehost.

First, visit the Bluehost website. Hover your cursor over the WordPress menu and select WP Pro.

Pick a plan you want and click the Select button.

On the next step, enter your domain name on the Create a new domain column. Make sure to select the domain extension (.com, .net, .org, etc.). Click the Next button to continue.

If your domain is available, you will see a green notification and can continue to the next step. On the Account Information section, fill out the required fields such as name, country, city, email address, and so on.

On the Package Information section, select a plan you want to subscribe to.

On the Payment Information section, add your credit/debit card number and CVV code. If you want to pay via PayPal instead, you can click the More payment options link and select the Pay with PayPal option. Accept the user agreement and click the submit button.

Complete the payment. Once done, you will be redirected to a page where you can create a Bluehost account. Click the Create your account button to create the account.

Create your password and accept the user agreement. Click the Create Account button.

Your account is ready. Click the go to login button to login to the Bluehost dashboard.

— Installing WordPress on Bluehost

Now that your account is created, you can start to install WordPress on Bluehost.

Every time you want to login to Bluehost, you can visit bluehost.com and click the Login menu on the top bar.

To start installing WordPress, login to Bluehost and click the Create your website button.

Skip the next two steps until you see the following screen. Select the left option and click the Get started button.

On the next steps, you will be asked basic questions. You can skip these steps to select a theme. You can start with a free theme. Until here, your blog is ready and can be accessed by typing your domain name on the web browser.

To manage your blog, you can login to the Bluehost dashboard by clicking the Login into WordPress button on the upper right-corner.

In order to make it easier for you to login to the WordPress dashboard, you can add a new user on your WordPress blog. Next time, you don’t need to login to Bluehost every time you want to login to your WordPress dashboard once you have a new account. Instead, you can simply type yourblog.com/wp-admin on web browser and login with your new account.

To create a new account, go to Users -> Add New on your WordPress dashboard.

Enter the username, email address, and name, and password. Select the role for your new user and click the Add New User button.

Once your account is created, you can use it to login to the WordPress dashboard.

— Setting Up the SSL

Setting up SSL is crucial before you go further with your blog. If you don’t set it, your blog will be flagged not secure by web browsers.

Bluehost includes free SSL feature (provided by Let’s Encrypt). To use it, login to Bluehost with your account. Once logged in, click the Manage site button.

Next, go to the Security tab and make sure the SSL Certificate: Let’s Encrypt option is enabled.

Note: if you find the SSL is not available message when opening the Security tab, you can contact Bluehost to fix it. You can reach out to Bluehost via live chat or Twitter @bluehostsupport.

After making sure SSL has been enabled, login to your WordPress dashboard and go to Settings -> General.

Edit the default URL by adding the “s” letter on the “http” section. We also suggest you add “www”.

Make sure to click the Save Changes button on the bottom to apply the changes.

In addition to setting up the SSL, we also strongly recommend you set up the permalink. We recommend using a simpler permalink for simpler URL structure (recommended for SEO).

To set the permalink, go to Settings -> Permalinks on your WordPress dashboard. Pick a permalink you want (we recommend post name).

Make sure to click the Save Changes button to apply the change.


Step 5: Install Divi

You can skip this step if you use a Divi Hosting. You can continue reading this section if you use managed WordPress hosting.

Assuming you have completed your purchase on Elegant Themes, login with your account. Once logged in, go to the Member Area page by clicking the MY DOWNLOADS menu.

Download the Divi theme by clicking the DOWNLOAD THE DIVI THEME button.

Once the Divi theme is downloaded, login to your WordPress dashboard and go to Appearance -> Themes. Click the Add New button to install a new theme.

Click the Upload Theme button — followed by the Choose File button — to select the Divi theme you have just downloaded (in a ZIP format). Click the Install Now button to start installing.

Wait a moment until the installation process is done. Activate it right away once the Divi theme is installed.

Note: If you have your own choice of hosting (other than we recommended above), and find an issue with the installation process, you can read this post to fix the issue.

— Activate the License Key to Receive Future Updates

In order to receive new Divi updates, you need to activate your license by entering your username and API key. To get Divi username and API key, click USERNAME & API KEY on the Elegant Themes dashboard.

Copy your username and API key.

Switch back to your WordPress dashboard and go to Divi -> Theme Options. Go to the Updates tab and enter your username and API key. Click the Save Changes button to apply the changes.

— Make the Necessary Settings

Before stepping further with Divi, you can make the necessary settings on your Divi website first. Three basic settings you need to make upfront are:

  • Site Logo

Logo is the main identity of your website. You can place it on the header, footer, or any area you want. To set the site logo on Divi, go to Divi -> Theme Options on your WordPress dashboard. On the Logo option under the General tab, click the UPLOAD button and select the image of your logo.

  • Favicon

Favicon is an icon that appears on the web browser tab when a user visits your website. On most WordPress sites, the default favicon is the WordPress icon.

To set the favicon of your Divi blog, go to Divi -> Theme Customizer on your WordPress dashboard. Open the General Settings block and select Site Identity.

Click the Select site icon button to select the image you want to use as the favicon. The recommended image format for favicon is PNG with the dimension of 512×512.

Click the Publish button to apply the changes.

  • Disable Divi Builder on Posts

The Divi theme comes with a built-in page builder called Divi Builder — which you can use to create the core pages of your blog. By default, the option to use Divi Builder is available when you want to create new content on WordPress — be it page or post.

Since you want to use Divi for blogging, we highly recommend you disable Divi Builder on posts. This way, every time you want to create a new blog post, you won’t be asked whether you want to use to the default WordPress editor or Divi Builder. To disable Divi Builder on posts, go to Divi -> Theme Options on your WordPress dashboard. Open the Builder tab and slide the switch on Posts. Click the Save Changes button to apply the changes.

  • Set the Blog Post Editor

Since version 5.0, WordPress had a new editor called block editor a.k.a Gutenberg. Before this version, WordPress offered an editor which is now known as Classic Editor.

While we recommend you use Gutenberg as it is more compatible with more WordPress plugins, it’s up to you to use which editor.

If you want to use Gutenberg as the blog post editor, then there is nothing that need to change. If prefer using Classic Editor, you can enable it first. Go to Divi -> Theme Options on your WordPress dashboard. Under the Builder tab, click the Advanced sub-tab and slide the switch on the Enable Classic Editor option. Click the Save Changes button to apply the changes.

We personally suggest using Gutenberg as it offers more creative elements. You can easily add elements like button and table — and customize them.


Step 6: Design Your Divi Blog

Once done making the basic settings, the next step is to design your Divi blog. The best thing when blogging with Divi is that you can control every single part of your blog — even if you have no coding skills thanks to Divi’s Theme Builder feature.

Before start designing your blog, you need to understand that your blog consists of the following main parts:

  • Header
  • Footer
  • Single post layout (also known as blog post layout)
  • Archive pages
  • Search results page
  • 404 error page

In addition to the parts above, you also need to create the necessary pages such as homepage, about page, contact page, and other pages according to your need.

You can create those parts and pages in a visual way using Divi Builder. Isn’t fun?

Let’s start with the header.

But first, you might want to create a menu to be placed on the header. If you are new to WordPress, you can read this article to learn how to create a menu.

— Designing the Header

There are two options to design the header of your blog in Divi. First, you can use Theme Customizer. Second, you can use Theme Builder. If you want to create a simple header, then using Theme Customizer is enough. Conversely, if you want to create a fully customized header with your own design, there is no other option than Theme Builder.

## Designing the Header Using Theme Customizer

To design your header using Theme Customizer, you can go to Divi -> Theme Customizer on your WordPress dashboard. This will take you to the Theme Customizer screen. Next, click the Header & Navigation block.

As you can see, there are five sub-blocks you can open to style up your header.

  • Header Format

You can open this sub-block to set the header format. There are five header formats you can choose from: Default (logo on the left), Centered, Centered Inline Logo, Slide In, and Fullscreen.

  • Primary Menu Bar

You can open this sub-block to customize the look of the main menu bar. You can set things like height, text size, font family, font style, font color, color of the menu background, color of the dropdown menu, and so on.

  • Secondary Menu Bar

Secondary menu bar is the menu bar that lies right above the main menu.

You can customize the look of the secondary menu bar by opening the Secondary Menu Bar sub-block. Same as the main menu bar above, you can also set things like You can set things like text size, font family, font style, text color, background color, and so on.

  • Fixed Navigation Settings

Divi has a built-in sticky header feature. Sticky header itself is the type of header whereby it remains visible when the page is scrolled down. Here is the example:

You can customize the sticky header such as setting the background color, height, text size, and so on. Simply open the Fixed Navigation Settings block to customize the sticky header.

Please note that if you want to use sticky header, you need to make sure the feature is enabled. To do so, go to Divi -> Theme Options on your WordPress dashboard. Make sure the Fixed Navigation Bar option is enabled.

  • Header Elements

You can open the Header Elements block to show/hide the elements offered by Divi. The elements are social media icons, search icon, phone number, and email address. These elements are displayed on the secondary header (top bar), except the search icon — which is displayed on the main header.

To set which social media icons to display — as well as the links –, you can go to Divi -> Theme Options. On the General tab, scroll down to the social sections to select the social media platforms and set the links.

Once you are done designing your blog header via Theme Customizer, make sure to click the Publish button to apply the changes you have made.

In case you want to create more blogs, you can export the header you have customized and import it to your new blogs so that you don’t need to design the header on your next blogs from scratch.

To export/import a header design, you can click the two-arrow icon, next to the close button.

On the appearing dialog, give your file a name and click the Export Divi Customizer Settings button to export the design.

To import a design (customized header), switch to the Export tab. Select the JSON file of the design you want to import and click the Import Divi Customizer Settings button.

## Designing the Header Using Theme Builder

As mentioned on the opening section of this article, Divi comes with a Theme Builder feature which you can use to create custom site parts in a visual way.

A Theme Builder works by replacing the default parts of your site theme (Divi in our case) with the custom templates you create your own. That being said, if you create a custom header using Divi Theme Builder, the default header you have customized via Theme Customizer above will be replaced.

When creating a custom site part using Theme Builder, you technically have limitless design options. Another advantage of using Theme Builder is that you can set where a custom template to apply. Whether to the entire website or specific pages (or posts).

To start creating a custom header template, go to Divi -> Theme Builder on your WordPress dashboard. This will open the Theme Builder page of Divi which by default already has a global template set. If you want to create a custom header for the entire website, you can simply edit the header template by clicking Add Global Header -> Select Global Header.

Conversely, if you want to create a custom header for specific pages or posts, you can create a new template set by clicking the plus icon.

Set where you want to apply the custom template set to and click the Create Template button.

Edit the template by clicking Add Custom Header -> Built Custom Header.

For more detailed instructions on how to create a custom header in Divi using Theme Builder, you can refer to our article here.

Same as header, there are also two ways to design the footer of your blog: via Theme Customizer and via Theme Builder.

To start designing the footer via Theme Customizer, first, go to Divi -> Theme Customizer on your WordPress dashboard to open Theme Customizer. Next, open the Footer block.

As you can see, there are five sub-blocks you can open on the Footer block as below:

  • Layout

You can open this sub-block to set the layout of your footer. Each layout consists of varied number of columns — which you can use to place the widgets (the content of the column). From here, you can also set the background color of the footer.

  • Widgets

After setting the layout on the Layout sub-block above, the next step is to customize the footer widgets. In this context, widgets are the content on the columns of the footer.

To add a widget to a column, go back to the main panel of Theme Customizer and open the Widgets block.

Select the column (Footer Area) you want to add the content to and click the plus icon to add a widget. To see all the available widget options, you can click the Browse all button.

To customize the widget you have just added, you can click the three-dot icon and select Show more settings.

Repeat the steps above to add more widgets on other footer columns.

  • Footer Elements

If you want it, you can display the social media icons on your blog footer. The icons will be displayed on the right side of the secondary footer (bottom bar).

Simply open the Footer Elements sub-block and tick the SHOW SOCIAL ICONS option.

  • Footer Menu

If you want to add a menu to your footer, you can open this sub-block. From this sub-block, you can customize footer such as background color, text color, link color, font size, and so on.

Before opening the Footer Menu sub-block. You can create a menu first from Appearance -> Menu.

  • Bottom Bar

You can open the Bottom Bar sub-block to customize the secondary footer. From this sub-block, you can set the footer credit text, set the background color, set the text color, set the social media icons color as well as the size, and so on.

Designing your blog footer using Theme Builder is more recommended if you want to have limitless design option. You can create a footer with your down design concept and apply any styling you want using the visual editor of Divi Builder.

The steps to creating a footer using Theme Builder is same as header we have covered above. First, you can go to Divi -> Theme Builder on your WordPress dashboard. Next, click Add Global Footer on the default template set if you want to create a global footer.

To create a footer for specific posts or pages, you can click Add New Template to create a new template set and select the locations you want to apply the footer to.

For more detailed instructions on how to create a custom footer in Divi using Theme Builder, you can read our previous article here.

— Designing the Single Post Layout

Single post layout (sometimes is called blog post layout) is the theme part that controls the appearance of the blog posts. This includes the layout, typography settings, and so on.

There are also two ways to design the single post layout: from Theme Customizer and Theme Builder. We recommend designing the single post layout using Theme Builder as it offers limitless design options. More importantly, you can add elements such as email opt-in form, dynamic star rating, etc.

You can read our previous article for more detailed instructions on how to create a custom single post layout using Divi Builder.

In case you want to design your blog post layout via Theme Customizer, you can open the Blog -> Post block on Theme Customizer panel. To change the font family of the content body, you can go to General Settings -> Typography.

— Designing the Archive Pages

In WordPress, archive pages refer to pages that display blog posts according to their archive context. For instance, when you access the URL of yourblog.com/category/example, you will be presented with all blog posts under the category of “example”.

Or, when you access the URL of yourblog.com/author/yourusername, you will be presented with all blog posts written by a user with the username yourusername.

In general, there are three types of archives in WordPress:

  • Category
  • Tag
  • Author

While Divi comes with a default layout for archive pages, you can create the archive pages with your down design. You can even create multiple archive pages if you want to.

To start creating a custom archive page template, go to Divi -> Theme Builder on your WordPress dashboard. Add a new template set by clicking Add New Template -> Build New Template. On the appearing dialog, select a location where (you can select multiple locations) you want to apply the custom template on the Archive Pages block and click Create Template button.

Once the template set is added, click Add Custom Body -> Built Custom Body.

You will be redirected to the Divi Builder editor to edit the layout.

For more detailed instructions on how to create a custom archive page template using Divi Builder, you can read our article here.

— Designing the Search Results Page

While Divi comes with a default search results page, you might want to create a custom search results page template on your blog to make it match your design scheme.

You can create a custom search results page on your Divi blog using Divi Builder. Start by going to Divi -> Theme Builder on your WordPress dashboard. Add a new template by clicking Add New Template -> Build New Template. On the appearing dialog, select Search Results and click the Create Template button.

Once the template is added, click Add Custom Body -> Built Custom Body to edit the template using Divi Builder.

You can add any element (module) to your custom search results page template, but don’t miss these two modules:

  • Text
  • Blog

## Text

You need this module to add the search results title (the Results for “keyword” text). After adding the Text module, open the Text block under the Content tab on the settings panel and click the dynamic icon.

On the available options, select Post/Archive Title.

Make sure to click the green checklist icon to apply the changes.

## Blog

You need this module to display the search results. After adding the module, open the Content block under the Content tab on the settings panel and enable the Posts For Current Page option. Set other necessary settings as well. Such us number of posts, excerpt, and so on.

— Designing the 404 Error Page

Another custom template you can create with Divi Theme Builder is the 404 Error Page. This page itself shows an error message when your visitors access a certain URL, yet the page is not available. You can create a custom template for the 404 Error Page with your down design to make it match your design scheme. You can add any element/module you want.

For more detailed instructions on how to create a custom 404 Error Page with Divi Theme Builder, you can read our previous article here.


Step 7: Create the Necessary Pages

Once you are done creating the custom templates using Divi Theme Builder, the next step is to create the necessary pages. There are at least three pages you need to create:

  • The homepage
  • About page
  • Contact page

You can create these pages using Divi Builder, of course.

— Homepage

Homepage is the most important page of any website. With Divi Builder, you can create the homepage of your blog more easily thanks to its visual editor that offers drag and drop editing experience.

You can place any element to your blog homepage, but make sure that every element you add has a clear purpose. Take a look at following example:

By the way, the screenshot above is the homepage of our blog. On the hero section (top section of a page), we add an email subscription form as we want to encourage our visitors to subscribe to our newsletter.

On the lower section (beneath the hero section), we display blog posts based on three main categories. We also add an extra navigation menu to make it easier for our visitors to explore blog posts based on each main category.

Before creating the homepage, make sure you already know what elements you want to add. If needed, you can create a scratch before executing your design idea.

To start creating the homepage, go to Pages -> Add New on your WordPress dashboard. Give your homepage a title and click the Use Divi Builder button to edit the page using Divi Builder.

Once the Divi Builder editor opens, you can start working to create the homepage. Once done, you can click the Publish button on the bottom-right corner to publish the page.

Once the homepage is created and published, go to Settings -> Reading on your WordPress dashboard. On Your homepage displays section, set to A static page and select the homepage you have just created.

— About Page

You can use the About page to make your visitors better understand about you or your business. With Divi Builder, you can divide your about page into several sections. On the hero section, you can greet your visitors with a brief introduction about yourself. On the following sections, you can showcase your portfolio (if you have ones), your experiences, your expertise, and so on. Here an example of an About page.

Same as homepage, you can also start creating the About page from Pages -> Add New on your WordPress dashboard.

Once the About page is created and published, you can add it to the navigation menu on the header as we have covered earlier above.

— Contact Page

You can create a Contact page to make it easy for your visitors (or aspiring clients) to reach you out. If you don’t want to show your email address, you can add a contact form to your Contact page. Divi Builder comes with a built-in Contact Form module which you can use to create a contact form.

To learn more about how to create a contact form in Divi, you can read out article here.


Step 8: Install the Necessary Plugins

WordPress is an extensible blogging tool. You can add extra features and functionalities to your WordPress blog by installing plugins. If you use Bluehost or Divi Hosting, you will get necessary plugins such as a security plugin and a caching plugin.

If you need more plugins, you can simply install them yourself. You can read this article to learn how to install a WordPress plugin.

To create a successful WordPress plugin, we recommend the following plugins to be installed on your blog:

1. Yoast

Organic traffic is the key to successful blog. In order to get more organic traffic to your blog, you need to optimize your blog posts to win the competition on search engines for specific keyboards. Yoast is the plugin you need for such a need.

2. Strive

It’s almost impossible to achieve your goals without making clear planning. When it comes to blogging, you can make the planning about the content creation. By planning the content creation, you can execute your content ideas one by one.

Strive is an editorial calendar plugin for WordPress that can help you to schedule the content creation on your blog. If you run your blog with a team, the plugin will be so much helpful. You can read our Strive review to learn more about how it can help you.

3. MailPoet

In addition to search engines, email newsletter is another great source of traffic. MailPoet is a plugin we recommend. The plugin allows you to create and send email newsletter from your WordPress dashboard. Also, it comes with supporting features such as subscriber manager, form builder to create email opt-in form, analytics, and so on. More importantly, MailPoet can be integrated with Divi via the Email Optin module (will be covered later).

If you prefer using a third-party service to manage and send email newsletters, our main recommendation is MailerLite.


Step 9: Integrate Divi with an Email Newsletter Tool

If you want to build a long-term business via your blog, we strongly recommend investing on email newsletter. You can rely on email newsletter as the backup of search engines to get traffic to your blog. We recommend newsletter rather than social media as newsletter it is algorithm-free.

According to an article on Constant Contact, the average ROI (Return of Investment) of email marketing is $36 for every $1 spent. In other words, you invest a dollar and in return receive 36 times from it.

Email newsletter is one of the implementations of email marketing.

Before sending a newsletter, you definitely need to have audience (email subscribers) first. In WordPress, there are two options to send newsletters: using a plugin and using a third-party service. Here are our recommendations to send newsletters:

WordPress Plugins:

Third-party Services:

  • MailerLite
  • ConvertKit
  • Mailchimp

If you prefer using a plugin, you can read this article to learn how to choose a newsletter plugin for WordPress.

— Integrating Divi with an Email Marketing Tool

Divi Builder comes with a module called Email Optin. The module is dedicated to collecting email addresses whereby you can connect it with popular email marketing plugins and services. You can add the module to the pages or custom templates you have created earlier above.

In this example, we will show you how to connect the Email Optin module with MailPoet.

Before getting started, make sure you have installed and activated the MailPoet plugin. Also, make sure you have created a MailPoet account.

Once you are ready, edit a page or custom template you want to add the Email Optin module to with Divi Builder. Add the Email Optin Module to your page/custom template.

Once the Mail Optin module is added, open the settings panel and go to the Email Account block under the Content tab.

Select the email marketing service provider (MailPoet) and click the ADD button.

Enter your email address associated with your MailPoet account on the Account Name field and click the SUBMIT button.

Once the connection is successful, you will be able to select a list on your MailPoet account.

Note: If you find the form fields of the Email Optin module don’t show up after you publish your page or custom template, make sure you have connected your email account and selected a list. Read here to learn more.


Bonus

1. Killer Tips for Successful Affiliate Blog

Every business needs strategy to grow and reach success. Your blog is no exception. Although writing blog posts in a regular basis is crucial — and a must –, it’s not enough. You need to arrange the content strategy to win the competition on search engines. That’s why we suggested Yoast and Strive.

Yoast can help you optimize your blog posts to make them SEO friendly, while Strive can make sure you finish a blog post on time.

If you have a niche blog like us, it’s crucial to write cornerstone content. What is that?

Simply put, cornerstone content is the main content of your blog. Cornerstone content should be very well-written in a long-form, in-dept format. Before writing cornerstone content, you can conduct keyword research first using tools like Google Keyword Planner, Ahrefs, and other tools we have mentioned earlier above.

You can write multiple cornerstone content. In our blog, the article you are currently reading itself is cornerstone content.

In order to help your cornerstone content win the competition on search engines (appears on the front page of the search results page), you can maximize on-page SEO by inserting its link to non-cornerstone content. You can learn more about cornerstone content in this blog post.

2. Killer Tips to Increase Email Subscribers

As mentioned above, email marketing offers way better return of investment than social media. More importantly, you will have real assets for your blog. So, instead of wasting time on getting social media followers, we suggest you focus on collecting email subscribers.

The question is, how to increase the number of email subscribers of your blog?

Here is the formula:

Get your first 1,000 daily visitors (organic traffic) then create an email opt-in popup. One thing. Never create a popup that covers the content area as the one below as it will disrupt the reading experience.

Instead, display the popup in a fly-in style and give a delay before the popup to show up (e.g., 60 seconds) to let your visitors read your articles first. Displaying a popup without delay is a bad practice.

Here is an example of a fly-in popup.

In Divi, you can install Bloom to create a fly-in popup.

If you have enough capital, you can create a landing page dedicated to collecting email addresses then promote it via Google Ads, Facebook Ads, or Twitter Ads (you can pick one according to your budget).

3. Free Single Post Templates

The Theme Builder feature of Divi allows you to create a custom single post (blog post) template. This gives you an opportunity to have a single post layout with your own design. You can even create multiple single post templates in case you want to use different layouts for certain blog posts.

We have created some single post templates which you can download for free.

4. Free Blogging Resources

## Grammarly

Grammarly is a writing assistance software. You can make use of it to make sure your blog posts are grammatical error-free. Grammarly will also suggest you pick the right words during writing. Grammarly is available as a web browser extension for Google Chrome, Safari, Microsoft Edge, and Firefox.

If you don’t like Grammarly, Microsoft Editor is the best alternative.

## Unsplash

Unsplash is a free stock photo website whereby you can download royalty-free images. There are over 2 million images available on Unsplash which are released under the CC0-like license. CC0 is a license that allows you to use a digital asset for free without giving a credit to the author. When downloading an image from Unsplash, you don’t need to worry about violating someone’s copyright.

Alternatives to Unsplash to download royalty-free images for free:

## GIMP

Before using an image you downloaded from Unsplash on your blog post, you might want to resize it first to reduce the file size. GIMP is a great tool to do so. Also, you can use GIMP to make basic image editing such as setting the image tone, censoring certain parts, etc. GIMP is a free alternative to Photoshop. Available for all major desktop operating systems. From macOS, Windows, and Linux.


The Bottom Line

WordPress is still the best option to create a business-oriented blog. There are lots of monetization models you can adopt as your blog grows — other than current monetization model. Divi is a great theme to create a business-oriented blog. It comes with lots of useful features, especially a built-in page builder to make it easy for you to create the core pages of your blog.

The ability to create custom templates for header, footer, single post, etc., is another notable feature of Divi. With this feature, you have a full control over the design of your blog parts. You can place the required elements anywhere you want. Display Conditions allow you to create custom templates for specific pages or posts.

Here are the useful features you will get from Divi for blogging:

  • Built-in Page Builder: Allows you to create the core pages — as well as custom templates — in a visual way with a drag and drop editing experience
  • Theme Builder: Allows you to create custom templates for your blog parts. You can add element you want and use your own design
  • Display Conditions: When creating a certain custom template, you can apply it to the entire website, specific page(s) or specific post(s)
  • Integrations with email newsletter plugins and services
  • Ability to select a blog post editor (Classic Editor or Gutenberg)

To create a successful blog with Divi, you need to arrange strategy. Starting by picking the right niche to arranging the content strategy. We have covered everything above. Now, it’s time for you to take action.

Have a nice blogging and good luck!

How to Successfully Launch a Blog on WordPress in 2022

WordPress is an excellent resource with many great page builders; it makes building your websites more accessible. That’s great, but it means there are thousands of new blogs being launched every day.

If you wish people to visit yours, you have to build a proper resource where all components are perfect, and your site stands out from the crowd. How to successfully post articles in a blog on WordPress in 2022? A simple guide for beginners. Don’t forget that not only is writing articles important for boosting, but also paste links in blog posts.

Perfect Design

Before you even think about starting your resource, you have to perfect the style. Using WordPress to blog remains relevant because it has a variety of bright themes and tools that you can utilize to create an essential website. However, you should keep in mind that working with an expert web design company. Skillful specialists will be able to make a blog that offers a powerful experience.

There are many amateur blogs, and they don’t impress users. Often, they are poorly designed, and some features won’t work properly, so users are unlikely to return. But blogging with WordPress will be much more successful if you begin its development from the style enhancement.

Accent on the Content

Great content is the number one thing all successful blogs need. Design should be great, but aesthetics can’t compensate for poor content. You must find a new perspective if you desire the audience get interested in your blog.

Think about what your niche should be and pick a subject you like, but find a new perspective on it. You should have a good supply of content ready to start a WordPress blog. Consistency is crucial if you want repeat visitors, so having enough content to post regularly will help you move your blog forward.

Test Your Resource

Any glitches on your site must be identified and fixed prior to starting your WordPress blog. First, read all your articles and ensure there are no spelling or grammatical errors that can make you look unprofessional.

Next, you should test it for 404 errors and links that do not work. If any pages don’t load properly, it impairs user interaction.

So, go through the entire site and make sure all the links are working correctly. You can also enable 404 error notifications via email in your settings to get immediately notified if there are future problems.

Set Up the Forms

Any questionnaires you place on the web platform, such as contact forms or comment sections, should be tested before launching the site. If these forms don’t work, you may miss out on subscriptions and audience interaction, which are very important if you decide to build a WordPress blog and promote it. So try all the forms to ensure they work properly to avoid frustrating users.

Check Images and Videos

Images and videos are vital to making your site visually attractive and to diversifying the type of content you publish. However, there can be problems with their display, so they should all be tested beforehand. For example, you can touch up iPhone photos to make the size smaller and not lose a quality.

Try video players to ensure they work properly and images aren’t blurry or pixelated. You also need to see how fast the photos and players load when you enter a new page. Videos and pictures often cause slow loading, and if you encounter this problem, you should consider removing some of them.

Perform a Speed Test

It is an integral part of the smooth operating of the resource, so you should perform a speed test on your site before launching. If you cooperate with an expert web design organization, they will be able to help you with any speed issues.

You can use the Google PageSpeed tool to check how fast the data loads and how smoothly the website runs. If the result is poor, you need to make some changes to the site to reduce load times.

Some themes load quite slowly, so consider using a different theme to see if that helps. Some plugins can also affect speed, and if you talk to your web designer, they can help you find a solution to keep those features without slowing down the site.

Finally, think about how many visuals you have on the page because too many images will slow downloading. After making the changes, run another speed test, and you’ll see a significant enhancement.

SEO

It is the best way to get more traffic to your site and grow your blog. However, there are a lot of elements you need to fix if you want to improve your search engine rankings and get more traffic.

When creating content, consider the special words you want to rank for and include them in your posts. Well-structured article with headlines, images, and keyword-rich content will help you boost your blog rankings. Use software for backlinks.

There are also a lot of behind-the-scenes details you need to deal with, too. For example, a sitemap and site structure makes it easier for bots to crawl and index your pages. But, again, web design services can help you make your site SEO-optimized.

Check your Effectiveness

Once your blog is up and running, you need to keep track of its effectiveness. Analyzing traffic, page views, and post engagement will show you how fast your blog is growing and which posts are performing best.

Using free tools like Analytics from Google, it is possible to see exactly how your auditory can communicate with your blog and use those insights to improve your site. If you follow the advice in the article, you can succeed tremendously.

Author Bio:

Frank Hamilton is a blogger and translator from Manchester. He is a professional writing expert in such topics as blogging, digital marketing and SEO. He also loves traveling and speaks Spanish, French, German and English.

How to Remove WordPress Logo from Login Page

By default, in WordPress when you go to your admin login page, you’ll get a login form with the WordPress logo on top of it. Some of you may feel the need to remove or change the WordPress logo from your WordPress login page since maybe you want to have a clean login page or you want to replace the logo with your own logo.

This time, we will show you how to remove the WordPress logo from the login page and how to change the logo to your own logo.

To Remove or Change the WordPress Logo

Once you’ve decided to remove or change the logo on your WordPress login page, there are two methods we will use in this tutorial:

  • Using a WordPress plugin
  • Using a custom code

Method 1: Using a WordPress Plugin

The first method is using the WordPress plugin. As a popular way to meet almost any kind of need for your WordPress site, there is also some plugin to remove or change the logo on your login page.

We pick Ultimate Dashboard for this time, as it has the feature to change or remove the logo on the WordPress login page. The plugin also allows you to customize the WordPress dashboard and create a custom dashboard if you need it.

The Ultimate Dashboard plugin is released as a freemium plugin, so, while all of the function we need in this tutorial is available for free, more advanced function like fully white label & rebrand the WordPress, advanced login customizer, and many more are available if you upgrade it to the Pro version. You can get the plugin from wordpress.org for free and for the pro version you can go to ultimatedashboard.io.

Once you’ve installed and activated the plugin let’s proceed to the next step.

Removing the Logo

To remove the WordPress logo from the login page, from your WordPress dashboard, go to Ultimate Dashboard then click on the Login Customizer setting. On the customizer page, open up the Logo setting then proceed to decrease the LOGO HEIGHT all the way to 0%.

You can immediately see the result on the preview window because we decreased the logo height to 0, the logo will disappear on your login page. Click the Publish button once you’ve finished.

Changing the Logo

To change the logo on your WordPress login page, the steps are similar to removing the logo which is by going to Ultimate Dashboard → Login Customizer → Logo settings. Once you have opened the setting, proceed to click on the LOGO Select Image to select and upload the image for your new logo.

Once you’ve finished changing the logo, click on the Publish button to apply the changes you made.

Method 2: Using Custom Code

The second method is for you that prefer using a custom code to customize your WordPress site. Since we will be putting in the code to the functions.php file, you may want to backup your site and use a child theme to avoid breaking the parent theme or losing your changes when you update your theme.

Once you are ready, start by going to Appearance → Theme File Editor from your WordPress dashboard. In the Edit Theme page, continue by opening the functions.php file from the Theme Files list by clicking it.

Removing the Logo

To remove the logo from your WordPress login page, place the following custom code in your functions.php file under the PHP tag <?php and outside of an existing function.

/* Remove WP logo from login page */
function custom_login_logo() {
    echo '<style type ="text/css">.login h1 a { visibility:hidden!important; }</style>';
}
add_action('login_head', 'custom_login_logo');

What the code above does is prevent the header that has the logo from displaying itself by using visibility:hidden CSS to hide the element. Another CSS property that you can use to hide the element is display:none. However, unlike the previous property which can retain the space, display:none will entirely hide the element and its space so the login form may take the space and make it look aligned to the top.

Changing the Logo

To change the logo on your WordPress login page using custom code, you need to place the following code and change the sample image URL (http://example.com/your-logo.png) to your logo URL.

function my_custom_login_logo() {
    echo '<style type="text/css">
    h1 a {background-image:url(https://example.com/your-logo.png) !important; margin:0 auto;}
    </style>';
}
add_filter( 'login_head', 'my_custom_login_logo' );

By using the code above and changing the logo to our logo URL, you can see the result in the image below.

How to Add Pagination in Brizy

Brizy is one of the easiest tools to create and design websites, blogs, online shops, and many more with WordPress. One of the essential parts of web design is navigation. Because navigation contributes to user experience, it helps you allow users to access the information they want as quickly as possible by presenting an enjoyable, intuitive layout while increasing ease of use.

Pagination is one component that helps you navigate the website more easily. Pagination is used to return data and display it on multiple pages within one web page.

This article will show you how to add pagination in Brizy. To add pagination in Brizy is very easy. If you are new to Brizy, we hope this article is helpful for you.

Steps to Add Pagination in Brizy

Step 1: Add a Posts Element

Before starting the tutorial, we would like to inform you that we will give you an example of adding pagination on the Posts element. Whereby the Post element is only available on the Brizy Pro version. So, make sure that you’ve already upgraded to the Brizy Pro.

Alright, once everything is ready, let’s get started!

Go to the Brizy editor and continue to add a new block by clicking the (+) icon. This will bring you to the Blocks library. Please select the Create your own option because we want to start creating everything from scratch.

Next, add the Posts element by selecting it from the Elements panel and then dragging and dropping it into the canvas area.

Note: Ensure you’ve already posted some posts on your site.

Step 2: Adding Pagination to Pages

Once the Posts element is added, go to the Posts settings and click on it. Once you enter the Posts settings, go to the Navigation tab and enable the Pagination option by sliding the toggle to the right.

As you can see from the GIF above, pagination is added to the page. You can customize the Navigation, such as tags and pagination spacing, or edit and style up the Posts as you prefer.

Don’t forget to save your project by clicking the Save Draft button or the Publish Page button if you want to publish it.

The Bottom Line

Pagination is crucial enough on dynamic websites like online shops, blogs, online magazines, etc. In Brizy, you can use the Posts element to display multiple pages within one web page. You can also add pagination to the Posts element, making your visitors navigate your site easier. This article shows you how to add pagination in Brizy; we hope this article is helpful for you and improve your skill in web designing.

How to Hide a Section for Non-logged in User in Elementor with Happy Addons

This article might be helpful if you want to hide element/s on your website for the non-logged-in user to give exclusivity to your visitor who logged in to your website. Some websites require visitors to log in to access a contained part or the whole website.

Maybe you are wondering, “Is it possible to hide the section for non-logged-in users in Elementor?” Well, everything is possible in Elementor. With Elementor and Happy Addons integration, you can hide the section for the non-logged-in user on your website.

Happy Addons is one of the best Elementor add-ons. This article will show you how to hide a section for the non-logged-in user with Happy Addons.

Steps to Hide the Section for Non-logged in User in Elementor with Happy Addons

Step 1: Install and Activate Happy Elementor Pro

To start this tutorial, you must install Happy Addons to your Elementor-powered WordPress site. We need a Happy Display Condition feature to hide the section for non-logged-in users. Whereby Happy Display Condition feature is only available on the pro version. You can download Happy Addons Pro on its official website. Install and activate once you have downloaded the Happy Addons file.

Once you’ve activated the Happy Addons Pro, go to Happy Addons -> Features on your WordPress dashboard. Go to the FEATURES tab and make sure that the Display Condition is enabled.

Step 2: Create a New Content (Post/ Page) or Select an Existing Content

Now, we will use this addon to hide a section for non-logged-in users on the website. You can create new content or edit the existing one. We will edit our existing page (Barber Online Course) in this example. What we are going to do here is hide a section about the barber course videos for non-logged-in users. So, only users who logged in can see that section.

Step 3: Apply the Happy Display Condition Feature

Alright, it’s time to apply the Happy Display Condition features to the section you want to hide for the non-logged-in users. Go to the section settings by clicking the Edit Section button. Next, go to the Advanced tab -> Happy Features.

Once you enter the Happy Features settings, you must make changes to hide a section for the non-logged-in users. Please follow the following steps below:

  • Enable the Display Condition option

Go to the Display Condition option and then enable its option by sliding the toggle to the right.

  • Hide the Element

Go to the To option, then set it to the Hide Element.

  • Set the Condition

Go to the Conditions settings and then click the Login Status options. Next, set the condition of the element (section) based on the login status in which the user is not logged in and can’t see the element/ section (see the GIF).

Update the page to apply the changes.

The Bottom Line

This article shows you how to hide the section for the non-logged-in user with the Happy Display Condition feature based on login status. Besides the login status, the Happy Display Condition feature can help you display your content depending on different conditions like operating system, browser, time, date range, and many more.

Pin It on Pinterest

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.