How to Create a Squeeze Page in WordPress That Converts

Are you looking for a way to collect email addresses from your visitors?

Adding a squeeze page is an easy way to narrow down your users’ attention and build an email list. It helps convert your audience by offering incentives in exchange for their email address.

In this article, we will show you how to create a squeeze page in WordPress.

How to create a squeeze page in WordPress

What Is a Squeeze Page?

A squeeze page (also known as a lead page) is a type of landing page that’s designed to collect or squeeze your visitor’s email address and name. In return, you can offer a valuable resource, ebook, exclusive learning material, or free products.

Unlike a standard landing page, where you could have multiple goals, a squeeze page’s purpose is to get users to give up their email addresses.

For example, here’s a squeeze page by a Digital Marketer that encourages users to sign up for their Insider Newsletter.

Digital Marketer squeeze page example

It has a clear call to action button, and the page includes a clear copy of what users will get in return. Plus, the headline is eye-catching, and there are images on the page that help capture users’ attention.

Creating a squeeze page is a proven way of building an email list, which you can use to promote your products or services in the future. Collecting emails also lets you start a newsletter and inform subscribers of new products, deals, and campaigns.

That said, let’s see how to create a squeeze page in WordPress.

Creating a Squeeze Page in WordPress

The easiest way of setting up a squeeze page in WordPress is by using SeedProd. It is the best and easiest WordPress website and landing page builder.

To get started, you can choose from different high-converting templates and customize the page using the drag-and-drop builder. The plugin also integrates with popular email marketing tools.

Aside from a squeeze page, SeedProd lets you create a coming soon page, 404 error page, custom login page, and more. Its theme builder also allows you to create a custom theme without editing code.

Please note that we’ll use SeedProd Pro for this tutorial because it includes more templates and customization options. However, there is also a SeedProd Lite version you can use for free.

Setting Up SeedProd in WordPress

First, you’ll need to install and activate the SeedProd plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you will see a welcome page in your WordPress dashboard. On this page, you can enter the license key and click the ‘Verify key’ button. If you’re unsure where the key is, then you can easily find it in the SeedProd account area.

Adding the SeedProd license key to your WordPress website

After that, you’ll need to go to SeedProd Landing Pages from the admin panel.

From here, simply click the ‘+ Add New Landing Page’ button.

Add new landing page

Next, SeedProd will offer different templates to choose from.

You can click the ‘Lead Squeeze’ filter at the top to view squeeze page templates.

Select lead squeeze option and template

To choose a template, simply hover it and click the orange tick button.

Next, a popup window will open where you can enter a name and URL for your squeeze page. Once that’s done, click the ‘Save and Start Editing the Page’ button.

Enter a name for squeeze page

After that, you’ll see the SeedProd drag-and-drop landing page builder.

Customizing Your Squeeze Page Using SeedProd

In the page builder, you can edit different elements on the template. For instance, there are different blocks to choose from.

Customize squeeze page

You can add standard blocks like headlines, text, lists, buttons, and more. Or select advanced blocks such as social sharing, countdown, video popup, testimonials, and more.

SeedProd also lets you customize each element or block further. For example, selecting the headline block will let you edit the text and change its font, color, and style.

Edit elements on squeeze page

With SeedProd, you can also use the power of artificial intelligence to automatically create images and text for your page. However, do note that the AI Text and Image Generation tool is a paid addon.

If you switch to the ‘Sections’ tab, then you’ll find entire sections to add to your squeeze page. For example, you can add custom headers, footers, call to action buttons, and more to your page.

Edit page sections

Connecting Email Marketing Tool with SeedProd

After you’ve customized the squeeze page, you’ll need to connect an email marketing tool with SeedProd.

To do that, switch to the ‘Connect’ tab, and you’ll see different services. For instance, SeedProd easily integrates with ActiveCampaign, AWeber, Drip, Mailchimp, Constant Contact, and more.

Connecting email marketing services to SeedProd

Simply follow the onscreen instructions to connect your desired email marketing service with SeedProd.

Finalize Your Squeeze Page Settings

