Category Archives: WordPress Plugins

How to Create a WooCommerce Subscription Reminder Email in WordPress

Are you looking for a way to create WooCommerce subscription reminder emails in WordPress?

Customers who subscribe to your products may not always remember the renewal date. This can cause confusion and panic when you automatically take money from their accounts.

In this article, we will show you how to improve the subscriber experience by creating a WooCommerce reminder email in WordPress.

How to create a WooCommerce subscription reminder email in WordPress

Why Create a WooCommerce Subscription Reminder Email in WordPress?

Subscriptions are a great way to get consistent and ongoing revenue for your business. You might sell physical products such as subscription boxes or digital products like online memberships and digital courses.

If you are using WooCommerce, then you can sell subscriptions using the WooCommerce Subscriptions extension. For step-by-step instructions, please see our guide on how to add subscriptions to WooCommerce.

After you have set up WooCommerce Subscriptions, it’s a good idea to create subscription reminder emails. These automatic messages let customers know that their subscriptions are about to renew.

In this way, you can give the subscriber a chance to update their payment details and contact information or make other changes before their subscription auto-renews. This can help you avoid admin headaches, refund requests, and customer complaints.

It also gives the customer a chance to cancel their subscription. Although you will want to get as many subscribers as possible, people who feel tricked into renewing their subscriptions may complain or leave negative customer reviews.

With that in mind, let’s see how to create a subscription reminder email in WordPress using the WooCommerce Subscriptions extension and FunnelKit.

How to Create a WooCommerce Subscription Reminder Email in WordPress

The best way to create a subscription reminder email is by using FunnelKit Automations. FunnelKit Automations is the best marketing automation tool for WooCommerce websites.

FunnelKit lets you easily set up automated emails for abandoned cart recovery, lead nurturing, post-purchase education, next order coupons, subscription reminders, and more.

Step 1: Set Up FunnelKit Automations

First, you will need to install and activate the FunnelKit Automations Pro plugin. For more details, please see our guide on how to install a WordPress plugin.

You will also need the free FunnelKit Automations plugin, as the premium plugin uses it as the base for its more advanced features.

Upon activation, you need to go to FunnelKit Automations » Settings and add the license to the ‘FunnelKit Automations Pro’ field.

Adding a FunnelKit Automations license to your WordPress website

You can find this information under your account on the FunnelKit website. After entering the key, just click on the ‘Activate’ button.

Now, you are ready to create all kinds of WooCommerce automations that increase sales.

Step 2: Create a FunnelKit Email Reminder Automation

To create a subscription reminder email, go to FunnelKit Automations » Automations (Next-Gen) and click on the ‘Add New Automation’ button.

Adding a new automation to your WooCommerce store

Here, you will see all the ready-made email campaigns you can use to recover WooCommerce abandoned cart sales, sell online courses, and more.

To create a WooCommerce subscription reminder, click on ‘Start From Scratch’.

The FunnelKit Automations library

You can now type in a name for the automation. This is just for your reference, so you can use anything you want.

With that done, click on the ‘Create’ button.

Creating a WooCommerce subscriptions reminder email

This launches FunnelKit’s user-friendly email automation builder, ready for you to create the WooCommerce workflow.

To get started, you need to click on ‘Select Trigger’.

Adding a FunnelKit trigger to an automation workflow

You can now choose the action that will trigger the automated workflow in WordPress.

To start, click on the ‘WooCommerce’ tab and then select the following trigger: ‘Subscriptions Before Renewal’.

Creating a WooCommerce subscription reminder email

When you are ready, click on ‘Done.’

This will add a basic trigger to the FunnelKit editor. To go ahead and configure the trigger, click on ‘Subscriptions Before Renewal’.

Editing the subscriptions renewal WooCommerce trigger

Now, you can decide when to send the reminder.

Just be aware that you can also create follow-up emails. For example, you might send an email 5 days before the subscription renewal and a follow-up the day before.

To set a date, simply type a number into the following field: ‘Days before subscription renewal’.

Creating an automated time-based trigger

You can also choose the time when the email will be sent. It’s a good idea to send reminder emails when the subscriber is more likely to be online and opening messages.

