Thursday, February 9, 2023

How to Show Google, Facebook, and Yelp Reviews in WordPress

Do you want to show Google, Facebook, or Yelp reviews in WordPress?

Customer reviews encourage people to trust your website and buy from your business. There are lots of third-party sites where potential customers can see your reviews, but it’s also a good idea to show this content on your own website.

In this article, we will show you how to display business reviews from Google, Facebook, and Yelp in your WordPress site.

How to show Google, Facebook, and Yelp reviews in WordPress

Why You Should Display Business Reviews in WordPress

There are lots of different websites where customers can review your company such as Google, Yelp, and Facebook. However, potential customers will need to visit these third-party websites in order to see the reviews.

With that being said, it’s a good idea to add Google, Yelp, and Facebook reviews to your WordPress website so that everyone can see them. For example, you might show positive reviews on your WooCommerce product pages, or your About Us page.

An example of a website, showing customer reviews

These reviews can convince customers to trust your company, even if they haven’t bought from you before.

You can even use reviews to reduce your cart abandonment rates, by adding them to your custom WooCommerce checkout page.

A custom checkout review page, with customer reviews

With that said, let’s see how you can easily add Yelp, Google, and Facebook reviews to WordPress. Simply use the quick links below to jump straight to the platform you want to use.

How to Show Google, Facebook, and Yelp Reviews in WordPress

You could simply copy and paste the best reviews into your site, and then show them using a customer review plugin. However, depending on the plugin you use, you may need to add new reviews manually, which can take a lot of time and effort.

There will also be a delay between customers posting on sites like Yelp and Facebook, and those reviews appearing on your WordPress website.

With that in mind, it’s a good idea to create a review feed that updates automatically using the Reviews Feed Pro plugin.

This single plugin allows you to show reviews from all the biggest review platforms.

Customer reviews, displayed on a WordPress website

It also comes with pre-designed templates, so you can display your reviews in different layouts including showcases, carousels, grids, and more.

The Reviews Feed automatically copies your website’s design so the reviews look like a natural part of your website, rather than content embedded from another platform.

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, click on Reviews Feed in the left-hand menu. You can then add your Reviews Feed Pro license key and click on the ‘Activate’ button.

Adding your license to the Reviews Feed WordPress plugin

You’ll find the license key under your account on the Smash Balloon website.

After activating the plugin, you’re ready to show reviews from Google, Facebook, or Yelp.

Method 1. How to Show Yelp Reviews in WordPress

Yelp is a popular website where visitors can review restaurants, brands, services, products, and more.

If your business already has some positive Yelp reviews, then adding them to your website can get you more sales, members, appointments, and more.

An example of a Yelp review feed

If you don’t already have a Yelp account, then you can claim your Yelp business page.

Since Yelp is a public site, you can show reviews from any business that has a Yelp listing. For example, if you own a business listing blog or membership site, then you could show Yelp reviews for different local businesses on your website.

To add reviews to your website, you’ll need to create a Yelp API key. Simply go to the Yelp Developers page and type in your email address.

The Yelp Developers website

Then, click on the ‘Send Login Link’ button.

Note: If you don’t already have an account, then go to the Yelp signup page and follow the onscreen instructions to register.

After a few moments, Yelp will send a one-time login link to your email address. Simply open the email and use the ‘Click to Log in’ button.

Logging into the Yelp Developers website

This takes you to the Yelp Developer Portal.

In the toolbar, click on Manage API Access.

Getting access to the Yelp Developers website

On this screen, type a name for your Yelp app into the ‘App Name’ field. This is just for your reference so you can use anything you want.

After that, open the ‘Industry’ dropdown and choose the industry that best reflects your website or business.

Creating a Yelp app in the Developers console

After that, type in your email address and add a description.

With that done, read the terms and conditions. If you’re happy to go ahead, then check the terms and conditions box, decide whether you want to get email updates from Yelp, and pass the captcha.

Finally, click on the ‘Create New App’ button.

Creating a Yelp add in the Developers console

After a few moments, you’ll see the following message ‘Great, your app has been created! Check your App ID and API Key below.’

You’ll need to add this information to your WordPress website.

How to get a Yelp API key