Next, you’ll need to head to the ‘Page Settings’ tab in SeedProd.

Here, you can change different settings and publish your page. For instance, SeedProd lets you change the page title, edit the meta description, add Google Analytics, and more.

Once you’ve made the changes, it’s time to make your squeeze page live. Simply change the ‘Page Status’ from Draft to Publish.

Publish squeeze page

You can now click the ‘Save’ button at the top and exit the landing page builder.

From here, simply visit the squeeze page URL and see it in action.

Squeeze page preview

Bonus: Tips to Boost Conversions on Your Squeeze Page

Now that you know how to create a squeeze page on a WordPress site, you can take it to the next level by following these tips for boosting conversions.

1. Converting Exiting Visitors into Subscribers

Did you know that 70% of visitors will abandon your website and never return? What if you could change that and boost conversions on your squeeze page?

With the help of OptinMonster, you can show personalized messages to users at precise times and convert them into subscribers.

It is the best conversion optimization and lead generation software in the market that offers an Exit-Intent technology. OptinMonster will automatically detect users’ behavior and show a popup message just as a user is about to leave your squeeze page.

Exit intent example case study

You can learn more by following our guide on how we increased email subscribers by 600% using OptinMonster.

2. Get Users to Subscribe to Push Notifications

You can add a click-to-subscribe button on your squeeze page and encourage users to sign up for push notifications.

Push notifications are custom messages with links that you can send to your subscribers. They are great for bringing people back to your site, prompting your content, and boosting sales.

Push notification preview on desktop

One of the best ways to set up push notifications to WordPress is by using PushEngage. It is the best push notification software and is very easy to use.

For more details, please see our guide on how to add web push notifications to a WordPress site.

3. Leverage the Power of Social Proof to Boost Conversions

You can also use social proof to increase the number of people who submit their email addresses on a squeeze page.

For instance, you can show other users who subscribed to your email list. This makes other visitors more comfortable and helps build trust.

Use Social Proof

You can go through our guide on how to use FOMO on your WordPress site to increase conversions to learn more.

We hope this article helped you learn how to create a squeeze page in WordPress. You may also want to see our guide on proven ways to make money online and how to increase blog traffic.

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

The post How to Create a Squeeze Page in WordPress That Converts first appeared on WPBeginner.

How to Edit a WordPress Website (Ultimate Guide)

Are you a new WordPress.org user who wants to learn how to edit your WordPress site?

Here at WPBeginner, we have helped millions of beginners build their websites using WordPress, which is the most popular website builder on the market. If you need help with editing your website, then you have come to the right place.

In this article, we will show you the basics of editing a WordPress website.

How to Edit a WordPress Website (Ultimate Guide)

An Overview of Ways to Edit a WordPress Site

As an open-source content management system, WordPress has a lot of features to build and edit your website.

If you installed WordPress recently, then you may have come across Gutenberg, which is WordPress’s drag-and-drop block editor that allows you to customize a page or post. This feature is pretty easy and beginner-friendly.

The Gutenberg block editor interface

You may have also seen the Full Site Editor.

This is an extension of Gutenberg that lets you use the block editor to customize block-based WordPress themes.

The WordPress Full Site Editor

That said, if you use a classic, non-block WordPress theme, then the FSE won’t be available to you. Instead, you will have to use the WordPress Theme Customizer.

This feature doesn’t come with a drag-and-drop function, so it’s not as user-friendly. You have to edit your theme using some menu settings in the left-hand panel.

Using the WordPress Theme Customizer to edit a transportation and logistics website

If you need more customization options that aren’t available in WordPress’s built-in features, then you can install a page builder plugin like SeedProd.

This is what we usually recommend to WordPress beginners. Like Gutenberg, SeedProd has a drag-and-drop feature. However, it offers more ways to get creative, like animation effects and more content block options to build your pages.

Editing the online coaching business theme in SeedProd

Some WordPress users also use the Classic Editor. It’s WordPress’s legacy page and post editor that looks a bit like a document editor.

This feature is no longer enabled by default in the latest WordPress versions. However, some people still use it because they are more familiar with it and want to keep their current website designs.

