Author: Christina Gwira

How to Add Live Chat to Your WordPress Website in 2023
Adding live chat functionality to your WordPress website is easy and quite beneficial. Live chat has evolved considerably in recent years by incorporating powerful communication and automation features similar to popular AI chatbots. Whether you’re looking to boost sales conversions or integrate AI into your customer service process, using a live chat plugin or software on your WordPress site can be crucial to success. In this guide, we’ll show you the benefits of live chat, walk through how to add live chat to your website and look at the options available with live chat and WordPress.

Benefits of Using a WordPress Live Chat Feature on Your Website

Many rewards come with using live chat functionality on your website. Here are a few examples of what they can allow you to do:

Interact With Your Customers in Real-time – As the name implies, live chat takes place in real-time. Therefore, you can meet the needs of customers and visitors to your website as they come to your site. Your storefront may have set hours, and your phone line limited hours, but you can serve your customers at any time when they interact with your live chat.

Provide High-Quality 24/7 Support to Visitors to Your Website – If someone lands on your website after hours, your live chat can still service them. You can give your customers the help they need without getting out of bed through AI and automated responses.

Increase Conversions and Add Leads to Your Sales Funnel – Many live chat plugins allow you to add forms and collect information about customers who use the chat. To nurture later, you can retarget and add these customers’ information to your CRM, mailing list, or sales funnel.

Powerful AI Features for Various Automated Solutions – With the advancement of AI, some live chat solutions provide much deeper functionality and can help you create automated human-like conversations for a better customer experience.

I’m sure you get to experience other benefits of live chat first-hand once you add it to your site. On that note, let’s get to it!

How to Add Live Chat to Your WordPress Website

Now that we’ve seen some of the benefits of live chat let’s look at how we can bring this feature to your WordPress website.

1. Choose a Live Chat Platform

If you’re unsure which platform to use, check out our list of the best live chat plugins. There, you’ll find several plugins that could meet your specific needs. We’ll use the Tidio platform for this walkthrough, as it has a good mixture of features, support, and positive reviews.

2. Create a Tidio account

We must create an account before we add our Tidio live chat to our website. Visit Tidio and create your account by entering your email, website, and password.

Once you have created and verified your account, you’ll see the Tidio dashboard.

Now, we’ll move to our WordPress site to install and connect our Tidio account to our website.

3. Install Tidio Plugin

To install the Tidio plugin, hover over the Plugins menu item. Then, click Add New. Search Tidio in the plugin search field. Click Install Now next to the Tidio card.

Afterward, click Activate to complete the installation of the plugin.

Now that our plugin is installed, we can connect our website to our Tidio account.

Notice we have a new menu item just for accessing our Tidio settings.

4. Add API to WordPress website.

From your WordPress menu, click Tidio. Then, click on the Login link under the signup form.

Enter your Tidio account credentials and click Login.

Once logged into your account, you can start your chat widget’s customization process.

5. Create a New Chat Widget

To begin, you’ll need to create a new project in Tidio. Click on the Create One text link and give your new project a name.

After creating and naming your new project, you’ll have the opportunity to customize your chat widget.

You can assign a name to your chat agent and choose a solid or gradient color scheme. Additionally, you can set your chat language and upload a custom avatar to your chat widget.

6. Adjust Chat Settings

Now, click on the blue Continue button. You’ll now be faced with a short questionnaire. This will help Tidio know how to personalize your experience as you maneuver through the platform.

Select the focus, add the number of agents, select your industry, and finally, the number of inquiries your site gets. Next, you’ll want to set up your welcome message. You can customize your message to say something that is on brand with your website by clicking the Customize this message text link.

After setting your welcome message, click on the blue Install Widget button.

You’ll be redirected to your WordPress website once you click the Install Widget button.

7. Test Live Chat Widget

As with WordPress, testing the new feature you’ve added to your website is a good practice. To do this, navigate to your homepageÂ and see if the Tidio chat widget appears on your homepage.

Try sending yourself a message to see what that process looks like for your guests.

Now that we know our chat is installed and working on our WordPress website let’s look at some advanced settings and features we can implement with Tidio.

Additional Settings and Personalizations

With your new live chat installed, responding to visitors on your site is very simple. As you log in to your Tidio dashboard, you’ll see the mailbox icon in the top right. This is where you can see visitors on your site in real-time and respond to their messages. You can also see your chats on social networks should you connect them to your Tidio account.

Personalize Templates from the Tidio Chat Template Library

Tidio comes packed with templates that you can use to increase sales, generate leads, and solve your customers’ problems via live chat. To access these templates, click on the robot icon from the left-hand menu. Here, you can customize your automated responses for a smoother WordPress live chat experience for your customers.

Canned Responses and Notifications

You can access more complex features and settings of Tidio by clicking the gear icon at the bottom of the left-hand menu. Your frequently asked questions can be answered with custom canned responses. Under the General heading, click on the Canned Responses menu link. This is where you can edit and add new preset answers to your customers frequently asked questions. Here, you can refine your live chat process by having a library of premade responses that can solve your users’ questions on the fly.

Notifications can also be customized when using Tidio. You can choose how you’d like to be notified when a visitor lands on your website (email or web notification), and you can also determine what actions trigger notifications and the web notification sound.

Build an AI-Powered Chatbot

AI chatbots can help make customer service a breeze, andÂ Tidio is on the front lines of adding AI to the WordPress live chat sphere. With a Tidio+ plan, you can implement their AI chatbot Lyro, which can help you create innovative chat experiences for visitors to your website.

Establish Your Visual Branding

Further customization options for your widget are also available within Tidio’s advanced settings. Change your widget’s screen position, appearance, and more. Additionally, you can add custom branding to your widget, like your brand’s colors and logo, to mesh your chat widget with your WordPress website’s theme.

Set Your Live Chat’s Hours of Operation

While your live chat allows for 24/7 contact with your customers, you may want to set hours of operation for your chat widget. Tidio enables you to customize your operating hours individually for each day of the week. Additionally, you can customize your away message or attach a lead form that appears when a visitor encounters your site after hours.

That’s it. Now, your site is equipped with live chat!

Other Live Chat Options for Your WordPress Website

Tidio is a solid WordPress live chat plugin. However, you may need a different set of features that it may not cover. Here are some other WordPress live chat plugins and solutions that may be a better fit for your needs:
- HubSpot: The ultimate marketing platform, Hubspot has live chat functionality that is heavily integrated with other parts of its feature-rich CRM solution.
- JivoChat: An all-in-one business messenger plugin that brings together live chat, phone, email, and social media chatting platforms. Additionally, you can make and receive phone calls through its live chat widget.
- LiveChat: With integrations to eCommerce solutions like Shopify, WooCommerce, and BigCommerce, if you are running an eCommerce storefront, this is your live chat solution.Â
- Live Chat by Formilla: File sharing, real-time monitoring, and multilingual capabilities are just a few features that you can find with this live chat plugin.
- tawk.to Live Chat: Managing multiple websites, agents, and chats is where this chat plugin shines. Use your computer or mobile devices to stay connected to your website visitors.
- Chatra: Live chat, chatbots, email & social messaging can all be handled effectively with Chatra, a popular live chat solution that works with WordPress and as a standalone platform.Â
For more, check out the best live chat software options out there.

Conclusion

Live chat adds a powerful interactive feature to your WordPress website. Giving your customers a way to connect with you anytime is a great way to nurture client relationships and increase conversions. With the power of AI, the options are endless in the many ways you can customize your WordPress live chat process. Tidio is a great option to power live chat on your WordPress website. From AI to customizable automated messages, easy widget styling, and email marketing tools, Tidio is a solid choice to bring live chat to your WordPress website. Live chat functionality has come a long way. Now, you have a large selection of live chat tools that you can bring to your website. Have you added live chat to your website? What platform did you use? Let us know in the comments section below!

The post How to Add Live Chat to Your WordPress Website in 2023 appeared first on Elegant Themes Blog.
31.08.2023
How to Add a Contact Form in WordPress (2023 Tutorial)
A contact form is an excellent way to gather information from visitors to your WordPress website. Whether you want to capture orders, survey responses, or job applications, adding a WordPress contact form is an effective way for website visitors to contact and interact with you and your brand online.

Benefits of Using a WordPress Contact Form

There are many platforms and online tools available that allow you to create forms. Many modern platforms provide an easy-to-use interface, reporting, and analytics, among other features. However, using a WordPress contact form, you can have all these features and more within your WordPress interface. Here are some other benefits you can gain using a WordPress contact form:
- Lead Generation – When you use a WordPress contact form, you can take advantage of those entries to grow your audience through your website. A good form plugin will have many many built-in features, so you won’t need separate plugins for lead generation, content funnels, email opt-ins, CRM integration, and more. It’s hard to do this if visitors email you directly from your website or their email platform.
- Better Security and Validation – With a form natively built on your WordPress website, you can ensure the deliverability of your form results and use spam protection services like Recaptcha, Akismet, and more, protecting your email address and your user’s data.
- Manage Entries and Contacts in One Place – A WordPress contact form can allow you to have one central location for your form entries and be able to use them throughout your site. Many form plugins allow you to sort, organize and export content from forms you can store and easily create exhaustive databases. This isn’t possible when people email you directly.
- Create Various Form Types with Advanced Functionality – Surveys, polls, application forms, and more can all be created easily with a WordPress contact form. The limit is your imagination, and with form builders that allow for features like advanced calculations, conditional fields, and more, having a contact form on your website helps make your site an interactive experience for your visitors that’ll have them staying – and returning – to your website.
How to Add a Contact Form to Your WordPress Site (Step-by-Step)

We’ll use the popular and feature-rich WPForms Contact Form plugin to add a contact form to our WordPress website. We begin by installing the plugin onto our website.

Install WPForms

First, log in to your WordPress dashboard, and hover over Plugins. Then, click Add New and in the search box, enter WPForms. Click the Install button to begin the plugin installation process.

Finally, click the blue Activate button to complete the installation of the WPForms plugin.

Now that the plugin is installed and activated, you can see that a new menu item has been added to your WordPress menu.

Creating Your First Form

WPForms gives you multiple places to add a new form once you navigate to the dashboard. We’ll start by clicking the orange Add New button at the top of the dashboard.

The form-building process in WPForms starts by naming your form and choosing one of the many templates available. To name your form, enter a title within the Title text box. Then select your form template. We’ll build a custom form for our tutorial, so let’s select the Blank Form template.

After choosing the blank form template, you are presented with WPForms’ beautiful drag-and-drop builder. From the left-hand side, you’ll find your field types.

Even with the free version, you are given several form field types that can empower you to create stunning forms. We’ll create a simple contact form and use the name, email, dropdown, and paragraph text fields for our form.

Now that we have our form fields selected, let’s look at some of the customizations we can make with WPForms.

Customizing Your Form and Form Fields

Firstly, let’s click on the Name form field. Next, we’ll select the General tab from the Field Options for this form field. Now, we’ll change the format of this field and select First Middle Last. Finally, we’ll toggle the Required Form field. This means that we’ve made it mandatory to have this form field filled.

Next, let’s click on the Advanced tab. Let’s add placeholders to our name fields by filling in the placeholder field with our chosen text.

To adjust our email field first, click on the email field. Then, click on the General tab. For this field, let’s add an email confirmation option (meaning users must confirm their email by entering it twice). We do this by toggling the Email Confirmation Field.

For our dropdown field, let’s click on the field to begin. Then, click on the General tab. Now, we add a label to the form field so that our users know the purpose of this dropdown. Finally, we’ll add our options to this field.

Lastly, we’ll move on to our final form field, the paragraph field. Click on the form field, then click on the General tab. Assign the field a label. Now that we’ve made edits to the form fields within our contact form, let’s adjust the form settings to match our needs.

Customizing Your Form Settings

To adjust our form settings, click on the Settings icon from the left side of the form builder. Then, click on the General tab. This tab allows you to edit the form’s general settings, such as its name, description, tags, etc. We will go ahead and change the text on our submit button. Scroll down to the Submit Button Text text box. Then, enter Send Message.

Additionally, we’re going to change the processing text for our form. Add your chosen text to the text box. In our case, we edited it to Sending Message.