Simply go to Reviews Feed » Settings in the WordPress dashboard.

Then, scroll to Manage API Keys and click on the small pencil icon next to ‘Yelp.’

How to add a Yelp API key to WordPress

In the popup, add your Yelp API key.

Then, click on the ‘Add’ button.

How to add a Yelp API key to WordPress

With that setup out of the way, you’re ready to add Yelp reviews to your website.

Simply go to Reviews Feed » All Feeds. Then, click on the ‘Add New’ button.

How to show Yelp reviews on your WordPress website

On the next screen, click on ‘Add New’ again.

In the popup that appears, select ‘Yelp’ and then click on the ‘Next’ button.

How to show Yelp reviews on your WordPress blog or online store

You can now add the URL of the Yelp page that you want to use. This can be a page that you own or any public third-party page.

After that, click on ‘Finish’.

Add a Yelp page to your WooCommerce store or WordPress website

Smash Balloon will now show this Yelp page as a possible source.

To go ahead and create the feed, simply check the box next to the Yelp page and then click on ‘Next.’

Creating a Yelp review feed in WordPress

You can now choose a template to use for the review feed, such as a showcase carousel, grid carousel, or even a single review template.

After choosing a design, click on the ‘Next’ button.

Choosing a Smash Balloon template for your Yelp reviews

Smash Balloon will now show the Yelp review feed in its editor, ready for you to fine-tune.

For instructions on how to customize the feed and then add it to your site, skip to the end of this guide.

Method 2. How to Show Google Reviews in WordPress

Google Reviews is another place where customers can review your business online. Once again, positive reviews are important for building trust and getting conversions, but these reviews can also affect where your site appears in the search results.

Lots of positive Google reviews and high rankings may improve your business’s search ranking, especially in local search results.

Google also shows your reviews on relevant search engine result pages.

Google Reviews, in the Google search engine results

By adding these reviews to your website, you can encourage people to visit your Google listing and leave you a positive review.

This may improve your WordPress SEO and the overall star rating that appears in relevant search engine results.

With that being said, let’s see how you can add Google reviews to your WordPress website.

An example of Google reviews, added to WordPress using Smash Balloon

To start, you’ll need to create a Google API key, so head over to the Google Console and sign in using your Google account.

Once you’re logged into the console, click on ‘Google Home.’

The Google Cloud Console

If you’re logging into the Google Console for the first time then you’ll need to accept the terms and conditions.

With that done, click on ‘New Project.’

Creating a new project in the Google Cloud Console

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

Once you’ve done that, click on the ‘Create’ button.

Creating a new project in the Google Cloud console

After that, click on the lined icon in the upper-left corner to open the menu.

In the menu, select ‘APIs and services’ and ‘Credentials.’

How to create a Google API key in the Cloud Console

You will now see all your Google projects.

Simply find the project we just created and give it a click.

Creating Google credentials in the Cloud console

In the search field, start typing ‘Places API.’

When the right API appears, give it a click.

Enabling the Google Places API

This takes you to a screen where you can activate the key for making Places API requests.

To do this, simply click on the ‘Enable’ button.

Activating the Google Places API

With that done, press the backwards arrow to return to the main Google Cloud Console dashboard. Here, click on ‘Create Credentials.’

Go ahead and select ‘API key’ from the dropdown menu.

Creating an API key in the Google Cloud Console

After a few moments, you’ll see an ‘API key created’ popup.

You’ll need to add this information to your WordPress blog or website, so make a note of it.

An example of a Google API key, created in the Cloud Console

By default, all of Google’s API keys are unrestricted. To stop other people from using the API key, you’ll need to restrict it by clicking the ‘Edit API Key’ link inside the popup.

This opens a screen showing all your Google API keys. Simply find the key you just created, and give it a click.

Editing a Google API key

Note: If you closed the popup by accident, then don’t worry. You can reach the same screen by selecting ‘Credentials’ in the left-hand menu.

Under ‘Application restrictions,’ click on ‘HTTP referrers (websites).’

Restricting access to your Google API key

Under ‘Website Restrictions,’ click on ‘Add.’

You can now type in the address of your WooCommerce store or WordPress website, and then click on ‘Done.’