That said, it helps to know as much about your subscribers as possible. If you haven’t already, then we recommend installing Google Analytics in WordPress. It will help you learn more about your customers, including their timezone and when they are most likely to be online.

After setting up your reminder emails, it’s also a good idea to track your email open rates. You can even set up A/B split testing by sending messages at different times and then seeing what gets the best results.

By continuously monitoring and fine-tuning all your custom WooCommerce emails, you should be able to improve your open rates and conversion rates.

You can tell FunnelKit to send reminder emails at a specific time by typing it into the fields that show ‘HH’ (hour) and ‘MM’ (minute) by default.

Creating an automated WooCommerce workflow

After that, you can choose whether to send this email once or multiple times.

Later in this guide, we will show you how to add follow-up emails to this campaign. With that in mind, you will typically want to send this email once by selecting the ‘Once’ button.

When you are happy with how the trigger is set up, simply click on the ‘Save’ button.

Configuring the WooCommerce subscription reminder email

Step 3: Design the WooCommerce Subscription Reminder Email

Now, it’s time to create the WooCommerce email that will be sent to your subscribers by clicking on the ‘+’ button.

You can then select ‘Action.’

Adding actions to an automated WooCommerce workflow

In the popup that appears, choose ‘Send Email.’

Then, click on ‘Done.’

Sending a WooCommerce reminder email

You can now create an email by typing in a subject and preview.

You can use a mix of plain text and merge tags. FunnelKit will replace any merge tags with real values every time it sends a subscription reminder email. In this way, merge tags can catch the subscriber’s attention with personalized content.

For example, you might use a merge tag to add the subscriber’s name to the subject line or the date when their subscription will auto-renew.

To add a merge tag, just click on the ‘{{.}}’ icon next to the field where you want to use the tag.

FunnelKit's dynamic merge tags

This opens a popup where you can look through all the available merge tags.

When you find a tag you want to use, you might see either a ‘Copy’ or ‘Settings’ icon. If you see the ‘Copy’ symbol, then simply click it to copy the merge tag.

Copying dynamic merge tags

With that done, you can go ahead and paste the merge tag into the email.

At this point, you may also want to add some static (plain) text by typing it directly into the field.

Adding merge tags to a WooCommerce reminder email

When looking through the merge tags, you may see a ‘Settings’ icon instead of a ‘Copy’ icon.

For example, this image shows a ‘Settings’ icon next to the Contact First Name merge tag.

Adding merge tags to a subscription reminder email

This icon allows you to set a fallback, which FunnelKit will use if it doesn’t have access to the real value.

If you see a ‘Settings’ icon, then give it a click and type some text into the ‘Fallback’ field.

Setting a fallback for your WooCommerce subscription reminder emails

After creating a fallback, click on ‘Copy.’

With that done, simply paste the merge tag into the field where you want to use it. You can also type static text directly into the field.

Adding dynamic text to a WooCommerce subscription reminder email

When you are happy with how the subject and preview text is set up, just scroll down to the small text editor.

Here, you can create the email body text by typing it into the editor. You can also add dynamic tags by selecting ‘Merge Tags’ and then following the same process described above.

Adding body tags to a WooCommerce subscriber email

The text editor has all the standard text formatting options, so you can add links, change the text size, change the font, and more.

As you are creating the email, you can preview it by clicking the ‘Show Preview’ button.

Previewing WooCommerce emails using FunnelKit

When you are happy with the subscription reminder email, just click on the ‘Save & Close’ button.

Step 4: Create Follow-up Emails

At this point, you might want to add one or more follow-up emails to the campaign.

To start, you will typically add a delay between these emails by clicking on the ‘+’ icon and then selecting ‘Delay’.

Adding a delay to an automated WooCommerce email sequence

On this screen, open the dropdown that shows ‘Minutes’ by default and choose a value from the list. When creating reminder emails for your online store, you will typically want to select either ‘Days’ or ‘Weeks.’

After that, type in the value you want to use, such as 1 Week or 3 Days.

Adding a delay to a FunnelKit automated workflow

