Slider Revolution vs. Smart Slider

Before you start working with a new plugin, maybe you are curious about what the difference is between Slider Revolution and Smart Slider.

Slide Editing

Each plugin has a visual slide editor, so you can instantly see the result, and you can customize your slider. I think Smart Slider’s interface is more user-friendly, but each plugin has its own logic, where you can find the options.

Layers

Both plugins come with the standard layers – heading, text, button, and image. And you can use them freely. There isn’t a limit on how many layers you can use, you can create your own design with both plugins.

Available Building Options

While in Slider Revolution you can put layers on your slider to the position where you want, Smart Slider offers 2 options for positioning: a default and an absolute position. The Absolute position is similar to what Slider Revolution offers: you can drop your layers everywhere on the canvas.

In addition, the Default positioning works like a page builder: you can put your layers in rows and columns, and align them vertically or horizontally. To make space between the layers, you can use padding and margins. Why is it good? Because of that, you can create a responsive slider with minimal effort, and it will look great on every device. Also, you have the option to combine these 2 modes by which you can achieve every design as you imagined.

Animations

Slider Revolution has more options where you can animate your slider or your layers. You can put animation on your layers, on your background, you can use Ken Burns or parallax effect, so there are many options. However, in the free version of Smart Slider, you can use only background animations. Layer animations and a lot of other effects are available only in the Smart Slider Pro.

Speed

I have created a Smart Slider free demo with Slider Revolution to test the speed of each plugin. I published both sliders into a new empty page.

• In each slider, I used the same images, sizes, and fonts
• I tested them with other plugins deactivated
• Cleared the cache before the speed test
• I used Gutenberg to publish the sliders.

Let’s see the results.

	Smart Slider Free	Slider Revolution
Requests	20	21
Page size	709 kB	1 MB
Load time	199 ms	316 ms

As you can see, Smart Slider was faster than the Slider Revolution, and also the page size is less than the other plugin’s page. I didn’t use any optimization settings, which can speed up the results – so the speed test was made with the basic settings of each plugin. As we can see from the results, we can say that Smart Slider is faster, which isn’t bad for a free plugin, right?

Free Slider Revolution Alternatives with Smart Slider

Smart Slider can be a great free Slider Revolution alternative because you can create more kinds of sliders with this plugin. Let’s see some examples of what kind of sliders you can create with Smart Slider as with Slider Revolution.

Hero Image Block

Live PreviewIf you want to create a hero image block for your site, Smart Slider can be a great free Slider Revolution alternative. With Smart Slider, you can put Heading, text, image, and button on your slide, and you can position it where you want.

Hero image blocks can be used as the header of your page, and with Smart Slider, you can easily create it. Just select the layers you want to use, and then publish them on your site. There are more templates that you can start with, but you can build your own design, too.

Video Slider

Live PreviewRevolution Slider offers the opportunity to create video galleries. Smart Slider Free has the option to create video sliders, too. There are 2 video layers available: YouTube and Vimeo. There aren’t any other free slider plugins that I’m aware of that offer that kind of functionality.

A lot of people use YouTube or Vimeo videos on their websites because these media elements can call the visitors’ attention. These layers are simple, because YouTube and Vimeo host the videos, so you don’t need to download any video on your site. All you need is to copy the video’s link or ID, and you can create a free responsive video gallery.

Full-Width Slider Alternative

Live PreviewFree Slider Revolution slider alternative can be the full-width type slider of Smart Slider. A full-width slider fills the 100% width of your screen, and it looks good on any page. Using this kind of slider is a great way to highlight your product or content on your page, and it also looks good.

You have the option to design the controls like bullets or arrows, use a background color or image, and you can put layers on your slider. It’s up to you what kind of slider you want to create.

Post Slider

Live PreviewPost Sliders can be very useful parts of your website. They show all the recent or featured posts to catch the visitors’ attention, and they encourage your visitors to spend more time on your blog. Smart Slider offers variables that you can use, and these variables change dynamically depending on the content of your posts.

Can you Create the Same-Looking Slider in Slider Revolution and Smart Slider Free?

Maybe you have questions about a free slider plugin that can be a premium slider alternative. Let’s check a Slider Revolution example from their library, and see how we can create a similar layout with Smart Slider free.

I choose a hero image from the Slider Revolution’s templates. This block has a grey background image, a heading, 2 texts, and a CTA with a hover effect on the left side, and 3 images that overlap each other on the right.

This layout can easily be created with Smart Slider free. I have created a 1-row – 2-column structure. I’ve put two heading layers, a text layer, and a button into the first column. In the second I’ve put an image from a laptop. The mobiles are in the column but in absolute position, so this image is above the laptop image. Between the texts, I’ve set some padding which makes space between them.

With Smart Slider, you can easily create a responsive slider. In most cases, it is enough to make the font size smaller on different devices with the text scale. If you use a row, then it can be a great solution to wrap the columns below each other. Also, you can change the order of these columns, so you can put the images on the top.

You can use animation and effects in the Pro version of Smart Slider.

Reasons to Choose Smart Slider as a Free Slider Revolution Alternative

• • Free: Smart Slider is a free plugin with premium features. If you don’t want to pay for a plugin, it can be a great alternative.
  • Layers: Heading, text, buttons, images or videos. Create the slider that you’ve imagined.
  • Create the layout you want: You can create a complicated layout thanks to the rows, columns, and positioning options.
  • Customizable controls: You have the option to customize the arrows, bullets, and thumbnails. Position them, change their colors, or hide them on devices.
  • Ready to use templates: Smart Slider has a template library as Slider Revolution. Just choose one, change the content, and publish it.

Live Preview

• Responsive sliders: You can create a slider that looks good on any device.
• Free support: It’s also important to mention that Smart Slider offers free support to every user. Also, you don’t need to wait weeks for a response.

What More Can Smart Slider Pro Offer?

You may think that Smart Slider free doesn’t have a lot of features like Slider Revolution, however, the Pro version of Smart Slider has a lot. You can consider choosing the Pro version. Why? The Standard package costs $49 and you will get lifetime support and updates while Slider Revolution’s one-time payment package costs $79 only with 6-month support.

	Slider Revolution		Smart Slider Pro		Smart Slider Free
	Price	Support	Price	Support	Price	Support
1 domain	$95	6 months	$49	lifetime	free	lifetime
3 domains	$250	6 months	$99	lifetime	free	lifetime
5 domains	$415	6 months	$149	lifetime	free	lifetime
10 domains	$765	6 months	$249	lifetime	free	lifetime

Smart Slider and its 24 layer types give you much more creative freedom. If you do choose Smart Slider as your new slider tool, then layers for icons, progress bars, counters, and even mp4 videos can be used to add content-rich slideshows to your website.

Live PreviewThe pro version offers lots of effects that you can set, like Parallax, Ken Burns, Particle, and Shape Divider. All of them are customizable and can cheer up a single slider, too. You can add layer animations on the individual layers of your slides. They can come in, loop, go out, repeat, so you can create even more complex animations if you want.

Conclusion

Despite the fact that Smart Slider is a free plugin, it offers solid features that are on par with Slider Revolution. The Default and Absolute positions, drag-and-drop slider building, rich layers, and stunning templates, let you build impressive sliders that leave basic scrolling sliders in the dust.

Not convinced? Check out Smart Slider’s example sliders and see for yourself. It’s easy to put a slider together in just a few minutes. It’s totally free, what can you lose?

The post Are You Looking for a Free Slider Revolution Alternative? appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/full-width-slider/ Wed, 17 Jan 2024 07:00:24 +0000 https://smartslider3.com/?post_type=blog&p=19001 A full width slider is a great way of using sliders on any type of page, it looks good on blogs, webshops, or company websites as well. A full width slider fills the horizontal area of the browser, and they are popular to be used as headers in web design. Using a slider is a […]

The post 10 Beautiful Full Width Slider Examples appeared first on Smart Slider 3 — WordPress Plugin.

]]> A full width slider is a great way of using sliders on any type of page, it looks good on blogs, webshops, or company websites as well. A full width slider fills the horizontal area of the browser, and they are popular to be used as headers in web design. Using a slider is a great way to highlight your content on the top of your page, like a hero header.

Let’s take a look at some beautiful examples of full width sliders which can be inspiring when building your website.

1. Advertising Agency

🎓 Available in Smart Slider 3 Pro – Advertising Agency

The Advertising Agency slider looks like a super simple full width slider. What makes it special is its clever use of layer animations and events. First, there’s continuously rotating text in the top left corner. Second, hovering on the big texts brings up a video or another text block on the right. The combination of these effects makes the Advertising Agency slider look one of a kind.

2. Animal Shelter

🎓 Available in Smart Slider 3 Pro – Animal Shelter

The Animal Shelter template is an awesome combination of creativity and eye-catching visuals. It uses impressive effects and animations to provide an exceptional experience. With its sleek design, it emphasizes captivating images and impactful messages, guaranteeing a user-friendly browsing journey. Whether you’re sharing information or displaying adorable animals, this template makes your animal shelter slider truly remarkable.

3. Winery

🎓 Available in Smart Slider 3 Pro – Winery

The Winery template combines a smart design with subtle animations to highlight wines. Using the Showcase slider type, it beautifully showcases multiple products, making a strong impact on sales. The full-width slider allows for customization, and the carefully placed layers of text, buttons, and captivating images create visually stunning slides. The rotating bottle animations add a touch of elegance, ensuring that your winery stands out with its own unique style.

4. Tattoo Studio

🎓 Available in Smart Slider 3 Pro – Tattoo Studio

The Tattoo Studio template is perfect for showcasing your creative work online. This template is designed to display one slide at a time, so it provides users with a visually captivating experience. With customizable navigation, eye-catching call-to-action layers, and animations, Tattoo Studio offers an interactive way to present your artwork.

5. Construction

🎓 Available in Smart Slider 3 Pro – Construction

The Construction slider is the perfect display for your projects, that effortlessly combines style and functionality. With user-friendly navigation, cool hover effects on arrows, and smooth slide transitions, exploring your projects becomes a breeze. It has unique options like Image Area and List layers. With captivating animations and a well-organized two-column layout, this slider is designed to captivate and engage. The Construction slider is your ultimate tool for converting visitors into satisfied clients.

6. Christmas Postcards

🎓 Available in Smart Slider 3 Pro – Christmas Postcards

Add a touch of holiday cheer to your website using the Christmas Postcards template. This template is perfect for highlighting your favorite content in a stunning holiday-themed layout. With its user-friendly navigation, captivating animations, and a hint of parallax, your Christmas greetings will truly shine. Plus, the template is responsive, guaranteeing a seamless experience on any device.

7. Monolith Boxed Slider

🎓 Available in Smart Slider 3 Pro – Monolith Boxed Slider

