Elementor vs Divi vs SeedProd (Compared) – Which is the Best?

Are you looking for a website builder for your WordPress site but not sure whether to choose Elementor, Divi, or SeedProd?

With the right website builder, you can easily customize your site and build landing pages that help increase conversions and grow your email list.

In this article, we’ll compare Elementor vs Divi vs SeedProd and show you which is the best WordPress website builder.

Brief Overview of Our Contenders

Elementor, Divi, and SeedProd are among the best drag and drop page builders and theme builders for WordPress. They help you customize your site without editing code.

Elementor was launched in 2016 and is one of the most popular website-building platforms for WordPress. It has over 5 million active users spread across 180 different countries.

Divi is part of Elegant Themes and is a visual theme and page builder. Elegant Themes has been in the industry for over 14 years and they have over 806,000 customers worldwide.

SeedProd is a beginner-friendly WordPress theme builder and landing page plugin. Over 1 million professionals use SeedProd to create custom themes and page layouts in WordPress. It is also part of WPBeginner’s family of products.

That said, let’s compare these WordPress page builders to see which one is the best. We’ve broken down our comparison into the following sections:

• Ease of Use
• Customization Features
• Performance
• Integrations
• Customer Support
• Pricing
• Elementor vs Divi vs SeedProd – Which One is the Best?

Note: For our comparison, we used the premium versions of all the plugins, so you get to see all of the features and integrations they have to offer.

Ease of Use – Elementor vs Divi vs SeedProd

When it comes to choosing a website builder, it’s important to select a tool that’s beginner-friendly and designed for non-techy users.

It should allow you to completely customize your WordPress theme and landing pages easily, without needing to edit any code.

Let’s see how these 3 builders stack up for ease of use.

Elementor – Ease of Use

Elementor offers a drag and drop theme and landing page builder. It provides different elements in a menu on your left, so you can quickly drag and drop them onto your template.

You can also enable a responsive mode, which lets you switch from a desktop view to a tablet or mobile view. This helps in editing your theme for different devices.

The builder can be overwhelming for beginners at first. There are a lot of elements to choose from and clicking on any element on the template opens several more options for customization.

However, once you get the hang of it, Elementor’s website builder is easy to use.

The only downside we found was that there is no quick way to undo or redo the changes you made to the page, except for going through the revision history and reverting your changes. This can be frustrating and time-consuming when customizing landing pages or themes.

Divi – Ease of Use

Divi also offers a drag and drop builder to edit the Divi WordPress theme and change the layout of your landing pages without editing code.

What makes Divi’s builder different is that it lets you edit the WordPress website on the front end. It works by showing your design in real-time, so you can exactly see what each element looks like.

Unlike Elementor or SeedProd, you don’t get a menu containing different elements like text, images, videos, or buttons to add to the template.

Instead, Divi lets you select the layout of the section you want to add, and then allows you to choose the element you’d like to add.

It could take some time for new users and beginners to pick up the process for customizing their WordPress themes and landing pages, but it’s fairly straightforward and simple to use.

SeedProd – Ease of Use

SeedProd’s drag and drop website builder is very easy to use as well. It is a theme-agnostic plugin that lets you create your designs from scratch, without being limited by your theme’s design.

You can add different elements from the menu on your left by dragging and dropping them onto the template.

Using SeedProd’s theme builder, customizing the way your site looks is effortless. It’s made for non-techy users and ensures that anyone can customize their site without editing code.

You can also see the revision history and revert previous changes with a click of a button. There’s also a draft mode, which lets you edit a page privately without revealing it is under construction.

The builder is also quick and designed with speed in mind. It doesn’t bloat or slow down your website.

SeedProd also lets you add a coming soon page, maintenance mode, and 404 error landing pages with ease. This way, you can create buzz around your upcoming website or tell search engines that your site is currently under maintenance.

Winner – SeedProd

All 3 plugins offer a no-code drag and drop website builder for WordPress and are quite easy to use. Each website builder is made with beginners in mind and they make it super simple to create stunning website themes and landing pages.

However, SeedProd’s easy revision history makes it the winner in this category.

Customization Features – Elementor vs Divi vs SeedProd

