WordPress Sliders & Carousels - GreenGeeks https://www.greengeeks.com/tutorials/category/wordpress-sliders-carousels/ How-to Website Tutorials Mon, 05 Dec 2022 21:36:21 +0000 en-US hourly 1 https://wordpress.org/?v=6.2.2 How to Set Up a Vertical Image Slider in WordPress https://www.greengeeks.com/tutorials/vertical-image-slider-wordpress/ https://www.greengeeks.com/tutorials/vertical-image-slider-wordpress/#respond Fri, 02 Jul 2021 14:00:29 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=43276 Most sliders in WordPress deal with horizontal images, but did you know vertical ones exist? That’s right, with the WordPress Vertical Image Slider plugin, you …

How to Set Up a Vertical Image Slider in WordPress Read More »

The post How to Set Up a Vertical Image Slider in WordPress appeared first on GreenGeeks.

]]>
Most sliders in WordPress deal with horizontal images, but did you know vertical ones exist? That’s right, with the WordPress Vertical Image Slider plugin, you can easily add them to your website. And it’s really easy to use!

Just pick out your images, customize the slider, and place it with a shortcode. And thanks to this, you can even place it into your sidebar via a text widget. Just remember to size it appropriately if you do so.

Today, I will demonstrate how to use the WordPress Vertical Image Slider plugin.

Why Add A Vertical Slideshow in WordPress

A vertical slider offers users unique page layout opportunities, with the biggest being the potential addition to a sidebar area. Sliders, horizontal or vertical, are a great way to share multiple images in a small area and have multiple uses.

One of the most common places you see both types of sliders is on product pages. It’s quite common to include multiple images of a product on a sales page, and sliders are a great way to show off as many as possible.

Another common use is for before and after comparisons. A vertical slider might be a better option for certain images than a horizontal slider, it really depends on the orientation of the images.

A key advantage of the vertical slider is the ability to have text appear on the side, which makes for a more natural reading experience. With horizontal images, readers have to scroll past the image to continue reading, while vertical allows them to read and view the image at once.

How to Add A Vertical Image Slider In WordPress

Step 1: Install WordPress Vertical Image Slider

The WordPress Vertical Image Slider plugin is simple to use, full of customization options, and easy to implement thanks to shortcodes. The size of the slider is fully customizable, thus it can fit in on every website. And thanks to its responsive design, it works on any device.

There is also a Pro version that is worth the upgrade if you want to use several sliders and allows you to upload multiple images at once.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for WordPress Vertical Image Slider in the available search box. This will pull up additional plugins that you may find helpful.

Vertical Image Slider

Scroll down until you find the WordPress Vertical Image Slider plugin and click on the “Install Now” button and activate it for use.

Install Now

Step 2: Manage Slider Settings

You can either start uploading images or configure the setting next, but let’s start with the settings.

On the left-hand admin panel, click on Vertical Thumbnail Slider and select the Slider Setting option.

Slider Settings

The first option is if you want your slider to be responsive. While there are a handful of uses when you would not want a responsive slider, most website owners should enable this feature.

Responsive Slider

Next, you can choose if you want the image to have a link. That way every time a visitor clicks on it, they go to a specific page. This can be very handy if you’re using the slider on a home page to show off products or special promotions.

Link Images

Below this, you can choose how the scroll will behave. The plugin provides three options, automatically, use the left and right arrows, or scroll automatically with the arrow. And under that, you can determine how fast the scroll speed is.

If you’re not sure what to pick, don’t worry, you can change this later on.

Auto Scroll

The rest of the settings deal with the appearance of your slider and include if you want the images rounded, the background color of the slider, how many images are visible at one time, how many items scroll at a time, if the slider should pause if a visitor hovers over it, and the image height and width.

Once all of the settings are in place, click on the “Save Changes” button.

Save Changes

Note: If you plan to use the vertical slider in a text widget, make sure it is properly sized for the sidebar. Each theme has unique dimensions, so refer to your theme for specific measurements.

Step 3: Upload Images

Now it’s time to start adding images to the plugin. While the plugin refers to it as uploading, you can actually just pick the images from your media library as well.

First, click on the Manage Images option.

Manage Images

Click on the “Add New” button.

Add New Button

Click on the “Click Here to Upload” link. This will open up the media library. You can select images that are already in your library or upload a new one.

Upload Link

Next, you can add a title to the image, which is just to help you find it. And if you selected to add a link to the image during the settings process, you can enter that information in the appropriate text box.

Click on the “Save Changes” button when you are done.

Save

You can view all of the images you add and edit or delete them at any time. This is useful if you need to update a link. Repeat this process to add all of the images you plan to use within the plugin.

Step 4: Preview and Place the Slider

With the images added, you can actually preview the slider by clicking on the “Preview Slider” option. That said, you cannot view it on your website until you add it via shortcode or PHP.

Preview Slider

Below the preview, you can find the shortcode and the PHP code to add it in WordPress.

The PHP code will give you more control over the slider placement, but the shortcode is much easier. In fact, this is how you can add text to the side of the slider, however, where you place it is theme-dependent. Hence, you may need to contact the theme developer for more information.

You can add the shortcode to any post, page, or text widget. Adding it into a text widget basically creates a vertical WordPress image slider widget, which can be very handy. And just as a reminder, make sure you properly size the slider for widget use.

Once, the shortcode is in place, you can now view it on your website.

View Slider

Congratulations on setting up the WordPress Verticle Image Slider plugin. Remember that you can customize the settings at any point to further tweak it. You can also change what images are present at any point.

To have access to multiple sliders, you will need to upgrade to the Pro version.

Save Space With A Vertical Slider Today

Vertical sliders are a great way to save space and can help your website use more creative page layouts. Some themes might have extra widget space to help you take advantage of shortcodes. For instance, ColorMag has a tone of extra widget space specific to the homepage.

Thus, you can really help your homepage stand out from the competition.

However, vertical sliders get the most use in the sidebar. They are a great way to promote events, new products, and just about anything related to your business. And as part of the sidebar, they are visible on every page.

What image slider plugin do you use in WordPress? Do you prefer vertical or horizontal image sliders?

The post How to Set Up a Vertical Image Slider in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/vertical-image-slider-wordpress/feed/ 0
How to Use Transition Slider in WordPress to Impress Visitors https://www.greengeeks.com/tutorials/transition-slider-wordpress/ https://www.greengeeks.com/tutorials/transition-slider-wordpress/#respond Fri, 09 Apr 2021 16:36:42 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=40593 Sliders are a great way to provide information to your customers, while at the same time giving them something fun and interesting to look at …

How to Use Transition Slider in WordPress to Impress Visitors Read More »

The post How to Use Transition Slider in WordPress to Impress Visitors appeared first on GreenGeeks.

]]>
Sliders are a great way to provide information to your customers, while at the same time giving them something fun and interesting to look at on your website. Slider transition can be tricky though if you don’t have the right tool. Today, I am going to show you how to create a smooth transition slider using a plugin.

There are quite a few really good slider plugins that are available for use. That being said, there are some bad ones as well. You want to make sure you have the right one running on your website because there is a lot to consider. 

You want to make sure it fits the screen properly for all transitions, looks correct on mobile devices, and operates properly on all browsers. 

What Are WordPress Sliders?