The Monolith Boxed Slider’s modern design will leave your audience wanting more. The Showcase slider type showcases multiple slides with a central focus on one of them, catching attention. Navigation is a breeze, allowing users to effortlessly swipe, click bullet points, or select side slides. The subtle yet elegant animations add to the overall visual experience, making the Monolith Boxed Slider the perfect choice for an impressive website.

8. Blur

🎓 Available in Smart Slider 3 Pro – Blur

Explore endless creativity using the Blur slider template. This template provides breathtaking visuals on any device. Add cool layers such as the Area and Countdown layers, which offer interactive and visually stunning content. With smooth animations like Crossfade and Distortion-Shard, along with easy-to-use navigation options, the Blur slider template turns your website into an eye-catching element of your website.

9. Showcase Portfolio

🎓 Available in Smart Slider 3 Pro – Showcase Portfolio

The Showcase Portfolio is a stylish and interactive slider created to beautifully showcase your portfolio. This slider highlights the main portfolio item at the center, with additional pieces on each side for a visually captivating experience. The smooth design and minimalistic layers bring your work to the forefront, inviting visitors to explore your portfolio further. It has seamless slide transitions with a subtle dark overlay effect, adding a touch of elegance.

10. Full Width Product Carousel

🎓 Available in Smart Slider 3 Pro – Full Width Product Carousel

This template takes product displays to a whole new level by combining captivating slides with intriguing product features. It’s ideal for showcasing discounts or highlighting your brands. The full-width layout and Carousel slider type make the most of large screens, providing an engaging experience. Visitors can easily navigate through slides using arrows, bullet points, or touch-screen swiping. With consistent image sizes, dynamic layouts, and responsive design, your online store will be elevated effortlessly.

11. Real Estate

🎓 Available in Smart Slider 3 Pro – Real Estate

You can upgrade your real estate or portfolio website using the elegant Real Estate slider template. This template is specifically designed for a modern hero section that stretches across the entire width of your page, highlighting one slide at a time. With its user-friendly navigation options such as bullets, swiping, or a customizable image-based feature, it provides a smooth experience. The template also includes captivating animations, like reveal effects and a unique shape divider, guaranteeing that your content leaves a lasting impact. Moreover, its responsive design and effortless customization options make it suitable for any device.

How to Create a Full Width Slider in WordPress?

1. Install Smart Slider 3

Smart Slider 3 is the best-rated free full width slider plugin in WordPress, and you can easily install it on your website. First, you should click on the Add New at the Plugins in your WordPress menu, search for Smart Slider 3, and click on the Install Now button.

Another option is that you can directly download the free version from the Smart Slider 3 website – or if you purchased the Pro, from the Download area – and then you can upload it through FTP.

2. Activate the plugin

After you have installed Smart Slider 3, you should activate it by clicking on the Activate button.

3. Create your slider

To create a new full width slider all you need is to click on the green New Project icon, then select the “Create a New Project” option, and after that choose the Full width layout in the drop-down list.

Or you can import a full width slider template from the Slider library, where you can find a lot of free and premium sliders.

In Smart Slider 3 you can customize every slider, you can set a background color, change the font size or family, use layers, and you can create an image slider, a thumbnail slider, or a WordPress carousel as well. It’s only up to you what you build. You should just drag & drop your layers, use a simple animation, and your slider is ready.

4. Publish your slider

With Smart Slider 3, you can publish your slider in more ways to your WordPress website.

• You can use Shortcode
• Or use the Smart Slider 3 Gutenberg block
• You can use the slider widget
• And you can publish the slider with PHP code as well.

Are you using a page builder? This isn’t a problem either, Smart Slider 3 works well with Elementor, Divi, Beaver Builder, and Page Builder by SiteOrigin, too.

Why use a full width slider on your page?

• It can be a good header which attracts the eye
• Makes any website look modern and trendy
• It is SEO-friendly, and search engines work well with the sliders’ text
• You can make it dynamically changing, it is easy to create a post or product slider
• You can customize it after publishing as well
• With a CTA button, you can navigate the visitor to another place on your website

Useful tips for full width slider settings

• Limit your slides’ width! Set a max width, and don’t let your slides go too wide. This will only restrain the width of the layers, but the background image will still stretch out to 100% width.
• Pay attention to the slider height. If you want to create a tall section, create rather a full page slider, where your slider will have 100% width and the height of your screen.
• Don’t use too much text. In Smart Slider your slide’s height is based on the layers and all the slides’ height are based on your highest slide. If you are using the Text layer, you can set up different texts for different devices which can be useful to show less text on mobile.
• Don’t work with too big sizes. 1200px width and 500-600px height is an optimal size for every device. We are working with these numbers at the templates, too.

Final Thoughts

Creating a full width slider can be a good choice for every website. Use it as a header or a section, and customize it as you imagined. Smart Slider 3 gives you a lot of opportunities in slider creation, build up your slider by using layers and create your own responsive WordPress slider.

The post 10 Beautiful Full Width Slider Examples appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/slider-checklist/ Thu, 08 Sep 2022 07:20:34 +0000 https://smartslider3.com/?post_type=blog&p=12367 When Smart Slider 3 was designed, we took special care of making it as responsive and mobile friendly as possible, while keeping the settings simple and easy to understand for everyone. We also made sure that no one has to write a single line of code when making a responsive slider, so every option that […]

The post 9 Point Ultimate Checklist to Create your Next Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]> When Smart Slider 3 was designed, we took special care of making it as responsive and mobile friendly as possible, while keeping the settings simple and easy to understand for everyone. We also made sure that no one has to write a single line of code when making a responsive slider, so every option that makes your slider 100% responsive is available in our intuitive interface.

In this article, I’ll introduce the most useful options and settings in Smart Slider 3. Take a look at this slider checklist, and create a good working and well designed slider for your WordPress or Joomla website.

📚 Table of contents

1. 💡 Planning
2. 📏 Slider sizes
3. 🖼️ Slider images
4. ✏️ Content
5. 🎨 Style
6. 📱 Mobile devices
7. 🔍 SEO
8. ⚡ Performance
9. 🎁 Animation & Effects

1. Planning

Before you start creating your slider, the first thing you should do is to plan your slider. These 5 questions can help you start before editing.

• What is your goal with the slider? This is one of the most important questions what you should know the answer for. Do you want to use it as a design element, call the user to an action, or do you want to make a gallery?
• Where will you put the slider? Will it be a homepage slider, a carousel at your product page, or do you want to put it into your post?
• What type of slider do you need? Do you want a full width slider, a full page slider or a carousel for your website?
• What will you put into the slider? If you have the text and the images before you start creating your slider, you can save time.
• How many slides do you want? Do you want to create a hero block with one slide, or an image slider with a predefined number of slides?

Take the time and answer these questions before you start to create your slider. It will make the editing easier and it is also important for creating a successful and well prepared slider.

2. Slider sizes

Setting a good slider size is a critical point in creating a slider. This value will define your slider size ratio, and the responsive sizes as well.

Set an optimal slider size

It is important to set an optimal slider size with which you will work. Don’t work with too big sizes. An optimal size for a slider is 1200px width and 500-800px height. In fact, we work with these numbers in our templates as well. Additionally, a smaller slider size makes it easier to edit your slider.

Choose the right layout

As every device has different size, setting the right layout is critical in creating a slider. The slider size defines the slider size ratio, but the layout defines how your slider should behaves on different screen sizes.

If you use Boxed layout then the slider can be as big as the container it’s in. If the Fullwidth layout is selected, the slider tries to fill the space between your browser’s left and right side, so the slider will reach outside of its container if needed. However, the height will be calculated based on the set slider size, so it won’t fill the browser window vertically. If you want your slider to have 100% width and the height of your screen, you can use the Full page layout.

Set limits

If you set a slider size, it will change with the screen. It can happen that your slider content will be too tall or too wide. To avoid that behaviour use the Limit Slide Width option. This will only restrain the width of the layers, but the background image will still stretch out to 100% width if your slider uses Full width layout.

3. Slider images

A well chosen slider image has a big impact on the visitor. It’s important what kind of images you use. There are more things you should pay attention if you want to create a good-looking and fast loading slider.

Use an optimized image

To create a good slider, it is necessary to pay attention to the quality and size of the images. A large image can slow down your slider’s speed, and it can be disturbing. You should pay attention that a small image can have a big size too, if its quality is too good. Above a particular level of quality people’s eyes can’t see the difference, so don’t use images with too high quality.

Set a device specific background image

It can happen that your background image looks and works perfectly on desktop, but not on mobile. Or it looks good also on mobile, but it’s loads slowly. Your mobile users should not load a wide and big image for their small screens. To avoid that you can set different images for each device in the Pro version of Smart Slider 3, which will reduce the loading time, too.

4. Content

To create a good responsive slider you should pay attention to the content of your slides. Your content is the reason why people come to your website. With Smart Slider 3 you can use a lot of layers such as heading or text layer with which you can build up a good content to your website. Media contents are also important, with a video slider you can grab the visitors’ attention as well.

Layout

Using a structure can be familiar from page builders. With rows and cols you can build up your slider, and it can help you align your layers, too. I can suggest that you should always use the content mode and a structure, it will make the whole building process easier.

Set a wrap after value

If you build up your slider with rows and cols, you can set breakpoints where the col should wrap. This setting is really useful on mobiles where you can put the cols under each other.

Different text length for every device

While a long text fits well on a large layer on your desktop slider, it is very unlikely that it will fit and look good on mobile. The text layer has a special option that no other layer has: it is possible to create device specific texts that can be managed on one layer.

5. Style

A good design can be an important point in a website. It is necessary that the visitor can read all the content on desktop and mobile devices as well. To create a clean but modern design try to maintain harmony in your slider. In other words, avoid using too many font families or colors.

• Check the responsive views. Always take a look at the mobile and tablet view, and make changes if it is needed.
• Keep the harmony. Use matching colors, and font-families.
• Avoid too much text. If you put too much text in your slider, the visitors won’t read it. Place a CTA button with a short text instead and navigate your visitors to another page.
• Mix the editing modes. Content mode is the best choice to create your structure and place your content. Canvas mode is perfect for decoration, and creating specially placed layers.
• Don’t take your design to the extreme. Don’t use too many animations, effects and colors on your slider, it can be disturbing for your visitors.

6. Mobile devices

Creating a mobile friendly website is a must have task what you should take into account since nowadays everybody uses their smart devices to browse on the web. With Smart Slider 3 you can create a responsive slider, but you should take care of a few things.

Font sizes

The layers that looked perfectly on desktop might need some adjustments on mobile. Usually what you need to change is the font size, what you can easily do with the Text Scale option. You can modify your font size with this function and it is device specific so the font size of the other devices will not change.