Another important factor to look for when selecting a website or landing page builder is the level of customization that’s possible.

It’s important to choose a tool that gives you full control over the appearance of your themes and pages.

Here’s a look at the customization features offered by Elementor, Divi, and SeedProd.

Elementor – Customization Features

Elementor offers over 300 designer-made templates. Simply pick a template, add your content, edit its style, and make it your own. Using Elementor, you can control every aspect of your site’s appearance.

It offers templates for a wide variety of categories. For example, you can choose a template for a blog, eCommerce store, travel, tourism site, fashion blog, non for profit organization, education, and more.

With Elementor, you get over 100 different widgets to add to your theme or landing page. These include basic widgets like heading and text, Pro widgets such as share buttons and countdown timers, and theme elements like post title, and WooCommerce widgets.

Other than that, Element also offers advanced customization features. For instance, you can add custom CSS to change the appearance and behavior of your site, add custom code, upload your own fonts and icons, and more.

Divi – Customization Features

Divi offers over 100 pre-made website themes and over 800 pre-made landing page layouts.

You can choose from a full website pack to design your WordPress website. The pack includes templates for different pages like a blog section, about us page, contact page, homepage, and more.

Besides that, Divi offers over 40 website elements for customizing your website theme and pages. For example, you can add sliders, call to action (CTA) buttons, forms, testimonials, galleries, and more.

You have full control over how each element looks. You can change the fonts, text color, border options, add hover styling, use filters and effects to enhance the appearance of any element, or use custom CSS to edit any element.

SeedProd – Customization Features

SeedProd offers over 20 different website theme templates and 150+ landing page templates. You can also choose from over 20 built-in color schemes or create your own from scratch.

Each website theme template is packaged with templates for multiple pages and sections, like the homepage, a single blog post, header, and footer.

However, what makes SeedProd different from Divi and Elementor is that it doesn’t rely on your WordPress theme for styling or functioning. It works independently from WordPress themes gives you complete control and freedom over the appearance and design of your theme.

There are also over 80 different blocks you can use to customize your WordPress themes and landing pages further. For instance, you can add a site logo, post navigation, headlines, text, or use advanced blocks like contact forms, optin forms, giveaways, icons, progress bar, and more.

Each block is further customizable, as you can change its alignment, color, edit font size, change heading levels (H1, H2, H3, and so on), add image alt text, edit image size, and more.

Other than that, SeedProd also offers WooCommerce blocks, so you can easily customize your WooCommerce store. It even integrates with Google Fonts to give more options to customize your website.

Winner – Tie

Whether your choose Elementor, Divi, or SeedProd, each WordPress website builder offers a great range of customization options. You get to choose from multiple themes and landing page templates.

Plus, you can select any element on the template and further edit its style, color, and appearance. They also allow advanced customization options through custom CSS and custom code snippets.

Performance – Elementor vs Divi vs SeedProd

The performance of your WordPress site plays a vital role in getting more conversions and boosting search engine rankings.

A slow-loading website can lead to a poor user experience, which means people might leave your site before interacting with your landing pages. Similarly, Google now uses page speed as a ranking factor and ranks sites higher in search results that load quickly.

To test how Elementor, Divi, and SeedProd perform, we created a simple landing page with a headline, an image, and a button. Then to test the page speeds, we used Google’s PageSpeed Insights tool.

That said, we’ll focus on the mobile page speed scores, because Google now uses your site’s mobile version for indexing and ranking content.

Let’s see how each of these website builders performs.

Elementor – Performance

When we tested our landing page created using Elementor, the PageSpeed Insights tool showed an overall score of 90 for mobile. This is a great score and shows your site won’t slow down while using the builder.

Divi – Performance

The score obtained using Divi’s drag and drop builder was also excellent. A 91 score means your website loads quickly, and you don’t have to worry about page load times when using Divi.

SeedProd – Performance

SeedProd’s page speed tests were slightly better than both Elementor and Divi. With a score of 93 on mobile, you can expect fast performance and no delays in load time when using SeedProd to design your website and landing pages.

Winner – SeedProd

All 3 website builders performed well in our test, but SeedProd was slightly better than Divi and Elementor because it’s built with a speed-first mindset.