WordPress sliders are usually plugins that allow you to create slider animations on your website. Some function as simple tools, while others will give you a ton of features and options to build just about any type of slideshows and animations you can think of.

There is a raging debate on how slideshows and sliders affect SEO, page speed, and ranking of a website with Google. Some believe it does not make a difference, while others believe that slideshows on main pages, especially in the header area, conflict with SEO and hurt rankings in Google.

That issue is for another day and one you can look into and decide for yourself. With that being said, let’s take a look at the plugin we are going to use to create slider animations and see what all it has to offer.

Transition Slider

Transition Slider plugin

Transition Slider is a high-end image and video slider that will provide you with the ability to add flawless transitions and responsive animated layers to build sliders for any post or page on your website.

There is so much to like about the Transition Transition Slider plugin that it is hard to know where to start. For starters, the slideshow transitions you build will look perfect across all browsers, screen sizes, and devices. You will also be able to build any type of slider you want without ever having to touch any sort of code. 

If you can think of a slider type, then this plugin probably allows you to build it. You will be able to build responsive slideshows as well as image, video, gallery, and layer sliders. All sliders you build can have animated layers and effects that include choices like Slide, Fade, Zoom, Warp, Crossfade, Flash, Twirl, Roll, and Stretch.

The slider plugin is filled with a ton of features, options, and pre-built templates. Some of the main features include:

  • Transitions
  • Easy Integrations
  • Animated Layers
  • Slider Sizes
  • Live Preview
  • Mobile and Tablet Settings
  • Lightbox
  • iFrame
  • Slider Thumbnails
  • Text Templates
  • Google Font
  • Navigation
  • Pagination
  • Great UX
  • Fully Customizable
  • Draggable Slides
  • Lazy Loading
  • Parallax Effect
  • Infinite Looping

And that is just the start. There are simply too many features and tools to list here. Needless to say, if you are looking to create professional sliders with amazing transitions that look perfect everywhere, then the Slider Transition plugin is a must-see.

Let’s get it set up and create a slider together. 

Note: There is a pro version of this plugin available. It offers even more templates and other tools. If you feel this is something your site needs, then go ahead and take a look at it. The tutorial below is based on the free version of the plugin.

How to Create a Transition Slider for Your Website

Step 1: Install and Activate the Plugin 

In order to start creating slideshows and transitioning pictures on your site, you first need to install and activate the plugin. You can do this by going to the Plugins page in the WordPress admin dashboard.

INstall and activate transition slider

Simply use the available search field and search the plugin by name. Once you see it pop up, go ahead and install and activate it right from there.

Step 2: Click on Add New Slider 

The Transition Slider plugin does not have a settings page. All of the configurations and options are done on a per-slider basis. This means you build each one how you see fit.

So, after the plugin is installed and activated, click on Transition Slider > Add New Slider, located on the left side menu area of the dashboard.

Click on the ad new slider link

You can see this is now an available option because you have activated the plugin.

Step 3: Configure and Build Your Slider 

At this point, you will be on the main page. You will see a list of different options to fill out and configure. These include things like:

  • Slides
  • Layers
  • General Settings
  • Size
  • Video
  • Navigation
  • Pagination
  • Thumbnails.

Let’s go through a few of these together so you can see what you are dealing with.

Note: We are not going in the order of the tabs, we will be jumping around a little because the concept of filling out the info is the same.

Slides

Go ahead and add the media you want for your slider in this area.

Add Slides

General

Here is where you can enter all the general configurations for the slider. This will include things like the name, transition type, and initial slide. Simply configure this how you see fit.

General tab

Navigation

Create all your navigation settings in the tab. This will include colors, background, borders, and styles.

Navigation

Thumbnails

You can enable thumbnails in this tab and then configure them how you see fit for your website.

Thumbnails for transition slider

Lightbox

If you want to configure lightbox and create that for your slider, then this is the tab to do that in.

Lightbox tab

There are some other tabs to go through of course. Go through them all and configure them how you want. If you want autoplay enabled, visit that tab. If you would like to add videos, then go to the video tab.

Note: Your settings will automatically save while you are building the slider.

Step 4: Publish the Slider 

When you are done building the transition slider how you want it, then go ahead and head to the “Publish” tab that is available in the same area you are in.

Publish the slider with shortcode

You don’t actually publish the slider. You copy the shortcode that is given, and you can take that and paste it into any post, page, or widget area that you want.

That’s it! Once you paste that code where you want it, you can go view the live slider on your site and then make any adjustments you want from there.

Pre-Built Slider Templates

The free version of the Transition Slider plugin comes with quite a library of pre-built slider templates that you can use. To access these, click on the “Sliders” tab link that is located on the left side menu area of the dashboard.

Click on the sliders tab

From there, click on the yellow “Slider Templates” box that you see.

Clcik the yellow slider templates box

You will see a page pop up that is full of pre-built sliders to choose from. Feel free to import any of them that catch your eye to use on your website.

Pre built transition slider templates

Final Thoughts

Building sliders is easier than ever if you have a plugin like Transition Slider. You can now build as many as you want and place them throughout your site.

I hope this tutorial was able to show you how easy it really is to build and design WordPress sliders.

Have you ever used this plugin? What is another slider plugin that you prefer?

The post How to Use Transition Slider in WordPress to Impress Visitors appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/transition-slider-wordpress/feed/ 0
How to Show Team Showcase with Slider in WordPress https://www.greengeeks.com/tutorials/team-showcase-slider-wordpress/ https://www.greengeeks.com/tutorials/team-showcase-slider-wordpress/#respond Wed, 06 Jan 2021 18:49:58 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=39215 Are you looking for a way to show off your amazing employees to the world? If so, the Team Members with Slider plugin can help. …

How to Show Team Showcase with Slider in WordPress Read More »

The post How to Show Team Showcase with Slider in WordPress appeared first on GreenGeeks.

]]>
Are you looking for a way to show off your amazing employees to the world? If so, the Team Members with Slider plugin can help. It allows you to make your own supreme slider to create the perfect team showcase in WordPress.

This plugin is ideal for any website that wants to show off its staff members in a professional style. There are a variety of customization options, which means it will have no trouble fitting in on your website regardless of the theme you use.

Today, I will demonstrate how to build a team showcase in WordPress.

What Can I Use Team Showcase For?

One thing that every business has in common is the talented staff that keeps it running, and as a business owner, you can show the world what everyone does.

Showing off your staff, and putting faces in general, offer a variety of benefits according to studies.

For instance, showing a photo of an employee a customer is interacting with can help strengthen a relationship. Team photos help people associate the name with the face, and that is extremely valuable in our online world.

It’s also beneficial when a customer visits the office. They’ll know who to look for.

Showing staff photos also adds a sense of credibility. Anyone can build a website and claim to have a team standing by. But how many actually show off that team? Many larger companies tend to do this, especially when they offer customer support.

After all, customers do not want to talk to robots. They want humans.

Luckily, adding a team showcase is easy to do with a plugin.

How to Build A Team Showcase with Sliders

Step 1: Install Team Members with Slider

Team Members with Slider is a team showcase WordPress plugin and it is one of, if not the best plugin for building sliders that present your staff.

It allows you to enter the position, name, department, email, phone number, social links (LinkedIn, Facebook, Twitter, etc.), and other pieces of information into a stylized slider.

And it supports a live preview option, which makes getting it right that much easier.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for Team Members with Slider in the available search box. This will pull up additional plugins that you may find helpful.