How to protect your Google API key

To make sure Smash Balloon can access the Places API, you’ll also need to type in www.googleapis.com and click on ‘Done.’

Under ‘API restrictions,’ select the button next to ‘Restrict key.’

Adding restrictions to a Google API key

With that done, click on the ‘Select APIs’ dropdown menu and check the box next to ‘Google Places API.’

Now we’re ready to click on ‘OK.’

Creating a restricted Google API key

The next step is adding the API key to your site. In the WordPress dashboard, go to Reviews Feed » Settings.

Under ‘Manage API Keys,’ click on the pencil icon next to ‘Google.’

Adding a Google API key to your WordPress website

In the popup, add your Google API key.

After that, click on the ‘Add’ button.

How to add a Google API key to your WordPress website

Now you’ve added an API key, you’re ready to create a feed showing all your Google Reviews.

To do this, go to Reviews Feed » All Feeds, and click on the ‘Add New’ button.

How to add Google reviews to your WordPress website

On the next screen, click on ‘Add New.’

In the popup that appears, click on ‘Google’ and then select ‘Next.’

How to create a Google reviews feed for a WooCommerce site or online store

Now you’ll need to enter the Place ID of the cafe, restaurant, or other venue that you want to use in your feed.

To get the ID, go to Google’s Place ID page and scroll to ‘Find the ID of a particular place.’

How to find the place ID for a business or location

In the Google Maps search bar, start typing the address or name of the place that you want to feature. When the right place appears, give it a click.

Google will now show the place ID in a small popup.

Getting a Google place ID

Go ahead and copy the place ID.

Now, switch back to the WordPress dashboard and paste the ID into the ‘Enter Place ID’ field.

How to add a place ID to your WordPress site

With that done, click on ‘Finish.’

To go ahead and create the feed, you need to check the box next to the Google place you just added, and then click on ‘Next.’

Choosing a Google page as a review source

You can now choose the template you want to use for the review feed, and click on ‘Next.’

Smash Balloon will now create a feed showing all your Google reviews.

A Google review feed, created using Smash Balloon

Do you want to change how the feed looks? Skip to the end of this post for a detailed step-step guide on how to fine-tune the Google Reviews feed, and then add it to your website.

Method 3. How to Show Facebook Reviews in WordPress

Many businesses, websites, and online stores use Facebook to connect with their audience. Facebook also has its own built-in review system, so you may want to add these reviews to your website.

Unlike Yelp and Google, your Facebook page belongs to you, so this is also a way to promote your profile and get more social media followers.

How to show Facebook reviews on a WordPress website

To create a Facebook review feed, go to Reviews Feed » All Feeds.

Then, click on the ‘Add New’ button.

How to create a Facebook review feed in WordPress

On the next screen, click on ‘Add New’ again.

In the popup that appears, click on ‘Facebook’ and then select ‘Connect with Facebook.’

Selecting a source for your Facebook reviews

On the next screen, select the radio button next to ‘Page.’

Once you’re done with that, click on ‘Connect to Facebook.’

Connecting Smash Balloon's review plugin to WordPress

This opens a popup where you can log into your Facebook account and choose the pages where you’ll get the reviews from.

After that, we’re ready to click on ‘Next.’

Connecting the Smash Balloon review plugin to WordPress

Facebook will now show all the information that Smash Balloon will have access to and the actions it can perform.

To restrict Smash Balloon’s access to your Facebook page, just click any of the switches to turn it from ‘Yes’ to ‘No.’ However, be aware that this can affect the content that appears on your website.

With that in mind, it’s a good idea to leave all the switches enabled.

Giving the Reviews Feed plugin access to your Facebook page

When you’re happy with how the Facebook permissions are set up, click on ‘Done.’

After a few moments, you should see a message confirming that you’ve connected your WordPress website and your Facebook page.

That done, click on the ‘OK’ button.

Successfully connecting Reviews Feed and Smash Balloon

Smash Balloon will automatically take you back to the WordPress dashboard, where you’ll see the Facebook page you just connected to your website.

Simply select the checkbox next to the Facebook page and then click on the ‘Next’ button.

How to show Facebook reviews on your WooCommerce store or WordPress website