With that done, you may want to set the time when FunnelKit will send the follow-up email. You will typically want to send the reminder email when subscribers are more likely to be online or when you usually get the best open rates.

To do this, just check the following box: ‘Delay until a specific time of day’.

Adding a delay to an automated workflow

You can now set the time using the new settings that appear.

By default, FunnelKit will use the timezone in your WordPress settings. However, you can also send the email based on the subscriber’s timezone by checking ‘In Contact Timezone’.

Sending subscription reminder emails based on the customer's timezone

When you are happy with how the delay is set up, click on ‘Save.’

With that done, it’s time to create the follow-up email. Go ahead and click on the ‘+’ icon and then select ‘Action’.

Creating follow-up emails for your online store

In the popup that appears, select ‘Send Email.’

After that, you need to click on ‘Done.’

Adding follow-up emails to an automated WooCommerce workflow

This opens a popup where you can create a subject and preview, as well as add body text by following the same process described above.

When you are happy with the follow-up email, just click on the ‘Save & Close’ button.

Adding automated follow-up messages to your eCommerce store

You can now add more delays and follow-up emails by repeating the exact same steps.

When you are ready to make the automation live on your WordPress website, click on the ‘Inactive’ slider so that it turns to ‘Active.’

Publishing an automated WooCommerce workflow

Now, FunnelKit will now send automated subscription reminder emails for your online store.

We hope this article helped you learn how to create WooCommerce subscription reminder emails. You may also want to see our guide on how to create a WooCommerce popup to increase sales or our expert picks for the best WooCommerce plugins for your store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a WooCommerce Subscription Reminder Email in WordPress first appeared on WPBeginner.

5 Best WordPress Auction Plugins For Your Website

Selling online is easy with WordPress (especially when using a platform like WooCommerce). But what happens if you want to run auctions online? Naturally, it’s easy to think of eBay as being the only option for online selling. Luckily, you can integrate eBay with WordPress, so that’s not a problem! Don’t like eBay? You can [...]

Read More...

The post 5 Best WordPress Auction Plugins For Your Website appeared first on Learn WordPress with WPLift.

Best ChatGPT Plugins for WordPress in 2023

ChatGPT is an incredible tool. However, if you’ve never used it before, where do you even begin? How can it help you run a WordPress site, and how can you make the most of this rapidly-evolving technology? Luckily, ChatGPT plugins for WordPress exist, and they make the process of utilizing AI much easier! In this [...]

Read More...

The post Best ChatGPT Plugins for WordPress in 2023 appeared first on Learn WordPress with WPLift.

CM Tooltip Glossary (Ecommerce) Review: Build a Knowledge Base Without the Heavy Lifting

Are you tired of stumbling over your words when trying to explain a complicated term? Or maybe you just want an easy way to link to definitions on your WordPress website without breaking a sweat. Either way, you’re in luck because we’ve got the lowdown on one of the best WordPress glossary plugins out there: [...]

Read More...

The post CM Tooltip Glossary (Ecommerce) Review: Build a Knowledge Base Without the Heavy Lifting appeared first on Learn WordPress with WPLift.

GravityView Review: Supercharge Your Gravity Forms Experience

Use Gravity Forms? Heck yeah! It’s one of the top WordPress form plugins, giving you the flexibility to create all sorts of forms for your website. But displaying all that juicy data it collects on the front-end of your site? Not so easy, my friend. Enter GravityView, the ultimate sidekick for your Gravity Forms adventures. [...]

Read More...

The post GravityView Review: Supercharge Your Gravity Forms Experience appeared first on Learn WordPress with WPLift.

CM Answers Review: Is It the Best AI-Powered Q&A Forum Plugin?

Well, well, well, looks like we’ve got a real Sherlock Holmes here, stumbling upon all those question and answer sites. Bravo! But let’s be real, who wants to be just a user when you can be the king of your own Q&A castle?  Lucky for you, WordPress has got the goods to make it happen. [...]

Read More...

The post CM Answers Review: Is It the Best AI-Powered Q&A Forum Plugin? appeared first on Learn WordPress with WPLift.

How to Customize the Background Color of WordPress Block Editor