Team Members with Slider

Scroll down until you find the Team Members with Slider plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

Step 2: Add Members

Building a team slider is pretty straight forward, with the first step being to add the team members.

Note: If you purchased the pro version, I would instead recommend creating categories first. They are treated as departments by the plugin.

On the left-hand admin panel, click on WPM Team and select the Add Members option.

Add Members

Here, you will see some example members. You can leave them alone for now, but I encourage you to delete them by pressing the red x icon on the right-hand side.

Note: These examples use some features only available in the Pro version of the plugin.

Click on the green “Add New” button.

Add New

This will pull up a small pop-up window. Here, you can enter the staff member’s full name, designation (position in the company), fill in additional profile details (a short bio), choose which social icons to add, image and if you have the pro version, create custom fields (email, phone number, etc.) and select a category (department).

Note: I recommend using a 300×300 photo.

Fill out all of the information and click on the “Save” button.

Save

Repeat these steps for all of your staff members. Make sure to use the same sized image for all photos.

Step 3: Pick a Template

Once you have your staff members added, it’s time to pick how they will be displayed as customers slide through the team. This is done by selecting a template. The plugin offers over 30 pre-built templates that you can choose from.

With so many available, you should have no problem choosing one that fits your design ideas.

The templates are broken up into 4 different options. These are labeled Template 01-10, Template 11-20, Template 21-30, and Template 31-40. Thus, you will have to do some searching.

Templates

Each template demonstrates an example of what it looks like in action. Simply go through all of the staff templates until you find one you like.

Note: Some of the images appeared broken while searching through the templates. The only solution I could find was going into the template and adding some members to check the live preview option. However, usually, at least one image was visible to me on every template.

Once you do, click on the green “Create Team” button.

Create Team

A small pop-up will appear asking you to enter the team name. Enter the name and click on the “Save” button.

Step 4: Edit the Template

You now need to go through the process of editing the template. The edits are very simple and only involve filling in a text box, editing the pixel size, picking an alignment, or choosing a color.

Note: There are a variety of customization options exclusive to the pro version.

You can preview any changes you make by looking at the Preview section at the bottom of the page.

Preview

This area is broken down into 8 tabs that include General, Name, Designation, Social Icon, Category Filter, Slider, Search, and Custom CSS. Most of these are very self-explanatory, but keep in mind that the Category Filter and Custom CSS tabs are exclusively for the Pro version.

On the right-hand side, you will find an option to add or remove members, but the rearrange option is locked behind the Pro version. To get around this, you need to remove and add members until they are in the correct order.

Thus, make sure you add them correctly the first time.

Once you are happy with the presentation, click on the “Save” button.

Save

Step 5: Display the Team Showcase

Finally, it is time to display your team showcase. To do so, you will need the shortcode of the template you just created. To find the shortcode, click on the All Team option.

The template shortcode will be visible, copy it.

Shortcode

At this point, you simply need to add the shortcode onto an existing page or post. Alternatively, you can create a new one for testing purposes.  Once the shortcode has been added, the team slider will appear on your website.

Congratulations on building a slider with the Team Members with Slider plugin.

Get Good Pictures

The purpose of building a team showcase is to show off your staff, thus you need to make sure the picture you have is of good quality. Make sure that the picture is not blurry, focused, and that the individual is dressed appropriately.

It should include a smile and match the tone of your website. You should also consider the background of the image. For example, if you have ever noticed the photos of lawyers from a law firm, they often include a background of legal books.

Again this is very specific to the industry you are in, but make sure the background is appropriate.

Why did you want to create a team showcase in WordPress? Have you noticed any benefits since adding one?

The post How to Show Team Showcase with Slider in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/team-showcase-slider-wordpress/feed/ 0
How to Add a WordPress Image Slider with Soliloquy https://www.greengeeks.com/tutorials/wordpress-image-slider-soliloquy/ https://www.greengeeks.com/tutorials/wordpress-image-slider-soliloquy/#respond Mon, 21 Dec 2020 18:03:31 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=39010 Image sliders are a big deal for WordPress. They give site developers and owners a great way to build visuals and implement transition effects across …

How to Add a WordPress Image Slider with Soliloquy Read More »

The post How to Add a WordPress Image Slider with Soliloquy appeared first on GreenGeeks.

]]>
Image sliders are a big deal for WordPress. They give site developers and owners a great way to build visuals and implement transition effects across a site. There are a lot of great image sliders available. One of the best ones you will find is called Soliloquy. 

In this tutorial, I am going to show you how you can use the Soliloquy slider plugin to build and place images anywhere you want on your WordPress website. With this kind of tool available, sliders and transition effects become much easier.

What is a WordPress Image Slider?

A WordPress image slider is a plugin that gives users the ability to design and create image sliders or carousels to use across their WordPress websites. These plugins add functionality to a site that you would otherwise need custom code to build.

There are a lot of different ones available for download. They range from basic layouts to full-blown image galleries with all sorts of functionality. Most of them allow you to create a free slideshow in WordPress. That being said, a majority of them also have paid versions of the plugin that you can get.

Let’s take a look at the Soliloquy WordPress plugin and see all that it has to offer.

Slider by Soliloquy

Slider by Soliloquy

Slider by Soliloquy is a top of the line, responsive WordPress slider plugin. Once installed, it allows you to easily create and design image layouts using the built-in Soliloquy slider tool.

This slider by Soliloquy for WordPress is powerful in a lot of different ways. One of the main features is the drag and drop functionality that is easy to use and powerful when displayed. Despite all the features that come with this plugin, it remains lightweight and won’t slow your site down. 

Not only will Soliloquy allow you to create image sliders in WordPress that are fully responsive and beautiful, but they also allow for video slider creation as well. They also claim to be the fastest plugin on the market when it comes to sliders.

Once installed, the slider plugin gives you a ton of functionality and features. Some of the main ones include:

  • Fully Responsive
  • SEO Friendly
  • Optimized for Speed
  • Theme Selections
  • WooCommerce Integrations
  • Featured Content
  • Lightbox Functionality
  • Carousel Ability
  • Dynamic Slides
  • Slides With thumbnails
  • Instagram Slides
  • PDF Slides
  • Video Slides
  • Custom HTML
  • Tons of Transition Effects
  • Drag and Drop Builder

Basically, the Soliloquy slider plugin gives users everything they need to build amazing image and video sliders to display on their website. Let’s take a look at how to add a slider to your site.

Note: There is a pro version of this plugin available. If you want to take a look at it and see if it is something you need, then feel free to do that. The tutorial below is based on the free version of the plugin, as it gives you all the tools you need to add a responsive slider to your WordPress website.

How to Add an Image Slider to Your Website

Step 1: Install and Activate the Plugin

In order to start adding dynamic sliders to your website, you first need to install and activate the Soliloquy slider plugin. You can do this by hopping over to the Plugin page in the WordPress admin dashboard.

Simply use the search field to search or the plan by name. When it pops up, install and activate it right from there.

INstall and activate Soliloquy

Step 2: Click on “Add New” in the Menu

At this point, you have Soliloquy installed and activated. There are no plugin settings to take care of. All of the functionality and configurations are handled when you add a new slider.

Click on Soliloquy > Add New, located on the left menu area of the dashboard. You will see these options appear once the plugin has been activated.

