How to Add a WhatsApp Button in Divi

With more than 2 billion users worldwide WhatsApp is one of the most popular messaging apps. And with the vast majority of people in the world using WhatsApp, you might want to add a WhatsApp button to make it easier for your site visitors to start the conversation with your support team, sales team, or any other team.

In this post, we’re going to show you step-by-step on how to add a tap to WhatsApp button in Divi. When the visitor clicks the button, it will open up the WhatsApp app on their phone when they access your website via smartphone or open the WhatsApp Web when they access your website via laptop.

Adding a Tap to WhatsApp Button in Divi

Step 1: Create a WhatsApp Button

For this step we choose to create a sticky floating button on the right side of the page to start our tutorial. For more detailed instructions on creating a floating button in Divi, you can read our previous article on how to create floating Buttons in Divi.

To get started, you need to create or edit a page with Divi Builder, then add a Blurb module for the WhatsApp button in a new section or on any section of your choice on the page.

Once the module is in place, proceed to clear the text from the Title and the Body in the Blurb Settings.

Now, move on to the Image & Icon block then click on the Use Icon toggle to use an icon instead an image.

On the Icon field, search for the WhatsApp icon so we can use it as our button.

You can change the color of the icon to green for more WhatsApp resemblance by moving to the Design tab Image & Icon Icon Color.

Once you’ve finished your button style, next is to make your button floating in the right side of your page.

Continue by moving to the Advanced tab then modify the value in the Position block as follows:

  • Position: Fixed
  • Location: Middle Right
  • Horizontal Offset : 20px
  • Z Index: 9999

Step 2: Give WhatsApp Link to the Button

Now, to make the button open up the WhatsApp app when it’s clicked, we need to add a link for it.

To do that, go back to the Content tab of the Blurb Settings then open up the Link block and fill the Module Link URL with WhatsApp universal link.

WhatsApp Universal link format is as follow:

https://wa.me/<number> Where the <number> is a full phone number in international format omitting any brackets, dashes, plus signs, and leading zeros. Examples:

  • Correct link: https://wa.me/15551234567
  • Incorrect link: https://wa.me/+001-(555)1234567

And that’s it, the button is ready for some tapping, go save and publish your work to try it on the front end of your website.

Now, when you click the button it will open up the WhatsApp app on your phone if the app is installed.

How to Make All Accordion Items Closed by Default in Divi

When you visit a website’s FAQ page, you may often get an accordion item list with each question becoming a header in each item. Many readers are coming to find an answer to only one or two questions and the accordion gives people control over what to read, and when, that’s why the accordion is perfect for it.

However, the first item of the Accordion module in Divi is open by default, even when you want it to be closed at first, there is no setting option for it. Fortunately, there is some trick we can use to make it so.

In this post, we will show you how to make the accordion’s first item closed (or look like it) by default in two ways.

  • By hiding the first toggle item.
  • Use a shortcode to close the first item.

Let’s get into practical, shall we?

Hide the First Item

First, edit or create a page you want to use the accordion using Divi Builder. Once you’re in the editor, add the Accordion module and open the Accordion Settings, then open the first toggle item setting.

From there, continue by moving to the Advanced tab Custom CSS Main Element then add the following snippet.

display: none; 

The setting in your editor will be something like the following.

Once the code is in place, in the editor, you’ll see your accordion first item is missing and the second item toggle is still closed. That way you can start from the second item toggle to start your accordion list.

Use a Shortcode

To make the accordion item closed by default with the shortcode, you will need to add a code module to the editor and then paste the following code into the Code Settings Text Code.

The shortcode:

<script>
jQuery(function($){
    $('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
    $('.et_pb_accordion .et_pb_toggle').click(function() {
      $this = $(this);
      setTimeout(function(){
         $this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');
      },700);
    });
});
</script>

And this is what it looks like in the editor.

Once you apply the code, there won’t be any visible changes in the editor, however, you can see its effect on the front-end preview of your website or after you publish the page.

The above tutorial is for a single page only. If you have some accordion on the other pages previously created, then you may want to apply the code to your website by going to the Divi Divi Theme Options Integration tab, then paste the code in one of the editors there.

Bottom Line

Besides for FAQ page, you can use an accordion to improve the user experience, for instance, if you need to fit a lot of content on a small screen like a mobile device, then an accordion can help the reader to give an overview of the page content with a little scrolling of the page.

How to Add Custom Code Snippets to WordPress Safely

Even though WordPress already has so many customization options, there might be a time when you want to add code snippets to your WordPress to add a certain functionality.

For instance, you may want to add a custom code with a specific function that you can’t find on any available plugin, or you don’t want to use the plugin since you are taking precautions for your site security. Aside from getting the code from some tutorials, if you don’t have good knowledge of the coding language, fortunately, there are some online platforms where users can share and copy custom code snippets like GitHub and WordPress.org developer.

There are 3 ways to add code snippets safely to your WordPress

  1. Creating a child theme
  2. Using a plugin
  3. By creating a custom plugin.

Before getting started, it’s always recommended to backup your WordPress site periodically using your hosting provider backup feature or a backup plugin to have assurance in case you’re experiencing issues from miss-configuration or unsuccessful updates down the road.

Method 1: Create a Child Theme

A WordPress child theme is a child of an existing parent theme that provides a chance to safely make changes to your parent theme without editing the parent theme itself.

You may often read about child themes when you start looking to make changes to your WordPress site theme. If you want to create one, we already covered it in our previous article on how to create a child theme for your WordPress site.

Adding the custom code snippet to your WordPress child theme is similar to any regular theme which is by opening the “function.php” file on the Appearance Theme File Editor page and then putting the custom code there.

However, if you just want to make a few minor modifications it might be overkill to create a child theme, you may want to use the other two methods that we’ll show you in this post.

Method 2: Using a Plugin

Now we’ll show you how to add code snippets to your website using a plugin called Code Snippets. Before we get to the action, we’ll explain why we choose this plugin first.

Code Snippets is a free (pro version is coming soon) plugin and the most popular option for running code snippets on your site which is active on over 600.000 at the time of writing. You can get the plugin from wordpress.org.

Beyond being an easy and simple plugin to run and manage code snippets on your site, Code Snippets removes the need to add a custom code to your theme’s function.php file which makes your modification likely to persist after a theme update. And if you’re not using a child theme function.php your main theme file can get rather long and messy after a while and you’ll lose your work if you update your theme.

Once you are ready, let’s install and activate the Code Snippets, then it will add the “Snippet” menu in your WordPress admin dashboard, let’s try to click it.

As you can see in the above image, there are already some pre-made code snippets ready to use if you need them.

All snippets in Code Snippets plugin can be activated and deactivated with just a click like a light switch.

We will use custom code to disable the Gutenberg editor for this tutorial. You can copy the code from our previous article on how to disable the Gutenberg editor.

Now, to add the custom code, click on the Add New button, and you will be taken to the Add New Snippet page. On this page, you’ll add the title and paste the code into the available editor just below.

Once the code is in place, click on the Save Changes button to save the snippet then proceed to activate it by clicking the Activate button.

Now, when you try to add a new post, the Gutenberg editor will be disabled and you will get the Classic Editor back in action.

Go back to the Code Snippet home and you’ll find your new snippet there at the bottom of the snippets list.

You can deactivate the snippet anytime just by clicking on the item switch.

Method 3: Create a Custom Plugin

It might sound overwhelming to create your own plugin if you have never done it before but, don’t worry, creating a plugin for our code snippet is actually easy.

You can create the plugin from your PC. Let’s start creating a folder for the plugin, get inside the folder then create a text file with a name of your choice and add a PHP extension at the end of it, something like this “myplugin.php” will do.

Now open the file and paste the following snippet into the file

<?php
/*
Plugin Name: My plugin
Plugin URI: https://www.wppagebuilders.com
Description: Custom Plugin for adding custom code
Version: 1.0.0
Author: WPPagebuilders
Author URI: https://www.wppagebuilders.com/
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Then, continue by creating a ZIP file from the folder with any file archiver you have.

Once the file is ready, go to your WordPress admin page then upload the file by going to Plugin Add New → Upload Plugin → Choose File and select the ZIP file you just created, then click the Install Now button to install the plugin.

Now, you’ll find the file you just uploaded in the plugin list, We recommend activating it later after adding the code snippet you want to add to the plugin.

To add the snippet to the plugin go to Plugins Plugin File Editor. From there select your plugin in the “Select plugin to edit “ dropdown list, then click Select to open the file editor of your plugin.

We will use the Disable Guttenberg Editor custom code from before for this time too.

Once the custom code is in place click the Update File button to save your plugin changes. Then, continue by activating the plugin in the installed plugin list.

Now, similar to the previous method your Gutenberg editor is gone and you get a classic editor instead.

To Sum it Up

WordPress already has plenty of customization ready for you to use. Moreover, there are more than 50.000 plugins that can help you to expand your site functionality. However, if you can’t find what you need, code snippets fill the gaps in your specific requirement.

With the three methods we just covered, you can safely add the code to your WordPress theme without the need to worry about breaking things and losing your work.

8 Necessary Gutenberg Blocks for Blogging

While Gutenberg is great to create the static pages of your WordPress site (homepage, about page, contact, and so on), it is not the case when it comes to blog post creation. There are too many blocks that you never even need to create a blog post. If you still remember, Classic Editor only allowed you to add text and image and they are enough for blog post creation in most cases. If you needed to an add element that was not available in the Classic Editor (say a button), it could be supplied by a plugin without making your editor getting messed.

The fact is that Classic Editor still loved by many WordPress users, which can be proved by looking at the stats on WordPress.org whereby the Classic Editor plugin has over five million users.

Classic Editor itself is actually not really gone from WordPress. It still around on the WordPress core. You can get it back by disabling Gutenberg on your WordPress site. When Gutenberg is disabled, it will automatically be replaced by Classic Editor (at least until WordPress 6.0).

How to Make Blog Post Creation Fun Again with Gutenberg

Many WordPress bloggers prefer to use Classic Editor instead of Gutenberg as it is easier to use. Gutenberg offers a more modern way to create blog posts. That’s a fact. But again, it has too many elements, which are not necessary for creating blog posts. Another serius issue with Gutenberg when it comes to blog post creation is that each theme offers distinct experience. It is because theme developers control some Gutenberg features. Newspaper by tagDiv is one of WordPress themes that offer the best writing experience with Gutenberg.

If you have found a theme that offers a great writing experience with Gutenberg, you can disable the necessary elements (called blocks) to make your editor looks simpler. You can disable unneeded Gutenberg blocks from the Preferences menu, which you can access by clicking the three-line icon on the top-right corner inside the Gutenberg editor.

From the Preferences window, you can click the Blocks tab and simply uncheck the blocks you want to disable.

From the same window, you can also disable setting blocks on the Gutenberg settings panel that you don’t need. Simply open the Panels tab and uncheck the settings block you want to disable.

Apart from the method above, you can also disable Gutenberg blocks by adding a new function to your current theme. Read here to learn more.

Necessary Gutenberg Blocks to Create Blog Posts

Creating blog posts is completely different from creating pages. When you create a page, you need to set the layout (e.g., fullwidth), set the background, add more stylized visual elements, and so on.

In blog posts creation, the emphasis is on the text-based content. Of course, you can also add visual elements like images, but they not as crucial as on pages. On a blog post, visual elements play a role only to strengthen the story to convey.

Here are the necessary Gutenberg blocks to create a blog post.

1. Paragraph

Paragraph is the most essential Gutenberg block to create blog posts. You need it to add the main text content on your blog post. The block itself is added automatically when you create a new blog post. Also, it is added automatically when you hit the enter key on your keyboard with the intention to move to another paragraph.

2. Heading

If you want to create a longform article (e.g., listicle) it’s crucial enough to add heading elements to make it clear what a certain part is telling about. Take a look at the following example:

You can read the full article of the screenshot above here. The article covers WordPress plugins alternatives to Elementor, which there are some. To make the article easier to understand and pleasurable to read, we divided each alternative item with a heading element.

The implementation of the heading elements is broader than listicle. The point is that you can use it to divide your blog posts into parts with a main goal to make your blog post more pleasurable to read and easier to understand. What’s more important is that adding heading elements is beneficial for SEO.

3. List

When writing a blog post, you might think that that some texts need to be formatted in a list style to convey the digest. For instance, you are writing the features offered by an app. On the conclusion section, you want to list the main features offered the associated app. In such as a case, you can use the List block.

The List block of Gutenberg support both numbered list and bulled list.

4. Table

The Table block is quite useful for a certain type of blog post.

Say you are comparing two WordPress plugins (e.g., Elementor vs Divi). After a long coverage, you think it would be great to create a table to convey the digest so that your readers can find the comparison results more easily. The Table block is really useful for the purpose.

When adding a table on a blog post, you can set the number of columns and rows and set the basic stylings such as border style, border width, and border color. The screenshot above is the example use of the Table block of Gutenberg.

5. Image and Gallery

As said earlier, the use of images can strengthen the story you want to convey via a blog post. In WordPress itself, there are several types of images. From featured image (which is used as a post thumbnail) to images on the post body. For images on the post body, you can add whether an individual image or gallery. Gutenberg has two different blocks to add an individual and image gallery.

You can use the Image block to add an individual image. While for image gallery, you can use the Gallery block.

6. Buttons

Say you are writing a review of a software. On the conclusion section of your review, you want to add a call-to-action button to make it easier for your readers to download the software. Gutenberg has a native block for such a need so that you don’t need to install a plugin — which eventually will make your Gutenberg populated with too many blocks. The native Buttons block of Gutenberg support styling settings such as border radius, size, and color (text and background).

7. Quote

If you often cite statements from public figures on your blog posts, then the Quote block should remain available on your Gutenberg blocks list. The block will display a quote in a different way than regular texts so that your readers easily understand that it’s a quote.

The format/style of a quote is varied depending on the theme you use, but you can set basic styling settings such the background color, text color, and text size.

8. HTML

You can use the HTML block for a wide range of purposes. From embedding a YouTube video, embedding a tweet, embedding an Instagram post, to embedding an online form. Gutenberg itself has a set of blocks aimed at embedding external content which you can find on the Embed block.

As you can see on the list above, there are too many social media items available. Some even look strange. Instead of using the blocks above, you can use the HTML block to embed external content. You can disable the blocks above to make your Gutenberg looks minimalist.

The Bottom Line

The essence of blogging is writing content. Meaning that you should add more text elements to your content. Of course, other elements are also crucial, especially in the visual era like today. You need to add images to videos to strengthen your story or anything you cover via your blog post. However, if your editor is populated by too many elements and options, it can be another source of distraction that led to less-focused work.

Gutenberg is great to create blog posts. However, with more and more blocks and setting options being added, we think you need to simplify your Gutenberg by disabling the unnecessary blocks. In most cases, the above blocks are enough to create blog posts with Gutenberg.

What if you need to create pages?

Instead of Gutenberg, you can use plugins like Elementor, Brizy, to Divi Builder to create pages on your WordPress. They offer a better experience than Gutenberg to create pages. Let Gutenberg be a blog post editor instead of a page builder and you will find your joy again to blog with WordPress.

How to Create a WordPress Child Theme

Presumably, you have seen people suggest you use a WordPress child theme when you start looking to make changes to your WordPress site’s theme, but, what is a child theme, and how important are child themes in your website?

We will give you some explanation and a step-by-step tutorial on installing a child theme and we expect it could help you decide on using one.

What is a WordPress Child Theme and What is the Benefit of Having One

A WordPress child theme is a child of an existing parent theme that provides a chance to safely make changes to your parent theme without editing the parent theme itself.

A child theme requires a parent theme to be installed as well, so a child theme can’t be a standalone theme. A child theme inherits most/all of the design settings by pulling them from the parent theme, in a situation where you make a change to the child theme, that change will override the settings in the parent theme.

You might wonder, why not just change directly to the parent theme?

You need to keep your theme up to date if you want to keep your WordPress site secure and perform better. If you customize your site by editing your theme directly, then that means every time an update comes out and is applied, you will override all of your changes, and that’s a pretty awful experience right?

Aside you don’t have to worry about the theme update, if you have a child theme that also means:

  • You can make all changes in the child theme without worrying about losing any of your work
  • Easier to keep track of all of your modifications and tweak them as needed in the child theme
  • You can easily go back to the parent theme design anytime by disabling the child theme

How to Create a WordPress Child Theme

Now, let’s get into the more practical part of this tutorial. We will show you how to create a WordPress child theme with two methods:

  1. Using a Plugin
  2. Using the manual method.

Creating a WordPress Child Theme Using Plugin

We recommend that you make a full backup of your site before proceeding. Or, ideally, set everything up on a staging site.

In this tutorial, we choose the Child Theme Generator plugin to create our child theme. It has an active install of over 300.000 which makes it the most popular option for creating and customizing a child theme.

Let’s start by installing and activating the plugin from WordPress.org. Next, from the WordPress dashboard, go to the Tool menu Child Theme to create the child theme.

Select the theme for which you want to create your child’s theme in the Select a Parent Theme setting then click the Analyze button.

Once the plugin analyzed your theme, some additional options to configure your child’s theme will show up below the analyzed result. Each additional option has a brief explanation of what it does. However, you can leave it as default if you’re not sure about the options.

Once you’ve finished making your choice, click the Create New Child Theme button to create a new child theme.

Then, after you got the notice about successful child theme creation, we still need to activate the child theme. Go to Appearance Themes to apply the child theme.

Before activating it, let’s look at the Live Preview of what your site looks like with your child theme to make sure it’s working.

Once you are ready, click on the Activate button to activate the child theme.

You can use the tool included in the Child Theme Configurator plugin to help you manage your child theme, such as, viewing all of the associated files in both your child theme and parent theme and copying files from the parent theme to the child theme by going to the Files tab of the plugin’s settings to override the parent templates settings.

Creating a WordPress Child Theme Manually

We’ll assume that you know a little bit about PHP and CSS for this section or you can use the plugin method from the previous section if you do not feel comfortable with the instruction here.

To manually create a child theme, you need to have at least these two files:

  • style.css ~ Child theme main stylesheet
  • functions.php ~ This file will ensure the child theme inherits its parent theme styling by enqueueing the stylesheet from the parent theme.

Let’s start by creating the folder for your child’s theme. Open file manager on your web hosting service. Go to your WordPress installation directory, and open /wp-content/themes/ folder.

You can name the folder anything you want, however, you could name the child theme folder with the parent theme folder name by adding “child” at the end to help you remember it.

Continue by opening the folder and creating the first file, the style.css file. Open the file then add the following code:

Theme Name:   Twenty Twenty One Child Theme
Theme URI:    https://www.wppagebuilders.com/
Description:  Twenty Twenty-One child theme 
Author:       WPPagebuilders
Author URI:   https://www.wppagebuilders.com
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild

The above code contains information about the child theme, feel free to change everything after the colons except the Template line with your actual information. The Template line must have the same line as your parent theme folder name as your child theme won’t work without this.

Now, let’s create the second file, the functions.php file. Continue by opening the file and add the following codes:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Once you created both files, you can also add a picture in the child theme folder to give it a thumbnail to help you recognize the child theme when you search for it. You should name the picture with “screenshot” as its name for the thumbnail to appear in the theme selection.

The next step is activating the newly created child theme. The activation is just like you would on any other WordPress theme which is by going to Appearance Themes from your WordPress dashboard. You may want to look at the Live Preview first before activating it.

More on WordPress Child Theme

A quick Google for a child theme of your theme may let your creative juice flow. For example, themes like Divi have a market for child themes on their website, and Astra has a tool to generate child themes.

Installing a Pre-Made WordPress Child Theme

To install a pre-made child theme is just like you would any WordPress theme and that is by going to Appearance Themes Add New and then click on Upload Theme to upload the child theme.

Note: The creator of the child themes may give you more instructions on how to install them to get the same style and appearance as their theme preview.

Customizing the Child Theme

You may want to customize your child theme (actually you’re using the child theme to override the parent), just as customizing a regular WordPress theme, there are multiple methods for it, here are some of the methods:

  • By using the WordPress customizer in your WordPress admin screen
  • By utilizing the theme builder from the page builder of your choice
  • By adding a custom CSS code to your child theme’s style.css
  • Override the parent theme’s template by copying the template file and then editing it on the child theme

For the last two methods, you will need to have some knowledge of CSS, HTML, and PHP.

However, if you only want to put some code snippets to add some function from the internet to your WordPress site, let’s take Metabox custom field generated code for the example, then you can put them in the child theme’s functions.php file anytime without worrying about breaking or updating the parent theme.

Removing a WordPress Child Theme

To stop using your child theme, you can deactivate it just like you would on any other WordPress theme which is, by activating another theme in Appearance Themes. Either a brand new WordPress theme or go back to the parent theme, just a reminder, if you move back to your parent theme default design, all of the changes from the child theme will disappear until you activate it again.

Strive Review: The Best Visual Content Calendar Plugin for WordPress

It’s quite challenging to find a content calendar plugin for WordPress. Strive is one of the few options of this plugin type. It allows you to stay on track with your editorial schedules. As a result, you can achieve your goals regarding content production punctually. Strive is a great content scheduling tool whether you are a solo blogger or a content manager responsible of managing some authors. With Strive, you can make the entire process of content creation on your website be more structured. Read on the learn more about the plugin.

Let’s start with a question, “do you really need a content calendar plugin?”

Say you are a blogger. Content creation is your main job as a blogger if you want to be successful with your blog. Content creation itself involves several steps. From conducting research, creating the outline, etc. In other words, you need to plan everything before you execute the content. Planning is the keyword here.

Imagine you have conducted research for new content and found some promising topics. After making the outlines of each topic, you are ready to proceed with the real content creation. What will happen then if you don’t make schedules to write the content? Chances are, you will leave a half-finished content and switch to another topic without even finishing the one you left.

Let’s take another example.

You have a blog that you manage with your team. In this case, you play a role as a content manager. As a content manager, your job is to assign tasks to your author team in terms of content creation. In such as a case, what tool you use to manage the content creation schedule of your team?

Strive is a great answer to the question.

What is Strive?

There are a bunch of WordPress plugins you can find on wordpress.org or marketplaces like CodeCanyon and Divi Market Place. However, as we stated in the opening section, it’s quite challenging to find a plugin developed specifically for scheduling content creation like Strive.

With Strive, you can schedule the content creation on your blog to make sure you don’t miss any content idea you plan to write. More importantly, it allows you to get your content done more punctually by sticking to what have been scheduled. Strive comes with handy features such as calendar view, color-coded editorial status, pipeline, and so on.

Strive is especially a great plugin if you have a blog with multiple authors whereby you are the content manager. You can use it to schedule content and assign each content to your author team. When assigning a content creation schedule, you can add pre-defined parameters like post category and post tag.

Strive Features

1. Content Creation Scheduling

Content creation scheduling is the main feature offered by Strive. You can use the feature to make the schedules of content creation. Not just default content (blog posts), but you can also schedule the content creation of custom post types — which is great if you have other content types on your website (e.g., listing items). When adding a new content schedule, you can insert an existing draft or create a blank content schedule.

The elements you can add to your schedule are:

  • Post title
  • Post category
  • Post tag
  • Note

You can also set who will write the content by picking an author from the existing authors list.

Want to change schedule of a certain content? Strive has made it extremely easy to do so. You can simply drag and drop a schedule item to reschedule it.

2. Color-Coded Editorial Status

You can view all the content creation schedules you have made in a calendar view on the Strive main screen. Each schedule has its own color according to its status. Posts that have been completed have a green color code, while the posts that haven’t started have a red color code. Here are the color codes of the editorial status:

  • Red: Not started yet
  • Orange: Being written
  • Yellow: Being edited
  • Green: Done

Every new schedule you add has a red as the default color. To change the color (status), you can tick one of the options on the post settings panel on the Gutenberg editor — right beneath the Author field. You will see these options after installing and activating the Strive plugin.

3. Pipeline View

As a blogger with lots of posts to write, you may sometimes leave a half-finished post when you have no idea what to write next. If you often do this, you will definitely have a pile of unfinished posts. If the posts have potential keywords or topics, it will be a huge lost. The Pipeline View feature of Strive allows you to view the list of unfinished posts on your website, as well as the scheduled posts. The feature is great to dig up old (unfinished content) as Calendar View shows only the scheduled and published content.

4. Post Checklists

Planning is crucial in content creation. Before creating the content (e.g., blog posts), there are several steps you need to do. From conducting research to find the potential keywords, conducting research to find references, and so on. And when it’s time to write the content, you also need to make sure that you don’t miss any step such as optimizing the keyword, adding featured image, adding internal links, checking the grammatical errors, and so on. Without an assistant, it’s easy to forget a certain step when you write new content.

Strive comes with a writing assistant — Post Checklists — to make sure you have completed all the necessary steps before hitting the publish button.

After installing Strive, you will find a new icon on the menu icon bar on the Gutenberg editor. When you click it, you will see checklist items consisting of steps you need to complete before you publish your content.

These checklist items are pre-defined by Strive. You can edit them from the settings page of Strive. If you need to add more items (tasks), you can also do so. You can even create your own checklists if you want to.

While checklist items help you and your writer team to make sure they don’t miss a thing, they can also be used to track the progress of the content creation. From Calendar View, you can check the number of checklist items that have been checked on each post.

Not only Post Checklists works on Gutenberg (block editor), but it also works on Classic Editor in case you still you use.

5. Revisions

To make your content keep relevant to your readers, you can simply update it when you find a certain content is outdated. Strive makes it easier for you to schedule the editing of old content by offering a Revisions feature.

When you go to Posts -> All Posts on your WordPress dashboard to check the list of the published posts, you will see a new item clickable link called Create Revision. Clicking the link will take you to the Gutenberg editor whereby you can schedule the editing.

All published content that has been scheduled to edit is still accessible by your visitors. You can check the editorial status from both Calendar View and Pipeline View.

Strive Pricing and Where to Get It

Strive is a paid plugin marketed via Freemius. To use the plugin, you need to allocate a $7 monthly budget. Before being charged, you have a chance to give Strive a try for 30 days for free (providing card info is not required during the trial period).

The 30-day trial period allows you to use all the Strive features without exception. If you enjoy using Strive and want to subscribe, you can click the Upgrade Now menu within the Strive settings screen inside your WordPress dashboard. You have two billing cycle options: monthly and yearly. The yearly option gives you a 16% discount. Want to get Strive with a one-time payment instead? There is also an option for it.

The prices on the table above are for a Single Site license. Meaning that you can only install Strive on one website. There are five license types offered by Strive:

  • Single Site: $7/month
  • 3 Sites: $10/month
  • 5 Sites: $13/month
  • 10 Sites: $20/month
  • Unlimited Sites: $30/month

How to Get and Install Strive

As said above, Strive is a paid plugin marketed via Freemius so won’t find it on wordpress.org. To download Strive, you can visit its pricing page and click the Start Your 30-Day Free Trial button.

Clicking the button above will open a form where you need to enter your name and email address. Click the Start Trial button after filling out the fields. Strive will send the ZIP file of the plugin to your email address. Simply download it.

Once the ZIP file is downloaded, go to Plugins -> Add New on your WordPress dashboard to install the plugin. Activate it right away once installed. On the activation process, you will be asked to enter the license key which is included on the email sent to you. Simply paste the license code and click the Agree & Activate License button to start using Strive.

The Bottom Line – Strive Review

You can easily find a caching plugin, a security plugin, or a page builder plugin for WordPress. But is not the case for content calendar plugin. Having a content calendar on your WordPress site is crucial enough to booth your productivity. Strive is one of the rare options in the content calendar segment.

Strive is especially a great plugin if you manage a WordPress blog with multiple authors whereby you play a role as the content manager. You can make use of it to schedule the posts to execute by your authors team. Strive offers a modern way to schedule content creation right from your WordPress dashboard. What’s more important is that you can track the progress of the content creation thanks to its Post Status feature. Strive is definitely a must have plugin for a WordPress blog with multiple authors.

If you are a solo blogger, Strive will help you to stay on track with your editorial timeline. Its Posts Checklists feature can help you to make sure you don’t miss any step when creating new content.

How to Add Breadcrumbs in Divi without a Plugin

Breadcrumbs is touted to have a good impact for SEO. Outside that, breadcrumbs allow your visitors to better understand the link structure of your website so that they can explore more pages on your website via breadcrumbs. Unlike Elementor, Divi has no built-in element to add breadcrumbs. To add breadcrumbs in Divi, you need the help of a plugin.

Turns out, you can add breadcrumbs in Divi without installing an extra plugin, but you need to use Yoast.

Yoast, as you have probably known, is a popular SEO plugin for WordPress. One of the features offered by Yoast is breadcrumbs. The method to add this feature is varied depending on the page builder you use. As said above, Divi has no built-in element aimed at displaying breadcrumbs. So, how to add breadcrumbs in Divi without needing to install an extra add-on?

Yoast comes with a “secret” shortcode aimed at displaying breadcrumbs. You can make use of it to display breadcrumbs on your Divi page (or custom template). Here is the shortcode.

[wpseo_breadcrumb]

Adding Breadcrumbs in Divi without a Plugin

First, make sure you have installed the Yoast plugin. Next, edit a page (or custom template) using Divi Builder. Once the Divi Builder editor opens, add the Text module.

Once the Text module is added, click the Text tab on the Body field and paste the shortcode above.

To style up the breadcrumbs, you can go to the Design tab on the settings panel. On the Text settings block, click the chain icon.

You can set things like font size, font family, text color, and so on.

To change the separator, you can go to Yoast SEO -> Search Appearance on your WordPress dashboard. Click the Breadcrumbs tab and type/paste the separator you like on the Separator between breadcrumbs field.

Don’t forget to click the Save changes button to apply the change.

The Bottom Line

You can use breadcrumbs as the extra navigation to your website to allow your visitors to better understand the link structure on your website. More importantly, adding breadcrumbs is beneficial for your website when it comes to SEO. Divi has no native element to add breadcrumbs, but if you use Yoast, you don’t need to install an extra plugin only to add breadcrumbs. You can make use of the Yoast built-in shortcode aimed at displaying breadcrumbs.

How to Exclude a Page or Post from Search Results Page in WordPress

By default, the WordPress search result displays everything on your site including posts, custom post types, pages, categories and tags, titles, and content that are relevant to your search keyword. However, when users are using the WordPress search function, generally they are looking for a particular post and not a page on the site.

Your next question might be – “is our homepage and another irrelevant page to our visitor’s search will be displayed as well? “. Yes, they will be displayed as long as they have the relevant word on those pages. Well, it will be a bit turn-off for the visitor, right? That is one of the occasions when excluding pages or posts is needed.

Another example of the purpose of excluding search results is when you run a membership website, surely you wouldn’t want the subscriber-only content to show up in the search result of an anonymous user.

There are still many reasons you may want to exclude pages and posts, with that said, in this article, we will show you how to exclude posts and pages from WordPress search results.

How to Exclude a Page from Search Results

Let’s get into the more actionable steps of how to exclude search results in WordPress.

As is often the case with WordPress, there are two routes that you can follow to exclude search results:

  1. Using a plugin
  2. Using custom code

In almost all cases, using the plugin as a means to exclude search results is easier to do from the later method, so we’re going to start our tutorial there.

Excluding a Page from Search Results Using Plugin

First, you need to install the plugin. For this tutorial, we’ll use the Search Exclude plugin and you can get it from wordpress.org for free. There are some other plugins that can exclude search results as well, however, the Search Exclude plugin is lightweight, simple to use, and does perfectly for this job.

After installing the plugin, proceed by activating it and you can immediately exclude pages and posts with no setting required by checking the checkbox that now appears within the WordPress editor.

Note: Search Exclude plugin also supports quick and bulk edits.

Now if you want to know any pages or posts you’ve excluded over time from the search result, the Search Exclude plugin also provides you with a “settings” page that will list all of them.

Go to Settings in the WordPress dashboard then click on the Search Exclude menu. On the appearing page, you’ll find pages and posts you’ve excluded over time from the search result and you can make them available again for search just by ticking off the checkbox in the list and clicking on the Save Changes button.

Excluding a Page from Search Results Using Custom Code

To exclude pages or posts from search results with custom code, you will need to add the following snippet into your function.php file. We recommend using a child theme for this, to avoid the risk of our changes will be overwritten when updating the theme. And you could use the Code Snippets plugin to insert the code snippet seamlessly.

if (!is_admin()) {
  function search_filter_pages($query) {
    if ($query->is_search) {
  $query->set('post_type', 'post');
}
  return $query;
}
  add_filter('pre_get_posts','search_filter_pages');
}

The code snippet above makes the WordPress search only for posts after making sure it does not originate from any of the WordPress admin pages. For pages only search results, you can modify the 'post' parameter into 'page'.

 $query->set('post_type', 'post');

Now, go to Appearance on the WordPress dashboard then select the Theme File Editor menu, you will be taken to the Edit Themes page, then continue by clicking on the function.php in the list of Theme Files to open the function.php file.

Once you’re in the editor, you can paste the code snippet just under the PHP tag <?php. Here is what it looks like in our function.php file:

Continue by clicking the Update File button to complete the tutorial.

Now, when you try to search with the WordPress search function, the result will be only posts and no pages will be displayed.

How to Disable Full-Site Editing in Divi

Full-site editing (FSE) is becoming a new buzzword on the WordPress sphere. It is a concept that allows you to edit the footer, header, and a page (e.g., homepage) of your website from the same screen. While FSE is finally available in the WordPress core, the same feature has been available for a quite while in page builders. Elementor has introduced the feature in version 2.9 (which was released in 2020), while in Divi, the feature started available in version 4.12 (read: Elementor vs Divi).

While FSE is touted to help save you time in editing the parts of your websites, it is not really well-welcomed by some WordPress users. Fortunately, Divi gives you an option to disable the feature if you don’t like it.

To disable full-site editing in Divi, first, edit a page/template using Divi Builder just like you usually do. Once the Divi Builder editor opens, click the three-dot icon on bottom side to show the menu bar.

On the menu bar, click the three-dot icon on the bottom-left corner and disable the Theme Builder Template Editing option.

That’s it. You should now see no green handles to edit the footer and header of your site. You can put your focus on the page you are currently editing without any distraction.

Please note green handles (meaning that FSE mode is active) are only visible if you have both custom header and custom footer created with Divi Theme Builder. You won’t see the handles if you use the default header and footer of Divi.

How to Create a Stock Photo Website with Elementor

Are you a photography hobbyist and have a plan to monetize your hobby? If so, one of the ideas you can implement is to create a stock photo website. You can monetize your stock photo website by requiring your visitors to subscribe before they can download a photo.

In this tutorial, we will show you how to create a stock photo website in WordPress using Elementor.

Elementor, as you might have known, is a page builder plugin for WordPress that has the most comprehensive features. It comes with a Theme Builder feature which supports custom dynamic content (custom fields and custom post type) to allow you to create a dynamic website with a no-code approach. You can make use of this feature to create a stock photo website like Unsplash or Pexels. Of course, the features of your stock photo website will not be as complex as these two popular stock photo websites. At least, you can use your website to display your own photos.

Picjumbo is a perfect example of a successful stock photo website built with WordPress. For this tutorial itself, you can refer to Lowest ISO. This website is built with Elementor.

To create a stock photo website with WordPress+Elementor (no-code approach), you will need the following plugins:

You can replace Advanced Custom Fields and CPT UI with JetEngine if you want it. Of course, you also need a domain and hosting for your website. Our recommended services to get a domain and hosting are:

If you are new to Elementor, you can read our previous article to learn how to use Elementor.

The stock photo website we will create here will consist of the following parts:

  • Homepage
  • Custom single post template to display photo items
  • Custom archive pages to display photos by categories and tags
  • Header
  • Footer

You can add other parts according to your need.

Let’s get started.


How to Create a Stock Photo Website with Elementor

Step 1: Create Custom Post Type Using CPT UI

You need to create a custom post type (CPT) to accommodate the content of photos you want to add to your website. As mentioned earlier, we will use CPT UI to create a custom post type in this tutorial. Before getting started, make sure you have installed and activated the CPT UI plugin on your WordPress site. Once you are ready, go to CPT UI -> Add/Edit Post Types on your WordPress dashboard to create the custom post type.

On the next screen, fill out all the required fields on the Basic Settings block.

On the Additional labels block, you can set the custom labels to make it easier for you to manage your photos from the WordPress dashboard. All fields on this block are optional.

Next, set the basic settings on the Settings block. On the Support section, select the WordPress components you want to include on your custom post type. In this example, we include the following components:

You don’t need the WordPress editor for the CPT for photos. To add photo description, we will use a custom field instead. Click the Add Post Type button to create the custom post type.


Step 2: Create Custom Taxonomies

To make your photos get more organized, you need to create custom taxonomies. In this tutorial, we will create two custom taxonomies to organize your photos:

  • Photo Category
  • Photo Tag

You can create the custom taxonomies using CPT UI.

— Photo Category

On your WordPress dashboard, go to CPT UI -> Add/Edit Post Taxonomies. On the Basic settings block, set the taxonomy slug, plural label and singular label. On the Attach to Post Type section, select the custom post type you have just created above.

On the Additional labels block, you can set the custom labels. Once done, move to the Settings block to set some additional settings. In our example, we use the following settings.

  • Public: True
  • Public Queryable: True
  • Hierarchical: True
  • Show UI: True
  • Show in menu: True
  • Show in nav menus: True
  • Query Var: True
  • Rewrite: True
  • Rewrite With Front: True
  • Rewrite Hierarchical: False
  • Show Admin Column: False
  • Show in REST API: True
  • Show in tag cloud: False
  • Show in quick/bulk edit panel: False
  • Sort: False

Click the Add Taxonomy button to add the custom category.

— Photo Tag

Same as custom category above, you can go to CPT UI -> Add/Edit Post Taxonomies on your WordPress dashboard to create custom tag. Make sure to attach the custom tag to the custom post type you have created above.

On the Settings block, you can use the following settings.

  • Public: True
  • Public Queryable: True
  • Hierarchical: False
  • Show UI: True
  • Show in menu: True
  • Show in nav menus: True
  • Query Var: True
  • Rewrite: True
  • Rewrite With Front: True
  • Rewrite Hierarchical: False
  • Show Admin Column: False
  • Show in REST API: True
  • Show in tag cloud: False
  • Show in quick/bulk edit panel: False
  • Sort: False

Click the Add Taxonomy button to add the custom tag.

After completing the creation of custom post type and custom taxonomies above, you will see a new menu item and sub-menu items on your WordPress dashboard as follows.


Step 3: Create the Custom Fields

Once done creating the custom post type and custom taxonomies, the next step is to create the custom fields. You need custom fields to store additional information about your photos such as photo description, photo location, and so on. More importantly, you need a custom field to place the download link of each photo item.

There are several plugins to create custom fields. In this tutorial, we will use ACF (Advanced Custom Fields). You can use the free version of ACF to create basic custom fields.

Once the ACF plugin is installed and activated, go to Custom Fields -> Add New on your WordPress dashboard to create a custom field group.

Give your custom field group a name and add your first custom field on the Fields block.

You can add as many custom fields as you want to your custom field group. In this example, we add only two custom fields as follows:

— Download link

Will use this custom field to place the URL of the original photo file (the file that will be downloaded by your visitors). You need to set the field type of this field to Url. Also enable the Required option on the Validation tab to help making sure you won’t miss the download link every time you add a new photo.

— Description

You can use this field to add description to your photo. As we said earlier, we will use a custom field to add photo description instead of WordPress editor (Gutenberg). For this field, you can set the field type to Text Area. You don’t need to enable the Required option as photo description is optional.

Once done adding the custom fields, switch to the Settings block to assign the custom fields to the custom post type you have created above. You can click the Location Rules tab to set the assignment.

Next, switch to the Presentation tab in case you want to make some additional settings to your custom field group. Once done, click the Save Changes button on the upper-right corner to apply the changes.

Until here, you can start adding your photos. To add a new photo, click the custom post type label on your WordPress dashboard and select Add New. In our case, the label is Photos.

Add a title for your photo, description, featured image, and other elements. One crucial thing. Never forget to add the link of the original photo (photo in an original size/dimension). For featured image, you can use a photo with the dimension of around 900px.


Step 4: Create Custom Single Post Template for Photo Items

Once you are done with custom post type and custom fields, the next step is to create the necessary custom templates. For this tutorial, we will create two custom templates for a single post for photo items and archive pages.

Let’s get started with the custom template for photo items.

The custom single post template we will create consists of four sections:

  • Section 1: To place the photo preview/featured image
  • Section 2: To place photographer profile photo and download button
  • Section 3: To place a subscription form and donation button
  • Section 4: To place the related photos

To start creating a custom template, go to Templates -> Theme Builder on your WordPress dashboard (make sure you have installed Elementor Pro). On the Theme Builder screen, hover your cursor over the Single Post tab and click the plus icon to create a new template.

There is no pre-made single post template designed for stock photo, so you need to create one yourself. Simply close the appearing template library window to open the Elementor editor.

— Section 1

Click the plus icon on the canvas area to add a new section. Select the three-column structure. Set the width of each column with the following configuration:

  • First column: 14%
  • Middle column: 72%
  • Third column: 14%

To set the column width, you can click the column handle to edit it. Then, go to the settings panel and enter the width on the Column Width field under the Layout block.

Once done setting the width of the columns, add the Image widget to the middle column. On the settings panel, click the Dynamic Tags icon on the Image block and select Featured Image.

Go to the Style tab to style up the featured image. On this example, we use the following settings:

  • Width: 100%
  • Max Width: 100%
  • Height: 620px
  • Object Fit: Contain

— Section 2

As mentioned earlier, Section 2 is used to place the profile picture of the photographer (you) and the download button. Add the section by clicking the plus icon on the canvas area. This time, you can select the one-column structure.

  • Post Info Widget

The first widget you need to add to this section is the Post Info widget. We will use this widget to display the profile picture of the photographer — we well as the name. You can also use the Image Box if you want it. Once the Post Info widget is added, go to the settings panel to set the types of meta data. In this tutorial, we only need the Author meta data to get the profile photo and name. Make sure to enable the Avatar option to display the profile picture.

Once done with the basic settings under the Content tab, you can switch to the Style tab to further style up the Post Info widget.

  • Button Widget

Button widget — as you can guess — is used to place the download link of the original photo file. You can place this widget right beneath the Post Info widget.

Once the widget is added, go to the settings panel to make some settings. On the Link option under the Content tab, click the Dynamic Tags icon and select ACF URL Field.

Next, click the wrench icon and select the custom field for download link you have created earlier above on the Key dropdown.

Before switching to the Style tab to style up the button, click the gear icon on the link field and type “download” on the Custom Attributes field. This attribute will make your photos automatically downloaded when your visitors click the download button. If you don’t set this attribute, your photos will be opened in a lightbox when your visitors click the download button.

— Section 3

This section is used to place the subscription form and donation button. You can use the Form widget and PayPal Button widget to add these elements. The layout of this section is completely up to you. For this tutorial, we use a horizontal layout as follows:

Click the plus icon on the canvas area to add a new section. You can select the one-column structure. Then, add an inner section to the section you have just added. Set the width of the first column of the inner section to 70%.

Once columns are ready, add the Form widget to the first column. You can connect the form with your favorite email marketing tools. From MailPoet, MailerLite, ActiveCampaign, to GetResponse.

Once done setting up and styling the Form widget on the first column, switch to the second column to add the PayPal Button widget. You can read our previous article to learn more how to use the widget. Once crucial thing. Since you want to use the PayPal button to accept donation, make sure to set the Transaction Type to Donation.

— Section 4

We will use this section to place the related photos. Add a new section by clicking the plus icon on the canvas area. You can select the one-column structure for this section. Add the Post widget to the section you have just added. On the settings panel, open the Layout settings block under the Content tab to make the basic settings. The settings we use on this example are:

  • Skin: Classic
  • Number of Columns: 3
  • Posts Per Page: 9
  • Image Position: Top
  • Masonry: Yes
  • Image Size: Full
  • Image Width: 100%
  • Title: Disabled
  • Excerpt: Disabled
  • Meta Data: None
  • Read More: Disabled

Next, open the Query block and set the Source to Related. On the Term field, select the parameter you want to use to filter the related photos. In this example, we filter the photos by photo tags.

Once done with the basic settings, you can go to the Style tab to style up the widget.

Until here, your custom template is ready to publish. Click the PUBLISH button on the bottom side of the settings panel to publish it.

On the appearing window, add a display condition by clicking the ADD CONDITION button.

Select the custom post type you have created earlier above from the dropdown menu. Click the CLICK AND SAVE button to publish the template.


Step 5: Create Custom Template for Archive Pages

On step 2 above, you have created two custom taxonomies using CPT UI, which are used to sort your photos. In this step, we will create a custom template for those custom taxonomies so that when your visitors access the URLs of the custom taxonomies — e.g. https://yourdomain.com/photo_category/animal/ — they will see the list of photos associated with the custom taxonomies. Here are the examples.

In this tutorial, we will demonstrate how to create a simple custom archive template that consists of two sections. For more detailed tutorials of how to create custom archive page using Elementor, you can refer to this post.

To start creating a custom archive template, go to Templates -> Theme Builder on your WordPress dashboard. On the Theme Builder screen, hover your cursor over the Archive label and click the plus icon.

Simply close the appearing template library as we will create the custom archive from scratch.

— Section 1

On the Elementor editor, click the plus icon to add a new section. You can select the one-column structure for this section. Once the section is added, add the Archive Title widget.

Once the Archive Title widget is added, you can go to the Elementor settings panel to style it up.

— Section 2

We will use this section to place the Archive Posts widget. You can actually place the widget to the same section as the Archive Title widget above. But placing the two widgets to different sections offer design flexibility in case you want to change the design of your archive page in the future.

Simply click the plus icon on the canvas area to add a new section. You can select the one-column structure for this section. Once the section is read, add the Archive Posts widget to it.

Go to the settings panel to make the settings and apply the stylings. On the Layout settings block, apply the following settings:

  • Skin: Classic
  • Number of columns: 3
  • Image position: Top
  • Masonry: On
  • Image size: Full
  • Image width: 100%
  • Title: Disabled
  • Excerpt: Disabled
  • Meta: None
  • Read More: Disabled

Once done making the settings on the Layout block, switch to the Pagination block to set the pagination. There are five pagination styles you can apply: number, previous/next, number+previous/next, load more, infinity load.

You can read our previous article to learn more about pagination on Elementor.

Once done with section 2, meaning you have done editing the custom archive page, click the PUBLISH button to publish the template. Add a display condition by clicking the ADD CONDITION button on the appearing window. Specify where you want to apply the custom template. Since you want to use it on the custom taxonomies, make sure to select them.

Click the SAVE & CLOSE button to apply the change.

If you want, you can also create custom search results page for your stock photo website. Read our previous article to learn how to create a custom search results page in WordPress using Elementor.


Step 6: Create the Custom Homepage

Homepage is the main page of your website. It is the page where you can display the main things you offer via your website (photos in this case). In this step, we will show you how to create a homepage for your stock photo website. We will create a simple homepage that consists of two sections:

  • Section 1: The hero section to place the headline of your website
  • Section 2: The section to place your photos

Start by creating a new page and edit it with Elementor. You can give a title of the page “home”, “homepage”, or something similar.

— Section 1

On the Elementor editor, click the plus icon on the canvas area to add a new section. You can select the one-column structure for this section. Open the Layout block on the settings panel to set the layout. In this example, we use the following layout settings:

  • Content Width: Boxed
  • Columns Gap: Default
  • Height: Min Height
  • Minimum Height: 600px
  • Column Position: Stretch
  • Vertical Align: Middle
  • Overflow: Default

Next, edit the column of the section by clicking the column handle.

On the settings panel, go to the Style tab and open the Background block. Set the background type to Classic and select an image. You can use a large image as the background of the column (e.g. 1600 x 600px).

Once done settings the section — as well as the column –, add the Heading widget by dragging it to the canvas area.

You can go to the Style tab to style up the heading. If you want to add more widgets this section, simply add ones.

— Section 2

Section 2 is used to display your photos. You can filter the photos by category, tag, or manually. You can use the Posts widget to display the photos by disabling the unnecessary elements.

Add a new section by clicking the plus icon on the canvas area. You can select the one-column structure for this section.

Once the section is ready, add the Posts widget by dragging it from the widget/settings panel. Once the widget is added, go to the Layout block under the Content tab on the settings panel to set the layout. In this example, we use the following layout settings:

  • Skin: Classic
  • Number of columns: 3
  • Post per page: 27
  • Image position: Top
  • Image size: full
  • Image width: 100%
  • Title: Disabled
  • Excerpt: Disabled
  • Meta data: none
  • Read more: Disabled

Next, open the Query block to filter the photos. On the Source option, select the custom post type you have created on step 1 above. Set the parameters of photos on the Include By field and Term field.

Once done with the Query block, you can switch to the Pagination block to set the pagination. In this example, we don’t use the pagination on the homepage.

You can add more elements to your homepage if you want it. Once done editing the page, click the PUBLISH button to publish it.

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


Step 7: Create the Header and Footer

You are almost done. Once all pages and the custom templates have been created, the next step is to create the header and the footer. In Elementor, you can create the header and footer from the Theme Builder just like custom templates for archive pages and single post you have created above. You have limitless design options and behaviors for your header and footer. For instance, you can create a transparent header, sticky header, and so on.

For more detailed tutorials on how to create a header and footer in Elementor, you can read our previous articles below:


The Bottom Line (+Bonus)

Elementor is a powerful page builder plugin for WordPress. Thanks to its Theme Builder feature which supports extensive dynamic content types, you can create any type of website with a no-code approach. One of the website types you can create with Elementor is a stock photo website as we have just covered above. Since WordPress supports multi-user, you can accept registration in case you want other people to contribute photos. You can also create a custom registration page with Elementor if you want to.

If you want to see the live action of what we have covered this article, you can visit lowestiso.com. The website is built with WordPress+Elementor Pro. As a gift, we have also included the custom templates — as well as the pages used on the website — which you can download below.

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.