Do you want to change the background color of the WordPress block editor for admins?

Sometimes when working on a custom client project, you may want to change the Gutenberg editor background color in WordPress to match their brand colors.

In this article, we’ll show you how to easily customize the background color of the WordPress block editor for admin area.

Changing the background color of WordPress block editor

Note: This guide covers changing the editor color in WordPress admin. If you’re looking to change the background color in WordPress front-end, then please see our tutorial on how to change background color in WordPress.

Why Change the Background Color of the Block Editor in WordPress?

You may want to change the background color of the WordPress block editor for a number of reasons.

For instance, most modern WordPress themes use the same background color for the block editor as the live website including Astra, OceanWP, GeneratePress, and more.

However, if your WordPress theme doesn’t use the same colors, then the appearance of your post inside the editor will look quite different from what your users will see on the live website.

Another reason for changing the background color could be personal preference.

For instance, by default, the block editor uses a plain white background. Some users may find it a bit stressful to look at the white screen for long hours. Eye strain can be a real issue for many people, and the default white background is not easy on the eyes.

Default block editor

That being said, let’s see how you can easily change the WordPress editor background color.

How to Change the WordPress Editor Background Color

You can easily change the WordPress editor background color by adding custom code to your theme’s functions.php file.

However, keep in mind that even the smallest error in the code can break your website and make it inaccessible. That’s why we recommend using the WPCode plugin. It’s the best WordPress code snippets plugin on the market and is the easiest and safest way to add custom code to your WordPress website.

First, you need to install and activate the free WPCode plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Code Snippets » + Add Snippets page from the admin sidebar.

From here, you have to click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

This will take you to the ‘Create Custom Snippet’ page where you can start by typing a name for your code snippet. This is just for you and can be anything that will help you identify the code.

Next, you need to choose ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right.

Choose PHP Snippet option as the code type for changing editor background color

After that, you need to copy and paste the following code into the ‘Code Preview’ box.

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

Next, you need to look for the following code in the PHP snippet you just pasted.

background-color: #bee0ec;

Then, you have to add the hex code of your preferred color next to the background color option. If you don’t want to use a hex code, you can use some basic color names such as ‘white’ or ‘blue’ instead.

Paste the code snippet for changing the editor background color

After that, you need to scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ option.

Next, you need to select the ‘Location’ of the code snippet as ‘Admin Only’ from the dropdown menu.

Choose the insertion method and location of the code snippet

After that, you need to scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active.’

Finally, don’t forget to click on the ‘Save Snippet’ button to save your changes.

Save the code snippet for changing the background color

Now, go visit the block editor from the admin sidebar.

This is how the block editor looked on our site after adding the CSS code snippet.

Editor color preview

We hope this article helped you learn how to easily change the WordPress editor background color. You may also want to see our ultimate guide on 85+ time saving WordPress shortcuts, or take a look at our top picks for the best WordPress page builder plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Customize the Background Color of WordPress Block Editor first appeared on WPBeginner.

How to Use Icon Fonts in WordPress Post Editor (No Code)

Do you want to use icon fonts in the WordPress post editor?

Icon fonts allow you to easily use images and symbols in text. They are lightweight and won’t slow down your site, and they can be easily scaled to any size and styled like any other text font.

In this article, we’ll show you how to easily use icon fonts in the WordPress post editor without writing any HTML code.

Using icon fonts in the WordPress editor

We’ll show you multiple methods, each one using a slightly different approach than the other. You can choose one that works best for you.

Method 1. Adding Icon Fonts in WordPress Post Editor using JVM Rich Text Icons

This method is recommended to use on any kind of WordPress website. It is easy to use and works seamlessly with the block editor.

First, you need to install and activate the JVM Rich Text Icons plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can simply edit a WordPress post or page or create a new one. Inside the post editor, add a new paragraph block, and you’ll see a new Flag icon in the block toolbar.

Icon font button in the block toolbar

Clicking on it will show a popup of icons to choose from. It uses the popular Font Awesome icon fonts by default.

You can use the search to look for an icon or simply scroll down to find the icon you want, and then click to add it.

Choose icons to insert