The Classic Editor Interface

In this article, we will show you how to edit different parts of your WordPress website using the editors we’ve mentioned.

We will also assume that you have WordPress installed and set up already. Otherwise, you will need a WordPress hosting plan, domain name, and WordPress installation.

Want to skip to a specific section in this tutorial? Feel free to use these quick links below:

How to Edit a WordPress Theme

One of the first things you should do after installing WordPress is to choose and customize your theme. We will show you 3 ways to do that.

Customizing a Block Theme With the Full Site Editor

Full Site Editing was introduced in WordPress 5.9. It’s designed to make it easy to edit WordPress block themes using the block editor.

One tell-tale sign that you are using a block WordPress theme is you will see Appearance » Editor in your WordPress admin area. If you see Appearance » Customize instead, then you can skip to using the Theme Customizer.

Clicking Appearance Editor in the WordPress admin

To use the Full Site Editor, you will need to have a block theme installed. You can find plenty of them in our list of the best block WordPress themes for Full Site Editing.

If you want to find some free options, go to Appearance » Themes. Then, click ‘Add New Theme.’

Adding a new WordPress theme in the admin area

After that, just switch to the ‘Block Themes’ tab.

You will then see dozens of block themes on your screen. For installation instructions, check out our step-by-step guide on how to install a WordPress theme.

Finding WordPress block themes in the admin area

Once you have the theme installed, you must go to Appearance » Editor.

Now, you will see the main Full Site Editing dashboard. You can then edit your theme’s navigation menu, styles, pages, templates, and patterns.

We will discuss these topics in the rest of the tutorial, but we will show you briefly how to change the style of your theme.

To do this, click the ‘Styles’ menu.

Clicking Styles in the Full Site Editing interface

Now, you will see a list of the color scheme and typography pairings provided by the theme.

Every time you click on a style, the interface will preview it for you.

Choosing a theme style in the Full Site Editor

Once you are satisfied with your choice, just click ‘Save.’ Alternatively, you can create a custom style.

You can learn more about this and other ways to use the Full Site Editor in our beginner’s guide to WordPress Full Site Editing.

Customizing a Classic Theme With the Theme Customizer

If you use a classic WordPress theme, then you will work with the Theme Customizer to edit it. Simply head to Appearance » Customize from the WordPress admin area to access it.

Opening the WordPress theme customizer

Now, what you can customize here varies by the theme you are using.

For instance, if you have the Astra theme, then you can customize the style of your entire website, header, footer, sidebar, page, logo, and so on.

For this reason, we recommend reading your theme’s documentation for more instructions.

What the Theme Customizer looks like for Astra theme

Our guide on the Theme Customizer can give you more detailed pointers.

Once you’ve made your changes, you can preview the website in different screen resolutions. Then, you can hit the ‘Publish’ button at the top to make your edits live.

Publishing a classic WordPress theme in the Theme Customizer

One downside of the Theme Customizer is its user experience isn’t as flexible or easy as the block editor. If you feel this way, then we recommend using the next method instead.

Customizing a WordPress Theme With a Page Builder Plugin

Many WordPress users who aren’t satisfied with the platform’s built-in design features use a page builder to edit their site. This is a WordPress plugin that can replace the default editor for designing different parts of your website.

Most page builders come with a drag-and-drop functionality, so they are just as easy to use as the block editor. What’s more, they come with more page blocks and templates to personalize your website.

Out of all the page builders we’ve tried, we find SeedProd to be the best. It comes with 300+ templates for various industry categories, from eCommerce and accommodation to services.

SeedProd Website and Theme Builder

Note: While SeedProd comes in a free version, we recommend upgrading to the Pro plan to access the Theme Builder. This is what we will use in this tutorial.

To use SeedProd, you will need to install the WordPress plugin first. After that, go to SeedProd » Settings to activate your Pro plan license. Simply insert your license key and click ‘Verify Key’ to complete this step.

Verifying SeedProd Pro's license key

Next, switch to SeedProd » Theme Builder.