You can now choose the template you want to use for the Facebook reviews feed.

After making the decision, click on ‘Next.’

Choosing a template for the Facebook feed review

Smash Balloon will now create a feed showing all your Facebook reviews.

Customizing Your Google, Facebook, or Yelp Review Feed

Smash Balloon automatically copies your WordPress theme so any reviews feed you create will fit perfectly with your site’s design. However, Smash Balloon also has an advanced feed editor so you can fine-tune every part of the feed.

No matter whether you create a feed using Google, Facebook, or Yelp, Smash Balloon will open its feed editor automatically.

The Smash Ballon review editor

Note: If you accidentally closed the editor then don’t panic. Simply go to Reviews Feed » All Feeds in the WordPress dashboard, and then click on the ‘Edit’ icon next to the feed.

Smash Balloon shows a live preview of your review feed to the right. On the left is a menu that shows the different settings that you can use to change how the feed looks.

To see what changes you can make, start by clicking on ‘Layout’ in the left-hand menu. Here, you can choose from a Grid, Masonry, or Carousel layout.

As you click on the different layouts, the live preview will automatically update to show the new layout. This makes it easy to try different layouts and find the one you prefer.

Changing the layout of a review feed

You can also change the spacing, how many reviews you include in the feed, and the number of characters WordPress shows from each review.

As you make changes, remember that the feed may look different on smartphones and tablets, compared to desktop computers.

With that being said, it’s a good idea to test the mobile version of your feed using the row of buttons in the right-hand corner. In this way, you can create a review feed that looks just as good on smartphones and tablets, as it does on desktop computers.

Previewing the review feed on smartphones, tablets, and desktop computers

Finally, if you select the Carousel layout then you can change how the reviews scroll using the ‘Pagination’ settings.

For example, you can enable autoplay so the reviews scroll automatically or increase the interval so visitors have more time to read each review.

Showing reviews in a carousel layout

When you’re happy with these changes, click on the small arrow next to ‘Customize.’

This takes you back to the main Smash Balloon review feed editor.

Customizing the review feed using Smash Balloon

The next setting you can explore is ‘Header,’ which controls the text that appears at the top of your feed.

By default, Smash Balloon shows a ‘Review’ headline, your average star rating, and a ‘Write a review’ button.

Customizing the review feed header

This header helps visitors understand the content, while also encouraging them to leave their own review. However, if you prefer then you can remove the header using the ‘Enable’ toggle.

If you do show the header, then you can add or remove content using the Heading, Button, and Average Review Rating checkboxes.

Removing content from a Google, Facebook, or Yelp feed

To change the padding and margins, simply use the settings under ‘Element Header Spacing.’

If you want to change any of the text that appears in the header, then simply click on either Heading, Button, or Average Review Rating. This takes you to an area where you can change the text color, size, and more.

You can also replace the standard text with your own custom messaging by typing into the ‘Content’ field.

Adding a custom header to a Yelp, Facebook or Google review feed

When you’re ready to return to the main editor screen, just click on the ‘Customize’ link at the top of the left-hand menu.

The next setting you can look at is ‘Reviews,’ so give this option a click. Here, you can choose between ‘Post Style’ and ‘Edit Individual Elements.’

Customizing a Facebook, Yelp, or Google review feed

If you select ‘Post Style,’ then you can change how the individual reviews look inside the feed. For example, you can switch to a boxed layout, add a shadow, and change the corner radius to create curved edges.

As you make changes, the preview updates automatically so you can try different settings to see what looks the best on your website.

Adding a boxed layout style to a review feed in WordPress

If you choose ‘Edit Individual Elements,’ then you’ll see all the different content that Reviews Feed Pro includes in each review such as rating, author and date, and the review text.

To remove a piece of content, just click to uncheck its box.

Customizing the content in a review feed

You can also customize how each type of content looks by clicking on it.

For example, in the following image, we’ve changed the color and size of the review content, known as the ‘Review Paragraph.’

Changing the text style in a review feed

When you’re happy with how the review feed looks, click on ‘Customize’ to return to the main Smash Balloon editor.

You can now move to the next settings screen by selecting ‘Load More Button.’

Customizing the 'Load More' button in a WordPress review feed

