by Klara Kalko on September 11, 2018

GeneratePress and Smart Slider 3: The Beginner’s Guide

There has been a lot of talk about whether to use a slider or not. So, should you? Despite the fact I rarely use sliders, here’s my answer: if you want to use a slider, use it. Just be aware, your website visitors aren’t going to click with excitement on every slide one-by-one. So don’t fall into the trap of publishing a slider on your homepage simply because your newly purchased multipurpose theme has several demo templates with it.

This is a guest post written by Klara Kalko, who is a freelance blogger at WP Metro. The opinions and ideas expressed herein are author’s own.

Better yet. Don’t use a slider with a multipurpose theme at all. Stick to a basic lightweight theme, such as GeneratePress, one of the best minimal and customizable free WordPress themes (read more about it below). It comes with detailed documentation and tutorial videos, so you will quickly figure out how to set up the theme. In the meantime, your visitors will appreciate the fast website and loading time.

WordPress sliders: consider or avoid?

Definitely an eye candy and an attention catcher, if used right, poorly designed slider along with average-quality content (remember, focus is designer’s best friend) will drive people away at the speed of light. Therefore, experiment, try different placement, show off only the best visual pieces you have. Last but not least, ask yourself what is the purpose of adding a slider and what exactly do you want to achieve with it.

Design is a form of a communication, so if you need a slider to communicate and interact with the visitor / user more effectively, go ahead. In other cases, you will end up using a slider for the sake of having one, which isn’t even an option.

Two things to keep in mind:

  • the fewer slides you have, the better
  • use only responsive WordPress slider plugins and always test your sliders on different devices. It saves your time and you won’t have to deal with disappointments.

Back in early 2017, my extremely critical point of view towards sliders came to an end when I discovered Smart Slider 3. It quickly became the only slider I really liked and made an exception for. Obviously, this is also the only standalone slider I recommend and use.

Smart Slider 3 Icon
Bring Your Ideas to Life
Powerful. Visual. Intuitive. Smart Slider 3 is the most advanced slider and block creation tool for WordPress and Joomla.

Best minimal and lightweight WordPress themes: GeneratePress

GeneratePress theme
The advantages of using a lightweight WordPress theme (such as a long-time favorite of mine, GeneratePress) instead of a heavy multipurpose one are hard to beat. Serving as a rock solid foundation for any website, GeneratePress delivers impressively fast performance, is responsive and very easy to customize. All theme options are integrated with the native WordPress customizer. It speeds up the theme’s setup and keeps it as simple as possible.

In fact, that was the very first reason I liked GeneratePress so much. The second reason is a modular structure: you can enable or disable theme features depending on your requirements.

In my opinion, every WordPress theme should be built that way.

Again, personal experience: I switched both of my websites to GeneratePress after almost one year of using one of the best multipurpose themes. Never looked back.

GeneratePress Premium Modules Overview

GeneratePress is a 100% free theme, but chances are, within 1 hour of using it you will want a premium modules bundle. GP Premium allows you to customize every part of the theme without adding custom CSS: colors, fonts, menu appearance, blog layout, backgrounds, copyright text and many others. You also get full access to the website templates library, permission to activate your license on unlimited websites and can easily export / import your GP settings.

As a WordPress theme, GeneratePress is a great choice for every category of WordPress users – from beginners to experienced developers: the theme has extensive selections of built-in hooks and filters. There’s only one thing that is just as great as GeneratePress itself – excellent and very helpful customer support (thanks to Tom Usborne, Leo and David Beckwith).

The theme has been chosen. Now let’s take a closer look at Smart Slider 3 and how you can easily design great-looking sliders with it.

Smart Slider 3: first steps


Smart Slider 3 is a really powerful, robust solution that can help you to implement almost any animation-related idea / scenario. Still, every advanced user at some point was a beginner, so let’s start with the basics. Guess what was the first thing I noticed immediately after installing and activating the slider?

The user interface of Smart Slider 3 is just as clean, beautiful and stylish as the sliders you can create with it. Options / settings are intuitive and easy to figure out, every icon seems to have a perfect placement and Smart Slider 3 is simple enough to use, even if you are an absolute beginner.

First things first. Free version of Smart Slider 3 is available on the WordPress plugin repository.

Don’t underestimate the prefix “free”, though – even the free version is packed with many great and quality features.

That alone makes free version of Smart Slider 3 a serious competitor, capable to rival premium sliders. In fact, Smart Slider 3 successfully does just that.

Using Smart Slider 3 with GeneratePress: best features + ways to use

Unlike heavy multipurpose themes, GeneratePress is minimal, lightweight and isn’t bundled with sliders or any additional plugins. For each project, you can choose required plugins on your own. Almost always, people want to have additional visual elements or add more interactivity to make their landing page stand out. Like I said, GeneratePress doesn’t have a built-in slider feature, so here’s what Smart Slider 3 can do for you.

Actually, it’s pretty much my list of favorite features – there are much more.

First and foremost: full integration with WordPress and smooth, bug-free compatibility with GeneratePress. For those who prefer working with page builders, Smart Slider 3 supports Elementor, Beaver Builder, Divi, SiteOrigin Page Builder and Visual Composer. Free version of Smart Slider 3 allows you to use your blog posts as a dynamic source for the slides.