Click on Soliloquy then ad new

This takes you to the page where you can create your first slider.

Step 3: Add a Title and Images

From here, you can start the process of building your first slider. Go ahead and add a title for your slider and then add some images to it.

Add title and images

Step 4: Configure the Slider 

Once you have a title and some images added to your slider, scroll down some. You will see a box titled “Configuration.” In this area, you will be able to choose from a bunch of Soliloquy slider settings and configurations.

Configure the slider

You will notice other tab options are available. Tabs like:

  • Mobile
  • Thumbnails
  • Carousel
  • Pinterest
  • Lightbox

These are only accessible if you have the pro version of the slider plugin. In this case, don’t worry about them because they are all locked.

Step 5: Publish the Slider

When you are satisfied with the configurations you selected, publish the slider to make it live.

Publish the slider

Just click on the “Publish” button in the upper right corner of the slider editor page.

Step 6: Go Get Slider Shortcode

Now that the slider is published, you want to grab the shortcode that was generated. This will allow you to place it into any post, page, or widget area on your website.

Click on the “Soliloquy” link on the left menu area.

Click the Soliloquy link

This will take you to the page of all the sliders you have created. Copy the shortcode from the slider you want to place.

Copy the shortcode

Step 7: Place Slider Shortcode Where You Want It

Again, you can place the slider on a post, page, or widget area of your site. Simply paste the shortcode wherever you want to display the slider.

In this case, I am simply putting it on a page for demonstration purposes.

Place shortcode on page

When you have placed the slider, click on the update or publish button where appropriate.

Step 8: Go View Live Slider

Now, go ahead and view the live slider on the front end of the website.

View live slider

You can make any adjustments necessary back in the editing area of the plugin.

That’s it! You can create and display as many Soliloquy sliders as you want!

Why Add a Slider to Your Site?

Adding a slider or image carousel to your website adds styling and gives site users something fun and pretty to view when they are on your site. These can be used for different purposes. 

You can use them for links, education, or just for simple display. Whatever you are using them for, adding something like a WordPress slider adds a dimension to your site that can help make it more memorable for users.

Finding and using the best slider plugin will also make the process of building and displaying these visuals on your site quick and easy.

Final Thoughts

WordPress slider plugins give you the chance to display images, videos, and more, in a fun and interesting way. There are a lot of options available, but Soliloquy is definitely one of the very best ones out there.

Without a plugin, you may find yourself having to write and configure a lot of custom code for the site.

Have you ever used Soliloquy before? Do you prefer another slider plugin?

The post How to Add a WordPress Image Slider with Soliloquy appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/wordpress-image-slider-soliloquy/feed/ 0
How to Build a Logo Slider in WordPress for Brands That Support You https://www.greengeeks.com/tutorials/logo-slider-wordpress/ https://www.greengeeks.com/tutorials/logo-slider-wordpress/#respond Wed, 11 Nov 2020 20:38:24 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=38619 Are you looking for a way to display all of your partner’s logos in WordPress? If so, I have some good news. The Logo Slider …

How to Build a Logo Slider in WordPress for Brands That Support You Read More »

The post How to Build a Logo Slider in WordPress for Brands That Support You appeared first on GreenGeeks.

]]>
Are you looking for a way to display all of your partner’s logos in WordPress? If so, I have some good news. The Logo Slider plugin for WordPress allows you to easily add logos for all of your partners or even pictures for donators.

It’s a great way to thank the companies or fans who have supported your business so far. It can also help make your website more credible. After all, if other businesses or people are willing to support you, your brand is worth trusting.

Today, I will demonstrate how to add a WordPress logo slider to display your partners or supporters.

What Is A Logo Slider?

A logo slider works like a regular slider. It will cycle through images, but instead of focusing on those images, it centers on company logos. Although, it can also display images, which makes it good for displaying things like Patreon donators as well.

There are many advantages to displaying sponsor logos in WordPress.

Firstly, it’s a big sign of respect to those companies or individuals who support your business. And it can help promote their own brand in the same process, which is a nice way to thank them.

One of the biggest advantages is being able to say company X is a supporter of your business. It makes your company more trustworthy by extension and that can lead to more sales.

If you are displaying Patrons, displaying those supporters can encourage others to donate as well. After all, no one likes being left out in a community they really like.

How to Display Sponsor Logos in WordPress

Step 1: Install Logo Slider

The Logo Slider plugin allows users to easily and quickly add logos almost anywhere on your website. It utilizes shortcodes to allow you to add it to posts, pages, and even text widgets. You can customize the plugin to meet your needs in a variety of ways.

This includes controlling the slide speed, autoplay timeout, margin dimensions, hover effects, and the background color to name a few.

It doesn’t take long to set up, so let’s begin.

Click on Plugins and select the Add New option on the left-hand admin panel.

Add New

Search for Logo Slider in the available search box. This will pull up additional plugins that you may find helpful.

Logo Slider

Scroll down until you find the Logo Slider plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

Step 2: Creating A Category (Slider)

There are two ways to create a slider, or to be more specific, two different shortcodes. The more basic one will just display all of the logos you upload into one slider. This will be fine for many websites, but others may want to create multiple sliders.

In this case, you are going to need to create categories. Creating a slider is really easy, however, the plugin doesn’t explain the process very well.

Thus, you can think of the category as the slider itself.

Click on the Categories option under the Logo Slider function. Don’t confuse this with the categories WordPress uses for creating posts.

Categories

Fill out the name, slug, and description of the category. Click on the “Add New Category” button when you are done.

Add New Category

Now you just need to add logos to the categories and yes, these are separate from the ones the rest of your website uses.

Step 3: Adding Logos

The next step is to add the individual logos to your website. This simply includes adding a title, company name, company URL (if you want to make it clickable), company description, and the logo itself.

If the slider is for showing off Patreon supporters, try to obtain an image from the patron themselves. This makes it more personal and shows that you care. You can also include other information if they wish.

On the left-hand admin panel, click on Logo Slider and select the Add New Logo option.

Add New Logo

Fill in all of the information you think is necessary, add the logo from your media library and most importantly pick a category (only appears if you did the last step). Click on the “Publish” button when you are done.

Publish

Note: If you do not add a category it will not appear in a category-based slider. You can add or remove categories at any time, but it’s quicker to do it in one shot.

You must do this for each logo you want to add, so prepare to spend some time here if you are planning to add a lot of sponsors to the slider.

Note: To get the best results, make sure that the logos are similarly sized. It will make the slider look weird if the logos are all different sizes.

Step 4: Settings

There are a variety of settings you can configure and they are broken up into 5 distinct tabs that include Basic Settings, Style Settings, Responsive Control, Slider Options, and Advanced Settings.

The options are very straightforward and consist of a check box, radio button, or a text box to insert a specific number. Unfortunately, there is no way to view what the changes actually do in real-time.

Thus, my recommendation is to have a second tab with the slider up so you can check to see what each one does.

However, for most websites, the default setting will work just fine. But know that the customization is there for websites that need it.

Step 5: Displaying the Logos in WordPress

Now that everything has been added, it’s time to actually display the logos.

Go to any existing post or page where you want to display the slider or create a new one. Typically the home page is the best location for this.

You can add the shortcode to either a shortcode block or text block, both will have the same effect.

As I stated earlier, there are two shortcodes. The first is the simplest and will display all logos in a slider.

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][logo-slider][/ht_message]