The ‘Load More’ button allows visitors to scroll through more reviews, so the plugin adds it by default. Since it’s such an important button, you may want to help it stand out by changing the background color, hover state, label, margins, and more.

You can also replace the default ‘Load More’ text with your own messaging by typing into the ‘Text’ field.

A custom Load More button

If you prefer, then you can remove the button completely by clicking the ‘Enable’ toggle.

When you’re happy with how the review feed looks, don’t forget to click on ‘Save.’ With that out of the way, you’re ready to add Google, Facebook, or Yelp reviews to your site.

How to Add Reviews on Your WordPress Website

Now you can add the review feed to your site using a block, widget, or shortcode.

If you’ve created more than one feed using Reviews Feed Pro, then you’ll need to know the feed’s shortcode if you’re going to use a widget or block.

To get this information, go to Reviews Feed » All Feeds and then look at the value under ‘Shortcode.’ You’ll need to add this code to the block or widget, so make a note of it.

In the following image, we’ll need to use [reviews-feed feed=2]

Adding a review feed to WordPress using shortcode

If you want to embed the feed in a page or post, then you can use the Reviews Feed block.

Just open the page or post where you want to show your Yelp, Google, or Facebook reviews. Then, click on the ‘+’ icon to add a new block and start typing ‘Reviews Feed.’

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

Adding a Reviews Feed block to your WordPress website

The block will show one of your review feeds by default. If you want to show a different feed, then find ‘Shortcode Settings’ in the right-hand menu.

Here, simply add the shortcode you got earlier, and then click on ‘Apply Changes.’

How to add Yelp, Facebook, and Google reviews to your website using shortcode

If you’re happy with how the review feed looks, then you can go ahead and publish or update the page.

Another option is to add the Reviews Feed widget to your website. This is a great way to show positive customer reviews on every page of your site. For example, you might add the widget to the sidebar or WordPress footer.

To add the Reviews Feed widget to your site, head over to Appearance » Widgets. You can then click on the blue ‘+’ icon towards the top of the screen.

How to add the reviews feed widget to your WordPress theme

In the panel that appears, type in ‘Reviews Feed’ to find the right widget.

Then, simply drag the widget onto the area where you want to show the reviews, such as the sidebar or similar section.

How to add reviews a widget-ready area

The widget will automatically show one of the feeds you created using the Reviews Feed plugin. If this isn’t the feed you want to display, then type the feed’s shortcode into the ‘Shortcode Settings’ box.

After that, click on ‘Apply Changes.’

You can now make the widget live by clicking on the ‘Update’ button. For more information, please see our step-by-step guide on how to add and use widgets in WordPress.

Another option is embedding the Google, Facebook, or Yelp reviews on any page, post, or widget-ready area using the shortcode.

Simply go to Reviews Feed » All Feeds and copy the code in the ‘Shortcode’ column. You can now add this code to any Shortcode block.

For help placing the shortcode, please see our guide on how to add a shortcode.

Are you using a block-enabled theme? Then you can use the full-site editor to add the Reviews Feed block anywhere on your website.

In the WordPress dashboard, go to Appearance » Editor.

Adding reviews to your website using the full-site editor (FSE)

By default, the full-site editor will show the theme’s home template. If you want to add the Google, Facebook, or Yelp feed to a different template, then click on the arrow next to ‘Home.’

You can then choose any design from the dropdown, such as the footer template.

How to add Facebook, Yelp, or Google reviews to a FSE template

After choosing a template, simply hover your mouse over the area where you want to show the reviews.

Then, click on the ‘+’ button.

How to add a review block using the WordPress full-site editor

Once you’ve done that, type in ‘Reviews Feed.’

When the right block appears, click to add it to the template.

Adding reviews to your website using the full-site editor (FSE)

As always, Reviews Feed will show a feed by default. You can change this feed by adding a shortcode following the same process described above.

We hope this article helped you learn how to show Google, Facebook, and Yelp reviews in WordPress. You can also go through our guide on the best email marketing services for small businesses and how to create an email newsletter.

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

The post How to Show Google, Facebook, and Yelp Reviews in WordPress first appeared on WPBeginner.