WPForms has built-in security; however, if you have another provider you’d like to use, you would use the Spam Protection and Security tab to integrate your chosen spam and security provider with your form. We’ll use the native provisions WPForm has in place for our form now.

Now, let’s add some notifications to our form. This means we’ll receive an email when a visitor comes onto our website and sends us a message through our form. To enable this, first, click on the Notifications tab. Then, let’s change the Email Subject line to New Website Form Message. Also, let’s adjust the From Name to a name we’ll recognize in our email inbox. With the pro version of WPForms, multiple notifications can be added in the future.

Finally, let’s send our website visitors a confirmation that we’ve successfully received their form entry. To do this, click on the Confirmation menu option. Then, adjust your confirmation message in the textbox. You can also redirect users to another page on your website or show another page in addition to showing an on-screen message.

After making all these changes to your form, click the orange Save button at the top right-hand corner of the screen. With our form created, let’s add it to our page!

Adding Your Contact Form to a WordPress Page

To add your form to your page, create a new page on your website or edit an existing page. Let’s create a new page for our contact form. First, hover over the Pages menu option, then click Add New.

After we are directed to the default WordPress page editor, give your page a title. Then click the black plus icon to open the library of available blocks. Search WPForms and select the WPForms block.

Select your form from the dropdown of forms available.

With your form selected, we can start styling it from within the Block Editor.

Styling Your Form

WPForms makes it very easy to style your contact form. While you can use CSS, you can also use the simple tools within the Block Editor to edit and style your form.

Within the editor, you can change the color of form fields, form field size, and much more with just a few simple clicks. This is what our form looked like before adding our styling edits:

After styling, this is what our form looks like. Notice the submit button has changed color, and edits have been made to the border of the form fields. Don’t forget we can also assign CSS classes to each aspect of our form and use CSS to customize our form further.

With our form customized and our fields in place, we’ve successfully created our first WordPress form! Here are some tips and tricks you should remember while building your contact form.

How to Get the Most Out of Your Contact Form

Contact forms allow you to add a dynamic connection with visitors to your site. However, there are some tips you should remember as you plan on building your site.

Think Outside the Box

Though we made a simple form in this tutorial, WPForms and other contact form plugins have hundreds of templates you can use to create a wide array of forms. Forms aren’t just used to collect contact information but can be vital to successful your business. You can create surveys, take polls, and generate quotes for clients with many WordPress form builders. Using a contact form to collect product personalization requests is even possible. Also, don’t be afraid to get creative in the way that you use forms on your website.

Keep Your Form Secure

Spammers will use any means to achieve their tasks; one method is online contact forms. However, a security feature like Akismet or Recaptcha can help keep your form content and email address secure. Don’t forget to keep your form security tight as you add forms to your website.

The Power of Integrations

Integrations are where using a native WordPress contact form shine. You can create custom email subscription forms that automatically populate your email marketing solution (like Mailchimp). Your form can be connected to your CRM, allowing you to nurture leads effectively. WordPress contact forms instill trust in your customers as they look and feel like your website. Your form becomes a powerhouse that populates different aspects of your business while keeping your processes seamless and streamlined.

Customize Your Form Notifications and Emails

Remember to customize your notifications and emails if you’re sending notifications to yourself or your visitors. Adding your brand colors, changing boilerplate text, and more makes your website visitor feel trusting of your brand. Additionally, if you’re redirecting people to different pages after form submission, ensure these pages give your customers all the information they need to embark on their next steps with your website.

Think About User Experience

Building a conversion-optimized form ensures that your visitors successfully fill out and submit your form. Creating straightforward and easy-to-understand forms helps guide visitors to a successful form submission. Consider adding tooltips, descriptions, directions, and placeholders that inform your customers about your form’s different fields and sections, providing them with a seamless and frictionless process to completing your form.

Consider Accessibility

While not often discussed, accessibility is approaching the forefront of web design. Consider how other users may interact with your forms through alternative means. Ensuring that labels, ARIA, tab sequences, and more are in place helps those who may use the internet differently also to use your website and ultimately experience the interactive element of your website in a way that works best for their needs.

More Contact Form Plugins and Platforms

Here are some alternative contact form plugins and platforms to test out.
- Formidable Forms: A popular form builder that has a clean drag-and-drop interface, more than 15 premium add-ons, creates advanced calculators, and more
- Gravity Forms: Another WordPress form plugin that has a library of more than 30 form field types, payment processor integrations, and complex form templates such as quizzes, surveys, and more
- Ninja Forms: Integrated with platforms like AWeber and CampaignMonitor, this form plugin boasts over 40 premium add-ons, making it a great form builder for those who value integration.
- Contact Form 7: A powerful, free WordPress form plugin with a plethora of integrations from Mailchimp to Stripe
- Divi: The most powerful WordPress theme has a great Contact Form module that makes creating branded, mobile-responsive forms on your website a smooth process
- Google Forms: Another free form builder, Google Forms comes with every Google account and is a powerful builder with excellent analytics, allows for multi-page forms, and more.
- Typeform: This form builder has become popular over the years due to its beautiful UI design, form animations, and integrations. It offers a unique way for users to engage with the form in a conversational way.
- Jotform: One of the first online form builders, Jotform has had many changes and remains one of the most popular free online form builder platforms.
Conclusion

A contact form is a powerful tool that every website should have. Not only is it a way for your clients to contact you, but it’s a way to add an interactive element to your website. With a plugin like WPForms, which comes with a drag-and-drop builder, crafting highly-functional and beautiful forms is simple. Integrations, notifications, and security are features that make building a native WordPress contact form a mainstay in the website-building process. To further your research, check out our list of the best contact form plugins you can add to your following website. How do you add contact forms to your website? Is there a plugin that you like that you’d want us to learn more about? Let us know in the comments section down below!

Featured Image via Viktoria Kurpas / shutterstock.com

The post How to Add a Contact Form in WordPress (2023 Tutorial) appeared first on Elegant Themes Blog.
30.08.2023
Download a FREE Category Page Template for Diviâ€™s Interior Designer Layout Pack
Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand new freebies. This time around we’re building upon the Interior Designer Layout Pack with a brand new Category Page Template that matches the rest of the pack perfectly. Hope you enjoy it!

Check Out The Interior Designer
Category Page Template Below

Get it for free today!

Desktop View

Tablet and Mobile View

Download The Category Page Template For The Interior Designer Layout Pack

To lay your hands on the free Interior Designer Category Page Template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youâ€™re already on the list, simply enter your email address below and click download. You will not be â€œresubscribedâ€ or receive extra emails.

Download the Files

Download For Free

Join the Divi NewsletterÂ and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How to Upload The Template

Go to Divi Theme Builder

To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

Upload Website Template

Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

Navigate to the import tab, upload the JSON file that you could download in this post, and click on ‘Import Divi Theme Builder Templates.

Save Divi Theme Builder Changes

Once you’ve uploaded the file, you’ll notice a new template with a new body area that has been assigned to All Category Pages. Save the Divi Theme Builder changes as soon as you want the template to be activated.

How to Modify The Template

Open Category Page Template Body Layout

To modify the template’s elements, start by opening the template’s body layout.

Inside the Body Layout Editor, you can edit the design on the front end using the Divi Builder just like you would with a regular Divi page.

About the Template

This category page template has a few dynamic elements that will work automatically including:
- Category Page Post/Archive Title: This will show the name of the category page that you are visiting.
- Post Slider Module: Displays the first three posts of the current category page.
- Blog Module: Showcases the 6 next blog posts in the current category. This module has pagination so that you can move through other posts within the category.
Here is a quick illustration that identifies the dynamic elements of the Interior Designer Category Page Template.

Updating the Template’s Dynamic Elements

Blog Module(s)

Posts for Current Page

Since this is a template that has been assigned to all category pages for the site, there are going to be one or more blog modules that are set to display posts for the current page. This is how the template displays the posts dynamically for each category page.

You can update the rest of the settings (like post count) to adjust the module elements and design. However, make sure to keep the option Posts for Current Page set to YES.

Post Offsets

For this layout, we use two types of blog module: the Post Slider Module and the default Blog Module. The post offset option is used in conjunction with the Post Slider Module to preserve the order of dynamic posts by picking up where the previous blog module left off. For this layout, we use an offset of 3 in the Blog Module because the Post Slider Module shows the first 3 blog posts in the current category.

Let’s keep this in mind when making updates to blog modules’ post count and offsets.

New Freebies Every Week!

We hope you’ve enjoyed the Interior Designer Layout Pack and the Category Page Template freebie that goes along with it. We look forward to hearing your opinions in the comment section below. Make sure you check back next week for more freebies!

The post Download a FREE Category Page Template for Divi’s Interior Designer Layout Pack appeared first on Elegant Themes Blog.
29.08.2023
How to Create a Membership Website in WordPress (2023 Guide)
WordPress is one of the best platforms you can use to build a membership website. With all the themes and plugins available, you have full control over building various types of membership sites. In this guide, we’ll walk through the benefits of a membership site, some prerequisites to consider before building one, and a simple step-by-step process to building your own.

What is a Membership Site?

A membership site is a website that provides exclusive, private content to subscribers. This content could be in the form of videos, blog posts, courses, or other perks. When building your WordPress membership site, there are several features that you should include to provide your community with a positive experience. Firstly, your WordPress membership website should have a page that lists and describes the various membership levels and perks that come with each level.

This will help your community assess the membership type they would like to join. A signup form allows your members to join your website and can be customized to match your membership offerings or collect certain information that you will need from your member.

A login form ensures that only your members can access your gated content, making it a staple in every membership website. After logging in, your site can give members a place to manage their membership. They can upgrade their plan, manage their information, and perform other maintenance tasks there.

The main attractiveness of building a WordPress membership site is providing private content to your members. You can use a membership site to sell courses, downloadable music, software, and more. This exclusive content is only available to those who have created their account and logged in to your website. Now that we know what some of the features of a WordPress membership site are, let’s look at some of the reasons why you may want to invest the time in building one.

Benefits of a WordPress Membership Site

Building a membership site is quite a process, but it has several rewards you may want to consider as you embark on this journey. Some key benefits include:
- Building Community: Establish stronger connections among those that matter most to your business or brand with a membership site. A private site means that those who
- Establishing a Reliable Stream of Income: You can charge for access to your quality content, making a membership site a viable income stream. Building a modest passive income from your membership site is possible if you have a large community and solid content.
- Establishing Your Authority in Your Niche: Educate your community through courses, training, and videos on a paid subscription. Demonstrating your leadership and teaching ability is a great way to build your personal brand and can be done effectively with a WordPress membership website.
- Grow Your Online Audience: When your members sign up for your membership site, you grow your audience online as a highly targeted community. A membership site increases your online audience, which you can later nurture through email, community, and shared knowledge.
- Increase Traffic to Your Website: Creating a WordPress membership site with fresh content increases website traffic. This increased traffic can be retargeted to upsell other products or increase engagement to ads on your website.
Now that you know why you should consider building a WordPress membership site, here are a few things to have on hand as you start your quest.

Prerequisites for Creating a WordPress Membership Site

Before building your WordPress membership site, these are the tools and actions you should take to ensure that you have a successful website build:
1. Domain Name:Â Securing a unique domain name for your membership site is vital to good branding. Domain names are inexpensive when using a good WordPress hosting company like Namecheap.
2. Web Hosting: Every site needs a host. And membership websites can require more storage and performance. As such, choosingÂ the best WordPress hosting for you is essential. Our list of the best hosting providers would be an excellent place to start your search.
3. WordPress Installation:Â To build a WordPress membership site, you must have WordPress installed. Here’s a great guide to show you some tips and tricks for getting started with WordPress.
4. Theme or Page Builder:Â Once WordPress is installed, choose a theme or page builder to make your site look beautiful. Look for a WordPress theme that integrates well with your chosen membership plugin. Our Divi theme is one of the best page builders that integrates with popular membership plugins. But there are many other great choices as well. Our list of the best WordPress themes should help you find the right one for your WordPress membership site.
5. Membership Plugin:Â Your membership plugin choice depends on the various features you want for your site. You also should consider the type of content you’re providing to your users and ensure that your membership plugin can support them. Our list of some of the best membership plugins for WordPress is an excellent place to start looking. We recommend Memberpress, Paid Memberships Pro, LearnDash, and LifterLMS.
6. Sitemap, User Journey Map, and Content:Â It’s always a good idea to plan your websites before building them. Creating a sitemap, planning your content pieces, and drafting a user journey map can help make creating your WordPress membership site easier once you get all your technical pieces in place.
How to Build a WordPress Membership Site