If you are a designer, illustrator, photographer or filmmaker, Pro version offers something special for you – additional dynamic slide sources: 500px, Dribbble, Flickr, Instagram, Picasa, YouTube or more generic social networks, such as Facebook, Twitter, Pinterest. With Smart Slider 3, you can connect your favorite social network to your website and design the landing page your way – the possibilities are very diversed and flexible.

Even WooCommerce is on the list, so you can design a beautiful landing page for your e-store. Designers and advanced users of Smart Slider 3 can hone their skills by trying to replicate UI / UX design animation. Both versions of Smart Slider 3 allow you to fully customize slider elements: arrows, bullets, thumbnails, slider autoplay and so on. Also, there’s a convenient font management system and integrated Google fonts.

Smart Slider 3 Template Library

Makes me stare. Seriously. Excellent showcase of what you can do with Smart Slider 3 and if you have Smart Slider 3 Pro, you can freely download / customize any of these beautiful templates. 100+ pre-designed slides, 8 of them are free. Filtered by categories, high-quality demo templates with a flawless and clean design will speed up your work.

Guess by now I made it a bit more understandable why Smart Slider 3 Pro is my #1 choice when it comes to sliders. Let’s get more visual.

After installing and activating Smart Slider 3 (same process as with any other WordPress plugin), a new panel will appear in your WordPress dashboard.

Smart Slider 3 in WordPress menu
Smart Slider 3 in WordPress menu

This is where all the magic happens. When you click on it, you will be redirected to Smart Slider 3 dashboard. Check the top right corner – you’ll see a switcher that allows you to choose between simple and expert mode. In this guide, I’ll keep a default, simple mode.

Smart Slider 3 settings

Above the switcher, there are three menu items:

  • Dashboard (which is pretty much a homepage of Smart Slider settings / options)
  • Settings
  • Help (direct access to detailed Smart Slider 3 documentation, customer support and video tutorials)
Smart Slider 3 Dashboard
Smart Slider 3 Dashboard

General settings and framework settings
I suggest you explore them step-by-step. For now, let’s keep the default ones.

Fonts
This tab allows you to select and configure fonts for your slider. Additional options: enable or disable Google fonts, select font style and character set.

Item defaults
The most extensive and well thought-out tab of Smart Slider 3 settings. Select and set up different elements of your slider.

Generator tabs
Currently, there are 11 social networks you can connect to your WordPress website to create dynamic sliders based on your posted content. 500px, Dribbble, Ecwid, Facebook, Flickr, Instagram, Picasa, Twitter, Vimeo, YouTube, Adobe Aviary. One of the coolest features of Smart Slider 3, it’s also very flexible and useful.

Let’s return to Smart Slider 3 dashboard welcome screen. You have probably noticed three icons at the right corner below the switcher. Using them, you can import / export a slider, check for Smart Slider 3 updates and activate / deactivate your license.

Smart Slider 3 Dashboard buttons
Smart Slider 3 Dashboard buttons

Creating a slider with Smart Slider 3 Pro

Smart Slider 3 dashboard presents three options. You can design a new slider from the scratch, explore templates library to import a demo or check a sample slider.

New slider
After clicking on “Create new slider” green box, new window opens. Here you can choose a name for your slider, set up slider’s width and height per your requirements and select slider’s format.

Create a slider with Smart Slider 3
Create a slider with Smart Slider 3

After selecting a preset, click Create. Now you need to choose content / images for your slider. It’s either your own images, Smart Slider 3 library, a video, your WordPress blog posts or other dynamic sources (Dribble, Ecwid, Facebook, Flickr, Instagram, Picasa, Pinterest, RSS, Vimeo, YouTube).

Additional options, if you have any of these plugins installed and activated:

  • All-in-One Event Calendar
  • Gallery by BestWebSoft
  • Events Manager
  • Nextgen Gallery
  • The Events Calendar
  • Gallery by Webdorado
  • WooCommerce

As the most common source, let’s start with images. Each slide has its own configuration options that appear when you edit slides separately (click on green square plus icon on the left side to access them). There are also a few features for a more convenient, faster and better workflow:

Secondary navigation bar in Smart Slider 3
Secondary navigation bar in Smart Slider 3

  • Quick access to general slider settings
  • Quick access to slides
  • 1-click preview of your slider
  • Live slider controls and adjustments for mobile devices

It’s quite easy to get carried away with all design possibilities and advanced options of Smart Slider 3. Don’t forget to save your work from time to time.

Single slide settings
To simplify and streamline your work on each slide, Smart Slider 3 equips you with 5 groups of editing tools.

Layer tab
basic tools, content tools, media tools, advanced tools

Structure tab
basic and special layouts

General slider settings

Conclusion

Yoast once published an article named “Sliders suck and should be banned from your website”. Yes, they are respected and famous SEO experts, but I highly doubt this statement. What is 100 % true, is that little fact that

“any animation not triggered by the user, can be at best distracting, at worst annoying” (Jules)

Take it as the main rule when you design a slider. Aside from that, sliders don’t suck. Smart Slider 3 proves it.

Klara Kalko

About Author

Freelance writer, designer, urban photographer. Blogger at WP Metro.