Just click ‘Theme Template Kits‘ to view your theme options.

Accessing SeedProd's Theme Template Kits

As you can see, there are many theme template kits available, from online stores to service sites. Feel free to use the filtering and sorting settings to find the right one for your needs.

Once you’ve made your choice, just hover over the theme template and click the orange checkmark button to use it.

Choosing a theme template kit in SeedProd

Now, just go back to the Theme Builder page and select a theme template you’d like to edit.

For demonstration purposes, we will show you how to edit the style of your SeedProd theme template. To do this, locate the ‘Global CSS’ theme template, hover over it, and click ‘Edit Design.’

Editing a theme template kit's Global CSS in SeedProd

You are now inside the SeedProd page builder and can customize your theme template’s style. Here, you can change your website’s colors, fonts, backgrounds, buttons, forms, and layout.

Let’s see how to change the theme’s default font. To do this, open the ‘Fonts’ menu. Then, just choose one of SeedProd’s many font and color options for the heading and body text.

All the changes you make will show up automatically in the right-side preview.

Changing a SeedProd theme template kit font in the Global CSS theme template

Once you are happy with the style, just click ‘Save’ to make these changes official.

Then, you can go back to SeedProd » Theme Builder and turn on the ‘Enable SeedProd Theme’ toggle in the top right corner.

Enabling the SeedProd theme template kit in WordPress

For more information about editing WordPress themes with SeedProd, you can see our guide on how to easily create a custom WordPress theme.

How to Edit a WordPress Page or Post

If you have updated WordPress to the latest version, then most likely, you will use the Gutenberg block editor to edit a page or post.

You can create a new page by going to Pages » Add New Page. This will automatically make an entirely blank page and direct you to the block editor.

On the other hand, if you want to edit an existing page, like the homepage or blog page, then you can go to Pages » All Pages. Hover your cursor over the page you want to edit, and then click ‘Edit.’

Clicking the Edit button to edit an existing WordPress page

Alternatively, there is also the Quick Edit feature.

This allows you to modify the page’s title, URL slug, and last modified date.

Clicking the Quick Edit button in the WordPress Pages page

You can do various things with the Quick Edit feature.

Examples include setting a password for the page, making it private, assigning it as a parent page, changing the page template, allowing/disallowing comments, and changing the page status.

The Quick Edit feature for WordPress pages

To create a new post, simply head to Posts » Add New Post to make a new blank post and edit it using the block editor.

Like before, you can edit an existing WordPress blog post by hovering your cursor over the selected post and clicking ‘Edit.’

The WordPress Posts interface in the WordPress admin area

The Quick Edit feature for posts is similar but with some minor differences.

Here, you can also add tags, allow/disallow pings, and make the post sticky (featured on your website).

The Quick Edit feature for WordPress blog posts

Once you have opened up a WordPress page or post, there are many things you can do in the block editor.

Typically, you will start by clicking the ‘+’ add block button in the top left corner.

This is where you will find all the available blocks from WordPress and the plugins you use.

Opening the block inserter library in WordPress

You can then drag and drop a block to the main editing area.

After that, you can use the block’s toolbar and settings sidebar to configure the block’s style, dimensions, spacing, and more.

The block settings sidebar in WordPress

If you have installed a WordPress plugin, then you may also see some settings below the editing interface.

For instance, the All in One SEO plugin will show you a section where you can optimize the page or post’s meta title and description for search engines.

The AIOSEO settings in the WordPress block editor

We have plenty of guides for you to learn more about editing posts and pages, so be sure to check them out:

How to Edit a WordPress Page or Post With Classic Editor

If you want to use the Classic Editor, then you will need to enable it. You can read our article on how to disable Gutenberg and activate the Classic Editor to do this.

After that, just create a new post or page by going to Posts » Add New Post or Pages » Add New Page, and the Classic Editor will show up on your screen.

The WordPress classic editor

Unlike the block editor, you won’t add blocks to insert content into your page or post. Instead, you can only type text, format it using the controls at the top of the editing panel, and add media files to your content by clicking on the ‘Add Media’ button.