February 10, 2023 at 12:09AM

How to Easily Add Box Shadow in WordPress (4 Ways)

Recently one of our readers asked if there is an easy way to add box shadows in WordPress?

Shadows can make your most important content stand out and grab your visitors’ attention. They can also help flat website designs appear more engaging and interesting.

In this article, we will show you how to easily add box shadows in WordPress, step by step.

How to easily add box shadow in WordPress

Why Add Box Shadows in WordPress?

A box shadow, sometimes also known as a drop shadow, is a visual effect that makes it look like an onscreen object is casting a shadow.

We tend to pay more attention to objects that appear closer to us. That’s why many website owners add box shadows to their most important content to make it look like it’s hovering above the page.

For example, if you add a big shadow to a call to action button, then it will look physically closer to the visitor. This will draw the person’s attention toward this important button.

With that said, let’s see how you can add box shadows to your WordPress blog or website. Simply use the quick links below to jump straight to the method you want to use.

When adding box shadow, the best practice is to only add it on your most important website elements. If you add a unique shadow effect to each WordPress block, then it can make your site look messy and confusing.

It’s also important that you keep your box shadows consistent across the site. The best way to do this is by defining the style in CSS using WPCode.

WPCode is the best code snippets plugin used by over 1 million WordPress websites. It makes it easy to add custom code in WordPress without having to edit the functions.php file.

With WPCode, even beginners can edit their website’s code without risking mistakes and typos that can cause many common WordPress errors.

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

Upon activation, head over to Code Snippets » Add Snippet.

How to add box shadows using WPCode

Here, simply hover your mouse over ‘Add Your Custom Code.’

When it appears, click on ‘Use snippet.’

Adding drop shadows to WordPress using WPCode

To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.

After that, open the ‘Code Type’ dropdown and select ‘CSS Snippet.’

Adding a CSS snippet to WordPress

In the code editor, add the following code snippet:

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

In the above snippet, you may need to replace the px values depending on the kind of shadow you want to create.

To help you out, here’s what the different px values mean, going from left-to-right:

  • Horizontal offset. When you set a positive value, the shadow gets pushed to the left. If you type in a negative value like -5px, then the shadow will be pushed to the right. If you don’t want to add a horizontal offset, then you can use 0px instead.
  • Vertical offset. If you use a positive value, then the shadow will be pushed downwards. If you type in a negative value then the shadow will be pushed upwards. If you don’t want to offset the shadow vertically, then just type in 0px.
  • Blur radius. This blurs the shadow so that it doesn’t have any harsh edges. The higher the value, the greater the blur effect. If you prefer to use sharp edges, then type in 0px.
  • Spread radius. The higher the value, the greater the shadow’s spread. This value is optional, so skip this one if you don’t want to show a spread.
  • Color. Although grey is the most common color for shadows, you can use any color you want by typing in a hex code. If you’re not sure what code to use, then you can explore different colors using a resource like HTML Color Codes.
Adding shadows to WordPress using custom CSS

When you’re happy with the snippet, scroll to the ‘Insertion’ section. WPCode can add your code to different locations, such as after every post, frontend only, or admin only.

We want to use the custom CSS code across our entire WordPress website, so click on ‘Auto Insert’ if it isn’t already selected. Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’

How to auto-insert custom code using WPCode

After that, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle, so it changes to ‘Active.’

Finally, click on ‘Save Snippet’ to make the CSS snippet live.

Publishing a custom CSS code snipppet

Now, you can add the custom CSS class to any block.

In the WordPress content editor, simply select the block where you want to add a box shadow. Then, in the right-hand menu click to expand the ‘Advanced’ section.

Adding a drop shadow to WordPress using a CSS snippet

Here, you’ll see fields where you can add different classes.

In ‘Additional CSS Class(es),’ type in shadow-effect.

WordPress' advanced code settings

When you’re ready to publish the box shadow, just click on the ‘Publish’ or ‘Update’ button.

Now if you visit your website, you’ll see the box shadow live.

Method 2. Add a Box Shadow Using a Free Plugin (Quick and Easy)

If you’re not comfortable writing code, then you might prefer to create shadows using Drop Shadow Box. This free plugin allows you to add box shadows to any block using the built-in WordPress page and post editor.