Hide layers on devices

You can disable a layer on any devices using the Show on option at the layer window. This feature is useful even if the layers are legible, but there are just too many of them, and that doesn’t really work well on mobile devices.

All in all, being able to hide any layer individually can make a huge difference when it comes to displaying the slider on smaller screen sizes.

Hide slides on devices

In the Pro version of Smart Slider you can hide not just layers, but entire slides on different devices. You can find this option at the Slide.

Hide sliders on devices

You can hide not only layers but your whole slider on different devices. If you don’t need the slider on a device, you can turn it off, and no codes will be placed on your site.

Controls

The layers and background images are not the only responsive parts of your slider. With controls it is possible to set a responsive value which will determine how much the control should scale down or up on different devices.

If changing the responsive value doesn’t help, the controls can also be hidden on any device. Hiding them will make the slider and the page cleaner and improve the user experience. The bullets are easy to click on a desktop, but when you use your phone, it is not easy to tap them with your fingers, so it is advised to simply turn them off on small devices.

7. SEO

Smart Slider 3 is an SEO friendly slider plugin, but you need to do your part, too. When you create a SEO friendly content, you need to pay attention to the basics of SEO. For instance, headings and paragraphs are important for your SEO structure. To ensure your slider does well in this matter, make sure to add headings and paragraphs as well. In order to make your images SEO friendly, be sure to always fill their alt tag.

8. Performance

Your users expect your site to load fast when they access it. The speed depends on a lot of factors and one of them is the slider. A slider can be an important point in a website loading time, so you should use it properly.

• Don’t use too many slides. Unless you create an image gallery, don’t put more than 5 slides to your slider.
• Optimize your images. Quality and size of the images are the most important factors what you should pay attention to. Don’t work with too high quality and too big images.
• Font-family rule. If you use many different font-families on your page, it can increase the loading time because they should load one by one. Try to limit the number of font families to maximum 3.
• Use the optimize settings. Smart Slider 3 have more options to optimize your slider. You can optimize your images to have lower resolution and quality. You can also convert them to WebP format or lazy load them.

9. Animation & Effects

Smart Slider 3 offers a lot of animation & effects, already in the free version. With a nice background animation you can cheer up your slider, and with layer animations you can grab your visitors’ attention and make a modern and good-looking slider.

Also you have an option to create an auto playing slider. This way you can share more content with your visitors, but you should take care of the slider autoplay interval, and always give a control for the user to stop it.

Conclusion

Smart Slider 3 has a lot of settings with which you can create a stunning slider. And if you know the points what you should pay attention to, creating a slider will be fun. Use optimized images, fill the alt tags, and check the result on different devices, and your slider will be an important part of your page. It’s also worth the time to check our tutorial videos and take a look at the settings in the slider examples, by which you can learn a lot.

The post 9 Point Ultimate Checklist to Create your Next Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/one-page-examples/ Wed, 31 Aug 2022 05:00:28 +0000 https://smartslider3.com/?post_type=blog&p=21169 One page website templates are common in today’s web design. It is mostly used in businesses that want to promote a single product, service or portfolio in a clear way. Most websites have multiple pages, usually a home page, a contact page, an about page, and a page for the offers. However, in most cases […]

The post 12 Stunning One Page Examples Which You Should Check appeared first on Smart Slider 3 — WordPress Plugin.

]]> One page website templates are common in today’s web design. It is mostly used in businesses that want to promote a single product, service or portfolio in a clear way. Most websites have multiple pages, usually a home page, a contact page, an about page, and a page for the offers. However, in most cases it is better to create a single page website. The visitors will see more information about your product if they don’t have to look for information in other pages. If you have a one page design, they will find everything in one place.

Let’s take a look at some inspiring one page examples for your next project. If you like one, you can import these templates with the Pro version of Smart Slider 3 from the Template Library.

1. Green Energy

Live Preview

This template is a great start to create a website that helps spreading the importance of going green. For this reason it’s main colors are green which is especially noticable on the menu.

👍 Why it works: The first block has video that promotes green energy and CTA buttons to prompt action. Subtle animations help enhance the experience.

2. Greek Restaurant

Live Preview

If you need a modern way to introduce your restaurant, this template is made for you. It has everything a one page restaurant template needs. For example, it displays the opening hours, introduces the menu and the team.

👍 Why it works: Simple color scheme is combined with attractive animations and bold fonts. They make the page easy to look at and memorable as well.

3. Vlogger

Live Preview

Vlogger is a simple page template that uses high contrast colors in the back and foreground. It also features a video in the hero section, since it’s main purpose to introduce a vlogger. Additionally, it has a couple of sections to display follower count.

👍 Why it works: The page has everything a vlogger needs to introduce themselves on the web. They have plenty of space to display their recent videos and also their follower count.

4. Orion Page Group

Live Preview

Orion page group is made for business websites where it is important to give information for the visitors. The parallax effect creates the illusion of depth when the page moves. There is also used the shape divider feature which gives a great visual experience.

👍 Why it works: The layer animations help the visitor focus on the content, and with the CTA buttons they can navigate to other sections on your page. This layout is perfect to introduce your product or service and their features.

5. Coffee One Page Example

Live Preview

The coffee shop one page design can be used for shops or some business websites. There is a navigation menu in the header, below there are beautiful caption images which can show more information on hover and there are more carousels where you can feature your products.

👍 Why it works: The carousels can work with dynamic generators so if you want to make a webshop, you can use the WooCommerce generator and show your products on the carousel.

6. Steak Bistro Landing Page

Live Preview

The steak Bistro landing page can be inspiring for gastro blogs or restaurant websites. You can navigate with the small images to other sections. There is a carousel for recipes which you can even make dynamic with a post slider.

👍 Why it works: If you scroll through the page, you will encounter more types of sliders and you will see different animations and effects, which gives a premium experience for the visitor.

7. Agency One Page Example

Live Preview

The Agency one page is a clean layout which you can use on your business website. The page starts with a full page slider with an animated shape divider which connects the header with the next section below. It encourages the visitor to stay on your site, which lowers the bounce rate.

👍 Why it works: There are 2 navigations, one on the top of the page, and one on the bottom in the footer. With those links you can navigate to important sections or other pages. The CTA-s call the user to an action, and show more information to the visitors.

8. Portfolio One Page Design

Live Preview

If you have a portfolio, this one page design can be a good choice. You can find a testimonial slider with video background where you can show your customers’ experiences.

👍 Why it works: The parallax effect is the main effect of that one page website, you can encounter a background parallax and layer parallax as well. It calls the visitors’ attention and gives a modern look to the page.

9. Healthcare Single Page Design

Live Preview

The Healthcare single page design is a good choice if you want to use a simple, clean but modern look on your webpage. The color scheme isn’t too much, the blue color symbolizes loyalty and trust. It doesn’t disturb the visitors and the texts are legible on each device.

👍 Why it works: This example features stunning blocks and sliders. The reveal animation on the top attracts the eye, and the layer animation makes your website special. There aren’t any images in the header, which can be unusual. However, because of that, the user can focus on the content and the important parts of your page.

10. Iceland One Page Example

Live Preview

This one page is a stunning example of different sections. The navigation on the top and a footer on the bottom give a good frame to the one page design. The hero header has a bottom shape divider which gets the visitor to scroll. The testimonial slider with the video background calls the user’s attention, and they will read the content.

👍 Why it works: You can change every element in the template, and with that layout you can make your unique one page design. There are various images, texts, buttons and separate layers which can even fit your design vision.

11. Bakery

Live Preview

This template starts off with a menu for easy navigation between its sections. Then there’s a hero slider under it, which features the most popular items the bakery sells. It’s also possible to feature a special menu and there’s a section for recipes.

👍 Why it works: It has nice animations that give some life to each section and make them more interesting. There’s also a parallax section and a video in lightbox which helps watch it without any disturbance.

12. Wedding Page Example

Live Preview

The wedding page is a great one page example which you can create with Smart Slider 3. The header is a full width slider with a ken burns effect which gives a little movement to the images. Also, there is a navigation by which you can navigate to the important sections. On the page there are more information blocks, and also there is a lightbox gallery with which you can show pictures in a modern way.

How to create a one page website in WordPress?

There are more opportunities to create a one page layout with WordPress. You can choose from 2 popular ways: use a page builder or a different plugin. Fortunately, there are a lot of free and premium options available which can help you design your website and build your one page template. You can choose a page builder, like Elementor or Divi, but you can create your one page layout with Smart Slider 3 as well.

Smart Slider 3 is one of the best visual builders which you can create a one page website with. You can put the sliders under one another or you can group them as well. It’s easy to use and fully responsive. You can easily drag & drop your layers, make a structure and your slider is ready.

After you’ve installed Smart Slider 3 Pro, you can make a one page layout in 4 steps:

1. Create a group
2. Create sliders in the group
3. Add your content to each slider
4. Publish the group

To learn how to create a one page website with Smart Slider 3, check out the video below, and check the tips and tricks!

Useful features for one page sites in Smart Slider 3

Slider Groups

The slider grouping feature can be useful for one page designs. You can add more sliders to one group, and if you publish it, it will display every slider inside the group.

Link actions

There are seven actions available by which you can go to the next slider or to a specific slider. You can use the actions on every layer, just use the link option, and create a good-working CTA.

Alias

The slider alias can be used for the shortcode or PHP code to publish the slider. You can also use it as an #alias anchor link with which you can navigate to the slider directly. There is also an option to scroll to a specific slider inside a slider.

Why is a one page website good?

• Informative. A one page design will show all information that a visitor needs. There isn’t too much or less content, the visitors will find everything they need.
• There isn’t duplicated content. Duplication isn’t good for SEO and it can disturb the visitors.
• Mobile friendly. A one page website is more legible in mobile devices because everything is in one place.
• It’s easy to create. You don’t need to make more menu and complicated structures, in a one page design everything is in one place.
• You can use it in several ways. If you have an agency, a product page, or a portfolio, you can create a one page website to introduce your business.

Final Thoughts

If you browse on the web, probably you will meet a lot of one page websites. You can use it in your small business, and it isn’t hard to create. If you use WordPress, you can choose from a lot of plugins or page builders which can help you create what you imagined. Smart Slider 3 is a simple and responsive solution which you can make your one page design with.

All things considered, your business needs its own site and it must have an eye catching website design. After your beautiful one page website is ready, you can start doing some digital marketing, like sharing the URL on a social media site.

The post 12 Stunning One Page Examples Which You Should Check appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/slider-performance/ Tue, 13 Apr 2021 05:00:33 +0000 https://smartslider3.com/?post_type=blog&p=12371 Having a speedy website is crucial when you want to keep your visitors. As a matter of fact, as no one wants to wait more than a few seconds for a page to load. Because of this, everyone wants their site to load fast. But making a site load fast can be challenging, because of […]