The second shortcode only displays logos with the same category.

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][logo-slider cat=”category slug here” ][/ht_message]

Here are the results:

Slider

Congratulations on learning how to use the Logo Slider in WordPress. Remember you can remove logos at any time and only categories allow you to make specific sliders.

What You Can Do With A Logo Slider

While it is a logo slider, keep in mind that it works like any other. simply insert an image and you can put it in the carousel. Here are a few things you can do with one.

First and foremost is to display the logos of companies that either sponsor you or big-name companies that use your service. After all, if your product is good enough for a major company, it’s good enough for anyone.

You can use it to display family photos from your customers. For example, it is very common for a veterinarian to receive photos of the pets he or she helps during the holiday season. This is a good place to display them.

If you own a restaurant, you can display images of happy customers at a dinner table or being served food by staff. Or you can display something else related to your business like a mechanic fixing specific types of cars.

Sliders are powerful tools, so make sure you get the most out of them.

Did you create categories to create multiple sliders or use the simple shortcode? How many logos did you add to the plugin?

The post How to Build a Logo Slider in WordPress for Brands That Support You appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/logo-slider-wordpress/feed/ 0
How to Add an Instagram Slider Widget to WordPress https://www.greengeeks.com/tutorials/instagram-slider-widget-wordpress/ https://www.greengeeks.com/tutorials/instagram-slider-widget-wordpress/#respond Thu, 26 Mar 2020 16:38:38 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=33473 Are you looking for a simple way to add an Instagram slider to your WordPress website? Instagram is one of the most popular social media …

How to Add an Instagram Slider Widget to WordPress Read More »

The post How to Add an Instagram Slider Widget to WordPress appeared first on GreenGeeks.

]]>
Are you looking for a simple way to add an Instagram slider to your WordPress website? Instagram is one of the most popular social media platforms available, and many website owners spend a lot of resources to produce high-quality content on the platform.

You can take advantage of this by adding an Instagram slider on your website. This will allow you to display these images from your account as well as others. This will not only add content to your website, but it may also help you build your own Instagram presence.

Today, I will demonstrate how to add a slider by using the Social Slider Widget plugin.

Why Add An Instagram Slider in WordPress?

Images play a big part in most websites and continue to remain popular. However, they do have some issues.

The first is the amount of space they take up on your pages. While you can make images any size, they still require space, and that can be a problem. Especially when you take mobile screens into consideration. There is just not a lot of room.

Thus, when you have a lot of images to show, it creates a problem

The second is the file size of images. The main reason a page loads slowly is generally because the images or videos on the page are not optimized properly. And as a visitor, we can all agree, slow websites are not good experiences. Speed is also a factor that search engines use to rank your website, so it can really impact your site.

Sliders fix both of these problems.

A slider only requires one space on a page to display multiple images. This completely solves the space problem on mobile sites. Many sliders utilize lazy loading, which means that a page will only load the image it needs. This stops a lot of images from being loaded at once, which prevents slow load speeds.

Installing Social Slider Widget

The Social Slider Widget makes adding a slider in WordPress really easy. The plugin is extremely intuitive. You can add the slider to any page or post using Shortcode or you can just use the widget it adds. Thanks to the user-friendly interface, the setup only takes a few minutes, so let’s get right into it.

Click on Plugins and select the Add New option on the left-hand admin panel.

Add New

Search for Social Slider Widget in the available search box. This will pull up additional plugins that you may find helpful.

Social Slider Widget

Scroll down until you find the Social Slider Widget plugin, click on the “Install Now” button and activate the plugin for use.

Install Now

The plugin will now be activated. But if you want to get images from your account, you will need to connect with Instagram.

Connecting to Instagram

The first thing you need to do once you install this plugin is to get it connected to your Instagram account. The plugin makes this really easy by having it done in just one button click.

On the left-hand admin panel, click on Social Slider Widgets and select the Settings option.

Settings

Click on the “Instagram Add Account” button.

Instagram Add Account

You will be prompted to select which kind of Instagram account you want to connect. Here you can choose either a personal account or a business account. simply pick the one that you want to use and can log into.

Note: If you want to use multiple Instagram accounts, you will need to upgrade to the Pro edition of the plugin. This can be very useful if you plan to create a lot of Instagram sliders in the future.

Select Account Type

You will now be asked to authorize the plugin to connect with your Instagram account. Click on the “Authorize” button.

Note: If you are not logged into the Instagram account, you will be prompted to before seeing this part.

Authorize

Your Instagram account will not be connected to the plugin and you can begin making an Instagram slider widget for your self.

Creating An Instagram Slider

Click on the “widget settings” link above your personal account information. Alternatively, you can go to the widget area of WordPress like normal.

Widget Settings

You will see a new widget area called Social Slider. Locate and drag the Social Slider Instagram widget into this area.

Note: This widget area is just to create your slider and will not actually appear on your website.

Social Slider Widget

Now, you just need to go through the settings to choose what your slider will do. The first one is to select if you want images from an account or from a specific hashtag. Choose whichever one fits your needs.

Note: if you choose to use the Hashtag option, make sure you enter it without the “#” or else it will not work.

The rest of the options decide things like how many images will the slider display, how quickly will the images switch, what style will the slider use, and other appearance-based settings. Simply pick the options that best suit your website.

When you are done, click on the “Save” button.

Displaying Your Slider

The widget will now display a Shortcode that you can add to a post, page, or text widget. Copy the Shortcode.

Copy Shortcode

If you choose to paste the shortcode on a post or a page, you can either paste it in a text block or use a shortcode block. Both will have the same result.

I will demonstrate how to add the shortcode to a text widget. Keep in mind that if you plan for it to be a widget, you need to make sure the settings match your needs. For example, you don’t want a huge picture in your sidebar.

Locate and drag a Text Widget to the desired widget area (sidebar or footer).

Text Widget

Add a title, paste the shortcode, and click on the “Save” button.

Save

You can now visit your website to see it in action.

Instagram Slider

Congratulations on adding an Instagram slider to your WordPress website. There are plenty of ways for you to integrate Instagrams and widgets in WordPress, so be sure to look up other integration ideas.

Beware of Copyright Strikes

While this is uncommon, you can get in trouble for displaying images from Instagram that you do not own. Again, it can happen and it can cause some headaches, so I strongly recommend making sure that you only use images that you uploaded or have permission to use.

Using images from hashtags is generally safe, but there is a risk involved if you choose to do so.

Integrate Instagram in Other Ways

WordPress is a very versatile platform and offers numerous ways to integrate Instagram into it. You can add a set of social media buttons to your website that makes it easy for visitors to follow your various accounts. You could even add your Instagram stories directly into WordPress with the help of a plugin.

And make sure to not just limit yourself to Instagram. Facebook, Twitter, and plenty of other platforms all have similar ways to integrate with WordPress, so make sure to take advantage of them.

How many images do you have in your slider? What types of content do you add sliders to?

The post How to Add an Instagram Slider Widget to WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/instagram-slider-widget-wordpress/feed/ 0
How to Turn Anything into a Slider or Carousel in WordPress https://www.greengeeks.com/tutorials/anything-slider-carousel-wordpress/ https://www.greengeeks.com/tutorials/anything-slider-carousel-wordpress/#respond Tue, 17 Mar 2020 14:00:09 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=33166 Do you want the power to turn anything into a slider in WordPress? Depending on the plugin you use, you are generally limited to one …