A box shadow, created using the Drop Shadow WordPress plugin

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.

There are no settings to configure, so you can start using this plugin straight away.

To add a drop shadow, simply click on the ‘+’ icon and start typing in ‘Drop Shadow Box.’ When the right block appears, give it a click to add it to the page or post.

Adding a Drop Shadow Block in the WordPress page or post editor

This adds the drop shadow as an empty box, so the next step is adding some content.

To do this, go ahead and click on the ‘+’ inside the Drop Shadow Box block.

Adding a shadow block in the WordPress page and post editor

Then, simply add the block you want to use and configure it as normal.

For example, in the following image we’ve added an Image block and selected a picture from the WordPress media library.

An image, with a block shadow

With that done, click to select the Drop Shadow Box block. In the right-hand menu, you’ll see all the settings you can use to style this block.

WordPress sets the shadow’s width automatically but you can change this by opening the ‘Width’ dropdown and then choosing either ‘Pixels’ or ‘%.’

You can then resize it using the settings that appear.

Changing the width of a drop shadow using a free WordPress plugin

The Drop Box Shadow plugin comes with a few different effects such as curved edges and an eye-catching ‘Perspective’ effect.

To preview the different effects, simply open the ‘Effect’ dropdown and choose from the list. The preview will update automatically so you can try different styles to see what you prefer.

Adding different box shadow effects to WordPress

You can also change whether the plugin shows the shadow inside the box, outside the box, or both using the ‘Inside Shadow’ and ‘Outside Shadow’ toggles.

After that, you can change the color of the box and border using the settings under the ‘Colors’ header.

Just be aware that ‘Background’ refers to the inside of the Drop Shadow Box, while ‘Border’ appears outside of the block.

How to add a colored shadow effect to WordPress

If you want to create a softer, curved shadow box then you can enable the ‘Rounded corners’ toggle. Finally, you can change the alignment and padding, similar to how you customize other blocks in WordPress.

To create more box shadows, just follow the same process described above.

When you’re happy with how the page looks, simply click on ‘Update’ or ‘Publish’ to make all your new box shadows live.

Method 3. Add a Box Shadow Using a Page Builder (Advanced)

If you want to add box shadows to landing pages, custom homepages, or any part of your WordPress theme, then we recommend using a page builder plugin.

SeedProd is the best drag and drop WordPress page builder. It allows you to design custom landing pages and even create a custom WordPress theme without having to write a single line of code.

It also lets you add box shadows to any block using its advanced drag-and-drop editor.

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

Note: There’s also a premium version of SeedProd that comes with more professionally-designed templates, advanced features, and WooCommerce integration. However, we’ll be using the free version as it has everything you need to add box shadows in WordPress.

After activating the plugin, SeedProd will ask for your license key.

Adding the SeedProd license key to WordPress

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

After entering your key, go to SeedProd » Landing Pages in your WordPress dashboard.

SeedProd's professionally-designed templates

SeedProd comes with 150 professionally designed templates that are grouped into categories. Along the top you’ll see categories that let you create beautiful coming soon pages, activate maintenance mode, create a custom login page for WordPress, and more.

All of SeedProd’s templates are easy to customize, so you can use any design you want.

When you find a template that you like, simply hover your mouse over it and click on the checkmark icon.

Selecting a professionally-designed SeedProd page layout

You can now type in a name for your landing page into the ‘Page Name’ field. SeedProd will automatically create a ‘Page URL’ using the page name.

It’s smart to include relevant keywords in your URL wherever possible, as this can help search engines understand what the page is about. This will often improve your WordPress SEO.

To change the page’s automatically-generated URL, simply type into the ‘Page URL’ field.

Adding an SEO-friendly page title to a SeedProd design

When you’re happy with the information you’ve typed in, click on ‘Save and Start Editing the Page.’ This will load the SeedProd page builder interface.

This simple drag-and-drop builder shows a live preview of your page design to the right. On the left is a menu showing all the different blocks and sections you can add to the page.

The SeedProd page editor

When you find a block that you want to add, simply drag and drop it onto your template.

To customize a block, go ahead and click to select that block in the SeedProd editor. The left-hand menu will now update to show all the settings you can use to customize the block.