The post How to Speed Up Your Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]> Having a speedy website is crucial when you want to keep your visitors. As a matter of fact, as no one wants to wait more than a few seconds for a page to load. Because of this, everyone wants their site to load fast. But making a site load fast can be challenging, because of the rich media (images and videos) usage. Both images and videos load slower than texts, therefore they need to be optimized for the web.

Smart Slider 3 is a WordPress and Joomla slider plugin and it is a great choice to add rich media to your website. You can create an image slider, a video slider, even a whole landing page with this plugin. In this article I’ll show you how to check your site’s speed and how to speed up your sliders.

What can slow down a website?

The quick answer: anything. Even texts can slow down the page if they are really long. In most cases, the problem originates from the used rich media. Or it could be the fact that the server is just not fast enough to return the requested content in a timely manner.

Would you like to know how fast your site is? Use Google PageSpeed Insights to measure your site’s speed. It checks how fast your site loads, and gives you tips on where to improve it. Google PageSpeed Insights is an incredible tool. For this reason, they built it into Chrome browser, where it’s called Lighthouse.

The metrics of speed

Lighthouse has several different metrics which can describe your site speed. They’re all important to understand how to improve your site, so I’ll explain them in a few words.

• First Contentful Paint (FCP), which measures when the browser renders the first bit of content. It’s the first feedback to the user that the page is actually loading.
• Speed Index (SI) shows you how quickly the contents of a page are visibly populated.
• Largest Contentful Paint (LCP) provides details about the largest image or text paint before user input.
• Time to Interactive (TTI). It’s the point in time when the last Long Task finished.
• Total Blocking Time (TBT): it measures the total amount of time between FCP and TTI
• Cumulative Layout Shift (CLS) is a user-centric metric for measuring visual stability

The values of these metrics give you hints where you can improve your website. Unfortunately, usually, it is not so straightforward where to start. This is especially true if you’re new to web development.

What’s the best way to optimize your website?

Based on our experience the best way to optimize your website is by following this checklist:

1. Use a reliable hosting provider. A throttled web server can destroy all your achievements.
   1. Run the latest version of server software
   2. Use PHP with opcache enabled
   3. Use Cloudflare as middleware and set up caching policies properly
2. Always use the latest WordPress available
3. Test your theme in an empty WordPress installation and optimize it until you reach 100/100 on an empty page. You can find out the best example of how to do it here.
   1. You can try to optimize plugins to see which gives the best results with your theme.
   2. Prepare your “Link” header to give a hint to the browser on what to preload. This could be the style.css, a font family and every render-blocking resource.
   3. Try to get rid of as many render-blocking resources as you can.
   4. Use only one external font family and make sure it’s a variable font that is locally hosted.
   5. Reduce JavaScript usage and drop jQuery if you can
4. Use plugins that are optimized for Lighthouse. You won’t be able to fix a third-party plugin without breaking its updates.
5. Prepare your content for good scores. For example, use fewer images and videos above the fold. Also, make sure your images and videos are as optimized as possible.

How much impact plugins have on my site’s performance?

Every plugin you install on your website will eventually impact your site’s performance. They’ll lower your page speed score, and slow down your website. The only exceptions are optimizing plugins, as their purpose is to improve speed. What you should consider is how much impact each plugin has on your site performance. Also, whether the functionality the plugin gives you worth the price of performance.

If you’re looking to buy a plugin, ask the developers how they optimized their plugin for Lighthouse. Also, test the (demo) website of the plugin with Lighthouse yourself to see how well it performs. If the demo site’s performance is poor, you can’t expect to have good results on your own site either. After all, if the developers couldn’t make their own site perform well, how could you?

As a matter of fact, we’re convinced the content you create with Smart Slider 3 is important. It helps you give your users an amazing and memorable experience with your website. For this reason, we made every effort to optimize Smart Slider 3.5. As a result, our homepage, which we created using sliders only (except the header and the footer) got a 100/100 score. Isn’t that amazing?

Why is my slider loading slowly?

First of all, make sure that your slider is loading slowly on your website and not anything else. It might seem that Smart Slider 3 loads slow, but actually the whole site is slow. If your site isn’t fast, your slider can’t load fast either.

You can see what loads on your website for how long, if you use a website speed test. Or you could use Chrome or Firefox browsers. In this case, press F12 → click on the “Network” tab and refresh the page with hard refresh. Here you will see all elements of your page, and you can order them according to the loading time, too.

To create a fast-loading and optimized slider, it is important to pay attention to the quality and size of the images. A large image can slow down your slider and it can be disturbing for the visitor. You should pay attention that a small image can have a big size too if its quality is too good. Above a particular level of quality, people’s eyes can’t see the difference so don’t use images with too high quality.

Slider performance tips & tricks – How to create a fast-loading slider?

A fast-loading website is an expectation nowadays. Creating a slider can be an important point at the loading time of a Joomla or WordPress as well. So if you don’t use your slider properly, it can be slow. There are a few tips & tricks which you can create an optimized slider with.

1. Choose the correct image size

Choosing correct images is the most important part of optimizing your slider’s performance. First, make sure your images don’t weight more than 500kb. The easiest is to resize the pictures before you upload them to your website. An optimal image width is 1920px for a full width slider. So try to aim for that.

Also, you should pay attention to the quality of your media. In other words, don’t add too high quality pictures to your site. Additionally, if you use .jpgs instead of .pngs, you can save space, too.

2. Always plan your slider

Don’t rush into the slider creation. Plan your slider, prepare the assets (images, videos) you’ll use. Make sure they’re correctly sized for the slider you’ll create. It’s always better to think ahead, right? Check our slider checklist, and create a good-working slider.

3. Avoid using linked Absolute positioned layers.

Linking an Absolute layer means that it’s no longer positioned from its container, but from another Absolute layer. So, to be able to display the linked layer, the slider first need to calculate the position of the layer it’s linked to. After that, it can start to calculate the position of the second layer. This takes time, and the slider can’t show up until every layer position is calculated. Therefore using linked layers will slow down your site, and you should avoid using them.

4. Reduce the number of slides

Unless you want to make a gallery, don’t put more than 5 slides to your slider. If you have too many slides, and you have lots of layers on them, that can negatively impact the loading speed. Also, the slider can’t be so successful and not only because of the speed. If you have too many slides, the visitors won’t click through them. Try focusing on your most important message!

5. Header preload

You should preload every part of your site which counts as a render-blocking resource. If sliders play an important part in your website’s content, you should preload it in Smart Slider Global Settings → Framework → Header Preload.

6. Reduce the number and styles of fonts

Using many different font-families also can increase the loading time. Try to limit the number of the font-families to maximum 3. If you use icons, choose from only one icon set, because loading different icon sets takes more time, too.

7. Use SVG icons

Usually you’ll see font icons on the web. Smart Slider 3’s icon layer uses icons from the most popular libraries, such as Font Awesome 4 and Icomoon. Using such icons requires loading an extra font family and CSS file per font library. This affects your site’s speed.

8. Use a local cover image for videos.

When you add a YouTube or Vimeo video to your slide, it loads a cover image for the video. This image is coming from YouTube or Vimeo, and not from your own site. This means the speed of your site depends on how fast they serve the image. To ensure the optimized loading, use a cover image you host on your site.

9. Set the proper loading type for your sliders

Unless your slider loads above the fold, it shouldn’t load instantly, but only after the page has loaded.

10. Use the optimization settings of Smart Slider 3

Smart Slider 3 has many different options to help you optimize your slider. For example, you can convert your background and layer images to WebP format. Also, you can resize the pictures for desktop, tablet and mobile. As a result, you can optimize the loading for all kinds of visitors.

Smart Slider 3 optimization settings

There are cases when you can’t do some optimization steps. For example, if your slider is already published, you can’t just go and replace every png image with jpg. It would be super time-consuming. But there are still a bunch of tricks to speed up your slider.

For a better understanding, let me illustrate the possibilities with a few examples. I will create a new slider in Smart Slider 3 with three slides. Each slide has a background image (1, 2, 3), but they don’t have any layers. The file size of the images is pretty large, and they have high quality. The total file size of the three images is more than 15Mb. As a result, adding them to your site in any way will immediately slow it down.

Image optimization

The first image optimization option you should use is the Convert to WebP. WebP is a new image format for the web, which allows creating images with low file size but still great quality. So, the Convert to WebP option creates super fast loading WebP images from your pictures. Additionally, it reduces the file size, too.

You can also resize the converted WebP images to reduce their dimension. This way, you can get a more optimized image for each device.

	Convert to WebP off	Convert to WebP on	Convert to WebP and Resize on
Image dimensions	6000 × 4000px	6000 × 4000px	1920 × 1357px
Page size	16.9 MB	9.7 MB	1.7 MB
Internet speed	10Mbit/s	10Mbit/s	10Mbit/s
Loading time	14.03s	8.72s	2.09s

As you can see, using the Convert to WebP option, the page size decreased 10 times. Additionally, this option drastically reduced the page loading time.

Furthermore, you can convert your layer images to WebP as well. As a result, you can reduce the size of the images you used in your layers. It’s worth noting that the Convert to WebP option works only on certain layers. For example, on the image layer, caption layer, and transition layer.

Lazy loading

Smart Slider 3 offers a lazy loading option for the slide background images. You can find it at Slider settings → Optimize tab → under Loading. It has two different options to help you fine tune your slider’s loading. The Delayed loading which loads the images after everything else has been loaded.

But what will make the most difference is the Lazy Loading. It only loads as many slide background images at once, as you want. For example, you can only load the first image of your slider. The other images will only load when the visitor switches to their slide. As a result, you can save up lots of loading time!

Since I have only three images, I set the slider to load only the first slide’s image. To achieve this, I set the Lazy loading → Load neighbor to 0 slides. As a result, only one of the 3 images will load.

	Lazy loading off	Lazy loading on	Lazy loading + Convert to WebP + Resize on
Image dimensions	6000 × 4000px	6000 × 4000px	1920 × 1280px
Page size	16.9 MB	4.6 MB	790 kB
Internet speed	10Mbit/s	10Mbit/s	10Mbit/s
Loading time	14.03s	4.28s	927ms

As you can see, using the Lazy Loading option made the page load fast. Using the Convert to WebP and Resize options, the page loaded under 1 seconds. That’s a super fast loading time!

Additionally, the lazy loading option made the page load faster without using optimized WebP images. This means just by lazy loading your images you can save precious loading time.

Loading type

If your slider is not above the fold, it should not load instantly. So, at every slider which is below the fold, you should change the Loading type to After page loaded. This way, the slider’s codes won’t be loaded until the visitor scrolls to the slider.