How to Turn Anything into a Slider or Carousel in WordPress Read More »

The post How to Turn Anything into a Slider or Carousel in WordPress appeared first on GreenGeeks.

]]>
Do you want the power to turn anything into a slider in WordPress? Depending on the plugin you use, you are generally limited to one type of media. This can be very limiting, thus it is only natural to want to build more content-rich sliders.

Luckily, you can do just that with the Slide Anything plugin. Text, images, HTML, video, and even shortcodes can be added within this slider. And you will not need any coding experience to get great results.

Today, I will demonstrate how to use the Slide Anything plugin to turn just about anything into a slider.

Why Use Sliders In WordPress?

A WordPress content slider is when you rotate between multiple pieces of content. Traditionally, sliders are used for images and photo galleries, but they have been expanded upon to add other forms of media like videos.

The main advantage of using a simple WordPress plugin slider is that it takes up less space than adding each element separately. For example, if you have 5 images of a product, that can take up a lot of room on a page.

Instead, you can add one slider that contains all 5 images, while only taking up one image worth of space.

And as mobile users have continued to grow and take over as the majority of web traffic, it is important to make your pages as compact as possible. Thus, sliders and carousels are great tools when you are trying to save space, however, they are not always perfect.

Disadvantages of  Using Sliders

Many experts are in agreement when it comes to using sliders, they are not a good way of presenting featured content. According to a study, out of the 1% of visitors that chose to interact with a carousel (another term for sliders), 84% of them clicked on the first image.

So, it is very likely that visitors will not interact with any of the other links on a slider, which defeats a lot of their purpose, at least on a home page or as a banner.

One other factor to look for is sliders that do not utilize lazy loading. If the carousel chooses to load every image in the slider at once, your pages are going to take longer to load, which can seriously mess up your SEO.

Another aspect of lazy loading and sliders is how some plugins will add a massive whitespace between the bottom of the carousel and the next piece of content. This makes for an unattractive layout.

However, this can easily be avoided by choosing a slider that does utilize lazy loading (only loads images as they are needed). If it doesn’t have a lazy load feature, you should avoid it.

Installing Slide Anything

Slide Anything is a free WordPress slider plugin that can turn just about anything into a slider. And in case you are wondering, this plugin does have a lazy loading feature, so don’t worry about slowing down any of your pages. The plugin is pretty simple to use, so let’s get started!

Click on Plugins and select the Add New option on the left-hand admin panel.

Add New

Search for Slide Anything in the available search box. This will pull up additional plugins that you may find helpful.

Slide Anything

Scroll down until you find the Slide Anything plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

After activating the plugin, you are ready to start building the slider you always wanted. And luckily, the process is really easy and similar to creating content in WordPress normally.

Using Slide Anything

On the left-hand admin panel, click on SA Sliders and select the Add New Slider option.

Add New Slider

At the top of this page, you will see a big message highlighting all of the Pro features you get if you choose to upgrade. Underneath this, is the title section, so make sure to fill this in.

You will now see the slider settings section. Here you can adjust a variety of settings for your slider. These include the slide duration (how long it will remain visible before switching), slide transition (how long it takes for the next slide to appear), slide by (how many slides per transition), and 10 various settings you can choose to enable.

Slider Settings

You will also notice even more settings on the right-hand side that contain item display and CSS style options.

Note: If you don’t have a clear image of how you want your slide to behave, feel free to skip this and create the individual slides. That way you can test how they look with the various settings selected.

Underneath the settings, you will find the actual slide creation area. Each slide essentially has the same features as a text widget. You can write text, add images, GIFs, videos, shortcodes, and anything else allowed with a text widget.

To go to the next slide, scroll down and click on SLIDE 2. This will open up the slide for editing.

SLIDE 2

You can also click on SLIDE 3 as well. If you need to add more slides, click on the “Add Slide” button.

Add Slide

Add as many slides as you need and fill them with the desired content. When you are done creating your slider, click on the “Publish” button to save your work.

Publish

You will now be able to use the slider you just created on your website.

How to Add Your Slider in WordPress

To add the slider you just created, you will need to use the shortcode it generated. Right above where the “Publish” button was located, you will see the shortcode. Click on the “Copy to Clipboard” button.

Copy to Clipboard

Now go to where you want to add the slider. This can be on any page, post, or text widget. Paste the shortcode you just copied.

Paste The Shortcode

Note: You can paste it within either a standard text block or the shortcode block in the Gutenberg editor, it does not matter which.

Save the change and either preview or visit your website to see the slider in action! Congratulations on learning how to create a slider in WordPress by using the Slide Anything plugin.

Test Your Slider Thoroughly

Be sure to thoroughly test that the slider is performing correctly. This means that the slides are staying up long enough for the average visitor to absorb all of the information. You may want to make it last an extra second than the average to make it more accessible.

You should also keep an eye out that the images were properly sized for slider and checking for anything else that is out of place.

Otherwise, all of the work you put into creating the slide will go to waste.

Use Sliders Appropriately

Sliders can be powerful tools when it comes to saving space, but sometimes they are not appropriate or effective devices to use. As mentioned before, not many people who do click on the slider only, click on the first slide. Thus, if you have important information, consider a different approach.

A great use, and probably the most common one, is for products. It is natural for shoppers to want to view a specific product. You can use a WordPress plugin for an image carousel to show products from multiple viewpoints (front, back, side, etc.). You could even add a video at the end of it showing the product in action.

How easy did you find the Slide Anything plugin to use? What will you be using your sliders for?

The post How to Turn Anything into a Slider or Carousel in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/anything-slider-carousel-wordpress/feed/ 0
How to Add a Gutenberg Testimonial Slider Block to WordPress https://www.greengeeks.com/tutorials/gutenberg-testimonial-slider-block-wordpress/ https://www.greengeeks.com/tutorials/gutenberg-testimonial-slider-block-wordpress/#respond Wed, 27 Nov 2019 15:00:33 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=30597 Are you looking for an easy way to add a Gutenberg testimonial slider in WordPress? Testimonials are an extremely useful tool for any online store. …

How to Add a Gutenberg Testimonial Slider Block to WordPress Read More »

The post How to Add a Gutenberg Testimonial Slider Block to WordPress appeared first on GreenGeeks.

]]>
Are you looking for an easy way to add a Gutenberg testimonial slider in WordPress? Testimonials are an extremely useful tool for any online store. They provide social proof that someone bought an item or service and left their thoughts about it.

They are very similar to reviews and can help persuade a customer into making a purchase. Luckily, they are easy to add in WordPress with the help of a plugin.

Today, I will demonstrate how to add a Gutenberg testimonial slider with ethe WE Blocks plugin in WordPress.

Why Use A Slider?

It’s easy to see the value in adding testimonials to WordPress, but why display them with a slider?

A slider allows you to display multiple testimonials in a short amount of time while also being pleasing to look at. This is extremely important because it increases the effectiveness of the testimonial.

Why is that?

Let’s face it, every shopper is different and how they decide if an item or service is good enough for them to purchase is unique to them. Thus, displaying multiple testimonials have a higher chance of persuading a shopper to also commit to a purchase.

On top of this, a slider allows you to display more in the same amount of space. Otherwise, you would need to use a larger part of the page to display multiple testimonials.