For example, if you click on a Headline block then you can type in your own text, or change the text color and font size.

Customizing a headline block in SeedProd

As you’re building the page, you can move blocks around your layout by dragging and dropping them. For more detailed instructions, please see our guide on how to create a landing page with WordPress.

To create a box shadow, click to select any block in the SeedProd page editor. The settings in the left-hand menu may vary between blocks, but you’ll typically need to click on an ‘Advanced’ tab.

Adding a box shadow in WordPress using SeedProd

Here, look for a ‘Shadow’ dropdown menu under the ‘Styles’ section. Simply open this dropdown and choose a shadow style such as Hairline, Medium, or 2X Large.

The preview will update automatically, so you can try different styles to see what looks the best on your page design.

How to easily add a box shadow in WordPress using a page builder

If you don’t want to use any of the ready-made styles, then click on ‘Custom.’

This adds some new settings where you can change the color, blur, spread, and position of the custom shadow.

Adding drop shadows to WordPress using SeedProd

That done, you can continue working on the page by adding more blocks and box shadows.

When you’re happy with how the page looks, click the ‘Save’ button and then choose ‘Publish’ to make it live.

Publishing a page with block shadows using SeedProd

Method 4. How to Add a Box Shadow Using CSS Hero (Premium Plugin)

If you’re not comfortable working with code but still want to create advanced box shadows, then you can try CSS Hero. This premium plugin allows you to fine-tune every part of your WordPress theme without having to write a single line of code.

CSS Hero allows you to create a unique shadow for each block, so it’s also a great choice if you want to create lots of different shadow effects.

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

Upon activation, you’ll see a ‘Proceed to Product Activation’ button at the top of the screen. Go ahead and click on this button.

Activating the CSS Hero WordPress plugin

This will take you to the CSS Hero website where you can log into your account and get a license key. Simply follow the onscreen instructions, and you’ll be redirected back to your site in a few clicks.

Next, click the ‘Customize with CSS Hero’ text in the WordPress admin toolbar.

Customizing a WordPress theme using CSS Hero

This will open the CSS Hero editor.

By default, clicking on any piece of content will open a panel with all the settings you can use to customize that content.

The CSS Hero user-friendly page editor

This is great if you want to add a box shadow to your website’s homepage. However, if you want to customize any other page then you’ll need to switch from ‘Select’ mode to ‘Navigate’ mode, as this allows you to interact with menus, links, and other content as normal.

To do this, click on the ‘Select / Navigate’ toggle in the toolbar so that it shows ‘Navigate.’

The CSS Hero WordPress plugin

You can now navigate to the page or post where you want to add the shadow.

As soon as you reach that page, go ahead and click on the ‘Select / Navigate’ toggle again so that it shows ‘Select.’

Switching between Select and Navigation mode using CSS Hero

With that done, click on the paragraph, image, button, or any other content where you want to add a box shadow.

In the left-hand panel, click on ‘Extra.’

Creating a drop shadow using CSS Hero

You can now go ahead and click on ‘Make Shadow,’ which shows all the settings you can use to create a box shadow.

To start, you can change whether the shadow appears inside or outside the block using the ‘Shadow Position’ settings.

Changing the position of a shadow box using CSS Hero

After making this decision, you can fine-tune the shadow’s orientation using the small dot in the ‘Orientation’ box.

Simply drag and drop the dot into a new position to see it move in the live preview.

Customizing a drop shadow in WordPress

When you’re happy with the shadow’s position, you can change its color, blur, and spread.

CSS Hero will show these changes immediately, so you can try different settings to see what looks the best.

Creating a custom box shadow using a drag and drop editor

To add a box shadow to other blocks, just follow the same process described above.

When you’re happy with how the page looks, click on ‘Save & Publish’ to make it live.

How to publish a CSS shadow to WordPress

We hope this tutorial helped you learn how to add a box shadow in WordPress. You may also want to learn how to create a table of content in WordPress, or check out our list of the best WordPress popup plugins.

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

The post How to Easily Add Box Shadow in WordPress (4 Ways) first appeared on WPBeginner.


February 09, 2023 at 03:06PM