At the bottom and the sides of the editing interface, there are settings to publish the page/post, set the page or post’s categories/tags, upload a featured image, and so on.

You can also switch between the visual and text editing modes. With the second editor, you can modify the post or page’s HTML code.

The text editing mode in the WordPress classic editor

How to Edit a WordPress Page With a Page Builder

If you already use a page builder like SeedProd to edit your theme, then you can use it to edit a page as well. This way, you can maintain your design’s consistency throughout all of your pages.

You will need to create a new page and open the block editor. If SeedProd is active, then you will see a button at the top that says, ‘Edit with SeedProd.’ Go ahead and click on it.

You can also do this with an existing page. However, do note that the content will not be transferred over, and you will have to create the page from scratch.

Clicking the Edit with SeedProd button in the WordPress block editor

In the page builder, you will see that the SeedProd theme’s header and footer have been added. All you need to do is start building the page.

First, choose one of the 8 layouts to use on the page.

Choosing a layout for the section in a SeedProd theme template

On the left-hand side, you will find all the blocks and sections that you can drag and drop onto the right-hand side, which is the template preview.

You can use these to insert content into the page.

SeedProd's block library

Whenever you click a block or a section, the left-hand side will show the available settings to customize the element.

In the screenshot below, you can see that clicking on the Text block will make the block settings appear. You can customize the text, insert dynamic content, edit the HTML, change the alignment, and so on.

Customizing SeedProd's text block settings

Once you are done editing the page, don’t forget to click ‘Save’ to make the changes live.

For more details, just see our guide on how to create a custom page in WordPress.

If you want to create a custom landing page from scratch, then you can also do that with SeedProd. All you need to do is go to SeedProd » Landing Pages. Then, click the ‘+ Add New Landing Page’ button.

Create a new landing page in SeedProd

For more information, check out our tutorial on how to create a custom landing page.

Alternative: Thrive Architect is another great page builder option for designing attractive and conversion-focused landing pages.

You may also want to edit the WordPress header, footer, sidebar, and other parts of your theme template.

These are sections on your site that are not part of the main page or post content. However, they are essential for giving additional information or helpful navigation.

How you can edit these sections depends on what theme you are using, so let’s go through each option.

How to Edit a Block Theme’s Header, Footer, and Other Template Parts

If you have a block theme, then you can use the Full Site Editor to edit your theme’s header and footer.

In the Full Site Editor, a header and footer are considered template parts. These are also known as WordPress patterns (a set of reusable blocks) that appear throughout your website.

Other examples of a template part include the comment section and the post meta.

For the sake of example, we will show you how to edit your WordPress header, but you can repeat these steps with other template parts.

First, go to Appearance » Editor. Once you are in the Full Site Editor, just click ‘Patterns.’

Clicking the Patterns menu in the Full Site Editor

You will now see a list of patterns provided by your WordPress theme.

Go ahead and scroll down to the Template Parts section. Then, select ‘Header’ and click on the Header template part.

Opening the header template part in the WordPress Full Site Editor

Now, you need to click the pencil button next to the Header text.

This will open the block editor.

Clicking the pencil button to edit the header using the Full Site Editor

The block editor works the same way with template parts as it does with pages and posts. You can add various blocks to the header, configure the block, and update the changes when you are done.

Headers usually include a Site Logo (or the favicon), so feel free to add that here, too.

Adding the Site Logo block to the header in the Full Site Editor

If you want to completely change how the header looks but don’t know where to start, click the ‘+’ add block button in the top left corner.

Then, navigate to the ‘Patterns’ tab and click ‘Headers.’ You will find many ready-to-use header layouts there.

Finding WordPress header patterns in the Full Site Editor

For more information, see our guide on how to customize your WordPress header.

Once you are done changing the header, click ‘Save.’ Since the header is a synced template part, all the changes you make here will apply across all pages that use the header.

Now, if you want to create a new header or any other template parts rather than editing the existing ones, you can go back to the ‘Patterns’ page. After that, click the ‘+ Create pattern’ button and select ‘Create template part.’

Creating a new template part in the Full Site Editor