Sliders are the perfect choice for this task.

Installing WE Blocks

The WE Blocks plugin is a great choice to do this. It simply adds multiple Gutenberg slider blocks that make it easy to add to any post or page. It comes with image, client logo, and testimonial slider blocks. Which means this has plenty of other uses.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for WE Blocks in the available search box. This will pull up additional plugins that you may find helpful.

WE Blocks

Scroll down until you find the WE Blocks plugin, click on the “Install Now” button and activate the plugin for use.

Install Now

Using WE Blocks

Upon activation, three new blocks will be added to the Gutenberg editor. They include the WE – Testimonials, WE – Slider (for images), and WE – Logo Carousel.

On the left-hand admin panel, you should also notice the WE Blocks section. After activating the plugin, you should automatically be redirected to this area.

This section will introduce you to the plugin and also allow you to pick different styles for the blocks.

Simply click on “#More Styles” to see the available styles.

#More Styles

You can now view what each style looks like. You cannot select the styles from here, though.

Styles

Go to any page or post on your website or create a new one for testing purposes. Click on the “+” button.

+ Button

Search for WE and select the WE – Testiomial block.

WE Testimonials

Click on the “+” to add a new testimonial to the block.

+ Option

You will need to add the testimonial text, an image (usually of the person leaving it), the author’s name, and the position it will appear. Finally, click on the “+” to add more testimonials to the slide.

Fill out the information and add the desired number of testimonials you want to show.

Fill Out Information

All that’s left is to customize the block settings. Click on the three vertical dots at the top of the block and select the Show Block Settings option.

Show Block Settings

Here, you can select the style, the slides to show, hide controls, and the speed in which they slide. In the advanced settings, you can add custom CSS as well.

Just pick the settings that work best for you.

Note: If you do not add more testimonials than the number in the slides to show box, they will not appear as a slider. For example, the default is 3. If you put 3 you will just see testimonials in a static position. However, if you put four they will rotate.

Save your work and view the slider in action.

Gutenberg Testimonial Slider

Congratulations, you have successfully added a Gutenberg testimonial slider to WordPress.

Help Drive Sales

The entire point of a testimonial is to help push customers into a sale, which they do a great job with doing. This is especially true when paired with a slider. Keep in mind that this plugin adds other slider blocks that you may find useful for other endeavors and promises to add even more.

Do you think the Gutenberg editor should have a built-in slider block? How many testimonials did you add to the slider?

The post How to Add a Gutenberg Testimonial Slider Block to WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/gutenberg-testimonial-slider-block-wordpress/feed/ 0
How to Add a Google Review Slider for Your Business in WordPress https://www.greengeeks.com/tutorials/add-google-review-slider-wordpress/ https://www.greengeeks.com/tutorials/add-google-review-slider-wordpress/#comments Mon, 21 Oct 2019 14:00:04 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=29887 Do you want to display your Google reviews on your website? Google reviews are one of the most important assets a business can utilize online. …

How to Add a Google Review Slider for Your Business in WordPress Read More »

The post How to Add a Google Review Slider for Your Business in WordPress appeared first on GreenGeeks.

]]>
Do you want to display your Google reviews on your website? Google reviews are one of the most important assets a business can utilize online. Whenever someone looks up a business on Google, they will immediately see the review.

These reviews are out of 5 stars, and anyone can leave one for your business. If you work hard to achieve a 5-star rating, you definitely want to show it off with a WordPress Google review plugin.

Today, I will demonstrate how to add Google reviews to WordPress with the WP Google Review Slider plugin.

Reviews Are Critical For Success

Everyone wants to make sure they are getting the best service and price when they are out shopping. Reviews give shoppers the opportunity to get a rough idea of the quality of the service they will be getting.

As a business owner, it is your job to do everything within your power to make sure customers leave happy. Unfortunately, an unhappy customer is more likely to leave a review. And that can be a real issue.

Since smartphones have become so popular, almost everyone looks online to see the review before entering an establishment. This means that an overall bad rating can absolutely destroy a business.

However, you can display your best ratings and even help improve your SEO by displaying Google reviews in WordPress.

Installing WP Google Review Slider

The WP Google Review Slider plugin allows you to display Google reviews using either a slider or grid view. You can also choose to only display your highest ratings, which can be highly effective at convincing someone to stop by.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for WP Google Review Slider in the available search box. This will pull up additional plugins that you may find helpful.

WP Review Slider

Scroll down until you find the WP Google Review Slider plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

API Key Information

On the left-hand admin panel click on WP Google Reviews and select the Get Google Reviews option.

Get Google Reviews

The first option is very important. You can choose to either use the default API key the plugin has or you can enter your own. When testing the default API key, I can say that it had already exceeded the daily call limit Google allows.

This means the plugin will not work until the limit is reset, and it will be sure to happen often. Instead, both the plugin and I recommend using your own API key.

You can obtain one on the Google Developers page.

However, you will need to include billing information to get one. Luckily, Google provides $300 dollars worth of credit at the time of writing this post. For a small business, this will last you a very long time depending on the amount of traffic you receive.

If you are unsure about how to obtain an API key, don’t worry, the plugin has an excellent page with a very detailed video demonstrating how to do so.

After entering your API key, click on the “Test API Key” button.

Test API Key

If you get an error message, odds are you have exceeded the daily call limit or do not have any billing address on your account. The plugin will not work if you get an error.

Do not move forward until this is resolved.

Getting Reviews

Setting up the rest of the settings is actually quite easy. The next three settings are all related to your location. You will need your locations Place ID from Google maps.

If you are unsure about how to get one, don’t worry. You can enter your address here and obtain a Place ID.

Fill out the appropriate information in the location text boxes.

Fill Out Location

Underneath this, you can select the minimum rating the plugin will display. For example, if you select 5, only 5-star reviews will be displayed. However, if you do not have any 5-star reviews, then nothing would pop up.

Select the best option for your website.

Select Ratings

Next is the Auto Fetch Reviews option. This allows the plugin to grab the 5 newest and most helpful reviews each day.

I recommend checking the box because it keeps the reviews being displayed unique, but the choice is yours.

Auto Fetch Reviews

Lastly, you can enter a language code. This will allow your products to appear in a language other than English. It is completely optional but can be worth using in some circumstances.

If you are unsure what a language code looks like or want a full list, you can find that all on the developers map FAQ page.

Click on the “Save Settings” button when you are finished.

Save Settings

Click on the Reviews List tab. Here you will see a full list of all of the reviews the plugin has pulled.

If you upgrade to the pro version, you will be able to manually select which reviews the plugin grabs.

Adding A Google Review Slider

Now that all of the settings have been set up and the reviews have been taken, it is time to actually create and add a slider to WordPress.

Click on the Templates tab and click on the “Add New Reviews Template” button.

Add New Reviews Template

Here, you can select the settings that will decide how the slideshow behaves and looks. Go through them carefully and select the best options for the site.

Once done, click on the “Save Template” button at the bottom.

To display the slider, click on the “Shortcode” button next to your newly created template.

Shortcode

A small popup will appear with the shortcode. Copy the shortcode and paste it anywhere shortcodes are allowed in WordPress. This can be in a post, page, or text widget on your sidebar. Personally, I recommend adding it to your home page since it is most likely what a visitor will see first.

Congratulations on adding a Google Review slider in WordPress.