With all the necessary prerequisites for your membership site in place, let’s take the plunge and see step-by-step what we need to do to make this a reality. Since we are going to be concentrating on membership for this guide, you may need to check out our complete guide on how to make a WordPress website beforehand. This tutorial will show the critical steps to building a membership site using the top-rated membership plugin, MemberPress. However, these steps will also apply when using other membership plugins.

1. Install Your WordPress Membership Plugin

From your WordPress dashboard, hover over the Plugins menu option. Then, click Add New. Since MemberPress is a premium plugin, you must download it from your member portal before uploading it to your WordPress website. Once you’ve downloaded your ZIP file, click the Upload Plugin button. Then, upload the MemberPress ZIP file. Click the Install Now button.

Once the plugin is installed, click the blue Activate Plugin button to complete the installation of MemberPress.

With your plugin installed and activated, we can move to the next step, setting up our packages.

2. Create Memberships Levels

Your memberships are the backbone of revenue generation for your membership site. To add a new membership in MemberPress, click on the Memberships text link to create your first membership level. Here, you can give your membership a name and description and set up your term.

Your membership term establishes how much you’ll charge your customers, the frequency they’ll be charged, and how long their access lasts. Give your membership a name, add a description, and set your new membership level’s pricing and billing terms. Additionally, you’ll need to set up the types of members that can subscribe to this level. Scroll down to the Membership Options tab. Click on the Permissions tab. This is where you can assign certain member groups within your WordPress site to this membership level. With this setup, click the blue Publish button to activate this membership level.

3. Setup Payment Method

Your payment method will be used to process and bill your clients. Popular payment processors for digital products include Stripe and PayPal. To access and add payment gateways to your MemberPress install, click on Settings. Then, click on Payments.

As part of the planning process for your membership site, it’s good to have your payment processing account set up and connected to your bank account. You can add multiple payment methods to your membership site. This helps give your community options when paying you for access to your exclusive content.

Setup Access Rules to Drip and Protect Your Content

An essential part of a membership site is setting up your access rules. These rules allow you to determine who can access your content, what conditions they need to meet, and how your content is dripped or dripped to your members. In MemberPress, click on the Rules text link from the MemberPress menu to start creating your content rules.

MemberPress has over ten rules that you can use to determine what type of content you’d like to protect. These include but are not limited to all content, post categories, courses, custom URIs, custom post types, and more. Additionally, it has four types of access conditions that you can use to determine who has access to the protected content within each rule.

Once you’ve created the access rules for your content, you’ll need to decide whether to drip your content or have your content have an expiration date. You can set these factors up in the Drip/Expiration box.Â The Rules pages are where you create the best access conditions that you’ll need for your WordPress membership site. Once you’ve created your membership rules, publish them by clicking Save Rule to make them active.

Create Members-Only Content

With your membership levels created and rules in place, it’s now time to create your gated content! With MemberPress, any content on your website can become members-only. Blog posts or courses, custom post types, and everything in between can be protected by the rules set up in MemberPress. As long as your content matches the rules that you’ve set, it’ll be hidden from the public and only available to those who have an active membership to your website.

Create Your Membership-Specific Pages

In addition to your members-only content and essential website pages (homepage, about, contact, etc.), a membership site will require pages specific to the membership process. Your membership plugin may generate some pages, while others must be manually created. Example membership-specific pages include:
- Login Page
- Registration Page
- Pricing Page
- Thank you page
- Account Page
Login Page

Members use the login page to access their profile and exclusive content on your website.

By default, MemberPress uses the ReadyLaunch login page template. However, you can create a custom page on your website to act as your login page by using blocks or a page builder plugin.

Registration Page

The registration page is the first entry point into your membership site. While plugins like MemberPress give you direct links to the registration pages of your different membership levels, you may need other tools to spruce up your pages.

Pricing Page

Click on Groups from the MemberPress menu to create your first group of membership levels. This will also create a default pricing page where all the pricing plans within said group are listed for your customers to subscribe to your membership.

Thank You Page

After a member has subscribed to your website, they are typically presented with a thank you page. This page may show their transaction details, information about their membership level, and the next steps in the membership process. MemberPress allows you to present your thank you page in two ways: through a global thank you page or custom pages according to each membership level.

Account Page

Finally, the account page is where your members can update and change their membership.

Members can see their active subscriptions on their account page, edit their profile, change their password, and more. Providing your members with a way to make amendments to their account allows them to control their membership while saving you from manually updating their files.

Tip: Use a Page Builder!

Using a page builder is a straightforward way to build stunning and high-converting registration, login, and profile pages for your memberships.

Here’s an example of the page builder Divi working with MemberPress to create a custom registration form for a monthly membership. Page builders allow you to bring your branding and unique style to your membership site, increasing brand awareness and instilling confidence in potential community members. Many popular page builders have modules and elements like login boxes, registration forms, and more that you can brand beautifully to match your website while creating a visually appealing WordPress membership site for your community.

Add Links to Your Menu

With your plans created, it’s time to add your registration page and a login button to your menu. Using a plugin like Login or Logout Menu Item brings this automated functionality to your WordPress membership site. Also, it makes it easy for your members to access their content without using the default WordPress login screen.

Using a plugin that allows the link in your menu to change whether a member is logged in or out adds an excellent user experience. Additionally, Adding the link to your custom registration page is a great way to increase the number of people who sign up to your WordPress membership site, as it is easy for them to sign up and join your community.

Test Membership Process

After all your hard work, testing your WordPress membership site is advisable. Testing your process allows you to see where there might be bottlenecks in your workflow and allows you to fix them before showing your site to the world.

Setting your payment gateway into test mode is a great way to see how your new WordPress membership site functions. To do this, click on the Settings menu item. Then, click on Payments. Switch your payment gateway to testing. This alone can help you test your email notifications, refine your payment process and check if your rules work correctly. For testing MemberPress, you’ll also need to be logged in as a member, not an administrator. So testing in a private browsing page or as a test account is recommended to get the full experience that one of your subscribers will go through.

Styling Your WordPress Membership Website

Last but certainly not least, you should style your new WordPress membership site. MemberPress has a built-in styler called ReadyLaunch, where you can set your logo and brand colors. To access ReadyLauncher, click on the Settings menu link. Then, click on ReadyLaunch.

Although the built-in design functions of a WordPress membership site plugin are helpful, depending on the theme or page builder you’re using, you can use your imagination and design a highly visual membership site for your customers.

Page builders like Divi, Elementor, Beaver Builder, and more have deep integrations with some of the top membership plugins. Combining the power of a page builder with your membership plugin can help you beautifully style your WordPress membership site.

For more, check out how to build a membership site with Divi.

Other WordPress Membership Plugins to Consider

While MemberPress is a solid choice when building a WordPress membership site, there are plenty of other choices that you can consider when building your website. Always keep the needs of your subscribers as well as the type of content that you’ll be providing in mind when choosing this critical piece of your new website:
- Paid Memberships Pro: This WordPress plugin comes with its theme, explicitly crafted for membership sites. Enjoy the ability to restrict content based on post type, robust member subscriptions, user registration, custom profile fields, and more.
- Wishlist Member: Easy payment setup, exhaustive member management, analytics, and more make up some of the features of this popular WordPress membership plugin.
- Member Mouse: Touted as an enterprise-level membership plugin for WordPress, quickly sell digital products, protect your content, manage your members, and maximize your revenue with one well-supported plugin.
- Restrict Content Pro: A lightweight solution to drip and restrict your content to your members efficiently. Quickly set up a paywall, provide discounts and coupons, and set up effective membership and access levels to your website.
- Ultimate Member: This plugin has countless extensions that add almost any feature to your membership site. User reviews, tags, real-time notifications, and more are all extensions you can add to your membership site to enhance your users’ experience with your site.
Conclusion

Building a WordPress membership site can be daunting. However, we hope we’ve broken it into manageable pieces with this guide. At its core, a WordPress membership site will bring your community together and can provide you with a way to make money online. Your website’s foundation (domain and hosting) is critical as you build your site. Additionally, your choice of membership plugin can make or break your WordPress membership site. MemberPress is an established WordPress membership plugin with excellent reviews, an expansive feature set, and solid technical support. Building your WordPress membership website with it is a good choice. You can also lean on many alternatives if you require a different approach for your site. With the right tools and a solid plan, building a great WordPress membership website you and your community will enjoy interacting with is possible.

The post How to Create a Membership Website in WordPress (2023 Guide) appeared first on Elegant Themes Blog.
26.08.2023
How to Make a WordPress Website With AI
Artificial intelligence is quickly becoming a tool that many sectors, including web design, are adding to their feature sets. Digital design and marketing are seeing many established tools add AI functionality to their products. The same can be said for WordPress. As one of the most popular website builders available, it’s no surprise that you see more AI plugins for WordPress. This guide will show you how to bring AI into your next WordPress build. First, let’s cover why you may want to use AI to make a WordPress website.

Why Use AI to Make a WordPress Website

You would want to make a WordPress website with AI for many reasons. Some of these benefits include:
- Becoming more efficient: AI can assist you in getting both simple and advanced tasks done quicker. From automation to content generation, you can get more done with AI backing your WordPress website.
- Stay on top of innovation: Using AI can help your WordPress website experiment with new features and be at the forefront of technological advances in the ecosystem. These new insights and additions can increase traffic, sales, and more.
- Reduce labor and resource costs: AI can save money when used effectively. Using AI for your copy can save you from hiring copywriters. Having your layouts generated by AI design tools can save you from hiring a UI designer. These cost savings can be reinvested into other parts of your business.
- Enhance your security: Security plugins rely on AI’s power to better protect WordPress websites. Plugins like Quttera Web Malware Scanner, which has a patented AI scan engine, now use machine learning to look for unknown and hidden WordPress malware in your website.
- Improve your search presence: Many SEO plugins add AI capabilities to their toolset. As such, you can utilize these improvements in your WordPress sites by having a website that can perform better for search engines. This can lead to better rankings and more views on your website.
Bearing this in mind, it’s evident that using AI to help build your WordPress website is a wise course of action.

How AI Can Be Used to Build a WordPress Website

There are plenty of AI tools that can be used to build and enhance a website. Some AI website-building platforms outside of WordPress, like WixADI or Hostinger AI, can generate your entire site from the start with AI. But, for many, all-in-one website builders lack the control and flexibility of WordPress. There is a reason it is still the best CMS for building websites.

That said, WordPress users are looking for more streamlined methods of integrating AI into WordPress. Thankfully, AI-powered WordPress plugins, themes, and page builders are growing by the minute. This type of integration bridges the gap between AI and WordPress, making it easier than ever to build a site in WordPress.

Considering all these AI tools at your disposal, here are a few ways you might use AI to build a WordPress website.

Using External AI Tools to Build WordPress Websites

There is a myriad of AI tools outside of WordPress that you can use to build your website. AI writing software and chatbots like ChatGPT can generate pretty much anything text or code you might need for a website, including WordPress. You can use it to create a thorough outline for your website, generate copy for your pages and posts, and write code to create WordPress plugins or other custom functionality you may need. You can even create entire HTML docs for your pages or templates. More robust AI writers like Jasper and Surfer SEO can help with SEO content.

You can also use many of the same AI writers to improve existing copy for your site. And you can use Grammarly as a browser extension to help proofread and optimize your text inside the WordPress editor.

On the design side, there are AI art generators that anyone can use (like MidJourney) to generate stunning AI images for your site. And if you are a graphic designer, you can take advantage of AI-powered design tools for photo editing and graphic design needed for your WordPress site.

Using AI Plugins to Build Your WordPress Website

Many WordPress plugins are starting to incorporate AI into their software. These allow users to use AI for content generation and other AI-automated tasks right inside WordPress. What makes AI plugins so great is that they work with popular WordPress themes which handle the design of your site, leaving AI to generate your content and enhance your existing design. For example, AI Engine brings the power of OpenAI and ChatGPT to your WordPress dashboard.