In the popup, give the template part a name and select the type of template part.

Then, click ‘Create.’ You will then be directed to the block editor and you can edit the template part like usual.

The Create template part popup in the WordPress Full Site Editor

For more details, you can see our complete guide to WordPress full site editing.

How to Edit a WordPress Header, Footer, and Other Widget-Ready Areas in a Classic Theme

In a classic theme, a WordPress widget is basically a block that you can add to widget-ready areas, like headers, footers, sidebars, and so on.

Every classic WordPress theme has different widget-ready areas. Some may include a sidebar, and some may not. So be sure to check your theme’s documentation for more information.

To use widgets, you have to go to Appearance » Widgets. Here, you can add, configure, and remove blocks in the available widget-ready areas.

Adding the FlipBox widget to a sidebar or similar section

You can read more information about widgets in our how to add and use widgets in WordPress article.

Also, check out our guide on the difference between widgets and blocks to understand more about this feature.

How to Edit a WordPress Header, Footer, and Other Template Parts With a Page Builder

One of the benefits of using a page builder is you will have more options to customize headers, footers, sidebars, and other parts of your theme.

If you use SeedProd, you can go to SeedProd » Theme Builder. We will assume that you have installed a theme template kit from earlier.

The kit usually includes various theme templates. This may be a built-in page template, like a 404 or single post, or a part of a page, like a header, footer, pricing tables, and so on.

Go ahead and hover over a theme template. Then, click ‘Edit Design.’

Editing the header theme template in SeedProd

Now, you can edit the header the same way as you would with a page.

Let’s say you want to add your social media links here. What you can do is hover over the header until the blue border appears and click the ‘+ Add Row’ button. Then, go ahead and select a row layout.

In our example, we want to add one more column so that the header can fit the image, menu, and social media links. That means we will need three columns in one row.

Choosing a row layout in SeedProd

You can then drag and drop the blocks from the top row to the new row.

After that, just delete the top row so that your new row becomes the new header.

Deleting a previous row in a SeedProd section

Now, just look for the Social Profiles block in the left-side panel.

Drag it into the right column, and you are done.

Adding the Social Profiles block in the header in SeedProd

For more information about editing template parts, you can read these WordPress tutorials:

How to Edit a Navigation Menu in WordPress

A navigation menu makes it easy for visitors to explore all your content without getting lost on your website. That’s why it’s important to design a menu that shows your essential pages and links to other relevant information.

If you use a block WordPress theme, then you can select the ‘Navigation’ menu from the Full Site Editor page.

Selecting Navigation in WordPress Full Site Editing

Our article on adding custom navigation menus in WordPress can walk you through the rest of the steps.

If you use a classic WordPress theme, then you can go to Appearance » Menus. This is a dedicated page for you to add, arrange, and remove pages/posts and links to your menus.

How to add a WordPress navigation menu to your site or blog

For step-by-step instructions, you can check out our beginner’s guide on how to add a navigation menu in WordPress.

If you use a page builder like SeedProd, then your navigation menu (Nav Menu block) may have been embedded in your header theme template.

The Nav Menu block will already include all of your pages, though you can add new items, too.

First, go to SeedProd » Theme Builder from your WordPress dashboard. Then, find the ‘Header’ theme template and click ‘Edit Design.’

Editing the header theme template in SeedProd

Now, hover over the block that looks like a menu. That should be the ‘Nav Menu’ block.

After that, scroll down on the left panel and click ‘+ Add New Item.’

You can then customize the anchor text, enter the URL, have it open in a new window, and set it as nofollow.

Adding new menu items in SeedProd

Toward the bottom, you can change the links’ font size, spacing, divider, and alignment.

Don’t forget to click ‘Save’ to make the changes live.

Configuring the Nav Menu block in SeedProd

How to Edit a WordPress Site With Code

If you are comfortable with code, then you can also use custom code snippets to edit your WordPress website. That said, we only recommend this method if you have the right technical know-how to avoid breaking your website.

One way you can edit a WordPress site with code is by adding CSS, which is a stylesheet that can change how HTML looks on the front end.