The table below shows how much difference the After page loaded option makes. It’s worth noting that for this check, I placed the slider below the fold.

	Loading type: Instant	Loading type: After page loaded
Page size	790 kB	439kb
Internet speed	10Mbit/s	10Mbit/s
Loading time	927ms	510ms

Speeding up a self-hosted video slider

If you have a video slider where you use your self-hosted videos, some of the suggestions above won’t help you at all. However, there are some tips that you can still apply to your case. For example, you can make your video have the same size as your slider. Remember, a background video doesn’t have to have too high quality. So you can reduce the file size by reducing the quality.

Also, you can disable the slide background video on mobile at the Optimize tab. So you can save loading time for your mobile users, and they will see only the background image.

Additionally, you can make Smart Slider 3 not to call your video until the slider is ready. You can achieve that if you set a slide background image, too. In this case, you can decrease the loading time of your page, because first the background image will load. You have many options to optimize the background image, so it will load a lot faster than the video ever could. Then video will start when the slider is completely ready.

Is your website still slow?

If you enabled the optimization options listed above without any effect, try using a cache or CDN. Joomla offers some caching methods by default that you can try. But for WordPress, you will need a 3rd party WordPress plugin, such as WP Rocket or W3 Total Cache.

Final Thoughts

Realizing that your website has slowed down never feels good. It can cause a headache when you try to figure out what causes the loss of speed. Also, you might make desperate steps when trying to make compromises to get back your fast pages.

Remember, most of the speed depends on the used rich media (both file size and amount). And that is something that you can optimize easily. For example, if you use Smart Slider, you can turn on a couple of options, and the slider will take care of the problems. Having a speedy slider (and webpage) is worth that few extra clicks, isn’t it?

The post How to Speed Up Your Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/slider-template/ Mon, 01 Mar 2021 06:00:48 +0000 https://smartslider3.com/?post_type=blog&p=36783 Sliders are beloved design elements on different websites. They can cheer up your page and can call the visitors’ attention. Using a slider template speeds up your workflow. You may have questions like why is it worth using a template or how do you know which template is good for you? Which plugin has premium […]

The post The Best WordPress Slider Templates appeared first on Smart Slider 3 — WordPress Plugin.

]]> Sliders are beloved design elements on different websites. They can cheer up your page and can call the visitors’ attention. Using a slider template speeds up your workflow. You may have questions like why is it worth using a template or how do you know which template is good for you? Which plugin has premium and free slider templates which you can fully customize? In this article I will answer these questions for you, and finally, I have summarized the best WordPress slider templates which you can use.

What is a slider template?

Slider templates are premade sliders which you can import, customize and, moreover, instantly use on your site. Slider templates have effects on it, contain images, the design is ready, and the slider is optimized for all devices. Moreover, they can help to start not from scratch but a ready to use layout.

Why is it worth using a slider template?

• It speeds up your workflow: When you create your page, a ready to use slider template can be a lot of help. If you find the one which fits your design, all you need to do is change the content, and publish it on your website.
• It teaches how to use the software: When you start using a new software, the beginning can be a challenge how to use the settings properly. You can learn a lot from a template: where to change layers, texts, images, animations, or where to change the style. You may not notice, but you’ve learned where these settings are, and how you can use them.
• Ready to use effects: You don’t need to guess a completely new animation flow, in addition, you can save a lot of time with the ready animations.
• Pre-designed: If you aren’t a designer, it can be hard to create a modern slider from scratch. A slider template is great for that, here you don’t need to think of the design, and you can customize everything.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

5 points to recognize a good slider template

There are a lot of places where you can find slider templates. But how do you know which are reliable and work on every device? I’ve summarized 5 points, which you can take care of when looking for a good template.

1. Customizable

This is the most important part when you want to use a slider template: can you customize every part of it? A good slider template works the same way when you create a slider from zero, and lets you change anything you want: colors, sizes, images, texts, effects, etc.

2. Not too complicated

Too complicated layouts can make your work harder, and I’m not sure if it’s worth it. If you can find out how the slider works, then your visitors can also find it out, and it can be a great starting point.

3. Well designed

A good template can make your website look as if you’ve hired a professional web designer. It looks good, uses modern effects, and stands its ground in the modern web design.

4. Responsive

Nowadays, this criterion is basic, every slider should be responsive and work well on different devices: mobile, tablet, laptop and PC. Each part should be readable on each device, the text and images shouldn’t be too small or big.

5. Quality assets

A great predesigned slider template should use quality assets like free to use images without any watermark with quality resolution.

What is Smart Slider?

If you have a WordPress website you may look for a slider plugin where you can find ready to use slider templates. Smart Slider is one of the best WordPress slider plugins which you can create slideshows, hero headers or homepage sliders with and it can be a great part of your page. It comes with tons of preset designs, and you can customize each slider template to your liking. You can add more texts, images, call to action buttons on your slider, you can change the colors, or add more layers. There isn’t really a limit on what you can do or what you can use a slider template for.

Smart Slider has free and pro versions. The free version is available in the WordPress repository, and has 800,000 active installs and 5-star ratings. The pro version gives options to a lot of features like parallax or particle effect, or layer animations, and you can import more slider templates from our library.

If you don’t want to waste your time by learning how to use a new software with many features, starting from a slider template can be useful. Luckily, Smart Slider offers a lot of ready to use slider templates, which you can easily use and personalize.

Template library of Smart Slider

When you create a slider in Smart Slider you can choose to create it from scratch or import a slider template. Smart Slider’s template library comes with 180+ customizable sliders, you can choose from blocks, sliders, carousels, video sliders or even pages.

10 different categories

Categories make it easier to find a matching template to your page. You want a video slider on the top of your page? Just click on the video label, and import the template you like.

• Free: Free slider templates which can be imported in the free version of Smart Slider
• Full width: Full width sliders fill the available width of the browser.
• Full page: Full page sliders are 100% width and height, can be great homepage sliders.
• Page: These are slider groups with which you can create your one page layout with only sliders.
• Block: Blocks are single slides which can be used as great hero headers.
• Carousel: With carousels you can display more slides at the same time, they can be great product carousels.
• Showcase: Showcases are similar to carousels, you can display more slides, but you can show parts of the previous and next slides.
• Boxed: Boxed sliders are as big as the containers where you publish them.
• Video: Those sliders where you can find a video. A video can be in the background as a design element, or can be in the focus as a layer, like a YouTube slider.
• Premium: All of the sliders which are available only in the Pro version.

How to import a slider template?

After you’ve installed Smart Slider you are able to import a slider template. For that, go to the Dashboard, and click on the green New Project button. Then select the Start with a template option, and import a template by clicking on the import button, which is visible when you hover over a slider.

How to create a dynamic slider using the slider templates?

With Smart Slider, you are able to create dynamic sliders like a post slider or a product slider which automatically updates if you have a new post or product. You can create a dynamic slider and use our template if you follow these 7 steps.

1. Import a slider template from the Template library
2. After that, you will be in the Slider settings page. Select a slide that you want to use, and open it.
3. Copy the slide
4. Remove all slides from the template
5. Create a dynamic slide
6. Open that slide, and paste the copied slide
7. Click on the layers which you want to be dynamic and use variables

Publish your slider

There are more ways to publish your slider. You can use the Gutenberg editor and use the Smart Slider block, or you can use page builders like Elementor or Divi and use their widgets. You can also copy and paste the slider’s shortcode into a post or page, and if you are an advanced user, you can publish the slider using their PHP code.

The best slider templates

Are you looking for a great slider template for your website? Smart Slider has tons of templates which you can use, each pro and free slider templates. Now I have collected the 10 best slider templates which may inspire you and fit your page.

1. Full Page Portfolio

The full page portfolio slider is a great example of a full page layout. Full page sliders fill the width and height of your browser. You can encounter this kind of layout in most WordPress themes. The slider has 4 slides, and you can switch slides with scrolling. After the latest slide, you can scroll below the slider. With this use case, you can make the visitors check out all content in the slider.

2. Free Marketplace

This free slider template stands out from the others with its simplicity. This block can be a great hero header, and you can easily customize it. Just change the images and the texts, and your hero is done.

3. Cover Flow

The Cover Flow slider is a showcase which displays more slides at the same time. If you click on the previous or next slides, you can navigate in a cover flow. After the last slide the first will come which gives a great circle for the slideshow.

4. Crypto Block

The crypto block slider template helps to create a modern header with modern animations and effects. The layers are coming in after each other thanks for the layer animation. But the slider doesn’t end there because the animated heading attracts the eye, and the changing word shows us interesting facts. Particles are moving in the background which completes the one color background.

5. Bakery Page

Do you want to create a one-page website? Smart Slider also has a one-page slider template which consists of more slides under each other. You need to publish only the slider group, and the sliders will display in the adjusted order.

6. Lawyer slider

Do you have a lawyer company and find a stunning slider template on the top of your page? If you have the Pro version of Smart Slider, you can import the Lawyer slider with 3 clicks. Each slide has its own content, which is fully customizable, and the video is a great design element in the background.

7. Category Carousel

With the Category Carousel template you can navigate between your product categories. There are more slides next to each other, and you can put a link on the slides, with which you can navigate your visitor to the category page.

8. Free Traveler Block

One of the best free slider templates is the free traveler block. This hero header is fully customizable and it is fully responsive, and looks good on every device. The top place is the place of your navigation, the middle is the place of your CTA, and the bottom part is for social media.

9. Broken Grid Slider

That slider template can be useful if you’re searching a place to display your latest post in an interactive and attractive way. Use it as a dynamically changing post slider, and place it on your blog.

10. Gym slider

Gym slider is a boxed slider template and can fit in every section of your page. The colorful tiles have a role, each navigates to a pre-selected slide. It can fit every fitness website, but if you personalize the images, the template offers endless possibilities.

Final Thoughts

Using pre-designed slider templates can save you a lot of time. If you don’t want to start designing from scratch and waste your time, it is enough if you import a template and personalize it. If you choose Smart Slider you can choose from tons of premade sliders in different categories, and you can customize every template as you imagined.

The post The Best WordPress Slider Templates appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/wordpress-design-trends/ Thu, 10 Dec 2020 09:00:55 +0000 https://smartslider3.com/?post_type=blog&p=33974 WordPress design trends are constantly changing, and are always popular trends that you can encounter on the sites. Web developers and designers want the visitors to spend more time on their website so they care about the look of the page. They need to create good-looking and eye-catching designs but don’t forget the content is […]

The post WordPress Design Trends in 2021 appeared first on Smart Slider 3 — WordPress Plugin.

]]> WordPress design trends are constantly changing, and are always popular trends that you can encounter on the sites. Web developers and designers want the visitors to spend more time on their website so they care about the look of the page. They need to create good-looking and eye-catching designs but don’t forget the content is also important.