Some AI plugins are more about enhancing your existing site rather than generating new content. For example, SEO plugins like RankMath can streamline the creation of SEO content, and automation plugins like Uncanny Automator can automate and manage many WordPress tasks for you.

For more, here’s a list of the best WordPress AI plugins to help get you started.

Using AI Page Builders to Build Your WordPress Website (Recommended)

WordPress page builders have changed the game for designing websites in WordPress. Even WordPress has a block editor that brings full site editing on the front end.Â Nothing seems to beat the drag-and-drop visual editing experience offered by Divi, Elementor, and other great page builders.

The two AI page builders leading the way so far are Divi and Elementor. Elementor was the first to add AI integration to their page builder, allowing users to generate text, images, custom code, and more with an easy-to-use interface.

Divi, our WordPress theme and page builder plugin, recently launched Divi AI. It includes , Acting as a powerful AI assistant inside the builder, Divi AI uses cutting-edge generative AI to generate text and images contextually as it learns about the existing content of your site.

Using an AI page builder is one of the best ways to use AI to build a WordPress website because it is an all-in-one solution for both design and AI content generation.

Although there are various AI tools, plugins, and page builders you can use in WordPress, there is a benefit to using a combination of external AI tools and native AI WordPress solutions. In this manner, you get the best of both worlds when building your WordPress site.

How to Make a WordPress Website with AI (Step By Step)

For this tutorial, we are going to dive right into how to use AI to build a WordPress website. To do it, we’ll be using ChatGPT to help with the planning process. Then, once WordPress is up and running, we are going to use Divi AI to demonstrate just how easy and efficient AI can build a WordPress website.

Let’s get started.

1. Map Out Your Website with AIÂ (ChatGPT)

We will begin building our website by creating a simple outline in ChatGPT. To do this, navigate to ChatGPT. Next, enter the prompt, “Make a concise list of the pages an email marketing agency’s website should have?”.

ChatGPT gives us a list of eight pages we can create for our website in our first prompt. We can even go a step further and ask ChatGPT to outline what each page should contain as well:

Notice how in-depth ChatGPT’s AI was able to get when planning out the content and function of each page. We can use these to our advantage when building our pages, choosing modules, and creating the content for each page. We will be creating a five-page website for our fictional email marketing agency with the following pages:
- Home
- About Us
- Services
- Portfolio and
- Contact Us
With our outline, we now move into the website-building phase.

2. Setup Your WordPress Website

Some prerequisites must be met before we enter the new and exciting world of AI-powered WordPress web design. First, you’ll need to register a domain name for your site. A good domain name provider is NameCheap, but there are many domain name providers for you to choose from.

Next, you’ll need to choose a hosting provider. This is important, so choose wisely. We recommend Siteground, Pressable, or Cloudways. However, our list of the best WordPress hosting options is also an excellent place to find the right one for your website.

The final prerequisite for building a WordPress website is to install WordPress. Our definitive guide on installing WordPress shows you a few ways to set up a successful WordPress install.

Now that you have your domain name, a secure web host, and WordPress installed, we can start building our website with the help of AI.

3. Install Your WordPress Theme and AI Page Builder (Divi + Divi AI)

Now that WordPress is installed, you are ready to install your theme. For this tutorial, we are going to use our Divi Theme, which includes a powerful AI page builder with Divi AI. (Note: The Divi builder and Divi AI are also available as a plugin to be used on any WordPress theme as well.)

Intro to Divi and Divi AI

Divi is one of the most popular WordPress themes available. Its AI feature, Divi AI, works within its visual builder, bringing advanced prompting options, copy editing, and image generation to WordPress websites. One of the critical features of Divi AI is its ability to understand the copy already living on your web pages. This allows your website’s AI content to be created with context in mind. Divi AI is smart enough to understand what’s written within modules, sections, and pages and use that understanding to create new copy that fits into the realm of your webpage.

The Divi AI roadmap promises to bring code generation, full layout generation, image editing, and more shortly. So stay tuned to see the magic unfold! As such, we’ll show you how to make a WordPress website with AI using Divi and Divi AI.

Installing Divi + Divi AI

Before you can use Divi, you’ll need to subscribe for a membership. Then you can download the theme or plugin from the members area.

Divi AI is already integrated with Divi, so you won’t need to download anything else. You can use Divi AI for free with a limited trial period, but you can easily upgrade when that time comes.

Once you download Divi, you can install it like you would any other WordPress theme in the WordPress Dashboard. For more details, you can follow this guide. After Divi is installed, we can start creating our website and creating content for our website.

4. Add Site Title and Tagline for Divi AI

Setting your site title and tagline in WordPress is an essential first step in training Divi AI. By doing this, you are giving Divi AI more context about your website. This will help better inform Divi AI as you seek to create content, generate images, and more while building your WordPress website.

To begin, let’s assign a site name and tagline. From your WordPress dashboard, hover over the Settings menu item. Then, click General from the flyout menu.

From there, give your site a title and tagline. You can also add your site languages, set your admin email, and more here. Once completed, click the blue Save Changes button at the bottom of the screen.

With this in place, we can start building our website’s pages.

5. Create Your First Page with Divi AI

Equipped with our page names in hand from ChatGPT, we will now start creating the blank pages of our website. Hover over the Pages menu. Then, click on the Add New text link.

Next, enter the name for your page, in this case, Home. Finally, click the blue Publish button at the top right-hand side of the screen.

Repeat this process for the other pages within your website’s sitemap.

Install Layout from Layout Library

Now that all our pages are created, we are ready to add our first premade Divi layout to the home page. Navigate to the home page we created again, hovering over the Pages menu item. Then, click on the All Pages link. You’ll be presented with our list of new pages for our website. A text link menu appears when you hover over the Home page’s row. Click on the Edit with Divi text link to activate the Divi Builder.

We are now presented with three options. We will select the second option, Choose a Premade Layout, by clicking the purple button that says Browse Layouts.

In addition to being a powerful AI tool for WordPress, Divi comes with an ever-growing collection of premade templates and layouts that you can use for various sectors. In the search box, enter the search term email marketing. Then, select and install the Email Marketing Home Page Layout.

Finally, select the blue Use this Layout button to begin the installation process. Deselect the Import Presets modal box that pops up.

To complete our layout installation process, save the page by clicking the green Save button in the bottom right-hand corner.

You can repeat this process for the other pages of your website, using the pre-created layouts – provided for free by Divi – to create a sleek and professional website for your agency.

6. Start Creating Website Copy with Divi AI

Though the layouts come with design, the copy included is boilerplate and repetitive. However, it gives us a good starting point to use AI to create better content. We’ll start by creating new titles for the various sections of our homepage. First, let’s start with the hero section:

With Divi AI, let’s create a different headline with a casual, down-to-earth tone. First, click the gear icon on the Text Module containing our hero section’s title.

Next, click the new blue Auto Generate Text with AI button, activating Divi AI within the Visual Builder.

Immediately, Divi AI can provide us with another option for our hero section’s title.

While this is a good option, let’s see if we can enhance it with Divi AI. ClickÂ Improve with AI from the Divi AI modal box to do this. We’re presented with many options regarding what we can do with our new hero headline. Let’s click Change Tone and select the Casual tone from the list of options provided.

Our new hero headline now reads as follows:

When we compare both the titles, we see that this new version has a different, more welcoming feel than the first one, which felt stale and cookie-cutter. Now, let’s do this same process with the other titles on our page. To save our new copy, click the blue Use This Text button. Next, click the green checkmark Save button.

We’ll use the same casual tone for the rest of the titles on our page. For our next section, titled Our Services, we used Divi AI to add more context and vibrancy:

This section’s title is now “Get Ready to Explore Our Awesome Services!”

After updating all our titles, let’s move on to the page content.

Create Body Content

To create content with Divi AI, we will edit the text within the various Text Modules of our page. We will also use Divi AI’s powerful context feature to ensure our text can build upon other modules as we use AI to generate it. We’ll start with the sentences under our new page title. Click on the gear icon of the Text Module within the hero section that is under the title.

Next, remove the current text that is within the Text Module. Finally, click the Divi AI icon toÂ provide the Write with AI option.

Now, we’re presented with several options that we can use to have AI create the content for our lead text:
1. Content Type: We’re letting Divi AI know that we’re creating a paragraph of text
2. What are you writing about?: We added our prompt, “Create a few sentences introducing an email marketing agency.”
3. Added Context: This page content will be used to advise Divi’s AI as to how to generate this paragraph text.
4. Tone of Voice: We want this lead text to be funny to match the casual tone that we have for our section titles
5. Must Use Keywords: SEO is an essential step of copywriting, so we added a long tail keyword that will help us with ranking in our city
After entering these in, click Generate text. Now, we’ll see the paragraph that Divi AI created for our home page:

While this is a great first draft, it’s a bit long. So, we’ll use Divi AI to improve this paragraph. First, we click Improve with AI. Then, we click Shorten.

Notice how Divi AI cut our paragraph down and made it more concise.

With our new intro paragraph in place, we save our work by clicking the blue Use This Text Button andÂ then the green check mark button to save our Text Module.

Use a similar process to update the various Text Modules throughout your pages. Divi AI has many quick actions that you can take to optimize your copy further.

7. Generate Images with Divi AI

Divi AI doesn’t just work with copy. It can also manipulate images! We’re going to update the icons that are used within the services section of our homepage. To begin, click on the gear icon of the first Image Module.

Next, click on the Divi AI icon. Next, click Generate with AI. This is where the fun begins!

We can now feed Divi AI with various prompts to create a stunning new image for our web page. We set the image style to photo. Divi AI has more than ten different image styles you can use. Next, we add an image description. You can also add a reference photo and set your image’s aspect ratio or specific pixel size. We left all of these as the default. Finally, we click Generate.

Divi AI will generate four options for us. Click the option that most resonates with you. If you’re unhappy with the choices, click the Generate More Like button. Once you’re satisfied, then, click the blue Use This Image. Finally, click the green checkmark button to input your new, AI-generated image.

Do this with the other image modules on your page and have fun with the various styles, sizes, and prompts that you can put together to create unique art pieces for your website.

8. Revising, Proofreading, and Improving Copy with Divi AI

At this time, we’ve covered how to plan your website from pages to content with AI through ChatGPT. We’ve also reviewed how to create our copy with Divi AI and create new digital artwork for our web pages. Continue this process for the other pages of your website, mixing and matching different prompts, quick actions, and more! Once your website is complete, you can use Divi AI to proofread and check the spelling and grammar of your page content.

Additionally, fact-checking and proofreading with a human reader is essential when creating long-form content like articles and blog posts.

Improving Your Website with AI

Now that you’ve finished creating the pages of your WordPress websites, there are still some things to do and consider after using AI in your website-building process: :
- Add Additional Features with Plugins: The power of WordPress is in its exhaustive library of plugins. From booking plugins to security plugins, WordPress has it allâ€”research which ones you’ll need to use to bring additional functionality to your website. Also, consider adding AI-powered WordPress plugins that bring artificial intelligence into the day-to-day running of your website.
- Optimize Your Website for Search Engines: Doing onsite SEO tasks like optimizing your content, creating meta descriptions, and more is good. This helps your web pages be found on Google, Bing, and other search engines. There are plenty of AI SEO tools that you can use to help you with this, as well as WordPress plugins that can facilitate this process.
- Check the Quality of Images Generated:Â AI hands may be a funny meme but could tarnish your brand. After having AI-generated images, double-check their quality and ensure that they align with your brand’s values.
- Proofread and Fact Check AI-Generated Copy: Even big players like ChatGPT have had their fair share of controversy surrounding the accuracy and validity of the information it provides. Carefully read through your website before making it live, and also check for spelling and grammatical errors that may have been missed.
- Remember to Combine Premade and Original Assets and Content with AI: AI is a tool that can help you create content, make art, and build websites. The best way to use AI is to combine it with human-made and original content created by people.
With these things in mind, you’re on your way to building a beautiful, AI-informed WordPress website!

Conclusion

Building a WordPress website with AI will soon become commonplace. While, at the moment, there isn’t one tool that can build a WordPress website entirely from scratch, you can create your own AI tech stack to do just that. Planning, copy, imagery, and more are all aspects of website building that now have powerful AI tools to help their process. As such, looking at how these tools can better help you build your next WordPress website isn’t a bad idea. How would you use AI to build a WordPress website? Were there any steps that you think we missed? Let us know in the comments section down below!