Classic theme users can go to Appearance » Customize and find the ‘Additional CSS’ field in the Theme Customizer.

Here, you can insert CSS code to style different HTML elements like colors and fonts.

This may be handy if your theme’s built-in options aren’t enough for your needs.

Adding custom CSS in WordPress

As for block theme users, you cannot add custom CSS within the Full Site Editor.

Instead, you have to go to the URL below to open the Theme Customizer and find the Additional CSS field. Make sure to replace the domain name with your own.

https://example.com/wp-admin/customize.php

For more details, see our guide on how to fix missing Theme Customizer in WordPress.

Another way to add CSS is with CSS Hero. This plugin makes adding custom CSS to WordPress themes easy, even for beginners. If you are interested in using it, then just check out our CSS Hero review.

How to Edit WordPress Theme Files

At times, some tutorials may require you to edit your WordPress theme files to make changes beyond what your built-in theme features allow. In this case, we recommend:

  • Creating a child theme first. This is like a copy of your WordPress theme that you can safely customize with some coding.
  • Backing up your website. It’s a good measure to do so that you can restore your website to a previous version in case of errors.

Editing a WordPress theme file requires going to your WordPress file directory from the backend. To do this, you will need to open your hosting provider’s file manager or connect to your website with an FTP client.

If you use Bluehost, then you can go to your dashboard and open the ‘Websites’ tab. After that, click ‘Settings’ on the website for which you want to open the theme files.

Opening Bluehost's website settings

Now, simply scroll down to the ‘Quick Links’ section.

Then, click ‘File Manager.’ If you’re not sure where your root folder is, you can check the ‘Document Root’ function to see its path.

Opening Bluehost's file manager

Once inside the file manager, you can go to your website’s root folder (usually named public_html).

Then, head to /wp-content/themes and find your current theme folder.

An example of what the WordPress theme files look like in the Bluehost file manager

After that, you will find all of your WordPress theme files, which you can edit using a text editor.

Here are some things you can do by editing WordPress theme files:

How to Safely Insert Custom Code into WordPress

If you want to add new custom code rather than editing the code that is already within your theme files, then we recommend using WPCode. It’s the best WordPress code snippets plugin for easily inserting and managing custom code snippets.

WPCode - Best WordPress Code Snippets Plugin

With this plugin, you won’t have to worry about accidentally breaking your website. WPCode will let you know if there are errors in the code and deactivate it. Plus, you can create PHP shortcodes for inserting custom content into your website.

To see WPCode in action, you can check out our full WPCode review in the WPBeginner Solution Center.

What Is the Best Way to Edit a WordPress Site for Beginners?

For beginners, we always recommend installing a page builder plugin like SeedProd to edit WordPress websites. The reason is that it’s just as easy to use as the block editor yet gives you much more control over your website design.

If you don’t want to use a plugin, then the next best thing is a block theme with the Full Site Editor. This feature is not entirely developed yet because WordPress is constantly working on the Gutenberg project. But as of now, it’s pretty user-friendly.

The Theme Customizer is not as flexible as the Full Site Editor because it lacks drag-and-drop functionality. That’s why we suggest classic theme users install SeedProd to improve their user experience.

As for coding, we only recommend it if you have created a child theme and backups of your site to avoid errors. But with the WPCode plugin, adding custom code to edit your WordPress site is much safer and won’t cause any errors or break your website.

We hope this article helped you learn how to edit a WordPress website. You may also want to check out our in-depth WooCommerce tutorial to create an online store and the ultimate guide to WordPress SEO.

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 Edit a WordPress Website (Ultimate Guide) 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.

Gutenberg vs. Elementor: Choosing One Is Actually A Tough Call!

It isn’t very unusual to see developers having sorts of debates and discussions on the emerging tech topics, but the moment things go beyond developer discussion and dive into the mainstream where you and I hear them, they quickly get listed in controversial issues. Well, today’s topic is how the dawn of WordPress 5.0 featuring Read More →

The post Gutenberg vs. Elementor: Choosing One Is Actually A Tough Call! appeared first on WPArena.