I’ve collected 10+1 WordPress Design trends which you can encounter in 2021 and they can be also a great inspiration if you are creating your website now.

WordPress Design options

Before I start with the trends, I would like to talk about the WordPress design options. In WordPress, you can choose from default WordPress themes like Twenty Twenty, or you can choose a theme to your liking.

WordPress has customizing options for the themes where you can customize the default colors or the fonts. The theme can also put options there like setting a header image, or a background video. If you want to customize only one page or post, you can do that with the default Gutenberg editor. There are plugins which are compatible with Gutenberg, and you can create blocks, or give more design options for the blocks.

WordPress Themes

In my opinion, there are 3 types of themes available in WordPress if we focus on the design. A basic theme, where you can choose from layouts, has its own widgets and you can find all design options in one place in the WordPress editor. You can set the look of the page and posts, and can also create a front page. The second type is a theme that comes with a visual builder. It allows you tons of options that you can choose from and you can design your page as you have imagined.

The third type is the themes that are created to work well with page builders. These themes also have their own design settings and in a lot of cases have their own widgets that work inside the page builders. Of course, each theme can and should work without any other plugins, but there are a lot of them that offer to use third party plugins, and you can use all of their features with them.

If you want separate designs for each page, then you can consider choosing a theme that work well with the most popular page builders and create your pages there.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

Which are the best tools for WordPress design?

A web designer always uses a 3rd party tool like PhotoShop or Sketch. But a great design is not just great colors or images, you should care about the content, too. There are 5 steps that you can take care of when designing a website or a part of the site. Also, a designer should plan a design which the developer can implement. They need to know the trends, the tools, and all of the options which can be used.

Today is the page builder period of WordPress. More and more WordPress websites have been built with a page builder or with a visual builder. The WordPress themes also care about the page builders, and have optimizations for it or create their own builder. With a page builder or visual builder, you can create whole websites with drag and drop without any coding skills. Let me mention my 3 favorite visual builders.

Elementor

The most used page builder is Elementor in WordPress. Elementor has 5+ million active installs and a lot of plugins and extensions. There is a free and a paid version available, you can start with pre-made templates, or create your WordPress design from a sketch.

Divi

Divi is a great theme with a built-in page builder, and lots of WordPress users decide to create their website with Divi. This premium theme has a lot of design options, extensions, and tools that you can use to create your unique website. It follows the latest trends and always has more and more tools available which can cheer up your design.

Smart Slider 3

Smart Slider 3 is the best visual builder of WordPress in which you can create stunning sliders and blocks. This plugin has a lot of design options which you can use, you can easily achieve the layout you want. The drag and drop builder helps you to put elements where you want, it is responsive, and you can easily publish it.

10+1 WordPress design trends

I’ve collected 10+1 design trends which you mostly meet on WordPress pages. If you want some inspiration, take a look at the examples, and build your own design using these trends.

1. Broken grid layouts

One of the most used WordPress design trends is the broken grid layout. Overlapping elements and asymmetrical designs are loved on the web. This kind of layout cheers up the page and breaks the monotony of a site. However, broken grids aren’t the best solution for every website, but if you want to create a personal and original look, you can try to create a layout like this.

Breaking the standard layouts makes the impression that the site isn’t traditional and doesn’t follow strict rules. It is a modern look, so your site can stand out from the crowd.

Live Preview

2. Vibrant colors, high saturation

Today the bold, vibrant colors and high saturations are the winners. The colors are very important, they can determine the whole page, and has a big impact on people’s emotions. Vibrant colors catch the eye and give a good feeling. WordPress designers love this trend, too.

Many premium themes have a focus on color. It isn’t easy to find matching colors, but if you don’t have an idea, you can get some inspiration from websites that gives color palette for inspiration like Flat UI Colors, Material palette or Colorhunt.

Live Preview

3. Illustrations

One of today’s coolest trends uses illustration on the header or footer. Illustrations make the website more personal and can tell a story with the images. The key is to find an illustration that matches what your site is about. Illustrations can be used in a lot of ways. They can give a feeling, show a movement, an action or a style. Marketing agencies love to use people with graphs and numbers because it can give a professionality of the page.

Live Preview

4. Headings in the background

Live Preview

I’m really sure you have seen headings which are in backgrounds. Not every design element should be stunning and be in the front or need a focus. These headings aren’t lost in the background, they can be rather a unified message for the visitors. They can focus on the most important parts of your design, but this heading makes the message whole.

5. Mobile-friendly designs

Nowadays it is a basic and needed trend to create a mobile-friendly design. Designers should focus on mobile devices and developers should achieve a responsive design. The best is if you have planned a separate design for mobile and desktop. The texts should be legible so it is a used trend to break the grids into new lines.

6. Slider

Sliders are one of the most popular design elements of WordPress. Designers, theme developers and also clients love them. With a slider you can highlight your product or company, showing more content in one place, and also they catch the visitors’ attention. You should care about the autoplaying slider because they can be annoying so make sure if you autoplay them, set an appropriate duration.

Live Preview

7. Hero image

When you browse on the WordPress sites, you can meet a hero image almost in every site. In a lot of cases, you can change the images in the theme options, but you can use a plugin like Smart Slider to create it. Making the first impression is incredibly important and the hero images are the first thing you can see.

Put some text on the image, but don’t burn in on it. Also, you can use CTA-s which the visitors can navigate to other pages of your site.

Live Preview

8. Split screens

Creating a modern and good looking website can be a challenge if you aren’t a professional designer. It’s not easy to create a website and use the latest trend, and you should also care about the content. The split screens break your layout into 2 sections and maximize the screen space. Each side of the screen is used, and with a great animation, it can look really great.

Live Preview

9. Parallax

With the parallax effect, you can give your page a design depth. There are more parallax effects which you can encounter on the coolest websites. The most used is the parallax in the background. In this case, there is a big image in the background, and while you are scrolling, you can see another part of it.

Also, you can use a parallax effect on a text, or any smaller element, and you can move them by scrolling or move it away with your mouse. This can give a great visual impression.

Live Preview

10. Creative Typography

Typography is one of the most important design tools. In web design, a well-chosen font can give your site another look. Also, a great trend is to highlight a text or put animation on it. Typewriter effects or highlighted headings highlight your most important part of your content, and the animations make your website live.

Live Preview

+1 One page websites

Nowadays social media is the focus of a lot of companies. But if you want to make your company more professional, then you will need a website. WordPress is a great tool to create websites, and if you use a page builder, you can build your website without coding knowledge. One-page websites are becoming more popular, they can be done with minimal effort, but your clients can find the most important information about your page. Pay attention to using fitting blocks, colors and typography.

Live Preview

Final Thoughts

Using trends can be a good decision if you want to create a modern website, but don’t forget, trends are constantly changing. Also, you should care about the content and SEO. Search engines can find you if you have quality content, but the users will stay on your page if it’s interesting for them. Using animations and effects can attract the eye but don’t use too much, take care of the harmony. I hope you have enjoyed the examples and got the inspiration for your next project.

The post WordPress Design Trends in 2021 appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/wordpress-hero-image/ Fri, 09 Oct 2020 06:46:33 +0000 https://smartslider3.com/?post_type=blog&p=3839 One of the most important trends nowadays in web design is the WordPress hero image design. These special headers are often referred to as hero image, hero slider, banner, video header or carousel. Making a good first impression is incredibly important. You only get one shot with the first impression and you have only a […]

The post All About WordPress Hero Images From Idea To Implementation appeared first on Smart Slider 3 — WordPress Plugin.

]]> One of the most important trends nowadays in web design is the WordPress hero image design. These special headers are often referred to as hero image, hero slider, banner, video header or carousel. Making a good first impression is incredibly important. You only get one shot with the first impression and you have only a few seconds to grab your visitors’ attention.

In this article, I will introduce you to some of the best practices, hero image examples and provide incredible resources to help you create an effective WordPress hero image for your website.

What you can use a hero image for?

When you browse on the web you can encounter a lot of hero images with different goals. I collected some cases when you can use a hero image. Let’s see them.

• Highlight your product. The best way to highlight a product is a good hero image on your page. The visitors see this image first and can read small information about your product. Put a link on your Buy now page, and your visitors can instantly buy.
• Share information. You can use a hero image to share information about your product or services in another way. You can add text on the image, also you can add a video which gives information to the visitors.
• Feature the latest news. Do you want to feature your latest or an important post for the visitors? Put the title and a small description on the image, a button with the link of the post, and I’m sure, if it’s interesting, the visitor will click on it to read more.
• Design element. A hero image can be a great design element of your page, it is in the focus, cheers up your page, and usually gets interaction with the visitors.
• Create an emotion. Emotion can be a big factor. Evoking the right emotion can instantly build trust with your visitors.

How to choose a WordPress hero image?

When you choose a hero image, it’s important to keep in mind that your hero image not only needs to look good, its style needs to suit your whole website. If you use emotional hero images, think about the mood of your page. The images can be full page but smaller images also can be featured below the navigation bar. These large banner images are a trend in web design and precede an overview from your business, so you should choose a suitable image for your page.

Where to find the best free resources for a hero image?

Good images are a key part of a great hero image but finding images can be difficult. Here is my collection of the best websites to find free photos and videos.

• Unsplash – High-resolution photos
• Pexels – Best free stock photos in one place
• Picjumbo – Totally free photos stock images
• Kaboompics – Great place to get breathtaking free pictures for business or personal projects
• Death to the Stock Photo – Free photos by email every month
• Coverr – Beautiful, free videos for your homepage
• Pikwizard – Free stock photos for all your creative needs

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

What should a good hero image contain?

A WordPress hero image presents an overview of your service or product. It can be a simple image, but it is more successful if you use the content on it, like a CTA. Let’s see the 4 important parts of what a hero image should contain.

Call to Action

CTA button is the action you want your visitor to take, so your goal with the hero image is to persuade visitors to take this action. It doesn’t matter if your goal is to increase sales or generate email leads. But don’t forget you have to be clear about what action you want the visitor to take and make it as easy as possible. Okay, but how to start? Start with the CTA and work back. It will be so much easier if you know your goal exactly.

Good copy

The first headline your visitor sees is the most important copy you’ll write on your website. Writing a good web copy isn’t easy and it requires skills to get it right. Some of the best copywriters will spend weeks just crafting the headline. Your goal is to communicate your value and get the visitor to interact on your website.

Quality background

Probably imagery is the most important part of the hero image. It’s a powerful tool to help you communicate and differentiate your website. Your hero image should contain images, videos or graphics that catch the eye and captivate your audience. Mostly contextual images convey your message more effectively, non-contextual images don’t supplement the message with any additional information.

Live Preview

Impact