It helps you avoid bloated code which generally leads to faster speed and page load time.

Integrations – Elementor vs Divi vs SeedProd

Integrating your WordPress landing page and theme builders with other WordPress plugins and third-party tools is important for adding more features and helping you to achieve your business goals.

For example, you can connect email marketing services to capture leads and build an email list, optimize your pages for search engines with SEO tools, or integrate social media networks.

Let’s see which tools and plugins are supported by Elementor, Divi, and SeedProd.

Elementor – Integrations

Elementor seamlessly integrates with different email marketing tools like AWeber, Drip, MailChimp, ActiveCampaign, Sendinblue, and ConvertKit. You can also connect customer relationship management (CRM) software such as HubSpot with Elementor.

Elementor also supports different WordPress plugins, including WooCommerce. You get different WooCommerce elements in the drag and drop builder as well.

One thing we noticed was that it’s not immediately clear how to connect our preferred email marketing service with Elementor.

To choose an integration with Elementor, you’ll first need to enter the API key for your preferred service in Elementor plugin settings.

Once that’s done, you can go to the drag and drop builder and add a signup form in your WordPress theme or landing page template. It’s only then you’ll be able to select your email service in the ‘Actions After Submit’ dropdown menu.

Besides that, it integrates with other eCommerce plugins like MemberPress and LearnDash.

Lastly, Elementor also integrates different social platforms like Facebook SDK, YouTube, Vimeo, Google Maps, SoundCloud, Slack, and more.

Divi – Integrations

Divi offers limited integration options compared to the other two WordPress websites and landing page builders.

It easily integrates with WooCommerce and offers different modules like add-to-cart buttons, cart notice, product ratings, and more. You can use these modules to create a WooCommerce store in WordPress.

Other than that, the tool lets you integrate Google Maps to show your location. It also works with the Wishlist Member plugin, Toolset plugin, and Hotel Booking plugin for WordPress. Sadly, it doesn’t integrate with third-party email marketing tools or CRMs.

SeedProd – Integrations

SeedProd also offers a wide range of integrations with premium third-party tools and WordPress plugins.

For instance, you can connect it with Drip, Constant Contact, and other email marketing tools to collect and manage email subscribers.

SeedProd seamlessly connects with WPForms and allows you to add any form to your website pages. Similarly, it also offers WooCommerce integration and lets you add WooCommerce blocks to your template.

Besides that, SeedProd integrates with Google Analytics and allows you to track website visitors. You can also connect it with Zapier and add Recaptcha to your landing pages.

What makes SeedProd different from Elementor and Divi is that it lets you connect email marketing services within the theme or landing page builder. There’s no need to exit the drag and drop builder to enter the API key and connect your email marketing service.

Winner – SeedProd

When it comes to integrations, it’s a close fight between Elementor and SeedProd. Both tools offer a lot of third-party tools and WordPress plugins for integration.

That said, SeedProd is our winner because the process of integrating email marketing services and third-party tools is much easier and faster than Elementor.

You don’t have to exit the theme or landing page builder to enter API keys. It shows different email marketing services under a separate tab inside the website builder, which removes the need to perform additional steps to integrate each service.

Customer Support – Elementor vs Divi vs SeedProd

At times, you could get stuck or need help while using a WordPress website builder.

This is where having excellent customer support comes in handy. With the proper guidance and resources, you can resolve your issues and ensure the best results for your business.

Here’s how Elementor, Divi, and SeedProd stack up when offering support to users.

Elementor – Customer Support

Elementor offers multiple options for users who need help or need to contact customer support. They have a detailed and well-organized help center where you’ll find documentation on different topics.

For example, you can see steps for installation, how to create a new page, learn more about its features, how to use different widgets, and more.

Elementor also offers a guides and tutorials section where you’ll find multiple videos on different topics. You can even take courses and master using Elementor for various purposes, like building a portfolio or creating an online store.

If you’re an Elementor Pro user, then you get 24/7 premium support. Simply submit a support ticket, and a support representative will respond to your query.

Divi – Customer Support

Divi offers customer support through detailed documentation, including written steps and video tutorials. It also provides a community forum where you can interact with other users.