To learn more about Divi and Divi AI, check out our Divi AI page and our getting started tutorial.

The post How to Make a WordPress Website With AI appeared first on Elegant Themes Blog.
22.08.2023
How to Write Copy for Your Website With AI
Copywriting is an essential service to create a compelling website. Whether you’re building an eCommerce brand or starting a bakery in your hometown, the copy on your website can either draw people in or shun people away from your products and services. Hence, writing copy for your website is a necessary step that needs great care and dedication. Luckily, with the advent of numerous AI tools, it’s possible to generate fantastic copy for your website effectively and affordably. This guide will highlight the main steps to remember as you learn how to write website copy with AI.

Why Use AI to Write Copy for Your Website?

There are many reasons to consider using AI to write the copy for your website. Overall, using AI to write your website copy brings a new level of efficacy to your website creation process. The benefits below can also be experienced when you choose to you AI to write your website copy:
- Save Money: Copywriters can be quite an investment. But having good quality website copy is essential for a solid website. Many AI writing tools come at reasonable monthly prices. Some even have free plans and trials granting you great copywriting at low prices.
- Conserves Time and Energy: An AI tool can generate paragraphs of copy in seconds. This could take you hours or days to complete. Whether you face tight deadlines or want to be proactive with your website, using AI for your copy can help.
- Establish a Consistent Brand Voice: Some AI tools have templates or allow you to create your own templates. Using these templates with your copy can help you create a consistent brand message across all the website copy you create and use.
- Optimize Your Copy Efficiently: Whether you need to add text or correct misspelled words, AI can easily see the errors and areas of improvement in your copy and enhance it for your next project.
- Gain New Perspectives: Getting stuck in a rut when creating new content for your website is expected. AI can bring you new insights and ideas, helping you overcome writer’s block and find new and creative ways to word your content.
Now that we know the benefits of using AI when creating our website copy, let’s look at the steps you can take to make this a reality for your next website project.

How to Write Copy for Your Website

We’ll use the popular AI tool ChatGPT and Divi AI to highlight our top tips for learning how to write copy for your website. While you can choose to use only one AI tool, selecting the right combination of tools can reap great results for your website in the long run.

1. Choose the Right Tool(s) For Your Task

Though AI in the copywriting space is pretty established, there are myriad platforms that you can use to start creating copy for your website. As such, an excellent place to look for your next copywriting tool would be our list of the best AI writing tools. Here are a few contenders that you might have heard of already:
- Rytr: An AI-powered writing platform that assists the marketer of many talents. With its extensive library of templates, this AI tool is a good choice for those who need a helping hand in creating their website copy with AI.
- Jasper: Touted as the best overall AI writer, Jasper is one of the most popular AI writing platforms. If you want to create highly optimized copy for your website, consider using this tool.
- Sudowrite: If you want to add strong storytelling to your website copy, Sudowrite is the AI writing tool for you.
- Writesonic: A robust platform that’s free version gives you more than enough words to start on your AI content creation journey.
- Copy.ai: Over 6 million users name this AI copywriting tool their top choice. Your sales team and marketers will love using this tool to power your website’s landing pages.
- Divi AI: The new kid on the block, if you choose to use WordPress for your website, consider joining the Divi ecosystem. Seamlessly create AI-generated copy alongside your website layouts with Divi AI, the best AI content generator for those building in WordPress.
- ChatGPT: This popular and free chatbot brought AI to the forefront for the masses. It is one of the best free AI tools that you can use to generate content for your website.
Before you start creating your content, research the AI tools available to you and see which ones align with your overall content creation goal.

2. Plan Your Content by Creating an Outline

Having a plan with your copy is essential. As we mentioned earlier, copy is an important aspect of your website. Luckily, ChatGPT does an excellent job of creating content outlines that you can use to build out the copy for each of your website’s pages. When asked to create an outline for a skincare brand’s landing page, this is what ChatGPT provided:

The prompt provided to ChatGPT was, “write an outline for a landing page for an all-natural skincare company.” ChatGPT told us the various elements (buttons, countdown timers, etc.) we could use on our page and ideas for link text, call-to-actions, and titles. This is a thorough and helpful guide to the copy we could create next for our landing page. Additionally, it points us to the modules and flow of our page that we can consider later in the website design process. Don’t forget SEO planning and keyword research when building out your copy. SEO tools like SEMRush, Alli AI, or even Google Trends can be helpful at this stage. You can even take it a step further and use SEMRush’s intuitive outline builder (which also uses AI, by the way!) that can help create optimized content for your website before a single line of copy is crafted.

3. Create Titles from Your Content Outline

Now that we have our AI-generated outline, we can dissect it and create titles for each landing page section. From our landing page outline, let’s focus on creating title copy for the about us section.

ChatGPT has already given us some areas and titles we can cover in this section. However, we can make these more interesting still. Let’s make the first title about the company story more exciting and enjoyable.

We inputted the original title into ChatGPT and asked it to use a sophisticated and funny tone while generating several title options for us to choose from. Now, we can copy and paste these title ideas into a document or directly into our website. Alternatively, a tool like Divi AI goes further in helping us create website copy with AI. Below is the layout of our about us page from the Divi Esthetician Layout Pack. While it already includes some copy and dummy text, we can use AI to make it better match our brand.

While building your pages, you can use AI to create text as you design. This can help you save time and energy and create copy and page layouts simultaneously.

Choose the title content type to create our titles with Divi AI. Similar to other chatbots and ChatGPT, we can provide a text prompt. What makes Divi AI different from using external copywriting tools is that it can pull from your page, section, or even module’s current context and use that to generate your new title. It even goes further in adding a tone of voice. Also, we can include must-use keywords within our titles, ensuring that our AI-generated copy is SEO-friendly.

4. Crafting AI Content for Your Page’s Sections

With our titles created, we have a foundation to create the main bodies of copy for our website. Still, within our about us section, let’s ask ChatGPT to create a mission statement for our brand.

Here, we’ve used AI to create a 1 paragraph, funny mission statement that we can use within our about us section. Notice how humor was added, keeping up with our entertaining page titles. This paragraph was created in a few seconds and can be easily edited to match the specifics of your brand. You can do this for all the content on your website and have your entire website’s copy created in mere minutes without spending lots of money on hiring and vetting copywriters. Frequently asked questions, blog posts, product descriptions, and more can all be easily created with AI.

Divi AI takes this a step further. By understanding the nuance of your page design and website, Divi AI can create copy that flows well with all aspects of your website.

Notice that we provided Divi AI with an empty Text Module. Now, we can decide the type of content we’d like to create (a paragraph), provide a prompt, and add context to said prompt. The added context is a crucial component of copywriting that is missing when using software that isn’t integrated into your web design tool.

The finished paragraph created by Divi AI elegantly calls back to our lead page title, “Elegant Skincare’s Story: Crafting Beauty with a Touch of Wit.” This added context ties together our title and copy seamlessly. This would be missed when using other AI tools. Again, this copy was generated in seconds and still sounded whimsical while providing our readers with the necessary information about our brand.

5. Elevating Your CTAs’ Appeal with AI

Calls to action are a necessary part of your website copy. Without them, users may not know to join your email list, which buttons to press to purchase your product or how to book an appointment. Sometimes, the standard call-to-actions leave much to be desired, hence, using AI can help to create compelling CTAs that bring your website visitors to the places where they need to be.

We’ve asked ChatGPT to create several call-to-actions for our skincare brand. They’re enticing, they’re different, and they’re geared toward our brand. Divi AI takes this to another level by having all of these within some of its popular modules, like the Email Optin Module and the Call to Action Module.

Notice how with the Email Optin Module, Divi AI is able to automatically generate an exciting headline, button, body, and footer for this module. You still have access to the same AI improvement tools and quick actions that are available in the Text Module used earlier.

Furthermore, the Call to Action Module allows for the same seamless integration of AI with the various components of this module. Easily design and create exciting text for the most important areas of your copy when you choose to use Divi AI.

6. Optimize and Proofread Your Copy

While creating website copy with AI makes the entire copywriting process more straightforward, there may be times when you’ll need to make edits. It is advisable to properly read through copy created by AI to ensure that your copy flows well and makes sense to human readers.

Even ChatGPT has a disclaimer within its interface that speaks to possible inaccuracies when using its platform. Cross-reference your copy to ensure that it is factual and inoffensive. While there are many AI proofreaders, having at least one read-through with a person to review your copy is advisable, just in case.

Tips & Tricks for Writing Copy with AI

Now that you have an idea of how to create your website’s copy with AI, here’s some additional advice to bear in mind:
- Original content is not dead: While AI does help with creating content, making your own content without AI is still the best practice. Finding the right balance of AI-generated content with your human-created content is paramount.
- Add your own flair to your content: Don’t forget to add your own brand voice and uniqueness to your copy when using AI. You may need to create templates or set up your prompts in a certain way to help your AI tool of choice learn how to “speak” and “write” like you.
- Use proofreading tools to help check spelling and grammar: AI doesn’t know everything. So using external tools to check for spelling and grammar is important. Some tools â€” like Divi AI â€” have this built in. But you can also use other proofreader tools like Grammarly to ensure your content reads well and is linguistically sound.
- Don’t forget to fact-check and proofread your work manually: Even after using a proofreader tool and checking for spelling and grammar, also take some time to read your work. There may be some nuances that you can add to bring more to your content.
- Optimize your content for your chosen keywords: Keep SEO at the forefront as you write your website copy. There are plenty of SEO tools that you can use to help you implement search engine optimization in your work. SEMRush has its outline builder.
Artificial intelligence does not remove the need for original content nor replace the writing process entirely. Instead, it should be used as a powerful tool to enhance the content creation process.

Conclusion

Websites are an amalgamation of copy, imagery, and media. Each piece is necessary to draw in your ideal customers. With the average consumer becoming wiser, eloquent copy has become necessary in marketing practices. Creating website copy with AI allows you to be at the cutting edge of web design. Now, it’s possible to build complete websites with AI. If that’s too high-tech for you, creating your website’s copy with AI is a significant first step to adopting this popular technology. Saving money, conserving brain power, and quick turnarounds are benefits of using AI for your website copy. As you build your next website, consider adding AI to your process by using artificial intelligence to generate your website’s copy.

The post How to Write Copy for Your Website With AI appeared first on Elegant Themes Blog.
21.08.2023
How to Style the Divi Call to Action Module (3 Examples!)
A call to action is an important part of digital marketing. Whether you are creating a landing page, blog post or mobile app, you can find calls to action everywhere online. As a native Divi module, the Call to Action Module makes it easy to add this important element to your work. Featuring a title, body text, and button, the module gives you ample styling options to make design choices that match your brand. We’ll provide you with Divi call to action style examples that are based on three of our free layout packs. Each layout pack comes with your Divi membership and we release new ones weekly! Let’s take a look at what we’ll recreate in this post:

Divi Call to Action Style Example: Inspired by Divi Whiskey

Call to Action Style Example #2: Inspired by Divi Bagel Shop

Style Example #3: Inspired by Divi Leather Goods

Setting Up Your Call to Action Section

To begin, let’s create the foundation for our style examples.

Add Section

Add a new Regular Section to your page by clicking on the blue plus icon.

Select One Column Row

Once your section is added, select the one-column icon to add a row with one column to your section.

Select Call to Action Module

Click on the Call to Action icon to add the module to your row.

Now, we are ready to style our module!

Styling the Divi Call to Action Module: Divi Whiskey Inspired

Our first Divi call to action style example is inspired by our Divi Whiskey Layout Pack.

Add Background to Section

For our background, we will upload an image found within the layout pack as the base of our background design. Click on the Background Image icon. Then, click on the Add Background Image icon.

Upload the image to your site. We’ll use the default background image settings for the photo we updated.

Add Background Gradient

Next, we’ll add a background gradient on top of our background image. We’ll use the following settings:

Background Gradient Settings:
- Gradient Stop 1: rgba(0,0,0,0) (at 12%)
- Gradient Stop 2: #000000 (at 100%)
- Gradient Type: Linear
- Gradient Direction: 180deg
- Place Gradient Above Background Image: Yes
Add Padding