One advantage of using icon fonts is that you can use CSS to style them.

However, since you are already using the block editor, you can simply use the built-in color tools to style the icons.

Style icon fonts using block editor tools

The plugin allows you to use icon fonts in most text blocks such as Paragraph, List, Button, Columns, Cover, and more.

Here is an example of using icon fonts and block options to style three columns.

Icon fonts in columns

Another useful example of using icon fonts is with buttons.

This time we are using inline icon fonts alongside some text for the two buttons.

Using icon fonts in buttons and lists

Feel free to use the block editor tools like text alignment, colors, spacing, and more to get the most out of the icon fonts.

Method 2. Add Icon Fonts in WordPress Post Editor with Font Awesome

This method requires you to add shortcodes in the post editor to display icon fonts. You can use this method if you don’t need to regularly use icon fonts in your WordPress posts and pages.

First, you need to install and activate the Font Awesome plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can edit a post or page in WordPress and use the following shortcode to add a font icon.

[icon name="home"]
Adding icon fonts using shortcode

The name parameter here is the name of the font used by Font Awesome. You can find the entire list on the Font Awesome cheatsheet page.

Once added, you can preview your post or page to see how the icon will look on the live site since it will not display as an icon in the block editor.

This is how it looked on our test site.

Font icon preview

You can use the shortcode inside a paragraph and inline with other text. You can also add it on its own using the ‘Shortcode’ block.

However, using the ‘Shortcode’ block will not give you the styling options you’ll get with other text blocks.

You can also add the shortcode inside columns to create a features row.

Shortcode in columns

It would be a bit trickier as you will not be able to see the actual images, and the column heights will keep changing within the editor.

Here is how it looked on our test website. The columns are the same height, even though they are not in the editor.

Icon fonts preview using Font Awesome

You’ll probably have to preview your work in a new browser tab many times to see how it will look to users.

Method 3. Using Icon Fonts with WordPress Page Builders

This method is great if you are creating a landing page or designing your website using a WordPress page builder like SeedProd.

SeedProd is the best WordPress page builder on the market. It allows you to easily create beautiful landing pages or design your complete website.

SeedProd WordPress Website Builder

First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you’ll be asked to enter your plugin license key. You can find this information under your account on the SeedProd website.

SeedProd license key

After entering your license key and clicking ‘Verify Key,’ you can start working on your landing page.

Simply go to the SeedProd » Landing Pages page and click on the ‘Add New Landing Page’ button.

Add new landing page

After that, you will be asked to choose a template for your landing page.

SeedProd comes with a bunch of beautiful designs that you can use as a starting point, or you can start with a blank template and design the whole thing yourself.

Choose landing page template

For this tutorial, we will be using a pre-designed template. Simply click on a template to select it and continue.

Next, you will be asked to provide a title for your landing page and choose a URL.

Provide page title and URL

After entering them, click on the ‘Save and Start Editing the Page’ button to continue.

SeedProd will now launch the page builder interface. It is a drag-and-drop design tool where you can simply point and click on any item to edit it.

SeedProd page builder interface

You can also drag and drop blocks from the left column to add new elements to your design.

For the sake of this tutorial, we are going to add the Icon block.

Add icon block

After you add the block, you can simply click to edit its properties.

The left column will change to show the options for the Icon block. You can click into the ‘Icon’ section to the left and choose a different icon image or change the color and style.

Icon block settings

Another way to use icons in SeedProd is by adding the ‘Icon Box’ block.

The difference between this and the ‘Icon’ block we used previously is that ‘Icon Box’ allows you to add text along with your chosen icon.

This is one of the most common ways to use icons when displaying product features, services, and other items.

Icon box block

You can place your icon box inside columns, choose colors, and adjust the icon size to your liking.

Additionally, you can also format the accompanying text using SeedProd’s formatting toolbar.

Icon box inside columns

Once you are finished editing your page, don’t forget to click on the ‘Save’ button at the top right corner of the screen.

If you’re ready, you can click ‘Publish’ for the page to go live, or you can click on ‘Preview’ to make sure it looks like you want it to.

Save and publish your landing page