Another way Divi offers customer support is through support tickets and live chat. You can reach out to a customer support agent and resolve your problems through the live chat feature.

SeedProd – Customer Support

SeedProd offers customer support through a detailed knowledge base, where you’ll find tutorials and guides for getting started, learning more about different features, and troubleshooting various issues.

The plugin also offers support through a ticketing system. You can open a ticket, and a team of WordPress experts will help you out.

Since SeedProd is part of the WPBeginner family of products, you can join our WPBeginner Facebook Group for support. The group has over 83,000 members, and it’s a great place to ask for help.

Winner – Tie

All 3 WordPress website builders offer great customer support options. Elementor has lots of documentation, videos, courses, and more. Divi lets you chat with their support staff through live chat. While SeedProd offers detailed documentation, and premium ticket support.

Pricing Plans – Elementor vs Divi vs SeedProd

Another important factor you should consider when selecting a WordPress website builder is its pricing. Let’s look at the pricing plans offered by Elementor, Divi, and SeedProd.

Elementor – Pricing Plans

With Elementor, you get 4 pricing plans starting from $49 per year with their Essential plan. However, if you need to use Elementor on more than 1 website, then you can choose their Expert plan for $199 per year.

There is also a Studio plan for $499 per year that lets you activate 100 websites and an Agency plan for $999 per year that offers 1000 website activations.

Elementor also offers a free version that you can use before subscribing to a premium plan.

Divi – Pricing Plans

Divi offers 2 pricing plans starting from $89 per year with their Yearly access plan. On the contrary, you can subscribe to their Lifetime access plan and pay a one-time fee of $249.

SeedProd – Pricing Plans

SeedProd lets you choose from 4 different pricing plans. The Basic plan starts from $31.60 per year, and the Plus plan costs $76.60 per year.

However, if you want to use the Theme builder, then you’ll need the Pro plan for $159.60 per year or the Elite plan for $239.60. With each plan, you get a 14-day money-back guarantee.

SeedProd also offers a Lite version which is 100% free to use. However, it has limited features and doesn’t include the WordPress theme builder.

Winner – SeedProd

SeedProd offers affordable pricing plans compared to Elementor and Divi. Plus, you get more features and integrations with SeedProd, making it excellent value for money.

Elementor vs Divi vs SeedProd – Which One is the Best?

Elementor, Divi, and SeedProd are among the best WordPress website and landing builders in the market, so comparing them will always be close.

However, we believe that SeedProd is the best plugin for building custom WordPress themes and landing pages.

It’s super easy to use, offers an exceptional user experience, and gives your more control over the customization of your themes and pages. With SeedProd, you also get great integration options, responsive designs, and fast performance.

Often users ask us what about the default WordPress block editor, and how does it compare with these WordPress page builder plugins. There has been a lot of promising progress being made with front-site editing with the WordPress block editor, but it’s not yet powerful enough to compete with these popular page builders.

For more on this topic, see our guide on block editor vs page builders.

We hope this comparison between Elementor vs Divi vs SeedProd helped you pick the best WordPress website builder. You may also want to see our guide on how to choose the best blogging platform and the best GoDaddy alternatives.

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 Elementor vs Divi vs SeedProd (Compared) – Which is the Best? first appeared on WPBeginner.

April 14, 2022 at 04:00PM

How to Create a Booking Form in WordPress

Do you want to create a booking form in WordPress?

Many websites and businesses rely on bookings. If you accept appointments, then a booking form can help you schedule more appointments and boost your profits. It can also remove a lot of the time-consuming admin work that often comes with managing bookings. 

In this article, we’ll share three ways to create a booking form in WordPress.

Why Create a Booking Form in WordPress?

Think about all the times you’ve booked an appointment. This can be anything from a doctor’s appointment, to scheduling a callback, reserving a table at your favorite restaurant, or even booking tickets to a concert or movie.

Sometimes, you may have made the booking by calling the business. However, most of the time you’ve likely booked online. 

More and more, we expect to book all kinds of appointments online, without ever speaking to a real person.

Your customers and visitors expect this as well.

