Do you want to change the background color of the WordPress block editor for admins?
Sometimes when working on a custom client project, you may want to change the Gutenberg editor background color in WordPress to match their brand colors.
In this article, we’ll show you how to easily customize the background color of the WordPress block editor for admin area.
Note: This guide covers changing the editor color in WordPress admin. If you’re looking to change the background color in WordPress front-end, then please see our tutorial on how to change background color in WordPress.
Why Change the Background Color of the Block Editor in WordPress?
You may want to change the background color of the WordPress block editor for a number of reasons.
However, if your WordPress theme doesn’t use the same colors, then the appearance of your post inside the editor will look quite different from what your users will see on the live website.
Another reason for changing the background color could be personal preference.
For instance, by default, the block editor uses a plain white background. Some users may find it a bit stressful to look at the white screen for long hours. Eye strain can be a real issue for many people, and the default white background is not easy on the eyes.
That being said, let’s see how you can easily change the WordPress editor background color.
How to Change the WordPress Editor Background Color
You can easily change the WordPress editor background color by adding custom code to your theme’s functions.php file.
However, keep in mind that even the smallest error in the code can break your website and make it inaccessible. That’s why we recommend using the WPCode plugin. It’s the best WordPress code snippets plugin on the market and is the easiest and safest way to add custom code to your WordPress website.
Upon activation, you need to visit the Code Snippets » + Add Snippets page from the admin sidebar.
From here, you have to click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.
This will take you to the ‘Create Custom Snippet’ page where you can start by typing a name for your code snippet. This is just for you and can be anything that will help you identify the code.
Next, you need to choose ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right.
After that, you need to copy and paste the following code into the ‘Code Preview’ box.
Next, you need to look for the following code in the PHP snippet you just pasted.
background-color: #bee0ec;
Then, you have to add the hex code of your preferred color next to the background color option. If you don’t want to use a hex code, you can use some basic color names such as ‘white’ or ‘blue’ instead.
After that, you need to scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ option.
Next, you need to select the ‘Location’ of the code snippet as ‘Admin Only’ from the dropdown menu.
After that, you need to scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active.’
Finally, don’t forget to click on the ‘Save Snippet’ button to save your changes.
Now, go visit the block editor from the admin sidebar.
This is how the block editor looked on our site after adding the CSS code snippet.
Do you want to use icon fonts in the WordPress post editor?
Icon fonts allow you to easily use images and symbols in text. They are lightweight and won’t slow down your site, and they can be easily scaled to any size and styled like any other text font.
In this article, we’ll show you how to easily use icon fonts in the WordPress post editor without writing any HTML code.
We’ll show you multiple methods, each one using a slightly different approach than the other. You can choose one that works best for you.
Method 1. Adding Icon Fonts in WordPress Post Editor using JVM Rich Text Icons
This method is recommended to use on any kind of WordPress website. It is easy to use and works seamlessly with the block editor.
Upon activation, you can simply edit a WordPress post or page or create a new one. Inside the post editor, add a new paragraph block, and you’ll see a new Flag icon in the block toolbar.
Clicking on it will show a popup of icons to choose from. It uses the popular Font Awesome icon fonts by default.
You can use the search to look for an icon or simply scroll down to find the icon you want, and then click to add it.
One advantage of using icon fonts is that you can use CSS to style them.
However, since you are already using the block editor, you can simply use the built-in color tools to style the icons.
The plugin allows you to use icon fonts in most text blocks such as Paragraph, List, Button, Columns, Cover, and more.
Here is an example of using icon fonts and block options to style three columns.
Another useful example of using icon fonts is with buttons.
This time we are using inline icon fonts alongside some text for the two buttons.
Feel free to use the block editor tools like text alignment, colors, spacing, and more to get the most out of the icon fonts.
Method 2. Add Icon Fonts in WordPress Post Editor with Font Awesome
This method requires you to add shortcodes in the post editor to display icon fonts. You can use this method if you don’t need to regularly use icon fonts in your WordPress posts and pages.
Upon activation, you’ll be asked to enter your plugin license key. You can find this information under your account on the SeedProd website.
After entering your license key and clicking ‘Verify Key,’ you can start working on your landing page.
Simply go to the SeedProd » Landing Pages page and click on the ‘Add New Landing Page’ button.
After that, you will be asked to choose a template for your landing page.
SeedProd comes with a bunch of beautiful designs that you can use as a starting point, or you can start with a blank template and design the whole thing yourself.
For this tutorial, we will be using a pre-designed template. Simply click on a template to select it and continue.
Next, you will be asked to provide a title for your landing page and choose a URL.
After entering them, click on the ‘Save and Start Editing the Page’ button to continue.
SeedProd will now launch the page builder interface. It is a drag-and-drop design tool where you can simply point and click on any item to edit it.
You can also drag and drop blocks from the left column to add new elements to your design.
For the sake of this tutorial, we are going to add the Icon block.
After you add the block, you can simply click to edit its properties.
The left column will change to show the options for the Icon block. You can click into the ‘Icon’ section to the left and choose a different icon image or change the color and style.
Another way to use icons in SeedProd is by adding the ‘Icon Box’ block.
The difference between this and the ‘Icon’ block we used previously is that ‘Icon Box’ allows you to add text along with your chosen icon.
This is one of the most common ways to use icons when displaying product features, services, and other items.
You can place your icon box inside columns, choose colors, and adjust the icon size to your liking.
Additionally, you can also format the accompanying text using SeedProd’s formatting toolbar.
Once you are finished editing your page, don’t forget to click on the ‘Save’ button at the top right corner of the screen.
If you’re ready, you can click ‘Publish’ for the page to go live, or you can click on ‘Preview’ to make sure it looks like you want it to.
You can also click on ‘Save as Template’ so you can reuse this design with SeedProd on other parts of your website.
Here is how the icon fonts looked on our test website.
Do you want to add custom shape dividers to your WordPress website?
Shape dividers can organize your content in an engaging and eye-catching way. They can also highlight your site’s most important content, so visitors and customers don’t miss out on crucial information.
In this article, we will show you how to create a custom shape divider in WordPress.
Why Create a Custom Shape Divider in WordPress?
A shape divider is a type of section divider that you add between blocks of content.
These dividers can be simple, such as a horizontal line created with built-in WordPress blocks.
You can use these basic dividers to organize and separate content, which is particularly useful on pages that cover lots of different topics.
You can also create more advanced shape dividers using page builder plugins and other web design software. These can highlight your site’s most important content so it stands out to visitors and customers.
A professional-looking shape divider can also make a page more interesting and engaging.
For example, you might use them to create a unique background for your email newsletter signup form.
With that being said, let’s see how you can create a custom shape divider in WordPress. Simply use the quick links below to jump straight to the method you want to use.
Method 1. Create a Simple Shape Divider (No Plugin Required)
The easiest way to add a custom shape divider to WordPress is by using the built-in Separator block.
This method allows you to add a horizontal line separator in between any WordPress blocks, and then customize the line’s color and style.
This method doesn’t let you add different shapes to WordPress and has limited customization settings. However, you won’t need to install an extra WordPress plugin, so this is the easiest way to add a simple shape divider to your website.
To get started, simply open the post or page where you want to add an horizontal divider in the content editor. Then, click on the ‘+’ button where you want to place that divider.
In the popup, type in ‘Separator.’
When the right block appears, click to add it to the page or post.
To customize the default Separator block, give it a click and then use the settings in the right-hand menu.
You can switch between default, wide line, and dots using the buttons in the ‘Styles’ section.
You can also change the line’s color so that it matches the rest of your theme or branding.
To do this, click on ‘Background’ and then choose a color from the popup that appears.
When you’re happy with how the divider looks, you can either click on the ‘Publish’ or ‘Update’ button to make the shape divider live.
Method 2. Create a Custom Shape Divider in WordPress Using a Page Builder (Recommended)
If you are looking to use different shape and customize every part of your dividers, then we recommend using the SeedProd plugin.
SeedProd is the best WordPress page builder plugin on the market, and it allows you to add a custom shape divider to any section, row, or column using a simple drag-and-drop editor.
Note: There is a free version of SeedProd on available on WordPress.org, but we’ll be using the Pro version since it comes with a wide range of shape dividers.
The first thing you need to do is install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you need to enter your license key.
You can find this information under your account on the SeedProd website. After entering the license key, click on the ‘Verify Key’ button.
With that done, go to SeedProd » Pages and click on the ‘Add New Landing Page’ button.
After that, it’s time to choose a page design template. SeedProd has a ton of professionally-designed templates that you can fine-tune to perfectly suit your WordPress website.
To select a template, simply hover your mouse over it and then click the ‘Checkmark’ icon.
Next, go ahead and type in a name for the page. SeedProd will automatically create a URL based on the page’s title, but you can change the URL to anything you want.
For example, you may want to add some relevant keywords, which will help search engines understand what the page is about and may improve your WordPress SEO.
When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.
Next, you’ll be taken to the drag-and-drop page builder, ready to customize the template.
The SeedProd editor shows a live preview of your design to the right and some block settings on the left.
The left-hand menu also has blocks that you can drag onto your layout.
For example, you can drag and drop standard blocks like buttons and images or use advanced blocks such as the countdown timer, contact form, social sharing buttons, and more.
To customize a block, just click to select it in your layout.
The left-hand menu will then show all the settings you can use to configure that block. You can also change the page’s background colors, add background images, or change the color scheme and fonts to better match your brand.
SeedProd also comes with ‘Sections,’ which are collections of blocks that are often used together. For example, SeedProd has a header section, hero image, call to action, customer testimonials, FAQs, features, footer sections, and more.
To look through the different sections, simply click on the ‘Sections’ tab.
You can move sections and blocks around your layout using drag and drop.
If you want to delete a block, then simply hover over it and then click on the trash can icon when it appears.
Whether or not you choose to use a SeedProd section, you can now create a custom shape divider. Simply click to select the section, row, or column where you want to add the divider.
Then, click on the ‘Advanced’ tab in the left-hand menu.
Now, click to expand the ‘Shape Divider’ section.
To start, you can choose where to show the shape divider by selecting either the ‘Top’ or ‘Bottom’ button.
You can now open the ‘Type’ menu and choose the shape divider that you want to use.
As you select different shapes, the live preview will update automatically so you can try different styles to see what looks the best.
After choosing a shape divider, you can style it using the new settings.
To start, you can click on ‘Color’ and then choose a new color from the popup that appears.
With that done, you can make the divider bigger or smaller by dragging the ‘Width’ and ‘Height’ sliders.
If you already have a specific size in mind, then you can type those numbers into the boxes.
You can also try flipping the divider by clicking to enable or disable the ‘Flip’ switch.
By default, the divider will appear behind the rest of the content, so users can clearly see any text, images, or other content that overlaps the divider.
However, moving the shape to the front can create some interesting effects. If you want to see how this looks, then simply click to enable the ‘Bring to Front’ switch.
To add more dividers simply follow the same process described above.
You can even add a shape divider to the top and bottom of an area, which often creates some impressive and eye-catching results.
You can continue working on the page by adding more blocks and customizing those blocks in the left-hand menu.
When you’re happy with how the page looks, click the ‘Save’ button. You can then select ‘Publish’ to make that page live.
How to Add Shape Dividers to a WordPress Theme
SeedProd’s drag-and-drop editor gives you the freedom to add a unique shape divider to any page. However, sometimes you may want to use the same shape dividers on multiple pages, or even across your entire WordPress blog or website.
This will help you create a consistent design and can also save you a ton of time. In this case, we recommend adding a shape divider to your theme using the SeedProd theme builder.
With SeedProd, you can create a custom WordPress theme without writing any code. It creates all the files that make up your theme, including the sidebar, header, footer, single posts, and more.
You can then customize these files using the familiar drag-and-drop builder. This includes adding shape dividers by following the same process described above.
When you activate the new theme using SeedProd, it will overwrite your existing WordPress theme, so you should only use this method if you want to replace your current theme.
Do you want to add no right-click to your WordPress images?
If you’re a photographer, artist, or content creator, then you’re probably worried about people stealing your images. While it’s difficult to completely stop image theft, you can make it more difficult for people to steal pictures from your website.
In this article, we’ll show you how to add no right-click on WordPress images and galleries.
Why Add No Right-Click on WordPress Images?
The Internet has made it easier to share your work with the world, but it’s also made it easier for people to steal your images.
These people might use your content to promote scams or fraudulent products. They might even sell your digital art and graphics online, making money from your hard work while you make none.
If you’re an online influencer or have a big social media following, then people might even steal your photos and impersonate you online. For example, they might pretend you’re an affiliate marketing partner.
Even if you simply write a WordPress blog, people might still use your personal photos as part of online scams like fake ads or reviews.
While there’s no single solution that can completely prevent image theft, you can make your site a less attractive target.
With that being said, let’s see how you can add no right-click on WordPress images and galleries. Simply use the quick links below to jump straight to the method you want to use.
Method 1. How to Add No Right Click to All Your WordPress Images
The easiest way to protect your images is by using No Right Click Images. This free plugin allows you to disable right-clicking for images only, so users can still right-click on your other content including links.
You can also enable and disable right-click based on whether the visitor is logged into their account. This is perfect if you run a subscribers-only stock photo website or some other form of membership site.
First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.
Upon activation, go to Settings » No Right Click Images to configure the plugin settings.
The default options should work for most users, but it’s still worth checking whether you need to make any changes. In particular, these settings can help you close any loopholes that people might use to get around the no right-click protection.
Out of the box, the plugin disables dragging images so users can’t copy an image by dragging it onto their desktop or another tab. With that in mind, we always recommend leaving ‘Disable Dragging of images’ checked.
No Right Click Images also disables touch and gesture events, which can stop people from stealing images on devices that make use of those sorts of actions. However, this can cause problems if you use images as links or buttons, or if your visitors interact with your pictures using gestures, such as before-and-after images.
If you do encounter problems, then you can re-enable support for touch events and gestures by unchecking the following boxes: ‘Disable Touch events’ and ‘Disable Gesture events.’
By default, visitors can still open a context menu and save your images on Apple devices.
That said, you may want to check the box next to ‘Disable context menu on Apple devices.’ This adds a style to images on iPhones and iPads, which stops users from opening the Apple context menu and stealing your images.
When you’re happy with how the plugin is set up, don’t forget to click on ‘Save Changes’ to store your settings.
You can now log out of your WordPress admin account and visit your website. Then, simply right-click on any image to check the plugin is working.
Method 2. How to Add No Right Click to Image Galleries
If you want to protect individual images across your website, then the first method is a good choice. However, sometimes you may want to create an image gallery in WordPress, and then disable right-clicking for the entire gallery. For example, you might build a photography portfolio or display your most popular products in a nice gallery layout.
It is one of the best WordPress gallery plugins on the market and comes with a protection addon that disables the ability to right-click on any galleries you create using the plugin.
The first thing you need to do is install and activate the Envira Gallery plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, go to Envira Gallery » Settings and enter your license key.
You can find this information under your account on the Envira Gallery website.
With that done, click on ‘Verify Key.’
Next, head over to the Envira Gallery » Addons page. Here, find the Protection addon and click on its ‘Install’ button.
When you see the ‘Inactive’ slider, give it a click so it shows ‘Active’ instead.
After that, you’re ready to start creating protected image galleries.
To get started, go to the Envira Gallery » Add New page and type in a name for your gallery.
This is just for your reference so you can use anything that helps you identify the gallery in your WordPress dashboard.
You’re now ready to add images to the gallery. You can click on ‘Select Files from Your Computer,’ or ‘Select Files from Other Sources’ and then choose images from the WordPress media library.
After that, scroll to the ‘Currently in your Gallery’ section and click on the ‘Misc’ tab.
Under ‘Image Protection Settings,’ check the box next to ‘Enable Image Protection.’
This disables the right-click action for all your Envira galleries.
If a visitor tries to right-click a gallery, you may want to show a popup on your WordPress website. For example, you might let this person know your images are copyrighted, and can’t be downloaded without your permission.
If you’re selling your digital artwork or photos, then you can even use the popup to get more sales on your online store.
To create a popup, check the box next to ‘Enable Popup Alert.’
You can then type in a title and message.
By default, visitors will click an ‘OK’ button to close the popup.
You can replace ‘OK’ with your own custom messaging by typing into the ‘Button Text’ field.
When you’re happy with how the gallery is set up, click on ‘Publish’ to save your settings.
To add the gallery to your website, simply edit the post or page where you want to show the images and then click on the ‘+’ icon.
In the popup, type in ‘Envira Gallery’ and then click on the right block when it appears.
This adds the Envira Gallery block to the page.
You can now open the dropdown menu and select the gallery you just created.
When you’re happy with how the page looks, either click on ‘Publish’ or ‘Update’ to make the protected gallery live.
Pros and Cons of Disabling Right-Click on WordPress Images
Disabling the right-click action makes it more difficult for people to steal your images. It also reminds users that they can’t simply download files without the owner’s permission.
Sometimes, this will be enough to stop people from stealing your photos. This is particularly true for scammers, who tend to look for easy ways to download as many images as possible. It can also discourage genuine visitors, who may assume they can download and use any online content.
However, there are still ways to get around a website’s no right-click protection. For example, users can still download an entire page.
This will copy the page’s content into a file, including all the images.
People can even use their browser’s view source or inspect tool to directly access an image file without right-clicking.
With that in mind, you shouldn’t assume that disabling right-click is enough to keep your images safe.
On the other hand, some visitors may have a genuine reason why they need to download your images. For example, they may want to share your work with a potential future customer or post it on social media.
You might even allow people to reuse your images in specific ways, such as using your digital artwork on a non-profit website. In this case, disabling right-click can stop genuine users from accessing your images, which is a poor visitor experience.
If you do add no right-click to your website, then we recommend giving people an easy way to request access to your images. You can do this by adding a contact form to WordPress using a plugin such as WPForms.
If there’s a chance your visitors may need immediate access, then you can also add live chat to your site. This allows people to send their requests and get a response in real time, which is a great user experience.
Alternative Ways to Discourage Image Theft on Your Website
When it comes to protecting your images, disabling right-click is a good first step. However, if you really want to stop thieves then we recommend taking some extra measures.
With that in mind, here are some additional ways to stop people from downloading, reusing, and selling images without your consent.
This is a great start, but it’s also a good idea to add a copyright notice below each image in plain text. This discourages people from stealing your photos, without affecting how that image looks on your website.
Some visitors simply assume they can download and re-use any images they see online. By adding a copyright notice, you can clear up any confusion and stop people from making this innocent mistake.
This can be a problem for some websites, particularly if you’re a photographer or digital artist who’s promoting their work.
For that reason, we recommend positioning your watermarks carefully so they discourage people from stealing the image, without ruining how that image looks on your website.
Sometimes, websites will mention your business or brand name next to the stolen images, particularly if they’ve scraped an entire page from your site.
With that in mind, it’s a good idea to set up brand name notifications using a service such as Google Alerts. Simply head over to the Google Alerts page and type in the name of your site, brand, products, or any other important text.
If there’s a specific phrase or call to action that you add to every post, then you may also want to type this into Google Alerts.
After that, use the dropdown menus to configure the alert and type in the email address where you want to get the notifications.
When you’re happy with how the alert is set up, go ahead and click on ‘Create Alert.’
Now, when someone publishes scraped content of yours, you will get an email letting you know about it.
4. Reverse Image Search with Google
You can use Google image search to find all the places where a particular image is used online. Simply head over to the Google Images page and click on the small camera icon.
This will add a section where you can paste a direct link to the image or upload a copy from your computer.
After that, click on ‘Search.’
Google will now show all the images that are similar to your picture. If you find the exact image on another website, then you can click through to see how that picture is being used.
If you have lots of photos, then checking each one manually can take a lot of time and effort. However, Google reverse image is a great way to uncover sites that re-using your images, so it’s smart to do a search from time to time.
Alternatively, you can use an advanced reverse image service such as Pixsy.
5. Contact the Website’s Host or Registrar
If someone has stolen and re-published your images, then we recommend contacting that person. There’s a chance they may be unaware they’re using copyrighted images illegally.
However, if it’s a spam website then you may struggle to find contact information. Instead, you can use the IsItWP lookup tool to find out where the domain and website are hosted.
The tool will pull up any available information, including the web hosting company.
Stealing content is an illegal activity and most web hosting companies don’t want to host sites that are breaking the law. With that in mind, you can contact the host and registrar directly to try and get the site taken down.
Most reputable web hosting companies take DMCA (Digital Millennium Copyright Act) complaints seriously, so this method usually gets good results.
Do you want to add fuzzy search to your WordPress website?
Adding fuzzy search helps users easily find the information they are looking for, even if they misspell or otherwise incorrectly enter their query. This improves the overall search experience and user engagement on your website.
In this article, we’ll show you how to easily add fuzzy search to your WordPress website.
What is Fuzzy Search And Why Should You Add it to Your Website?
Fuzzy search looks for partial matches for a search term, even if no exact matches are available, and shows users the most appropriate results.
This way, users can find the right content on your website even if they make typos in the search query.
By default, all WordPress websites come with a basic search feature that only shows results for exact matches.
For instance, if a user misspells a term, no results will be shown not even partial matches. This creates a bad search experience for users and often causes them to leave your site. You can see this in the image below.
This is where SearchWP comes in. It is the best WordPress search plugin on the market that automatically replaces the default search with a much better search feature.
Unlike the default WordPress search, SearchWP can use fuzzy search as well as look for matches in titles, excerpts, post or page content, products, custom fields, categories, tags, PDF files, and more.
For instance, if a user searches for ‘vintage furniture’ on your WordPress blog but misspells a word, they’ll still be able to find your posts on this topic.
The image below shows the same misspelled search using the SearchWP plugin.
That being said, let’s see how you can easily add fuzzy search to your WordPress website.
Upon activation, you need to visit the SearchWP » Settings page from the admin sidebar and switch to the ‘License’ tab.
Next, you need to copy and paste your license key and click on the ‘Activate’ button. You can find the license key under your account on the SearchWP website.
Fuzzy search is not enabled by default in SearchWP, but you can easily turn it on. First, you need to switch to the ‘Advanced’ tab in the plugin’s settings page.
Next, you need to simply check the ‘Partial matches (fuzzy when necessary)’ option under the ‘Actions & Settings’ section.
Doing so will enable the fuzzy search feature for your site.
Once that is done, you should review the other SearchWP settings for your site. The plugin comes with a bunch of powerful options that allow you to customize the search feature on your website.
You can see them by simply switching to the ‘Engines’ tab under plugin settings.
From here, you can assign weight to different search results.
You can also click on the Sources & Settings button to select additional search areas. For instance, you can enable search for comments, products, and more instead of simply posts and pages.
SearchWP automatically replaces the default WordPress search.
This means that if you have already added the WordPress Search block or widget to your website, then it will start using SearchWP custom algorithm for results.
However, if you have not added the search form to your website, then you can do so by simply adding the Search block or widget to any post, page, or sidebar area.
Simply head over tothe Appearance » Widgets page. Find the ‘Search’ block and simply add it to your sidebar.
Don’t forget to click on the ‘Update’ button to store your settings.
However, if you are using a block theme, then your theme may not have a widget-ready area. In that case, you won’t see the Widgets screen under the Appearance menu.
Instead, you can use the site editor to add the search block to your website. Simply go to the Appearance » Editor page to launch the editor.
After that, add the search block to your website where you want to display the search form.
Don’t forget to click on the Update button to save your settings.
You can now visit your website and try out the new more powerful search feature.
You can see in the image below how fuzzy search returns multiple relevant results with a misspelled query.
Do you want to add WhatsApp chatbox and share buttons in WordPress?
WhatsApp is one of the most popular messaging platforms and has about 2.2 billion users worldwide. Adding a Whatsapp share button will allow you to connect with the customers and build user engagement, and adding a chatbox button will let users message you directly through your website.
In this article, we’ll show you how to easily add a WhatsApp share button in WordPress.
Why Add a WhatsApp Button in WordPress?
WhatsApp is an instant messaging app that allows people worldwide to easily contact each other.
Adding a WhatsApp share button to your WordPress website will allow visitors to easily share your content with their contacts.
Moreover, you can also add a WhatsApp chatbox enabling users to have a direct conversation with you.
For instance, if you have an online store, then a WhatsApp chat button can be used by customers to make product queries without having to fill out any forms or go through customer support.
Upon activation, you need to visit the Sassy Social Share menu from the admin sidebar.
From here, you need to switch to the ‘Standard Interface’ tab at the top.
Then, you need to scroll down to the ‘Select Sharing Services’ section and simply check the box next to the WhatsApp option.
You can also add the Share button for other social media platforms including Facebook, Instagram, Pinterest, Twitter, and more.
Once, you’re done, don’t forget to click on the ‘Save Changes’ button to store your settings, and then you can head to the ‘Theme Selection’ tab.
From here, you can customize the share buttons by changing their size, shape, logo or background color, and more. It’s a good idea to go with the WhatsApp brand colors for the share button so that users will recognize it more easily.
Once you are finished, don’t forget to click on the ‘Save Changes’ button to store your settings.
You can now visit your website to see your WhatsApp share button in action.
Here is how it looked on our demo website.
Don’t want to add WhatsApp button to every page? Don’t worry, the plugin also allows you to easily add it to single posts and pages as well.
Adding WhatsApp Share Button in Block Editor
If you only want to show the WhatsApp share button on specific posts and pages, then first you need to turn off the global display of sharing buttons.
To do that, simply go to the Sassy Social Share page in the WordPress admin sidebar and switch to the ‘Standard Interface’ tab.
Next, you need to uncheck the box for the ‘Enable Standard sharing interface’ option.
Next, switch to the ‘Floating Interface’ tab.
From here, uncheck the box next to the ‘Enable Floating sharing interface’ option.
Now that you have disabled the standard and floating social sharing buttons, you go ahead and WhatsApp share button to any page or post on your website using a shortcode.
Simply open the post or page where you want to display the WhatsApp share button in the content editor, or you can just create a new one.
From here, simply click on the Add Block (+) button at the top left corner and search for the ‘Shortcode’ block. After that, simply add the block to the page.
Next, you need to copy the following shortcode and paste it into the ‘Shortcode’ block.
[Sassy_Social_Share]
Once you’re done, simply click on the ‘Publish’ or ‘Update’ button to store your changes. Your WhatsApp Share button will look like this.
Adding WhatsApp Share Button as a Widget
To add the WhatsApp share button to the sidebar of your website, you need to visit the Appearance » Widgets page from the admin sidebar.
From here, simply click on the Add Block (+) button at the top left corner and locate the ‘Shortcode’ block.
Next, you need to add the ‘Shortcode’ block to the sidebar.
After that, simply copy and paste the following shortcode into the block.
[Sassy_Social_Share]
Next, click on the ‘Update’ button to store your settings.
This is how your WhatsApp share button will look once it’s added to the website sidebar.
Adding the WhatsApp Share Button in the Full Site Editor
If you’re using a block theme, then you’ll be using the full site editor and won’t have access to the ‘Widgets’ page.
First, you need to visit the Appearance » Editor option from the admin sidebar to launch the full site editor.
Next, you need to click on the ‘Add Block’ (+) button at the top of the screen and add the ‘Shortcode’ block to any suitable place on your website.
After that, add the following shortcode to the block.
[Sassy_Social_Share]
Once, you’re done, click on the ‘Save’ button at the top.
This is how the WhatsApp share button looked on our demo website.
Method 2: Add a WhatsApp Chatbox Button in WordPress
This method allows you to add a WhatsApp chatbox button in WordPress.
This means that when a user clicks on the WhatsApp chat button, they’ll be able to send you a direct message on your WhatsApp phone number.
Note: You won’t be getting any messages directly inside your WordPress dashboard, but you will be able to chat like normal in the WhatsApp mobile app, web interface, and desktop software.
Upon activation, you need to head over to the Click to Chat menu item that has been added to your WordPress admin dashboard’s sidebar.
From here, you need to start by typing your business phone number in the ‘WhatsApp Number’ field.
This will be the phone number where you’ll receive messages from users.
After that, you need to type a simple message in the ‘Pre-Filled Message’ field. This will be the default message that will be displayed in your WhatsApp chat window.
Next, you need to scroll down to the ‘Style, Position’ section.
You can start by choosing a style for your WhatsApp chatbox from the dropdown menu. By default, this plugin offers about 8 different styles. Simply choose the one that you prefer.
After that, you need to scroll down to the ‘Position to Place’ section.
From here, you can choose the position and size of your chatbox from the dropdown menus.
Next, you need to go to the ‘Display Settings’ section.
Here, you just need to check the ‘Global’ box next to the options where you want to display your WhatsApp chatbox.
For instance, if you want to display the chatbox on your posts, pages, and categories pages, you need to check the ‘Global’ option.
You can also choose the ‘Hide’ option if you don’t want to display the WhatsApp chatbox on a certain page.
Finally, don’t forget to click the ‘Save Changes’ button to store your settings.
Now, you need to head over to the Click to Chat » Greetings page to select a Greeting dialog from a dropdown menu.
This greeting dialog will be shown along with the WhatsApp button on your page.
Once you’ve made your choice, you will need to type the content for the header, main content, and call to action of your greeting dialog.
After that, scroll down to the ‘Customizable Design’ section.
Once here, you can choose the background colors of your main content, header, and message box.
After that, simply click the ‘Save Changes’ button to store your settings
Next, you need to visit your website.
By default, this is how your WhatsApp chatbox will look like.
Now, we will show you how you can easily add the WhatsApp chat button in the block editor, as a widget, and in the full site editor.
Add the WhatsApp Chat Button in the Block Editor
You can easily add the WhatsApp button to a specific page or post on your WordPress website using the block editor.
For this tutorial, we will be adding the WhatsApp button to a page.
First, you need to go to the Pages » Add New page from the admin sidebar.
This will launch the block editor.
Now, you need to click the ‘Add Block’ (+) button at the top left corner of the screen and click on the ‘Shortcode’ block.
Once the ‘Shortcode’ block is added, you need to copy and paste the following shortcode into the block.
[ht-ctc-chat]
After that, simply click the ‘Publish’ button at the top.
This is how the WhatsApp button looked on our demo website.
Adding the WhatsApp Chat Button as a Widget
In this method, we will show you how to easily add the WhatsApp button as a widget in the sidebar of your website.
First, you need to head over to the Appearance » Widgets page from the WordPress sidebar.
Once there, simply click on the ‘Sidebar’ tab to expand it and then click the ‘Add Block’ (+) button at the top.
Next, simply locate and add the ‘Shortcode’ block to the sidebar.
Now, simply copy and paste the following shortcode into the block.
[ht-ctc-chat]
Finally, don’t forget to click the ‘Update’ button to store your settings.
This is how the WhatsApp button looked after being added to the sidebar on our demo website.
Adding the WhatsApp Chat Button in Full Site Editor
If you’re using a block-based theme with a full site editor, then this method is for you.
First, head over to the Appearance » Editor page to launch the full site editor.
Once there, simply click the ‘Add Block’ (+) button at the top left corner of the screen.
Now, simply locate and add the ‘Shortcode’ block to your preferred place on the site.
Once the block is added, simply copy and paste the following shortcode into the block.
[ht-ctc-chat]
In the end, don’t forget to click the ‘Update’ button at the top to save your changes.
This is how the WhatsApp button looked on our site.
We hope this article helped you learn how to add a WhatsApp share button in WordPress. You may also want to see our top picks of the best social media monitoring tools for WordPress users, and our beginner’s guide on how to build an email list.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Do you want to translate your website into another language?
By default, WordPress does not offer an easy way to manage multilingual content. However, you can easily translate your WordPress website by using plugins.
In this article, we’ll show you how to easily translate your WordPress website with TranslatePress.
Why Use TranslatePress for Translating a WordPress Website?
The best part about WordPress is that it can be used in any language. Most WordPress themes and plugins can also be used and translated into any language as well.
If your business website has a multilingual audience, then it can be super beneficial to translate your content.
You can rely on machine translations like Google Translate, but these translations are not good and sometimes can be quite misleading.
On the other hand, if you’re using a multilingual WordPress plugin, then you need to create multiple posts which require switching back and forth between different languages.
With the TranslatePress plugin, you can translate your website and content using a live editor and won’t need to create multiple posts for the same content.
You can instantly switch languages from the live editor and can also translate themes and plugins using TranslatePress.
Having said that, let’s see how you can easily translate your WordPress website with TranslatePress.
Upon activation, head over to the Settings » TranslatePress page from the WordPress admin dashboard to configure your plugin settings.
From here, you need to switch to the ‘General’ tab.
Now, you first need to choose the default language of your website from the dropdown menu beside the ‘Default Language’ option.
This is the language your WordPress is already downloaded in.
After that, you need to choose the language that you want to translate your site into.
Simply head over to the ‘All Languages’ section, and choose a language you want to translate your website into from the dropdown menu below the ‘Language’ option.
After that, you need to click the ‘Add’ button.
Now scroll down to the ‘Native Language Name’ setting on the page.
Here, you need to select whether you want to display language names in their own language or in English. You can choose ‘Yes’ or ‘No’ accordingly.
The next option is to choose if you want to display the default language name in the URL as a subdirectory. For example, http://example.com/en/.
After that, head over to the ‘Force language in custom links’ setting.
The default option for it is ‘Yes’ which will allow the plugin to change custom links for translated languages, making the URLs more SEO-friendly.
In the next option, you can choose if you want to use Google Translate for automatic translations.
The default choice is ‘No’, but you can change that if you would like to use Google Translate.
All you would need to do is provide a Google Translate API key in the next option. You will find a link under the option which will show you instructions on how to get one.
Finally, you will come to the options on how you want to display the language switcher on your website. TranslatePress provides you with three choices.
You can use a shortcode, add a switcher to your navigation menu, or display a floating menu. We will show you how to add the language switcher to your website later in this article.
Now, simply go ahead and click on the ‘Save Changes’ button to store your settings.
Step 2: Translating Your Website Content
To translate your website, you can either click the ‘Translate Site’ tab on the plugin’s settings page or the ‘Translate Site’ button in your WordPress admin bar.
This will open the live translation editor in a new browser tab.
Now, you need to simply click the blue translate icon present next to any text on your website that you want to translate.
After that, TranslatePress will automatically load the chosen text in the left column of the translation editor.
Once the text is loaded in the column, simply add its transition in the box below and then click the ‘Save Translation’ button at the top to store your changes.
This way, you can translate all the content on any page of your site including navigation menus, buttons, sidebar, widgets, meta-text, and more.
With TranslatePress, you can also instantly start translating any page or post on your site when logged in.
All you would need to do is click on the ‘Translate Page’ button on the top to open up the live editor.
Another benefit of this plugin is that you only need to translate a specific string once.
Once you have translated a string, the plugin will automatically translate it for you in other places.
Step 3: Adding Language Switcher to Your Website
After translating your site, you will need to add a language switcher to your website.
A language switcher allows users to select a language when they visit your website. It usually displays the flag of each country to indicate languages available on your site.
TranslatePress allows you to add a language switcher by using a shortcode, as a navigation menu item, or as a floating banner.
The language switcher can be displayed as flags, language names, or both.
Adding language switcher in WordPress using shortcode
If you want to add a language switcher in WordPress using shortcode, then head over to the Settings » TranslatePress page from the admin dashboard.
Once you’re on the ‘Settings’ page, scroll down on the ‘General’ tab and then copy the [language-switcher] shortcode in the ‘Language Switcher’ section.
You can now paste this shortcode on any page, post, or sidebar widget where you want to display the language switcher.
This is how the language switcher looked on our demo site.
Adding a language switcher to your WordPress navigation menu
If you want to add a language switcher as a navigation menu item, then go to the Appearance » Menus page from the dashboard.
Note: If you are using a block-based theme with a full site editor, then this method won’t work for you.
From here, you need to click on the ‘Language Switcher’ tab in the ‘Add Menu Items’ section on the left corner of the screen.
Once the tab expands, simply check the languages that you want to display in the language switcher.
After that, click the ‘Add Menu’ button to add the language switcher as a menu item.
Finally, don’t forget to click on the ‘Save Menu’ button to store your changes.
You will now see a language switcher added to your WordPress navigation menu.
This is how it looked on our test site.
Adding a floating language switcher
If you want to add a floating language switcher, then you simply need to head over to the Settings » TranslatePress page from the admin dashboard.
First, you need to scroll down to the ‘Language Switcher’ section in the ‘General’ tab.
From here, make sure to check the box next to the ‘Floating language selection’ option.
You can also switch the position of the floating language switcher from the dropdown menu on the right corner of the screen.
After that, don’t forget to click on the save changes button to store your settings.
You can now visit your website to see the floating language switcher at the bottom of every page on your website.
Animations are a great way to grab the visitor’s attention and highlight a page’s most important content. They can also encourage customers to click on your call-to-action buttons and links.
In this article, we will show you how you can easily add CSS animations in WordPress.
Why Add CSS Animations in WordPress?
You can use CSS animations to draw the visitor’s attention to different parts of a page. For example, if you have an online store then animations can highlight a product’s most important features or biggest selling points.
Animations will also make your CTAs stand out, which can help you reach a specific goal such as getting more people to subscribe to your email newsletter.
You can add CSS animations to your theme or child theme‘s stylesheet. However, this takes a lot of time and effort, and it can break your website’s design and even function if you make a mistake.
With that being said, let’s see how you can easily add CSS animations to your WordPress site. If you prefer to jump straight to a particular method, then you can use the links below.
Method 1. How to Easily Animate Any WordPress Block (Quick and Easy)
The easiest way to add a simple CSS animation is by using Blocks Animation.
This free plugin allows you to add an entrance animation to any block without having to write a single line of CSS. It also has a typing animation and a ticker-style effect that you can add to text and numbers.
First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.
Upon activation, open any page or post in the WordPress editor. Then, simply click on the block that you want to animate and select the ‘Block’ tab in the right-hand menu.
You’ll see this menu has a new ‘Animations’ section.
Simply click to expand the ‘Animations’ section, and you’ll see three different options: Animations, Count Animations, and Typing Animations.
‘Animations’ are short effects that play once when the page loads. To add this kind of entrance animation to your WordPress blog, just click on the dropdown next to ‘Animation.’
This opens a menu where you can choose the animation you want to use.
The WordPress editor will show a preview of the animation, so you can try different options to see what looks the best.
By default, the entrance animation will play as soon as the page loads, but you can add a delay if you prefer. If you use multiple animations on the same page, then you can even use delays to stagger your animations so they’re not overwhelming.
Simply open the ‘Delay’ dropdown and choose a time from the list.
You can also make the animation faster or slower using the ‘Speed’ dropdown.
As you’re trying different settings, you can preview the animation at any point by clicking on ‘Replay Animation.’
The plugin also has ‘Count Animations’ and ‘Typing Animations.’
Typing Animations allow you to animate text, while Count Animations add a ticker-style effect to numbers. These animations work with any block that supports text or numbers, so you can use them to animate buttons, image captions, headings, and more.
To add either of these effects, start by highlighting the text or numbers that you want to animate. Then, click on the downward arrow in the small toolbar.
You can now choose ‘Count Animations’ or ‘Typing Animations’ from the dropdown menu.
If these options are grayed out, then make sure you’ve highlighted the right content. For example, you won’t be able to select ‘Count Animation’ if you’ve only highlighted text.
After adding the animation, you can change the speed and add an optional delay using the dropdown menus in the small popup.
For example, in the following image, we’re using a delay of one second.
When you’re ready to make the CSS animation live, either click on the ‘Publish’ or ‘Update’ button. Now, if you visit your WordPress website you’ll see the animation live.
Method 2. How to Add CSS Animations to Custom Pages (Recommended)
If you want to add simple animations to the built-in WordPress blocks, then Blocks Animation is a good choice. However, if you want to really grab the visitor’s attention, keep people on your website, and get more conversions then we recommend using SeedProd.
SeedProd is the best page builder plugin that allows you to create beautiful landing pages, sales pages, and more using a simple drag-and-drop editor.
It also comes with an ‘Animated Headline’ block that you can use to create rotating and highlighted animated headlines.
Despite the name, you can use the Animated Headline block to animate any text including a call to action, subheading, or any other text that you want to emphasize.
SeedProd also comes with over 40 entrance animations that you can add to any block including images, text, buttons, videos, and more.
You can even animate entire sections and columns with just a few clicks. In this way, you can create engaging animated pages within minutes.
If you’re using animations to get more conversions and sales, then SeedProd integrates with WooCommerce and supports many of the top email marketing services you may already be using to promote your website.
How to Setup the SeedProd Page Builder
The first thing you need to do is install and activate SeedProd. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you need to enter your license key.
You can find this information under your account on the SeedProd website. After adding the license key, simply click on ‘Verify Key.’
Create a Custom Page Design
To get started, go to SeedProd » Landing Pages and click on ‘Add New Landing Page.’
On the next screen, you’ll be asked to choose a template.
For this guide, we’ll show you how to create a sales page with animated text and entrance animations, but the steps will be similar no matter what kind of page you create.
Simply click on any tab to see the different templates within that category.
When you find a template you want to use, just hover your mouse over it and then click on the checkmark icon.
We’re using the ‘Zen Sales Page’ template in all our images, but you can use any template.
Next, you need to give the page a title.
SeedProd will automatically create a URL based on the page title, but you can change this to anything you want. For example, adding relevant keywords to a URL can often improve your WordPress SEO and help the page appear in relevant search results.
When you’re happy with the title and URL, click on ‘Save and Start Editing the Page.’
This will load the SeedProd drag-and-drop page editor.
On the right, you’ll see a live preview of the page design, with some settings on the left.
SeedProd comes with lots of blocks that you can add to your design, including blocks that allow you to add social share buttons, videos, contact forms, and more.
To add some animated text to the page, find the Animated Headline block and drag it onto your page design.
There are two ways to animate your headline. First, the ‘Highlighted’ style adds a shape animation to your text, such as a circle or an underlined zigzag.
You can use this animation to draw attention to a particular word or phrase inside the headline. This can make your headline easier to read and understand by highlighting the most important content. It’s also a great way to draw attention to a call to action.
The Highlighted style also has a few strikethrough shapes.
You can use strikethroughs to create interesting and eye-catching effects, or it can simply add some fun to your design.
To create a Highlighted animation, just open the ‘Style’ dropdown and select ‘Highlighted.’
Next, open the ‘Shape’ dropdown and choose a shape. When you click on a shape, SeedProd will show a preview of that animation, so you can try different shapes to see which one you like the most.
SeedProd also has a ‘Rotating’ animation style, which adds a transition effect to the text.
Often, animated text is the first thing visitors look at when a page loads, so it’s a great way to highlight the most important piece of text.
To create a transition animation, simply open the ‘Style’ dropdown and click on ‘Rotating.’
You can then open the ‘Animation’ dropdown and choose the type of transition you want to use, such as fade, zoom, or roll. Again, SeedProd will play the animation inside the page editor so you can try different effects to see which you prefer.
No matter whether you’re creating a ‘Highlighted’ or ‘Rotating’ animation, you can add text before and after the animated text.
Simply type into the ‘Before Headline’ and ‘After Headline’ fields. In the ‘Text’ field, add the word or phrase that you want to animate.
If you want to animate the whole headline, then simply leave the ‘Before Headline’ and ‘After Headline’ fields empty.
By default, SeedProd will play the animation on a loop, which some visitors may find annoying.
To only play the animation once, click to deactivate the ‘Infinite Loop’ switch.
By default, the animation will play for 1200 milliseconds after an 8000 milliseconds delay.
To use different values, type into the ‘Duration’ and ‘Delay’ fields. For example, you can make the animation faster by using a shorter duration.
You may also want to style the text. For example, you can change the font size and alignment.
When you’re happy with how the animated headline looks, go ahead and click on the ‘Save’ button to store your changes.
Add Entrance Animations in WordPress
Entrance animations play when the page first loads, so they’re a great way to catch the visitor’s attention.
You can also use them to highlight the content visitors should look at first. For example, if you have an online marketplace then you might animate the product’s hero image, or the banner advertising your Black Friday sale.
Inside the SeedProd editor, simply click on the content you want to animate, and then select the ‘Advanced’ tab in the left-hand menu.
You can then go ahead and click to expand the ‘Animation Effects’ section.
After that, simply choose an animation from the ‘Entrance Animation’ dropdown.
You can now add entrance animations to any block, section, or column simply by following the same process described above.
Publish Your CSS Animations in WordPress
When you’re happy with how the page is set up, click the dropdown menu on the ‘Save’ button and select ‘Publish.’
You can now visit this page to see the CSS animations live.
Do you want to download all the images and media files from your WordPress website?
By downloading your media library, you can easily store a backup of your media files on your computer or, if you have created another WordPress site, then you can also transfer these images from one site to another.
In this article, we’ll show you how to easily download your entire WordPress media library, step by step.
Why Would You Want to Download the Media Library?
The WordPress media library stores all the media files that you have uploaded to your site. If you want to create a backup of these media files, then you can easily do that by downloading a copy of the media library and storing it on your computer.
You can always use a fully automated WordPress backup solution to back up your entire WordPress site (including plugins, themes, posts, and the media library).
However, most backup plugins do not offer an easy way to just download and upload your media library.
You could also use your WordPress hosting account file manager or FTP to download the media library, but these methods are a bit complicated and confusing for beginners.
With that being said, we’ll show you some easy ways to easily download your entire media library in WordPress.
Upon activation, go to the Media » Export page from your admin area.
Once you’re on the ‘Export Media Library’ page, simply choose the ‘Single folder with all files’ option from the dropdown menu beside the ‘Folder Structure’ option.
Now all your media will be downloaded into one folder. They will be downloaded as the original file types, such as JPG, PNG, or SVG.
If you want your media to be placed into separate folders based on the time of upload, then choose the ‘Nested Folder’ option from the dropdown menu.
After that, simply click the ‘Download Zip’ button, and your entire media library will be downloaded into a zip file on your computer.
Method 2. Download the Entire WordPress Backup Including Media Files
If you want to create a backup for your entire WordPress website including the media library, then this method is for you.
We’ll be using the Duplicator plugin which is the best WordPress backup plugin on the market and enables you to create a complete backup of your WordPress website.
Method 3. Download Media Library Using WordPress Settings
In this method, we’ll show you how to download your entire media library from your WordPress backend and import it to another WordPress website.
Note: This method allows you to download the media library without using any plugins. However, we do not recommend this method because it exports your media as an XML file.
This method can come in handy if you want to import your WordPress media library to one of your other websites.
For that, head over to the Tools » Export page from the WordPress admin dashboard.
Now that you’re on the ‘Export’ page, simply check the box beside the ‘Media’ option.
If you don’t want to download your entire library, then you can also select a date range for a specific time frame. With this feature, only the images uploaded during your chosen time frame will be downloaded.
Finally, click on the ‘Download Export File’ button.
Now, your WordPress media library will be saved on your computer as an XML file.
Do you want to show a before and after photo in WordPress?
A before and after photo allows you to show a side by side comparison of two images with minor differences. This is perfect for showing the impact of your products and services, or simply encouraging people to interact with your content.
In this article, we’ll show you how to add a before/after photo to your WordPress website with a slide effect.
Why Show Before and After Photos in WordPress (with Slide Effect)?
A before-and-after image is an interactive picture that typically shows some kind of change.
Visitors can use a slider to switch between the different ‘versions’ of the image in an engaging and interactive way.
If you run an online store using a plugin such as WooCommerce, then a before and after photo can show the effect of your products or services.
You simply need to show a ‘before’ photo that the customer can relate to, and a desirable ‘after’ photo. This will make shoppers want to buy the thing that takes them from the ‘before’ state to the ‘after’ state.
If you’re an affiliate marketer, then showing persuasive before and after photos on your website is a great way to promote your affiliate links, and get more sales.
Before and after photos can also encourage visitors to interact with your content. Dragging a slider to reveal the ‘after’ photo is an easy way to get more engagement, which can keep visitors on your site for longer. This can also help increase your pageviews and reduce bounce rate in WordPress.
With that being said, let’s see how you can create a before and after photo in WordPress using a slide effect. Simply use the quick links below to jump straight to the method you want to use.
The BEA plugin allows you to create horizontal and vertical sliders, and customize the image with different labels and colors.
The first thing you need to do is to install and activate the Ultimate Before After Image Slider & Gallery (BEA) plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, go to Before and After Slider » Add New in your dashboard.
To start, type in a name for the image slider. This is just for your reference so you can use anything that will help you identify it.
With that done, you can add the ‘before’ image by scrolling to the ‘Before Image’ section.
Here, click on ‘Add or Upload Image’ and then either choose a picture from the WordPress media library or upload a new file from your computer.
To help search engines understand this image and show it to the right people, it’s a good idea to add some image alt text. To do this, simply type into the ‘Image Alt’ field.
With that done, scroll to the ‘After Image’ section.
You can now add the ‘after’ image by following the same process described above. Don’t forget to add some alt text to this image, too, since it’s important for WordPress SEO.
You can also show some text below the image, by adding a title and a description.
For example, you might encourage visitors to interact with the slider. This is especially important for visitors who might have never run across a before-and-after photo before.
This is also an easy way to add some context to the image.
To add some text, simply type into the ‘Slider Title’ or ‘Slider Description’ fields.
You can also add a ‘Read More’ URL, which can link to any post or page on your WordPress website, or even an external website. For example, you might send visitors to a page where they can buy the product featured in the slider image.
This link will appear below the before/after image, and also beneath any slider title or description you’re using.
To add a link, type the destination into the ‘Read More Link’ field.
You can then decide whether to open the link in the same tab, or in a new tab using the ‘Read More Link Target’ dropdown.
If you’re linking to another website, then we recommend choosing ‘New tab’ so you’re not sending visitors away from your WordPress blog.
With that done, you can choose whether you want to create a vertical or horizontal slider by clicking on one of the thumbnails in the ‘Orientation Style’ section.
After that, scroll to the top of the screen and click on ‘Options.’
Here, you’ll see the ‘Default offset’ is set 0.5. This means the visitor sees half of the ‘before’ image when the page first loads.
If you want to show more of the before image, then type in a bigger number such as 0.6, 0.7, or higher.
If you want to show the entire before image, then type in 1. This will place the slider at the top or right of the before image, as you can see in the following image.
By default, the plugin shows ‘Before’ and ‘After’ labels when the visitor hovers their mouse over the image.
You may want to replace these labels with something more descriptive.
To do this, simply go ahead and type into the ‘Before Label’ and ‘After Label’ fields.
By default, visitors will move the slider using drag and drop. Some people may find this difficult, especially if they have mobility issues or they’re using smaller devices like smartphones or tablets.
With that being said, you may want to change how visitors move the slider.
If you select the ‘Yes’ button next to ‘Move slider on mouse hover,’ then visitors can move the slider simply by hovering their mouse over the image.
If you select the ‘Yes’ button next to ‘Click to move,’ then visitors can click anywhere on the image to move the slider to that point.
These settings can make it easier to interact with the before/after image, but it’s typically not the way that sliders behave. With that in mind, we recommend using these settings carefully.
Next, click on the ‘Style’ tab.
Here, you can change the colors used for the different labels, backgrounds, headings, descriptions, and the read more button. This can help the before/after image blend in with your WordPress theme, or even stand out from the rest of your website’s design.
After adding the shortcode to your site, simply click on the ‘Publish’ or ‘Update’ button to make the before/after image and slider effect live.
Method 2. How to Show A Before and After Photo Using SeedProd (Advanced)
If you simply want to add a before and after image to a page or post, then the BEA plugin may be a good choice. However, if you’re using the image to promote a product, service, or business then we recommend using SeedProd.
It also has a ready-made ‘Before After Toggle’ block that you can use to create beautiful before-and-after images your users can interact with.
Simply drag the block from the left-hand menu, and then drop it onto any page design that you may happen to be working on, including sales pages.
If you’re using WooCommerce to sell your products, then SeedProd integrates with WooCommerce and even comes with special eCommerce blocks. This is perfect if you plan to use before and after images to promote your WooCommerce products.
Note: There is a free version of SeedProd that allows you to create custom pages no matter your budget. However, we’ll be using the premium version as it comes with the Before After Toggle block. It also integrates with many of the best email marketing services you may already be using on your website.
After creating a page, it’s easy to add a before and after image to your design. In the SeedProd page editor, simply find the ‘Before After Toggle’ block.
You can then drag and drop this block anywhere on your design, to add it to the page layout.
With that done, simply click to select the ‘Before After Toggle’ block. The left-hand menu will now update to show all the settings you can use to create your before-and-after image.
To start, you’ll need to add the picture you want to use as the before image. Under ‘Before Image’ either click on ‘Use Your Own Image’ or ‘Use a Stock Image’ and choose the picture you want to use.
By default, SeedProd shows a ‘Before’ label above this image. However, you can change this to something more descriptive by typing it into the ‘Before Label’ field.
With that done, scroll to the ‘After Image’ section.
You can now add an image and customize the default ‘After’ label by following the same process described above.
SeedProd can add a vertical or horizontal slide effect.
To switch between these two styles, scroll to the ‘Slider Orientation’ section and then click on either ‘Vertical’ or ‘Horizontal.’
By default, visitors will move between the before and after images by dragging the slider. However, some users may find it easier to move the slider by hovering their mouse over the image.
This is particularly true for larger images where the visitor would need to drag the slider a greater distance.
To try this setting, enable ‘Move on Hover’ in the left-hand menu.
Next, you may want to add a colored overlay to both the before and after images. This can help the image blend in with the rest of the color scheme, or stand out from the background.
You can even make the colored overlay semi-transparent, to create a more subtle effect.
To try different colors, click on the ‘Overlay Color’ section and then make your changes in the popup that appears.
With that done, you can customize the slider handle by clicking to expand the ‘Comparison Handle’ section.
By default, SeedProd shows half of the ‘before’ image and half of the ‘after’ image. To change this, simply drag the ‘Handle Initial Offset’ slider.
To display less of the before image, drag the slider to the left so that it shows a lower number. To show more of the before image, drag the slider to the right, which increases the number.
Next, you can change the slider’s color using the ‘Handle Color’ settings.
You can also make the handle thicker or thinner using the ‘Handle Thickness’ slider.
In this way, you can make the handle stand out, or create a more subtle effect.
When you’re happy with the handle, you may want to change the circle. You can make the circle bigger or smaller using the ‘Circle Width’ settings, and change the ‘Circle Radius’ to create sharp or curved corners.
As you make changes, the live preview will update automatically so you can try different settings to see what looks the best.
When you’re happy with the circle, you may want to change the size of the triangles inside that circle. For example, if you’ve made the circle bigger then you might want to increase the size of the triangles too.
To make this change, drag the ‘Triangle Size’ slider until you’re happy with how it looks.
With that done, you can continue adding new blocks and customizing the content on your SeedProd page.
When you’re happy with how the page looks, just click on the arrow next to the ‘Save’ button and then select ‘Publish.’
Now if you visit your website you’ll see your page design with the before-and after-image live.