You can also click on ‘Save as Template’ so you can reuse this design with SeedProd on other parts of your website.

Here is how the icon fonts looked on our test website.

Icon fonts preview

We hope this article helped you learn how to use icon fonts in WordPress post editor without writing HTML code. You may also want to see our WordPress performance guide to optimize your website speed or the best landing page plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Use Icon Fonts in WordPress Post Editor (No Code) first appeared on WPBeginner.

How to Create a Custom Shape Divider in WordPress

Do you want to add custom shape dividers to your WordPress website?

Shape dividers can organize your content in an engaging and eye-catching way. They can also highlight your site’s most important content, so visitors and customers don’t miss out on crucial information.

In this article, we will show you how to create a custom shape divider in WordPress.

How to create a custom shape divider in WordPress

Why Create a Custom Shape Divider in WordPress?

A shape divider is a type of section divider that you add between blocks of content.

These dividers can be simple, such as a horizontal line created with built-in WordPress blocks.

A custom shape divider, created using the built-in WordPress tools

You can use these basic dividers to organize and separate content, which is particularly useful on pages that cover lots of different topics.

You can also create more advanced shape dividers using page builder plugins and other web design software. These can highlight your site’s most important content so it stands out to visitors and customers.

A custom shape divider, created using SeedProd

A professional-looking shape divider can also make a page more interesting and engaging.

For example, you might use them to create a unique background for your email newsletter signup form.

How to create a custom shape divider using SeedProd

With that being said, let’s see how you can create a custom shape divider in WordPress. Simply use the quick links below to jump straight to the method you want to use.

Method 1. Create a Simple Shape Divider (No Plugin Required)

The easiest way to add a custom shape divider to WordPress is by using the built-in Separator block.

This method allows you to add a horizontal line separator in between any WordPress blocks, and then customize the line’s color and style.

A custom divider created using the WordPress block editor

This method doesn’t let you add different shapes to WordPress and has limited customization settings. However, you won’t need to install an extra WordPress plugin, so this is the easiest way to add a simple shape divider to your website.

To get started, simply open the post or page where you want to add an horizontal divider in the content editor. Then, click on the ‘+’ button where you want to place that divider.

Adding a Separator block to WordPress

In the popup, type in ‘Separator.’

When the right block appears, click to add it to the page or post.

Add a custom shape divider to a WordPress website

To customize the default Separator block, give it a click and then use the settings in the right-hand menu.

You can switch between default, wide line, and dots using the buttons in the ‘Styles’ section.

Adding different line styles in WordPress

You can also change the line’s color so that it matches the rest of your theme or branding.

To do this, click on ‘Background’ and then choose a color from the popup that appears.

How to style the Separator block in WordPress

When you’re happy with how the divider looks, you can either click on the ‘Publish’ or ‘Update’ button to make the shape divider live.

If you are looking to use different shape and customize every part of your dividers, then we recommend using the SeedProd plugin.

SeedProd is the best WordPress page builder plugin on the market, and it allows you to add a custom shape divider to any section, row, or column using a simple drag-and-drop editor.

Creating a custom shape divider in WordPress

It also comes with over 180 professionally-designed templates and more than 90 blocks that you can use to create beautiful custom home pages, landing pages, and more.

Note: There is a free version of SeedProd on available on WordPress.org, but we’ll be using the Pro version since it comes with a wide range of shape dividers.

The first thing you need to do is install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to enter your license key.

Adding a license key to the SeedProd page builder

You can find this information under your account on the SeedProd website. After entering the license key, click on the ‘Verify Key’ button.

With that done, go to SeedProd » Pages and click on the ‘Add New Landing Page’ button.

How to create a new landing page design using SeedProd

After that, it’s time to choose a page design template. SeedProd has a ton of professionally-designed templates that you can fine-tune to perfectly suit your WordPress website.

To select a template, simply hover your mouse over it and then click the ‘Checkmark’ icon.

Choosing a page design template for your WordPress website

Next, go ahead and type in a name for the page. SeedProd will automatically create a URL based on the page’s title, but you can change the URL to anything you want.

For example, you may want to add some relevant keywords, which will help search engines understand what the page is about and may improve your WordPress SEO.