If your business accepts appointments, then it’s smart to create an online booking form. This is any form that lets visitors book an appointment, buy tickets to an event, or make a reservation online.

With a booking form, you’ll never lose another customer just because you weren’t around to answer the phone. 

Booking forms can also automate a lot of the booking process. This includes collecting payments and sending your customers helpful reminder emails. This can improve the quality of the customer experience. It can also save you from lots of annoying admin work.

That said, let’s take a look at how you can create a booking form in WordPress. We’ll show you 3 ways to do this, so simply click the links below to jump to the method you prefer:

• Method 1. How to Create a Booking Form Using WPForms (Recommended)
• Method 2. How to Create a Booking Form Using Formidable Forms

Method 1. How to Create a Booking Form Using WPForms (Recommended)

WPForms is the best form builder for WordPress used by over 5 million websites. You can quickly add a booking form to your website using the plugin’s simple drag and drop builder. 

There are even ready-made templates that can help you get started. This includes event planning templates, feedback forms, and user registration templates.

You can even use these ready-made forms to collect donations for your nonprofit site, or arrange Zoom meetings with potential new customers.

Plus, WPForms integrates with all of the top email marketing providers. This makes it easy to send notifications and appointment reminder emails to both your customers, and your staff.

For this post, we’ll be using the WPForms Pro version because it has lots of different templates and powerful addons. If you’re looking for a free form builder plugin, there is also a WPForms Lite version. It just doesn’t include all of the premium templates and integrations.

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

After activating WPForms, head over to WPForms » Settings in your WordPress dashboard. You can now enter your license key. You’ll find this key in your WPForms Account.

Next, you need to go to WPForms » Add New. To start, give your booking form a name.

WPForms has lots of different templates so you can quickly get started and build all kinds of forms. Since we’re creating a booking form, it makes sense to select the Event Planning category in the sidebar.

Here, you’ll find templates for ordering wedding flowers, booking a school trip, hiring a DJ, and everything in between.

To preview a template, click on its View Demo button. This opens the template in a new tab.

When you find a design that you want to use, click on the orange ‘Use Template’ button. This launches the WPForms drag and drop editor. 

In this tutorial, we’re going to use the Online Event Registration RSVP form. This form has fields where customers can type their name and email address. 

It also asks visitors how they heard about your event. This can help you pinpoint the marketing channels and sources that are bringing you the most conversions. 

You can use this information to plan your future marketing activities, and drive more people to your booking form. For more information about conversion tracking, see our ultimate guide on conversion tracking in WordPress.

The Online Event Registration RSVP template also lets visitors add multiple people to a single booking. This is perfect for events that often attract group bookings, such as tours, or shows.

Finally, customers can use the dropdown menus to choose the date and time when they want to attend your event.

All of these fields are completely customizable. To edit a field, simply give it a click. The sidebar will then update to display all of the settings for the selected field.

You can also add more fields to your booking form template. If it isn’t already selected, then click on the ‘Add Fields’ tab in the left-hand menu.

Then, simply drag and drop your chosen field into place on your booking form. You also change the order these fields appear in your form using drag and drop. 

Once you’ve finished editing your booking form, click on the Save button.

Now that you’ve created your booking form, it’s important to set up some notifications.

Every time someone fills in the booking form, WPForms will send an email to your WordPress admin by default. Sometimes, you may want to send these emails to a different address. You may even want to email multiple people.

This is easy to do using WPForms. To edit your email notifications, click on Settings in the left-hand menu. Then, select Notifications.

On this screen, find the ‘Send To Email Address’ field. By default, this is set to {admin_email}. This is a dynamic value that tells WordPress to use the email address that’s linked to your WordPress admin account. 

You can delete this dynamic text and replace it with any other email address. Simply type the new address directly into the ‘Send To Email Address’ field. 

If you want to email multiple people, then just separate each address with a comma.

You need to make sure all of the emails sent from your website go to the recipient’s email inbox and not to the spam folder. The best way to do this is by using an SMTP service provider. For more details, see our guide on how to fix WordPress not sending email issue.

Once you’ve finished building your WordPress booking form, it’s time to publish it. You can either create a new page, or add this form to a page that you’ve already created.