It’s all about creating that WOW moment. The best hero images achieve a balance between capturing the reader’s attention and providing an adequate amount of useful information.

For example, animations are great for making a website design unforgettable and grab your visitors’ attention. The key to animation as a design tool is moderation. There are many ways of using animation to improve the user experience in Smart Slider 3: layer animation, split text animation or memorable interaction.

How to create a WordPress hero image easily?

Now may you want to put a hero image on your page, but you don’t know how to do it. The best if you search a plugin in which you can create a hero section for your site easily. With a plugin in the ideal case, you can put a text or a button on the image, and you can publish it where you want. Smart Slider is a great plugin to create hero images.

What is Smart Slider 3?

Smart Slider 3 is a free slider plugin with which you can easily create sliders, hero images and blocks without coding knowledge. With the drag and drop editor, you can build the block you want, and use layers like heading or button. It is fully responsive, and when you are ready, you can publish it with a simple shortcode, with Gutenberg or with a page builder, too.

Because Smart Slider 3 is not just a slider plugin you will be able to create the perfect WordPress hero image for your website easily. No matter what type you need, they’re typically located at the top of a website and these are the first things that people see.

Create a hero block

The block type is a special slider type of Smart Slider. The block displays only a single slide, which is a perfect choice to create a hero image. Creating a hero block with Smart Slider is very simple. Just click on the green new project button, and create a new project or start with a ready to use template.

Then you can edit your block in a visual editor. In the free version of Smart Slider, you can choose from 7 layers, in the Pro version there are 24 types of layers. You can put a layer where you want, change its color, size or put a link on it. Also, you have the option to animate your layers, which can call the visitors’ attention.

Why choose Smart Slider to create hero images?

• Drag and drop visual editor. With Smart Slider, you can edit your WordPress hero images as you imagined. The drag and drop editor helps you to create a hero block in minutes. With the responsive settings, you can make it look good on any device.
• Animations & Effects. In the Pro version of Smart Slider 3, you can use animations and effects to cheer up your hero image and call the visitors’ attention. Use the Ken Burns effect if you want to add a movement to your hero, or use layer animations to highlight content.
• Dynamic sources. Dynamically changing content on your hero block? It’s possible with Smart Slider 3, just create a dynamic slider, and use variables.
• Easy to publish. You can easily put a hero on your homepage, just use your page builder, the Smart Slider Gutenberg block, or the slider’s shortcode. As an alternative, you can use the PHP code of the slider and put it on your child theme.
• SEO friendly. SEO is crucial to make people find your website. In Smart Slider, you can fill the alt tags, and you can add text which the search engines can read.

What should you care about when you create a hero image?

• Focus on the content. The power of a large hero image is in the content. Focus on the most important part of your text, catch the visitors’ attention with an interesting heading and description, and use a Call to Action button. Don’t use too much text, keep the harmony between the image and the content.
• Use the correct image size. The speed of your page really matters. Don’t work with too big images, because it can slow down the loading time.
• Make the text readable. If you have text on your hero, take care of the legibility of your text. Use one of the popular hero image techniques such as text background or blurred image.
• Take care of SEO. Never burn text in your hero image. Use a plugin like Smart Slider which works well with the searching engines, and fill the image alt tags.
• Check it on different devices. Always pay attention to make your hero responsive. The image and the text should be legible on each device.

Popular WordPress hero image techniques

Perhaps the biggest challenge for a non-design user is creating a beautiful new WordPress hero image with Smart Slider 3 because there are an infinite amount of ways you can start. Below, I will show you the most popular examples and basic techniques on how you can use the imagery in the header of your website and make an awesome first impression.

Overlay

It’s really hard to make text stand out when it’s been laid over an image or video. The lack of contrast will cause readability issues and the last thing a visitor wants is to guess what they are reading. The overlay is a really simple method to lighten or darken your background and get a higher contrast. In Smart Slider 3 simply pick a color and set the opacity for your background. Try to find a perfect color and balance with the overlay, over and above don’t hide too much of the image.

Text Background

If you don’t want to hide the background then you can add a background behind the text rather than the entire hero image. Basically, you can pick the color of the background for every heading and text element in the layer window in Smart Slider 3.

Live Preview

Blurred Background

Blurring is one of the best ways to capture the essence of an image and improve the legibility of the copy. You can add a blur effect to your background at the Style tab of the slide.

Live Preview

Composition

If you have a great photo that has a safe space for the text then you shouldn’t hide the background with an overlay. Try to find the best place for the text which doesn’t impede the visual flow. Don’t cover faces or busy parts of the image!

Live Preview

Solid Background Color

Sometimes less is more and your website can be better if you eliminate the background image entirely. This design technique allows typefaces to be dramatic and have a strong visual impact. It’s an ideal opportunity to experiment with typography, layout and colors!

Live Preview

Video Background

Using background videos and animations can also add an interesting dimension to a hero image. When executed well, this method can enhance a page’s content. With Smart Slider 3 you can use background videos easily and enhance your hero image and make the user experience better. The quality and length of the video have to be top-notch to convey the message because the video definitely slows down your site. Not every website can benefit from this technique but it can be an enormous benefit to the overall design and branding.

Live Preview

5 hero image examples

Do you want to get inspired? I’ve collected 5 beautiful examples of hero images, each hero block is special, and the best thing is that you can import all of them from the Smart Slider’s template library, and customize it as you like.

1. Security Block

Live Preview

The Security Block is a great example of a hero image that you can use on your service page. This block has 2 versions: a free and a pro that you can use in Smart Slider. All the content is customizable, you can freely change the heading, the text, the links, colors or the images.

2. Traveler Hero

Live Preview

Want a full-width hero image? The Traveler hero was planned to a traveler blog or page, where the featured image could be the destination that your page is about. The CTA-s like the Explore Now or the social buttons can help you to inform your visitors, and build a social community.

3. Podcast WordPress Hero Image

Live Preview

Do you want a focus on the content of your hero? In the Podcast Block, you can organize your podcast. There are trending colors and a well-structured design which you can fill with your own blog content.

4. Crypto Hero Block

Live Preview

The Crypto Hero block is a special hero with their animations and effects. The animated heading layer with the typewriter effect and the particles in the background make your page come alive. The focus is on the animated text, but the CTA stands out with its blue color.

5. Headphone product hero image

Live Preview

Do you have a product page? Display your product images in a hero block in an interactive way. The main picture is a big headphone, and under that, you can see small images, and if you click on them, you can check other images from your product in a lightbox.

Conclusion

There are many ways to design WordPress hero images with Smart Slider 3 and you can choose from lots of techniques and trends as well. Oftentimes, these hero images are the first things that people see on your website so try to help them to quickly understand the value of your website. Download Smart Slider 3 for free, or buy a license for the Pro version. Good luck with your hero image and happy designing.

The post All About WordPress Hero Images From Idea To Implementation appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/divi-slider/ Fri, 04 Sep 2020 08:28:38 +0000 https://smartslider3.com/?post_type=blog&p=31831 Divi by Elegant Themes is one of the most popular WordPress theme and page builder available today. This page builder is a drag and drop editor in which you can create a whole website. There are a lot of available modules that you can choose from, and which makes it easier to create a website. […]

The post The Ultimate Guide to Create a Divi Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]> Divi by Elegant Themes is one of the most popular WordPress theme and page builder available today. This page builder is a drag and drop editor in which you can create a whole website. There are a lot of available modules that you can choose from, and which makes it easier to create a website. In this article, I will introduce the available slider modules in Divi. Also, I will show you a slider plugin alternative which can make your website more unique.

Divi Slider modules

Using a slider or a block on your website isn’t a new thing nowadays. Page builders like Divi already have options to create a slider module for your page, which is the easiest and fastest solution to create a slider. Divi offers 3 kinds of slider modules: a simple slider, a video slider and a post slider module.

Let’s take a look at these modules!

Slider module

Divi slider module can be a great solution if you want to place a basic slider on your page. Every setting is inside the Divi builder, and you can instantly check if the design fits or not.

This slider is a great slider module that you can use to showcase images or videos, display some text, and also you can put a CTA on it. For this reason, it can be a quick way to create a hero slider. You also have customization options, like setting the typography, colors or the style of your bullets. The slider has an option to set a slider background image, where you can adjust the size of the image. Additionally, you can put an overlay on it. And you can even add a parallax effect which can make your site more professional.

👍 GOOD

• Easy to use
• Parallax background
• Video background
• Hide slider on devices

👎 BAD

• You can’t change the order of your slide content
• Limited structure

Video slider

Divi offers another slider module to create a video slider on your page. With this module, you can organize your videos. You can use any source, for instance, you can put any YouTube or Vimeo link, or you can upload your own mp4 video. So it is up to you which one you want to use. There are customization options similar to the other slider module. In addition, you can customize the thumbnail images and the play button as well.

👍 GOOD

• You can use any type of video
• Easy way to create a video gallery

👎 BAD

• No autoplay option
• Every time the video starts from the beginning

Post slider

Creating a dynamically changing post slider is great to showcase our latest or featured posts. Divi offers a post slider module where you can display your latest post, define how many articles you want to showcase and in which order. You can set the featured image as the slide background, display the post title and meta, and put a read more button which links to the post itself.

👍 GOOD

• Dynamically changing content
• You can choose from categories
• Customizable post count and order

👎 BAD

• Limited design and structure

How to create better Divi sliders?

The slider modules in Divi are great but I think they are a bit limited. If you want to create a more customizable slider, it’s worth finding a slider plugin that is compatible with Divi. Smart Slider is one of the best slider plugins in WordPress. Even the free version has great features that you can start with. Smart Slider helps you create custom designs, and you can customize every layer. This plugin has a Divi module, so you can publish it as usual.

Hopefully, you want to know how the Smart Slider 3 plugin can upgrade the Divi slider functionality. One of the most important improvements is that you can create slideshows with more than 4 layers in custom order and placement.

Smart Slider has a layer list where you can choose from more types of layers. The rows and columns help you to structure them. You have the option to align your layers vertically and horizontally, set a maximum width, change any colors or typography, so you can create a unique design. If it isn’t enough, you can use absolute positioning on your layers to design the slider. By combining the different layers and positions, you can create some truly unique websites with Smart Slider 3 and Divi.

How to use Smart Slider 3?

Smart Slider is a slider plugin that is available for free in the WordPress repository. Just simply download, and activate it. Then you can start creating your slider. There are many pre-built templates that you can start with, but you have the option to start from scratch.

If you are ready with your slider, publish it with the Smart Slider Divi module.

Comparing Divi slider module and Smart Slider

Let me compare the basic Divi slider and the free and pro versions of Smart Slider. I really think that the Divi slider module is a great module of Divi, because it has a lot of customization options, and it is inside in Divi. Everything is in one place, and you don’t need to know a new interface. But the functionality is limited because you can’t create the layout you want.