When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.

Creating a custom landing page using SeedProd

Next, you’ll be taken to the drag-and-drop page builder, ready to customize the template.

The SeedProd editor shows a live preview of your design to the right and some block settings on the left.

The SeedProd drag and drop page builder

The left-hand menu also has blocks that you can drag onto your layout.

For example, you can drag and drop standard blocks like buttons and images or use advanced blocks such as the countdown timer, contact form, social sharing buttons, and more.

Adding blocks to a WordPress page builder

To customize a block, just click to select it in your layout.

The left-hand menu will then show all the settings you can use to configure that block. You can also change the page’s background colors, add background images, or change the color scheme and fonts to better match your brand.

Customizing the background color in WordPress

SeedProd also comes with ‘Sections,’ which are collections of blocks that are often used together. For example, SeedProd has a header section, hero image, call to action, customer testimonialsFAQs, features, footer sections, and more.

To look through the different sections, simply click on the ‘Sections’ tab.

Adding a Section to a custom page template

You can move sections and blocks around your layout using drag and drop.

If you want to delete a block, then simply hover over it and then click on the trash can icon when it appears.

Deleting blocks from a custom page design

Whether or not you choose to use a SeedProd section, you can now create a custom shape divider. Simply click to select the section, row, or column where you want to add the divider.

Then, click on the ‘Advanced’ tab in the left-hand menu.

SeedProd's 'Advanced' settings

Now, click to expand the ‘Shape Divider’ section.

To start, you can choose where to show the shape divider by selecting either the ‘Top’ or ‘Bottom’ button.

Adding a custom divider to the bottom of a WordPress block

You can now open the ‘Type’ menu and choose the shape divider that you want to use.

As you select different shapes, the live preview will update automatically so you can try different styles to see what looks the best.

Adding custom shape dividers to a custom landing page

After choosing a shape divider, you can style it using the new settings.

To start, you can click on ‘Color’ and then choose a new color from the popup that appears.

Adding a color to a custom shape divider in WordPress

With that done, you can make the divider bigger or smaller by dragging the ‘Width’ and ‘Height’ sliders.

If you already have a specific size in mind, then you can type those numbers into the boxes.

Create a custom shape divider in WordPress

You can also try flipping the divider by clicking to enable or disable the ‘Flip’ switch.

By default, the divider will appear behind the rest of the content, so users can clearly see any text, images, or other content that overlaps the divider.

However, moving the shape to the front can create some interesting effects. If you want to see how this looks, then simply click to enable the ‘Bring to Front’ switch.

Bringing the custom shape divider to the front

To add more dividers simply follow the same process described above.

You can even add a shape divider to the top and bottom of an area, which often creates some impressive and eye-catching results.

Adding multiple custom shape dividers to a single section

You can continue working on the page by adding more blocks and customizing those blocks in the left-hand menu.

When you’re happy with how the page looks, click the ‘Save’ button. You can then select ‘Publish’ to make that page live.

Publishing a custom shape divider

How to Add Shape Dividers to a WordPress Theme

SeedProd’s drag-and-drop editor gives you the freedom to add a unique shape divider to any page. However, sometimes you may want to use the same shape dividers on multiple pages, or even across your entire WordPress blog or website.

This will help you create a consistent design and can also save you a ton of time. In this case, we recommend adding a shape divider to your theme using the SeedProd theme builder.

With SeedProd, you can create a custom WordPress theme without writing any code. It creates all the files that make up your theme, including the sidebar, header, footer, single posts, and more.

The SeedProd theme builder

You can then customize these files using the familiar drag-and-drop builder. This includes adding shape dividers by following the same process described above.

When you activate the new theme using SeedProd, it will overwrite your existing WordPress theme, so you should only use this method if you want to replace your current theme.

For detailed step-by-step instructions, please see our guide on how to easily create a custom WordPress theme.

We hope this tutorial helped you learn how to create a custom shape divider in WordPress. You may also want to learn how to increase your blog traffic, or see our expert pick of the best social proof plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Custom Shape Divider in WordPress first appeared on WPBeginner.