With that said, the process is exactly the same. Simply open the webpage where you want to display your booking form. Then, click on the black + icon. 

WPForms has its own block, so start typing ‘WPForms.’

When this block appears, add it to your webpage.

In your new WPForms block, click on the dropdown menu and select the booking form that you just created.

You can now update or publish your page. 

That’s it! Visit your website and you should now see your booking form in action.

Method 2. How to Create a Booking Form Using Formidable Forms

Formidable Forms is the most advanced WordPress form plugin in the market. You can use Formidable Form’s drag and drop interface to create a booking form with more advanced features such as calculations.

Formidable Forms also works great with other tools that you may already be using like MemberPress, WooCommerce, or your email service provider. 

In this post we’ll be using Formidable Forms Pro because it has a good selection of booking form templates. This makes it easy to create a user-friendly booking form for your WordPress website.

The first thing you need to do is install and activate Formidable Forms Lite, which is the free version of the plugin. Formidable Forms Lite acts as the base for the advanced features of the Pro version. For more details, see our guide on how to install a WordPress plugin.

Once you’ve done that, you need to go to Formidable » General Settings. Then, click on the ‘Click to enter a license key manually’ link. 

You’ll find your license key in the Downloads section of your Formidable Forms account.

You can now paste your license key into this box and click on the ‘Save License’ button.

After activating your license key, select Formidable Forms from the WordPress menu.

Then, click on the ‘Add New’ button.

You can now pick the template that you want to use. Since we’re building a booking form, you may want to focus on the Event Planning category. 

To view all of the templates in this category, start typing ‘Event Planning’ into the search field. When the Event Planning category appears, give it a click.

You can now pick the template that you want to use. We’re using the Travel Booking template in all of our screenshots. 

After choosing your template, give it a name and enter a description. Then, click on Create. This launches your template in the Formidable Forms editor.

To edit a field, give it a click. The Formidable Forms sidebar will then display all of the different settings for your chosen field.

This sidebar also has different fields that you can add to your form. You may want to use these fields to collect more information from your visitors or give them choices. For example, you might let them request a room with a sea view, or ask about their dietary requirements. 

You can also change where each field appears in your form by using drag and drop.

Once you’re happy with your design, click on Update to save your changes. 

If someone completes your booking form, then you’ll want to know about it! Just like WPForms, Formidable Forms sends email to your WordPress admin by default. 

If you prefer, then you can tell Formidable Forms to send these emails to any other address. You can even send these emails to multiple accounts.

To customize these default emails, click on the Settings tab. Then, select ‘Actions & Notifications’ from the left-hand menu.

Next, click on Send Email. This adds a new section that has all the settings you need to set up your email notifications. This includes changing the person who gets these emails, or adding more people.

The final step is adding this booking form to your WordPress website. 

At the very top of the screen, click on the Embed button. This opens a popup where you can choose to add this form to an existing page, or create a new page.

Another option is adding this form to a widget. This can be an easy way to display your booking form in your theme’s sidebar, or header. 

If you want to add your form to a widget, click on Insert Manually. Formidable Forms will then display a shortcode. You can now copy this code and paste it into any Shortcode block. 

We hope this article helped you learn how to create a booking form in WordPress. You may also want to learn how to create a free business email address, or check out our list of the must-have WordPress plugins for business websites. 

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 Booking Form in WordPress first appeared on WPBeginner.

April 13, 2022 at 04:00PM

How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)

Do you want to create a collapsible sidebar menu in WordPress?

A collapsible menu can give your website visitors an easy way to access a lot of links, without cluttering up your sidebar. It’s perfect for large websites, eCommerce stores, or any site that has a more complex layout. 

In this article, we will show you how to easily create a collapsible sidebar menu in WordPress.

What is a Collapsible Sidebar Menu (And When to Use One)

The most user-friendly menus provide easy access to all the links that visitors need. However, this can be tricky for sites that have lots of pages, or a more complex layout. 

Think about a large eCommerce store that has lots of product categories and subcategories, such as Amazon. 

Displaying every single product category in a standard menu wouldn’t be a good idea. Shoppers would likely need to scroll through the menu to find the category they’re interested in. 