Following setting up the background, click on the Design tab. Firstly, we will scroll down to the Spacing tab. Secondly, we’ll use 150px to add some generous padding to the section.

Spacing Settings:
- Top Padding: 150px
- Bottom Padding: 150px
Click on the green check icon at the bottom of the Section Settings to save your settings for the section.

Styling the Call to Action Module

For the Call to Action Module, click on the gear icon to enter the module settings.

Add Content

To begin, enter the content that you’d like to show in the module. Click on the Content Tab, and add your title, button text, and body text for your Call to Action Module.

Input Link

For you to see your button in your module, you need to add a link to the Call to Action Module. Add your link URL.

Style Call to Action Background

After we’ve added our content, we are now going to style the background of the module itself.

Add Background Color

To start, we scroll down to the Background tab. Next, we add our background color. Secondly, we will keep the Use Background Color option selected at Yes.

Background Settings:
- Background Color: #e7e2bc
- Use Background Color: Yes
After, we are going to add a background pattern on top of the background color selected

Add Background Pattern

For our background pattern, we click on the Background Pattern icon. Then, we click on the Add Background Pattern icon.

Next, we select the Scallops pattern from the background pattern options. We will keep the pattern color as the default.

Afterward, we need to set our settings for our background pattern. We’ll use the following settings to make the background pattern aesthetically pleasing:

Background Pattern Settings:
- Pattern Size: Custom
- Pattern Width: 25px
- Pattern Repeat Origin: Top Left
- Pattern Repeat: Repeat
Title and Body Text Styling

With the background set, we now move on to the styling of the title text, body text, and button. To begin, we click on the Design tab. Then we will start with styling the Title Text with the following settings:

Title Text Settings:
- Title Font: Italiana
- Title Text Color: #a45137
- Title Text Font Size:
  - Desktop: 72px
  - Tablet: 54px
  - Mobile: 48px
Styling Body Text

For the body text, we’ll use the following settings to style the body text:

Body Text Settings:
- Body Font: Marcellus
- Body Text Color: #000000
- Body Text Size:
  - Desktop: 21px
  - Tablet: 18px
  - Mobile: 18px
- Body Line Height: 1.8em
Styling the Button

We’ll use Custom Styles for the button. For the button’s background, we’ll use the following settings:

Button Settings:
- Button Text Size: 18px
- Button Text Color: #ffffff
- Button Background Color: #a45137
For the button font, we use the following settings:

Button Text Settings:
- Button Letting Spacing: 1px
- Button Font: Playfair Display
- Button Font Weight: Bold
- Button Font Style: Italic
- Button Padding:
  - Top and Bottom Padding: 15px
  - Left and Right Padding: 25px
Changing Module Width

For this Divi call to action style example, we don’t want the module to be fullwidth. As such, we will change the max width of the module. To do this, scroll down to the Sizing tab in the Design tab of the module. Next, set the Max Width to 75%.

Notice that the module has skewed to the left. To fix this, we change the Module Alignment to center by clicking on the center icon.

Adding Custom CSS

To wrap up this design, we’re going to add a few lines of custom CSS. Click on the Advanced tab. We’ll add CSS to the Promo Description and the Promo Title:

Promo Description Custom CSS:
```
padding-left: 55px;
padding-right: 55px;
```
We will change the padding for tablet and mobile.

Promo Description Custom CSS (Tablet and Mobile):Â Â
```
padding-left: 0px;
padding-right: 0px;
```
To save your changes, click on the green checkmark. Here’s our final work!

Divi Call to Action Style Example ft. Divi Bagel Shop

For this design, we’ll take inspiration from our Divi Bagel Shop Layout Pack.

Add Two Column Row

In this call to action, we’ll add a two-column row, as opposed to one column. As before, we click on the green plus icon button to add a new row to our newly created section. Next, we will select the following two column (1/3 + 2/3) layout for our design.

Add Background Gradient to Section

After adding our row, we will add a gradient to the newly created section. First, we will click on the blue gear icon to enter the settings for the section.

Next, scroll down to the Background tab and click on the Gradient icon to begin to start entering in the settings for our gradient:

Background Gradient Settings:
- Gradient Stop 1: rgba(218,170,32,0.2) (at 0%)
- Gradient Stop 2: (rgba(0,0,0,0) (at 40%)
- Gradient Type: Circular
- Gradient Position: Top Left
Once you’ve entered your gradient settings, save your work by clicking on the green checkmark.

Add Image

Before we move on to styling the call-to-action module, we’re going to add some decoration to the row. To do this, we’re going to click on the gray plus icon to add the Image Module.

Next, we click on the Image Module to add it to the first column of the row.

As this design is inspired by the Divi Bagel Shop Layout Pack, we’ll use an edited image from the pack in the first column. We will upload the image into our Image Module.

Add Call to Action Module

Now, let’s add our Call to Action Module. Click on the gray plus icon and select the Call to Action icon to add the module to the second column within the row.

Add Content

To begin, let’s add some content to the title, button, and body text.

Add Link to Button Link URL

To show the button within the module, we need to add a URL to the Button Link URL. Scroll down to the Link tab and add your link.

Disable Background Color

For this design, we’ll disable the background for the module. We want to see the gradient that’s within the section. To do this, we scroll down to the Background tab. Then, we uncheck the Use Background Color tab.

Style the Call to Action Module

To begin styling our module, we move to the Design tab. Next, we scroll down to the Title Text tab and use the following settings to begin to style our title text:

Title Text Settings:
- Title Font: Montaga
- Title Text Alignment: Left
- Title Text Color: #000000
- Title Text Size:
  - Desktop: 72px
  - Tablet: 63px
  - Mobile: 48px
For the Body Text, scroll down a little further till you reach the Body Text tab. We’ll use most of the default font settings for the Body Text, however, we’ll darken the text by making it black using and left aligning it to match the Title Text:

Body Text Settings:
- Body Font: Open Sans
- Body Text Alignment: Left
- Body Text Color: #000000
Styling the Call to Action Button

Following the design styling of our Divi Bagel Shop layout, we’re going to create a flat shadow effect with our button. To achieve this, we will have quite a few settings to set up for different aspects of the button.

Firstly, after scrolling to the Button tab, we check Custom Button Styles. We start styling our button by setting a background color and text color for our button.

Button Text & Background Settings:
- Button Text Size: 14px
- Button Text Color: #000000
- Button Background Color: #c59246
After this, we start styling the border of our button and some of the text styling options.

Button Border and Text Settings:
- Button Border Width: 2px
- Button Border Color: #000000
- Button Border Radius: 0px
- Button Letter Spacing: 0.2em
- Button Font: Open Sans
- Button Font Weight: Bold
- Button Font Style: All Caps
- Button Alignment: Left
For the button’s shadow, we will use the following settings.

Button Shadow Settings:
- Button Padding:
  - Top and Bottom Padding: 15px
  - Left and Right Padding: 45px
- Button Box Shadow: See screenshot
- Box Shadow Horizontal Position: 3px
- Box Shadow Vertical Position: 3px
- Box Shadow Blur Strength: 0px
- Shadow Color: rgba(0,0,0,0.3)
- Box Shadow Position: Outer Shadow
Adding Spacing to the Module

To finish off our second Divi call-to-action style example, we’re going to add some padding to the right of the module. For this, we first scroll down to the Spacing tab and activate the responsive mode for the padding. We want our padding to change based on the device a user will use to view our webpage.

For the padding, we’ll start with a large right padding on desktop, and shift to no padding on the right for mobile.

Padding Settings:
- Padding (Right):
  - Desktop: 145px
  - Tablet: 75px
  - Mobile: 0px
With our padding in place, don’t forget to save your changes, by clicking on the green checkmark. Here’s our final Divi Bagel Shop-inspired call to action!

Divi Leather Goods Inspired Call to Action Module Style Example

Our third and final design is inspired by our Divi Leather Goods Layout Pack.

Styling the Section

Before we add our module, let’s style our section. We’ll use a background image and gradient for this section. First, we click on the background image icon and upload our Divi Leather Goods background image from our assets folder.

With our image uploaded, we are now going to apply a gradient over it to give a slightly faded effect to the section. For this, we click on the background gradient icon, and use the following settings:

Background Gradient Settings:
- Gradient Stop 1: rgba(28,13,1,0.48) (at 0%)
- Gradient Stop 2: rgba(28,13,1,0.48)
- Gradient Type: Linear
- Gradient Direction: 110deg
- Gradient Unit: Percent
- Place Gradient Above Background Image: Yes
With our background now setup, we’ll add some padding to our section. To do this, we move to the Design tab of the section. Next, we scroll down to the Spacing tab. Then, we will enter a top and bottom padding of 10vw.

Once we have added our padding, we click the green checkmark to save our changes to our section.

Add Call to Action Module

After saving our section and its styling, we now move on to adding our Call to Action Module to our row. To do this, we click on the gray plus icon, and then we click the Call to Action Module icon. This will add the module to our one-column row.

Add Link to Button

For our button to show up, we need to add a link to the Button Link URL option of our module within the Link tab.

Style the Call to Action Module

Before we begin styling our module, we need to add our content.

Add Content

We add content to the Title, Button, and Body section of the Text tab.

Change Background

For this design, we want to use the background of the section that the module is within. So, we uncheck the Use Background Color option to make the background of the module itself transparent.

Set Text Color and Alignment

For this design, we will want our text to be Light and the text to be center aligned. After clicking on the Design tab, we now click on the Text tab to set our Text Color to Light and our Text Alignment to Center.

Style Title Text

After setting our text color and alignment, we scroll to the Title Text tab for us to begin styling the heading text of our call to action.

Title Text Settings:
- Title Font: Alike
- Title Text Size:
  - Desktop: 72px
  - Tablet: 63px
  - Mobile: 54px
- Title Line Height: 1.2em
Styling the Body Text

For the Body Text, we will keep the default settings the same. We’ll use Open Sans, the default font of Divi.

Setting Up Button Styling

For the button, we’ll use the following styles:

Button Styling:
- Use Custom Styles for Button: Yes
- Button Text Size: 14px
- Button Text Color: #000000
- Button Background: #d9b882
We continue to style our button with the following settings:

Button Border and Font Settings:
- Button Border Width: 0px
- Button Border Radius: 0px
- Button Font: Inter
- Button Font Weight: Bold
- Button Font Style: All Caps
Adding Sizing

To make our module more visually appealing, we’re going to add a bit of padding to the left and right of our module. For this, we scroll down to the Spacing tab and set a Max Width of 60% (for desktop), with a Module Alignment of Center.

Sizing Settings:
- Max Width:
  - Desktop: 60%
  - Tablet: 75%
  - Mobile: 100%
- Module Alignment: Center
With our changes complete, we now click on the green check mark to save our beautiful work!

In Conclusion

By using our layout packs as a design reference, we can see that there are endless ways to style the Call to Action Module available natively in Divi. Use these examples as brain food to inspire you in your next marketing design project that needs a strong call to action!

The post How to Style the Divi Call to Action Module (3 Examples!) appeared first on Elegant Themes Blog.
08.08.2023
How to Easily Add a Booking Form in WordPress (2023)
Online booking is a fantastic feature to add to your website, mainly if you sell services. Booking forms provide an effortless process for your customers. They can see your availability, select their services and even pay for them beforehand. Having a WordPress booking form on your website helps your business maintain a seamless process for your customers while ensuring that your revenues are supported, as your customer will be able to return and book within your business effortlessly.

What is a WordPress Booking Form?

A WordPress booking form is a form that allows users to book or schedule appointments with you or your business directly from your WordPress website. Simple booking forms typically collect a user’s name, service, and the date and time they want their service. There are multiple applications for booking forms. They can be used to schedule deliveries or to book a service like a nail or hair appointment. They can also be used to reserve physical items like reserving a hotel room or the rental of items. Booking forms can come with various features such as adding addons to their service, text notifications, and self-service capabilities allowing customers to adjust their appointment. Some event calendar plugins will have booking forms as a built-in feature.

Benefits of Using a Booking Form in WordPress

As a busy service provider, having a booking form can make your business’ internal process run smoother. Here are some benefits of using an online booking form in your business:
- Increased Sales – With booking forms, you can collect customer deposits and payments ahead of time. This allows you to secure revenue for your business. Additionally, you can charge late or cancellation fees through a booking form to ensure your time is respected. Booking forms are also a place where you can upsell your other products and services when your customers go to book their next appointment.
- No More Playing Phone Tag – With an online booking form, you can enter your availability, and your customers can choose a time that works for them from your calendar. Your customers can now automatically and in real-time know when they can book their sessions with you without having to call or send a thread of emails.
- Track and Organize Client Information – Booking forms are a great way to build a client relationship database. Through a booking form, you can track how much your customers spend, the services they get, and more data you can use to market to your customers and nurture your relationships with them.
- Limit No-Shows and Cancellations – Notifications via text and email are a common feature that many booking forms now have. Schedule and send reminders to your customers, ensuring that they arrive at their appointment on time.
In short, adding a booking form to your WordPress site can generate more bookings more efficiently with the power of automation. Now let’s explore how easy it is to add one to your site.

How to Add a Booking Form to Your WordPress Site (Step-by-Step)

For this tutorial, we’ll walk through how to do this using the trusted, popular booking form plugin Amelia. Amelia offers a robust feature set that makes free and premium versions an excellent choice to add a WordPress booking form to your website. Let’s walk through adding this plugin to your website and adding a booking form to your site.

Install Amelia

From your WordPress website, hover over the Plugins menu item. Next, click Add New and use the search form and enter Amelia. The first option will be the Amelia booking form plugin. Click Install Now to add the plugin to your WordPress website.

Once your plugin is installed, click the blue Activate button.

After Amelia is activated and installed, a new menu item will appear in your WordPress dashboard.

Configuring Amelia

Amelia is a full-featured yet easy-to-use booking form plugin. It provides many features to help you create the perfect booking form for your business.

While all these features may look complicated, to create your first booking form with Amelia, you’ll only need to create the following:
- A service
- An employee service
Once these two items are created, you can do more complex things with your booking form, like adding packages, setting up payments, and more. To begin, let’s create our first service.

Creating A Service

Amelia requires one service and one provider to generate a booking form at its most basic level. To begin, click on the Amelia menu option. Next, click the Services link. Services are organized in categories, and in the premium version of Amelia, you can add multiple services to create packages. Click on the blue Add Category button to create our first category.

In the category name field, assign your category a name. Then, click the small blue checkmark to save your category. You can create more categories here now if you want to add more.

With our first category created, we can now create our first service. To do this, click the blue Add Service button in the top right corner.

The Add Service flyout will open. The first tab, Details, is where you’ll upload a photo of your service and its name, category, and description.

Next, click on the Duration & Pricing tab. Here, you’ll enter the length of time and price for your service.

If you want to add photos to your service, click the Gallery tab. Then, click on the Add Image link. This will open up the default WordPress Media Library for you to upload and add photos to your service. Once you’ve added your images, click the blue Save button at the bottom of the flyout.

It will appear in your Services dashboard once you’ve added your necessary service details.

After creating your service, you’ll need to create and assign a provider to the service to make your booking form.

Creating An Employee

To create an employee in Amelia, from the Amelia menu, select Settings. Then, under the Provider DetailsÂ title, select the link View Provider Details Settings.

This will open up the Provider Details flyout menu. Enter your details, such as name, phone number, and email address. You can add a short bio in the description box if you’d like.

Next, click on the Assigned Services tab. You’ll see a list of your services within their corresponding categories. Select the services that you’d like to assign to this provider.

After assigning your services to your provider, click the Work Hours tab. This is where you’ll set the availability for each service and this provider. Using the pencil icon, assign time slots for each day of the week. You can also use the Apply to All Days link to assign the same schedule to each day. Once you have set up your hours of operation, click the blue Save button.

With our first service assigned to our first provider, we can now add a booking form for our customers to book services. But first, let’s customize the form and brand it to our company’s style guide.

Styling Your Booking Form

Amelia has an easy-to-use customization process from which you can change the style and colors of your booking form. To access it, from the Amelia menu, select Customize. Notice that a few options match the different booking form layouts natively with Amelia. We’ll be using the Step-by-Step Booking form layout. So, click the blue Continue button underneath the Step-by-Step Booking Form 2.0 card.

This is what the customization screen looks like:
- Global Settings: Adjust your fonts and colors
- Sidebar: Design your sidebar
- Service Selection: Determine how your services will be displayed
- Date & Time Selection: Setup your calendar view and how customers can choose their date and time
- Customer Information: Order of fields, labels, and more for your customer’s information
- Payment Summary:Â How your payment fields will be displayed
- Congratulations: Customize your booking confirmation page
Let’s look at some of the settings available under each tab.

Global Settings

The Global Settings tab allows you to assign your fonts and colors.

You can even upload a custom font.

Sidebar

The Sidebar tab allows you to customize the options and labels within the sidebar of the wizard.

You can also select the fields you want to show within your company information.

Service Selection

For Service Selection, you can edit the fields’ labels and the Continue button’s style.

Date & Time Selection

Assign different label names or change the visibility of specific fields with the Date & Time selection tab.

Customer Information

Determine your customer information form’s order or toggle the available active fields.

Payment Summary

Change the title and labels for your payment form, or style the buttons differently.

Congratulations

Lastly, the Congratulations page acts as an appointment confirmation page for your customers

Adding Your WordPress Booking Form to Your Website

To add your booking form to your website, you’ll need to select a page for it to appear on. Hover over the Pages menu item, then click Add New to create a new page for your booking form.

Give your new page a Title, then click the black plus icon. In the search box, enter Amelia to preview the blocks that come with Amelia. Select the Amelia – Step-by-Step Booking block.

With the block added to your new booking page, click the blue Publish button at the top of your screen.

Testing Your New Booking Form

Once you’ve added the Amelia block to your page, this is what the step-by-step wizard looks like on the front end for your customers. First, they have the option to select their services.

Then, they can select the date they want to book their appointment.

Next, the available timeslots are shown. Notice that these dates and times coincide with the availability of the provider.

After selecting a date and time, your customer can enter their personal information.

Finally, once everything is confirmed, they can see a confirmation of their appointment listing their service, the provider, and their information for notifications. They can also add their appointment to their calendar of choice.

Adding Your Form to Your Website with Divi

If you’re using the page builder Divi, you can benefit by using the native Amelia modules to style and add your booking form to your page. Start activating the Divi Builder by clicking the purple Use the Divi Builder button at the top of the Block Editor.

Next, click the Edit With the Divi Builder purple button.

Once the builder is activated, select the blue Start Builder button under the Use Existing Content card.

With the builder activated, you can now click the gray plus icon to open the module library. Notice that there are several Amelia modules available for you to choose from. Choose the AM – Step Booking module to add it to your row.

Just like other Divi modules, you have access to the Design tab and the Content and Advanced tab to use the powerful features of Divi on your new WordPress booking form.

Though Amelia is a solid choice to add a booking form to your WordPress website, other options on the market may be better geared to your business use case.

Other Booking Form Options for WordPress

While Amelia is a great booking form plugin for WordPress, there are many more on the scene that might pique your interest. Additionally, there are some booking form platforms that you may want to consider outside of the WordPress space, depending on your business requirements:
- Simply Schedule Appointments: A simple and powerful booking form plugin boasting an interactive setup wizard, customizable notification emails, and integration with Google Calendar and Mailchimp.
- Appointment Hour Booking: With double booking prevention, an automatic price calculator, and a straightforward user interface, this plugin is excellent for providers whose business revolves around classes, workshops, and events.
- Hotel Booking Plugin by Motopress: Geared towards serving the hospitality industry, this plugin has all the bells and whistles you’ll need to make your customers excited and stress-free to book their Airbnb, cabin, or retreat through your website.
- WPForms: For those looking to build complex booking forms, WPForms is one of the best contact form plugins with plenty of features. Complete with more than 30 field types and a library of templates, building the perfect booking form is possible with this plugin.
- The Events Calendar: This popular events calendar WordPress plugin can be used to create, manage and display events. Its Event Tickets addon allows you to sell tickets, manage attendees, and more. It also integrates with other booking form plugins.
- Calendly: A relative newcomer to online booking, this tool is popular among business coaches and professionals for its feature-rich free offering and integrations. It integrates well with WordPress and has a beautiful and intuitive user interface.
- Acuity Scheduling: With tight integration with Squarespace, Acuity is an online booking form platform with minimal aesthetics and compelling features.
In Conclusion

As a service provider, a booking form lets customers put themselves on your calendar without hassle. They can select their services, make a deposit and get reminders, which can be tedious to do through email. Whether you need video integration or the ability to include add-ons to your service list, a booking form plugin is available. Amelia is a great booking plugin with many features that can help you get started even in its free offering. A booking form should be a part of your business process as it can help you increase revenue, build brand loyalty and deepen customer relationships. WordPress has a great variety of booking form plugins that you can use to bring this powerful tool to your website today.

Featured Image via Irina Strelnikova / shutterstock.com

The post How to Easily Add a Booking Form in WordPress (2023) appeared first on Elegant Themes Blog.
04.08.2023
Download a FREE Blog Post Template for Diviâ€™s Toy Store Layout Pack
Hey Divi Creators! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand new freebies. This time around we’re building upon the Toy Store Layout Pack with a brand new blog post template that matches the rest of the pack perfectly. Hope you enjoy it!

Check Out The Toy Store
Blog Layout Template Below

Get it for free today!

Desktop View

Tablet and Mobile View

Download The Blog Post Template For The Toy Store Layout Pack

To lay your hands on the free Toy Store Blog Post Template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youâ€™re already on the list, simply enter your email address below and click download. You will not be â€œresubscribedâ€ or receive extra emails.

Download the Files

Download For Free

Join the Divi NewsletterÂ and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How to Upload The Template

Go to Divi Theme Builder

To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

Upload Website Template

Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

Navigate to the import tab, upload the JSON file that you could download in this post, and click on ‘Import Divi Theme Builder Templates.

Save Divi Theme Builder Changes

Once you’ve uploaded the file, you’ll notice a new template with a new body area that has been assigned to All Posts. Save the Divi Theme Builder changes as soon as you want the template to be activated.

How to Modify The Template

Open Toy Store Blog LayoutÂ Template

To modify the template’s elements, start by opening the template.

Inside the Body Layout Editor, you can edit the design on the front end using the Divi Builder just like you would with an average Divi page.

Since this is a template that has been assigned to all posts for the site, there is a post content module that is necessary for displaying the post content. You will need to keep that module in place, but you can adjust the post content module’s design elements, which will design the post content that is displayed dynamically.

About the Toy Store Blog Layout

This blog post template has a lot of dynamic elements that will work with your blog posts immediately. For example, the entire post header comprises dynamic elements including a featured image as the background, the post title, and the post metadata (date, categories and author). This content won’t need updating, but you can tweak the design of each of those elements if needed.

Other dynamic elements include the following:
- Post Title: A Text Module is used to show the title of the blog post.
- Post Excerpt: We use another Text Module is show the first few sentences of the post.
- Post Author Name: Displays the name of the blog post author. We use a Blurb Module with an image for this.
- Post Published Date: Displays the date the blog post was published.
- Post Category: Displays the category or categories that the blog post lives within.
- Post Content Module: Displays the post content added when editing the post on the backend of WordPress.
- Post Navigation: Provides previous and next buttons to read other posts within the category of the post.
- Comments Module: A functional comment area for the post.
- Post Slider Module: Displays the most recent posts that share the same category in the Blog Slider Module.
- Blog Post Module: Displays the most recent posts that share the same category using the Blog Module.
Here is a quick illustration that identifies the elements of the Toy Store blog layout template.

New Freebies Every Week!

We hope you’ve enjoyed the Toy Store Layout Pack and the blog post template freebie that goes along with it. We look forward to hearing your opinions in the comment section below. Make sure you check back next week for more freebies!

The post Download a FREE Blog Post Template for Divi’s Toy Store Layout Pack appeared first on Elegant Themes Blog.
01.08.2023
How to Back Up Your WordPress Website in 2023
Keeping your WordPress website safe and secure should be at the top of your mind. After you’ve added your favorite WordPress plugins and chosen your beautiful theme, your next step should be protecting the investment of time, resources, and money you’ve put into your site. This is where maintenance of your WordPress website comes in. There are a few things you should do to keep up with your WordPress website, and one of them is keeping a free online and offline back. In this post, we’ll learn how to back up your WordPress website in three ways, discuss backup storage solutions, best practices, and what to do if you need to use your backup after a website crash.

How to Backup Your WordPress Website Using a Plugin

There are many backup plugins that you can use to take a backup of your website. A WordPress backup plugin is a quick and straightforward way to create a website backup. For our guide, we’ll walk through using UpdraftPlus, a popular WordPress backup plugin, to create your website backup.

Install and Setup Plugin

From your WordPress dashboard, from the left-hand menu, hover over Plugins. Next, click Add New.

In the search bar in the top right, type Updraft. Click Install Now; the button will turn blue after installing the plugin. Click the blue button that now says Activate next to the first option.

Configure Settings

Once UpdraftPlus is installed, you can access the plugin by hovering over Settings from the left-hand menu. Then, click on the UpdraftPlus Settings menu option. This will show you the plugin’s dashboard, notifications regarding your backups, and your existing and scheduled backups.

Create a New Backup

Click the large, blue backup Now button to create your first backup.

Once you’ve done this, a popup will appear. You’ll be presented with four options:

You can include your database or your files in your backup. Both options have an (…) following them, allowing you to get specific about the database tables and folders you’d like to include or exclude from your backup. Once you have set up cloud storage for your plugin, you’ll have the option to. We’ll come back to this later. Lastly, you have the choice of deciding whether this download will be deleted automatically or not. Once you have made your selections, click the Backup Now button.

Once your backup has been completed successfully, you’ll notice it is added under the Existing backups table. You can select specific aspects of your backup to download, restore said download, delete it, or view the log processed as it backed up your website.

Schedule Automatic Backups

Now, let’s look at setting up scheduled, automatic backups. Click on the Settings tab from the UpdraftPlus dashboard.

The first two options on your screen allow you to set up automatic schedules for your backup process. You can set up a schedule for the files and database of your website in a frequency from a few hours to monthly. Additionally, you can decide how many backups you’d like to keep on your server.

From the same settings screen, we can set up the storage solution we’ll be using for our website. UpdraftPlus has many options for storing your backups on the cloud. Some of the options available include:
- Dropbox
- Google Drive
- Email and
- SFTP
With the free version of the UpdraftPlus, you can back up to one cloud or online service. However, the plugin’s premium version can back up to multiple places. For our guide, let’s back up to Google Drive. From the list of cloud services, select the Google Drive iconâ€”next, login to your Google Drive account by clicking the Sign in with Google button.

Next, sign into your Google account.

After, grant UpdraftPlus access to your Google Drive account, then click Allow.

Once this is done, you’ll be presented with this final screen. Click on the Complete Setup button. This will take you back to your WordPress installation.

Once you have returned to your WordPress install, you’ll see a notification that your Google Drive has been successfully connected.

Once your account is connected, click on the Settings tab again. Then, scroll down to the cloud account you set up and click the Save Changes button.

When you make a backup, you can send the backup to your Google Drive account.

Storing Your Backup Offline

It’s always a good idea to download backups onto your computer, a USB, or any cloud storage platform that will allow you to store your website offline. To do this, click any of the folders you’d like to download to the media of your choice from the backup you’ve just made.

For a full offline website backup, download the database, plugins, themes, uploads, and other folders. Now that we know how to make a backup with a plugin online, offline, and to the cloud, let’s see how we can do this with our hosting provider.

How to Backup Your WordPress Website Using Your Hosting Provider

Backing up your website with a plugin is a simple and easy way to back up your WordPress website if you can access WordPress’ user interface. However, things can get a bit sticky for you if you don’t have access to the dashboard. This is why knowing how to back up your WordPress using your hosting provider is essential.

For our use case, we’ll show you how to manually back up your WordPress website using Siteground, one of the best hosting providers for WordPress.

Login and Access Site Management Tools

Visit Siteground and click the Login link in the top right-hand corner.

You’ll then need to enter your username and password.

Once in your account, you’ll be presented with your Siteground home screen, which lists all your products. Click on the Manage button under the Websites title.

Once here, you’ll see a table listing all your websites within your Siteground account. Click on the Site Tools button next to the website that you’d like to back up.

Create a New Backup

On your website, you’ll see a variety of tools and options that you can use to manage your site. To start the backup process, click on the Tool Finder, or press CTRL + K. Then, search backup in the search box that appears. Finally, click Backups from the dropdown.

Once on the Backups page, give your backup a name you’ll remember. Then, click on the blue Create button.

You’ll be presented with this screen as your backup is being created.

You’ll get a confirmation message once your backup has finished being created.

Notice your backup now shows up in your list of backups, alongside your regular, automated backups, with your note attached.

Siteground makes it easy to restore your website in the case of file corruption, hacking, and more. To do this, select the meatball menu next to the backup you’d like to restore. Then, select which type of restoration you’d like to process.

This easy one-click method of backing up and restoring your WordPress website is an excellent benefit of using Siteground and other managed WordPress web hosts.

Next, let’s look at how to do a manual backup of your database and WordPress files.

How to Backup Your WordPress Website Manually

To manually back up your WordPress website, the easiest method is to download a backup of your site files using your hosting provider. An overwhelming majority of modern web hosts provide you with an online file manager and portal that you can use to manage your website’s files directly. The software that many hosts use is cPanel. With cPanel, you can access your databases, email accounts, and a visual file manager. For more information about cPanel, check out our cPanel guide. However, more commonly, your hosting provider may have its own propitiatory interface they provide to their clients for file management and backups.

If you don’t have access to your files on your host or through cPanel, you can back up your site via FTP. Filezilla is a popular FTP client to manage your WordPress site via FTP. You can use terminal clients like Putty and WinSCP to connect to your server and back up your site as a last resort.

This time, however, we’ll be using a file manager within our web host to back up our files and phpMyAdmin to back up our database. We’ll still be using our Siteground account for this tutorial section. However, you can still follow similar steps irrespective of your web host.

Backing Up Your Site Files

While still in your Siteground account, from the left-hand menu, click site. Then, click File Manager.

Once in the file manager, you’ll notice a folder called public_html. This is where all your WordPress files live. Right-click on this folder. Then, click on the Archive link.

Next, name your archive. Then, click Confirm to start archiving (or zipping) your WordPress files.

Once your archive has been created, you’ll be presented with this success message.

You’ll now notice that your archive is a new file within your file manager. Now, right-click on your archive. Then, click Download to safely save your file backup offline and on your hard drive or media.

Backing Up Your WordPress Database with phpMyAdmin

Now that we’ve manually backed up our WordPress files, we can move on to backing up our database. Again, your web host should offer a simple way to back up your database within its site tools or using cPanel. However, for direct access and more control, you can use phpMyAdmin for pretty much any WordPress website.

To access phpMyAdmin in Siteground, go to the Site section within the left menu. Next, we click on the MySQL link. Then, we click on the phpMyAdmin link from the right side of the screen.Â Finally, we scroll down slightly and click the blue Access phpMyAdmin button. This will open up the free PHP tool in a separate window.

Once you’re in phpMyAdmin, you’ll see a list of your website’s databases on the left-hand side.

Click on the database that you’d like to download. It should coincide with the database for the website files that we backed up earlier. If you’re unsure of the database you should select, you can find your database name within the wp-config.php file of your WordPress file structure within the file manager. Then, click the Export button from the top menu.

You have two options when it comes to exporting your database. To keep it simple, select the Quick Export method. Then, select Go. If you’d like to add additional outputs, select specific tables to backup and more, click the Custom button, and make your choice before selecting Go.

Save Your Database File

Finally, your. SQL file will be generated. Depending on your database size, this could take a few seconds to a few minutes. An alert box will pop up, asking you to save your database file. It is recommended to save it in the same place you saved your WordPress files zipped folder.

That’s it! Now you have an external backup of all of your site files and your database.

Where to Store Your WordPress Backups

As mentioned throughout this tutorial, there are many places where you can store your WordPress backups. The first and easiest place is directly within WordPress. This is typically the place where backup plugins save your backups. However, this can cause performance issues in the future as you make more backups and your website grows larger. We suggest storing backups outside of your WordPress site in multiple places for safekeeping. You can store them on your computer, on an external hard drive, or in the cloud using a third-party host or platform like Google Drive or Dropbox.

It should be mentioned that having an offline backup of your website is imperative. While your web host and cloud storage are great places to store your backup files, any online platform can go down or corrupt your backup files. Having an external copy of your site is the only way to make sure you have a safe copy.

How Often Should You Backup Your WordPress Website

Most web hosts today offer complimentary, daily backups of your website. However, depending on the complexity of your website and the processes occurring on your site, you may need to change this schedule. On average, having some form of automated, daily backup is good practice. This can be done either through your web host or a plugin like UpdraftPlus or BackupBuddy, to name a few.

However, if you’re in the eCommerce space, you would surely want to consider backing up your website more frequently, depending on your server load, storage limits, and the number of orders on your website. It is not uncommon for an eCommerce website to do hourly or even backups by the minute! In addition to daily backups, consider making monthly offline backups for your website for peace of mind.

What to Do If Your Site Crashes

Having your website crash is a devasting feeling. Your first port of call should be your web host. More often than not, they have daily backups of your website from which you can quickly restore it. Secondly, check your online cloud and your backup storage folder on your website to see if there is a backup there that you can restore. You’ll need to copy over your database and file structure if you manually restore your website. In the rare event that you can gain access to your WordPress dashboard during a site crash, you can try restoring one of your backups from your backup plugin if it has that feature.

Tips and Best Practices for Backing Up Your WordPress Website

Here are a few things to remember when backing up your WordPress website.
- Consider Using a Backup Plugin: A backup plugin is the easiest way to manage and create backups in WordPress. Check out these best backup plugins for WordPress.
- Test Your Backup: It’s important to test your back to ensure that in a time of crisis, you’ll have a backup that actually works. You can do this by restoring a backup on a local install or staging site. Additionally, this tests to see any bugs in your files or steps you may need to include or optimize as you create your backups.
- Backup Both Your WordPress Files and Database:Â Some backup plugins allow you to backup only the database instead of the entire site. However, it’s always a good idea to create a full backup of your website regularly, especially after making changes to your site. Sometimes changes in your file system could cause issues with your database backup if your file structure has changed.
- Keep an External Backup: Cloud backups rely on platforms that can go down or fail. If the worst-case scenario occurs, an offline backup will save you. Taking an external backup of your complete site once a month can be a good practice to adopt.
- Use Automatic Backups When Possible:Â Automatic backups free headspace for you to maintain your website. Choose a backup plugin with this, or ensure this feature is included in your hosting plan.
- Don’t Store Your Online Backups Within WordPress:Â As a backup is a complete snapshot of your website, storing them within your WordPress website can not only eat up your storage space but cause issues when it comes to performance. Aim to store your online backups outside your WordPress installation and, even better, on the cloud through services like Google Drive or Dropbox.
- Backup Before and After Major Site Changes: Make a full site backup before adding a new design or functionality to your website. You never know if a new plugin that you add or a tweak to a theme could take your website offline.
- Keep Your Backups Secure:.Whether storing them online or locally, make sure your backups are secure and safe from hackers. You can store them in password-protected folders and media devices like USBs, encrypt them, and more.
- Label Your Backups Something You’ll Remember:Â Most backups have an auto-generated name which can be hard to remember when you check back on it several weeks later. Give your backup a name that’s easy to identify. For example, “Before Menu Edit” lets you know this backup was before you changed your menu.
Conclusion

Learning how to make a backup of your WordPress site is an essential step in the website building process. A backup will save your website when it’s been hacked, and it’s good practice to be able to restore your site if anything goes wrong. It’s also good insurance overall. Additionally, backups are an essential website maintenance task that should be carried out on your website frequently. With WordPress, there are a few ways to back up your website. If you’d prefer to use a plugin for your backups, our list of the best WordPress backup plugins is an excellent place to start.

Alternatively, the restoration process of a website is the other side of maintaining a website. A good migration plugin can make it easy to move your website to a new location. In closing, learning how to make a backup of your WordPress website is a necessary skill to gain as you build your next website project.

Image by jossnat / shutterstock.com

The post How to Back Up Your WordPress Website in 2023 appeared first on Elegant Themes Blog.
27.07.2023