Create an Animated Background Gallery with Elementor Pro and Custom CSS [Free Webinar]

Aug 06, 2019
139
0

Hi guys, guess what? We're preparing another free webinar for you.

 

Last week Alexandra showed you how to build custom headers and footers using Elementor PRO, and this week you will learn how to create an animated background gallery making use of some CSS.

 

Here's a short synopsis of the webinar:

 

  • We'll create a mobile-friendly animated gallery.
  • As a basis, we'll use a gallery from an award-winning website.
  • Any one of you can create the same gallery because it's extremely easy!

If you decide to join us on Thursday leave your email in this form so we could notify you of the upcoming event.


 

WEBINAR TRANSCRIPT

  1. The Intro
  2. Tutorial - How to Create an Animated Gallery with Elementor Pro and Custom CSS
  3. Wrapping It Up

The Intro

It’s mostly impossible to imagine a website without a gallery. Image galleries constitute a significant part of visual content. They are important for various websites as well for online stores. Each gallery is supposed to display info about a company or show pictures of products.

 

And what about the portfolios of photographers? Or, how many photos are posted by an average blogger? Maybe it’s time you thought of a gallery as a brand part of your website? And we’ll show and tell you how to make this idea real to bring your website more points!

 

Today, CSS3 technology allows web designers to present pics in different creative forms easier than it has ever been. And, advanced tools, like WordPress Elementor Plugin and its add-ons, prove that anyone can build pro animated galleries.

So, join us to make something fresh and catchy on your gallery! Our tutorial is based on the webinar by Alexandra Payne on how to create a responsive animated gallery with Elementor Pro and custom CSS.

 

Let’s start!


Tutorial - How to Create Animated Gallery with Elementor Pro and Custom CSS

For this tutorial, you need to install Elementor Pro and JetTricks.

JetTricks - Visual Effects Addon for Elementor WordPress Plugin


JetTricks - Visual Effects Addon for Elementor WordPress Plugin

 

JetTricks Add-On helps to create stunning visual effects without coding. With it, you’ll easily add sticky elements, unfolded columns, Parallax animation, and more. You also can get it in the unlimited ONE Subscription, as well as thousands of other flagship products.

 

  • As you’ve opened Elementor, create three columns. 4 images for each of them is enough to make an illusion of endless animation while scrolling it.
  • Between each image insert spacers. The value of them is 100 pixels.

animated gallery

  • The padding on the right and the left from columns is 50 pixels. Column position should be set to “Top”.
  • As for the images settings. They can be opened in two ways, by a link, and in a lightbox. The first variant is suitable when you want to connect some image with a particular page.

The lightbox option allows to show pictures in a bigger size:

animated gallery

  • To make our side columns move, go to the setting of a column. In the “Advanced” panel tab, insert the code Alexandra has shared to the “Custom CSS” section (this option is accessible only for Elementor Pro users).

 

Here’s a code snippet for side columns:

 

selector { 
-webkit-animation: side-slot 100s linear infinite;
-moz-animation: side-slot 100s linear infinite;
-o-animation: side-slot 100s linear infinite;
animation: side-slot 100s linear infinite;
}


@keyframes side-slot {


0% {
transform: translate(0,0);
opacity:0;
}


5% {
opacity:1;
}

95% {
opacity:1;
}

100% {
transform: translate(0,1000px);
opacity:0;
}
}

That’s a code snippet for your middle column:

 

selector { 
-webkit-animation: middle-slot 100s linear infinite;
-moz-animation: middle-slot 100s linear infinite;
-o-animation: middle-slot 100s linear infinite;
animation: middle-slot 100s linear infinite; 
}


@keyframes middle-slot {
0% {
transform: translate(0,0);
opacity:0;
}


5% {
opacity:1;
}

95% {
opacity:1;
}


100% {
transform: translate(0,-1000px);
opacity:0;
}
}

animated gallery
  • Now, let’s add little tooltips using JetTricks. They are supposed to appear every time someone hovers over the images.

So, click on an image and go to the “Advanced”. There choose “JetTricks” option and switch the tooltip on.

animated gallery

  • So, working with your tooltip you can edit it differently clicking on the “Settings” and “Style”. There are such options as placement, animation, text color, and so on.

animated gallery

 

  • Alexandra has chosen the black color for the page settings and turned the animation on. Don’t forget to save your results!
  • In closing, we propose you to adjust this animated gallery for mobile devices.

For this, on the desktop click on the “Tablet” mode and go to the “Advanced” tab. There set the “Margin” to 0 and the “Padding” to 20 on the left and right. In the “Layout” tab, set the “Column Width” to 33.

As for the “Spacer”, 40 is enough. Repeat the same with the rest of the columns.

  • For tablet devices, the “Margin” - 0 and “Padding” on the left and right - 30. Set the “Column Width” to 30. As well, you can edit the “Spacer”.
  • Click on the “Update” and see how it work in varied modes.

Wrapping It Up

 

So, today we’ve learned how to build a responsive animated gallery with Elementor Pro and JetTricks. Let it be useful for your projects!

 

The mentioned add-on is one of the best for WP Elementor Page Builder. You can download it or a corresponded Elementor theme in ONE Subscription. If you haven’t got JetTricks yet, hurry to subscribe for ONE for extremely low prices.

 

Watch the video to get all the details ↓

 

Create Animated Gallery with Elementor Pro and Custom CSS

 

Keep up with us not to miss new webinars by Alexandra Payne. She always has something interesting to share with you.


 

READ ALSO

How to Sell WooCommerce Virtual Products Internationally

VG
Victoria Green
29
v Complain

Recommend this post to others!

Found the post interesting? You might also like:

Become the first to comment

Last Updated : Aug 13, 2019

Rating of post