Good Reviews Are A Selling Point

Having a host of good reviews is a great way to bring in business. Plenty of people are always looking for a new place to eat or shop. A good review makes them feel good about their choice, and you should encourage customers to leave them.

In fact, 70% of customers will leave a review when asked to do so. The more reviews you have, the better. However, it can also work against you if the reviews are bad. A bad review is a big red flag for many customers and they will actively avoid a shop based on them.

Where did you add your Google reviews slider? Do you think there should be a Google Review widget in WordPress?

The post How to Add a Google Review Slider for Your Business in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/add-google-review-slider-wordpress/feed/ 1
How to Add an Image Carousel in WordPress with Smart Slider 3 https://www.greengeeks.com/tutorials/add-image-carousel-wordpress-smart-slider-3/ https://www.greengeeks.com/tutorials/add-image-carousel-wordpress-smart-slider-3/#comments Mon, 19 Aug 2019 14:00:35 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=28810 Even if you’re not familiar with the term, you know what an image carousel is. It’s a group of large images usually placed across the …

How to Add an Image Carousel in WordPress with Smart Slider 3 Read More »

The post How to Add an Image Carousel in WordPress with Smart Slider 3 appeared first on GreenGeeks.

]]>
Even if you’re not familiar with the term, you know what an image carousel is. It’s a group of large images usually placed across the top of a web page. The images automatically rotate or “slide” into and out of view. And tools like Smart Slider 3 makes adding them quite easy.

In some cases, the images don’t automatically rotate as the visitor navigates through them manually using an arrow or dot links.

Depending on the imagery, image carousels or “sliders” can be bold statements and tell a visitor a lot about your site without saying a word. If you’ve always wondered how to achieve the carousel effect on your website, wonder no longer.

In this tutorial, we’re going to install an image carousel in WordPress called Smart Slider 3.

Before we jump in, there is one caveat. If you’re selling a product on your website you may want to steer clear of image carousels. They may not be a good fit if conversions are your goal.

But if you’re running a design or photography website, or you just find them aesthetically appealing and want one on your personal site, read on.

A Note on Image Sizes

The Smart Slider 3 plugin will resize and crop images to make the heights consistent and fit them into the size of the presentation that you choose.

That means that very large images will be scaled down and small images scaled up. As you may know, when you increase the size of smaller images, the quality usually suffers. So try to avoid using images smaller than the dimensions of your slider/carousel.

Large images generally look better in an image carousel. But also bear in mind that larger images have a longer download time. You have to balance image size and quality and come to a compromise that still looks good.

An image carousel is a horizontal feature, so a carousel made with images that are wide will look much better than one using images that are square.

Installing Smart Slider 3

Log in to your WordPress admin panel.

In the left column navigation mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter “Smart Slider 3.”

search for the WordPress Smart Slider 3 plugin

Once you have located the plugin, click the “Install Now” button.

click to install the WordPress Smart Slider 3 plugin

When the plugin has been installed, click the “Activate” button.

click to activate the WordPress Smart Slider 3 plugin

Creating an Image Carousel

Smart Slider 3 pulls images from your media library. Before you set up a carousel, upload the images that you intend to use.

We’re going to go through the slider set up process using all the defaults. Then we’ll add a carousel to a post so you can get a feel for how the system works. Later, we’ll address some more specific settings, configuration, and uses.

In the left column navigation, click the “Smart Slider” link.

click the "Smart Slider" link

You have an option to watch a “Learn Smart Slider 3” introductory video that goes into some detail on the basics of setting up a slider or image carousel.

You may want to take a look at the video, or you can boldly skip ahead with us now and click the “NEW SLIDER” tile to get started.

click the "NEW SLIDER" tile

Enter the basic options in the popup.

enter the basic options

Slider name is just a name for your own purposes. Make it descriptive if you intend to set up multiple carousels.

Width and Height are the dimensions for the carousel. It’s not necessary to enter pixel values here if you intend to configure the carousel to take up the full width of the browser or device window.

Preset – “Default” matches the dimensions you provided in the Width and Height fields. “Full width” ignores the dimensions and creates a responsive carousel that spans the entire width of the browser or device window.

Click the “CREATE” button.

click the "CREATE" button

Adding Images to a New Slider

The slider that we have just created is empty, so let’s add some images.

Click the “ADD SLIDE” tile.

click the "ADD SLIDE" tile

Click the “Image” tile.

click the "Image" tile

Select the carousel images from the WordPress media library.

select the carousel images

Click the “Select” button.

click the "Select" button

The images you selected will then show up in the plugin.

selected images

Scroll down to the “Publish” section.

Copy the shortcode or go to the post editor. There’s also a snippet of PHP that you can copy if you are going to insert the carousel into the site code somewhere.

copy the shortcode or go to the post editor

Start a new post. Enter a title, and click the “add block” icon.

Click the “Smart Slider 3” tile.

click the "Smart Slider 3" tile

If you’re using the WordPress classic editor, click the “Smart Slider 3” icon.

classic editor, click the "Smart Slider 3" icon

Click the “SELECT SLIDER” button.

click the "SELECT SLIDER" button

Click your slider to insert it into the post.

click your slider

Publish the post.

publish the post

The carousel is now published in a post with “forward” and “back” links on either side of the image.

the carousel is published

By default, the images don’t cycle automatically, but we can change that.

To Automatically Cycle Through the Carousel Images

In the WordPress admin panel left column navigation, click the “Smart Slider” link.

In the Smart Slider dashboard section, mouse over your slider and click the “EDIT” button.

click the "EDIT" button

Click the “AUTOPLAY” link and toggle the “Enable” switch. The default time between images is 8000 ms (8 seconds).

toggle the “Enable” switch

Scroll up and click the “SAVE” button.

click the "SAVE" button

Now your carousel will automatically cycle through the images.

Image Carousel As a Widget

Smart Slider is also a WordPress slider widget. You can add a slider anywhere you can add a widget element, such as the sidebar.

  • In the left column navigation mouse over the “Appearance” link and click the “Widgets” link.
  • In the “Available Widgets” section, click the “Smart Slider” button.
  • Choose where you’d like the slider to be displayed and click the “Add Widget” button.
  • Smart Slider moves over to the active widgets list. Select your slider from the dropdown and click the “Save” button.

Inserting a Carousel Into the Website Code

Earlier I mentioned that you can copy and paste PHP code to insert the carousel into the website code or WordPress template.

The method for editing the header of a WordPress site varies depending on the WordPress version and the theme that you use.

In any case, you can simply copy the PHP code and paste it in the location you see fit.

To Slide or Not to Slide, That Is the Question

Website design is a subjective thing. What one person finds appealing, another may not. That will never change. But web design also goes through fads and phases, and image carousels certainly had a moment of popularity when it seemed that they were everywhere.

Now we know more about the effectiveness or ineffectiveness of carousels. So before you decide to implement a slider, make sure you know the pros and cons. For a strictly visual, creative site, they can still be useful and effective. However, they are less so for your typical e-commerce site.

Have you used an image carousel on a site in the past? Are you concerned with the effects of your design choices, or just go for what looks great to you? (There’s nothing wrong with doing what you think looks great despite what “experts” may believe!)

The post How to Add an Image Carousel in WordPress with Smart Slider 3 appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/add-image-carousel-wordpress-smart-slider-3/feed/ 2