If you want a more specific layout where you can place your layers where you want, and you can create a more unique content, consider using Smart Slider 3. The free version offers a lot of features like the Divi module, and with the Pro, you don’t have limits.

Let’s see some relevant differences!

	Divi slider module	Smart Slider 3 Free	Smart Slider 3 Pro
Layers	5	6	23
Typography options	✅	✅	✅
Drag & Drop interface	❌	✅	✅
Background image	✅	✅	✅
Background video	mp4, WEBM	❌	mp4
Parallax effect	✅	❌	✅
Layer animations	❌	❌	✅
Transitions	✅	✅	✅
Controls	2	5	7
Dynamic variables	✅	✅	✅
Static overlay	❌	✅	✅
Autoplay	❌	✅	✅

Interface

The main difference is the interface. There’s no doubt that Divi makes it easy to add sliders to your WordPress website. Simply enter text in the set fields and then upload some images and your slider is ready to go. However, when it comes to functionality and letting you create impressive sliders, the Divi slider does have some limitations. Nonetheless in Smart Slider, you can use a drag and drop slide editor, and you can place your layers where you want.

Animations and effects

With background animation modes you can easily bring your design to life. Divi has a basic animation option, which you can cheer up your slider, but in Smart Slider 3 Pro you can choose from 3 kinds of animations: main animation, background animation and unique layer animations.

Customizable controls

Each slider module has options to customize the controls, but in Smart Slider, you have more ways to make them unique. You can put the controls into other positions, change the colors, spacing, or hide them on different devices. Besides in Smart Slider 3 you have options to display thumbnails which you can create an image gallery styled thumbnail slider.

Slider autoplay

Smart Slider offers slider autoplay which is a popular feature at most slider plugins. This way the slider switches slides after a while. This can call the visitors’ attention but if you don’t like autoplaying sliders, then you can simply disable this setting.

Why should you choose Smart Slider 3 as your Divi Slider?

If you like simple and basic things, maybe you don’t want to install another plugin and learn how it works to create a slider. Divi also has slider modules, so why should you use a different plugin to create a slider? Let’s see some features which can help you decide to choose Smart Slider or not.

Reasons to choose Smart Slider 3 Free

• It’s free. The free version of Smart Slider is available on the WordPress repository, you don’t need to pay for it.
• The freedom of creating a slider. You can create a complicated layout thanks to the rows, columns, and the positioning options.
• Customizable controls. Use your arrows, bullets, thumbnails, text bar the way as you imagined. Position them, change their colors, or disable if you don’t want to display them.
• Ready to use templates. In Smart Slider 3 you can start with pre-built templates, which are fully customizable. Just change the content or the images and you have a ready slider.



• Responsive sliders. With minimal effort, you can create a slider that looks good on any device.

Reasons to choose Smart Slider 3 Pro

Hopefully, you now have a better idea of how Smart Slider 3 can upgrade your ability to add slideshow presentations to your Divi website. But if you’re still not sure let’s see some features of Smart Slider 3 Pro!

• Slider types. In the Pro version, you can find every type of slider which can fit on any page: full-page and full-width sliders, carousels, showcase sliders, and blocks.
• Lots of layers. Smart Slider 3 and its 23 layer types give you much more creative freedom. If you do choose Smart Slider 3 as your new slider tool, then layers for icons, progress bars, counters, and even mp4 videos can be used to add content-rich slideshows to your website.
• Much more templates. Smart Slider 3 definitely isn’t short on fully customizable templates either. Choosing an option from the collection of complete pre-built sliders and a library of individual slides can help you save time and overcome any design-related shortcomings you might have.
• Popular available effects. The pro version offers lots of effects that you can set, like Parallax, Ken Burns, Particle, Shape Divider. All of them are customizable and can cheer up a single slider, too.
• Layer animations. You can add layer animations on the individual layers of your slides. They can come in, loop, go out, repeat, so you can create even complex animations if you want.
• Lightbox. The pro version offers the lightbox feature, so you can enlarge your images or videos or even an iframe in a popup. It’s a popular feature which can also save place on your webpage.
• Dynamic sources. Smart Slider 3 goes beyond just allowing you to use posts for the content of your dynamic sliders. Displaying WooCommerce products, custom post types, and content from popular WordPress events plugins is all supported.
• One time payment and lifetime support. Finally, I should mention that if you buy the Pro version, you need to pay only once, and you will get lifetime updates and support!

Final Thoughts

There are a lot of great reasons to use Smart Slider 3 to add sliders to your Divi website. You can build more creative, good-looking and unique slideshows with Smart Slider 3 compared to the Divi slider modules. If you need a simple slider, then you can use the basic Divi module, but if you need more, then use Smart Slider. With Divi and Smart Slider 3 together you can make a powerful page with a unique slider. If you want to give it a try, don’t hesitate, install the free version of Smart Slider 3 first, and give it a try. And if you like it and need more features, then you can upgrade.

The post The Ultimate Guide to Create a Divi Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]> https://smartslider3.com/blog/slider-settings/ Thu, 21 May 2020 06:41:54 +0000 https://smartslider3.com/?post_type=blog&p=23073 All plugins should have settings which you can customize the product with. It is also important at a WordPress slider plugin because with the slider settings you can customize how the slider should behave, and look in the front end. Each slider has their own slides, but the slider settings will determine how big your […]

The post 7 Useful Slider Settings Which You Should Know appeared first on Smart Slider 3 — WordPress Plugin.

]]> All plugins should have settings which you can customize the product with. It is also important at a WordPress slider plugin because with the slider settings you can customize how the slider should behave, and look in the front end. Each slider has their own slides, but the slider settings will determine how big your slider should be or how you can control it.

How to choose the right plugin?

First of all, you need is to choose a reliable plugin which you want to work with. But how do you know if a plugin is reliable? What I can suggest is that you should check the change log of the plugin. If you can see that the plugin has updates continuously, then you can see that the developers are working with their product.

It can also be useful if you check the plugin in the WordPress repository, and read the ratings from the users. In this case, you can get a complete view of the plugin.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

Don’t be afraid to update

After you have installed the chosen plugin, and there is an update available that you can see in your WordPress Dashboard as well, don’t be afraid to update it, because it is important for security reasons. It is also possible that you get more features with the update, so why don’t you update?

The plugin developers care that you won’t lose any settings during the update that you have set before but it is possible to make a backup from your page for example with a backup plugin, and if something goes wrong, you can set the previous state.

Slider settings in Smart Slider 3

Smart Slider 3 is currently the most popular slider plugin in the official WordPress repository with 600.000 active installs and has a 5-star rating, so you can trust it.

If you decide to choose Smart Slider 3 or you have installed it before, meet the slider settings of Smart Slider 3 which can be useful at the slider creating.

1. Set optimal sizes

It is important to set an optimal slider size which you will work with. These sizes will define the ratio of your slider, it is also important in slide editing as well. Don’t work with too big sizes. If you want to create a bigger slider, then set the responsive modes correctly. The responsive modes define how your slider should behave on different screens.

In Smart Slider 3 there are more responsive modes available:

• Auto responsive mode: if you use the auto responsive mode, then your slider will be as big as the container it’s in.
• Full width mode: A full width slider fills the total width of the browser even if the container is smaller. It looks good on your home page as a header, but you can insert a slider into your blog post as well.
• Full page mode: A full page slider will have 100% width and the height of your screen on every device. This mode is available only in the Pro version of Smart Slider 3.

It’s important to mention that when content mode is used, your slide’s height is based on the layers and all the slides’ height are based on your highest slide even if you set a maximum height.

2. Use the correct slider type

The slider type determines the look of your slider. In Smart Slider 3 there are more slider types available: Simple, Block, Showcase and Carousel.

The Simple type shows one slide at a time and people use them in a boxed style, for example in a post, or use them as a full width slider in the header. The block type is special because it can show only one slide. The Showcase and the Carousel slider can show more slides at the same time.

3. Always give control to your visitors

If you have a slider, you should care that the visitors like it if they have control over the slider. It can be disturbing if there is an autoplaying slider, but the user can’t stop it to read the content or can’t switch to the next slide.

The slider controls can be useful in navigating between slides, and it can also share information. For example, bullets can show how many slides you have in the slider, and thumbnails show a little preview of the slides.

4. Optimize your slider

The system of Smart Slider 3 works the way that the slider loads last on the website because of the positioning. The plugin waits until your website is completely built up to know how big your slider can be and where the layers should be.

However, it can happen that if you work with too big images, your slider can load slowly. In Smart Slider 3 you have settings to optimize your slider. You can resize the layers or make the quality of your images lower, and can also use the lazy loading setting.

5. Set the background fill mode

Choosing the right fill mode is also important at the slider creating. By default the “fill” option is used which will make the image as big as it needs to be to cover the whole slider. This means that if the slider and image ratios differ, the image will be cropped, and the focus points will decide which part of the image should stay on screen, so by default the center. If you want your whole image will be on your slide without being cropped, the “fit” filling mode is what you need.

Of course, you can set the background image filling modes separately at the slide settings, so you can fully customize your slider.

6. Give a nice visual effect to your slider

Using animations and effects can be a good choice if you want to make a powerful slider which attracts the eye. In Smart Slider 3 you can choose from more types of effects which you can set at the slider settings.

• Parallax effect: The parallax makes the illusion of depth when your page moves. It works the way that it moves the images at a different speed and show them from a different angle.
• Shape divider: The shape divider is a modern design element which you can use as a separator between sections. You can animate it, change its color, and place it on the top or bottom of the slider.



• Particle effect: The particle effect is a variety of small objects. They move around the slider and interact with each other or with the visitor.
• Ken burns effect: This effect is one of the most popular effects for background images which can smoothly zoom.
• Background animation: You can also choose a background animation to animate your background images.
• Main animation: The main animation is the basic animation to switch your slides with. You can set horizontal or vertical or fade controls.

7. Create lightbox from slide backgrounds

The lightbox is a popular feature in Smart Slider 3 Pro. Did you know that you can create lightbox images from your slide background images? To do so you’ll need to have background images on all slides, and then you can turn this option on at the Slider settings → Slides tab.

With a lightbox slider you can enlarge an image with one click, it can be useful if you want to create a mini gallery from your slider.

Final Thoughts

The slider settings are useful part in slider creation. It is important to set them properly, but you can always change them, so if you decide to change something, just go to the slider settings, modify what you want, preview it, and if you like the result, save it.

If you are new at Smart Slider 3, I can suggest to check our Youtube channel where you can learn more from Smart Slider 3 and its settings.

The post 7 Useful Slider Settings Which You Should Know appeared first on Smart Slider 3 — WordPress Plugin.

]]>