This is where collapsible menus come in. These menus organize their content in a parent-child relationship. If the visitor clicks on a parent item in a collapsible menu, then it will expand to display all of that parent’s child content. 

The Guardian news outlet uses a collapsible menu for its mobile site.

Collapsible menus are sometimes called expandable menus. This is because their different sections expand when a visitor clicks on them. 

By default, collapsible menus hide a lot of content and complexity from visitors. This is much more user-friendly than scrolling through a long list of categories and subcategories.

That said, let’s take a look at how you can easily create a collapsible sidebar menu on your WordPress site.

How to Create a Collapsible Sidebar Menu in WordPress

You can create a collapsible sidebar menu in WordPress using the Bellows Accordion Menu plugin.

Bellows Accordion Menu provides a handy shortcode so you can place your collapsible menu on any page, post, or widget area, including your sidebar.

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

Upon activation, go to the Appearance » Menus page in your WordPress dashboard. 

To start, type a name for your menu into the ‘Menu Name’ field. Your site visitors won’t see the name since it’s for your own reference only. You can then click on the Create Menu button. 

Next, you can choose the pages you want to add to the collapsible menu. By default, WordPress displays your most recent pages only. If you want to see a list of all your website’s pages, then click on the View All tab. 

Alternatively, you can click on Select All. This will add all of your pages to the collapsible menu.

Once you’re happy with your selection, click on the ‘Add to Menu’ button. You can also select posts, blog categories, or add custom links. For more details, please see our guide on how to add a navigation menu in WordPress.

After adding all of your different webpages to the menu, you can move them around by dragging and dropping them. This will change the order these pages appear in your collapsible menu. 

Collapsible menus are all about parent-child relationships.

When a visitor clicks a parent item in your collapsible menu, it will expand to reveal all of the child content.

To create this relationship, simply use drag and drop to arrange all of your child pages beneath their parent.

Next, grab each child and drag it a little to the right. You can then release this page. This will indent the item and turn it into a child page. 

Don’t forget to click the Save Changes button when you’re finished.

Now we want to add this collapsible menu to the WordPress sidebar. To do this, we’ll use some shortcode that Bellows Accordion creates automatically. 

To grab the shortcode, go to Appearance » Bellows Menu. If it isn’t already selected, then make sure you select the Show All tab.

You can now click on the Shortcode box, which should highlight all of the code. Now, copy this code using either the Command + c or Ctrl + c keyboard shortcut. 

The next step is pasting this shortcode into a widget, so head over to Appearance » Widgets. This will display all of the widgetized areas within your current theme. The options you see may vary, but most modern WordPress themes feature a sidebar.

Once you’ve found the sidebar area, give it a click. This section will now expand.

To add a block, click on the + icon and start typing Shortcode. When it appears, select the Shortcode block. 

Now, simply paste your collapsible menu shortcode into this block. To publish your menu, you’ll need to click on the Update button at the top of your screen. 

Now, when you visit your site you should see a new collapsible sidebar menu. 

The Bellows Accordion plugin makes it super easy to customize this default menu. For example, you might change its color scheme to better reflect your site’s branding. 

If you want to tweak the default menu, simply go to Appearance » Bellows Menu in your WordPress dashboard. 

This menu has all the settings you need to customize your collapsible menu. There are a lot of settings to explore. However, you may want to start by going to Main Configuration » Basic Configuration.

Here, you can switch between several different menu colors. You can also choose whether visitors can expand multiple submenus at once using the Accordion Folding settings. 

To change the menu’s alignment and width, click on the ‘Layout & Position’ tab.

If you’d prefer to preview your changes in real time, then you can edit the collapsible sidebar menu in the WordPress Customizer. To do this, head over to Appearance » Customize. 

In the left-hand bar, select Bellows. 

Here, you’ll find lots of different settings for your collapsible sidebar. This includes changing its width, alignment, and the color of your sidebar menu. 

We hope this article helped you learn how to create a collapsible sidebar menu in WordPress. You can also go through our guide on how to track your website visitors, and the best push notification software to grow your 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 Collapsible Sidebar Menu in WordPress (The Easy Way) first appeared on WPBeginner.

April 12, 2022 at 04:00PM