R28: How to Create an Animated App Showcase

For Recipe #28 I am going to show you how to create an animated App showcase using the Divi Blurb and Image modules, then a tablet and mobile alternative using the Slider module.

The inspiration for this recipe was a question posted in my Facebook Group by Divi community member Sammy Villarreal, where he asked if there was a tutorial on how to create the effect seen on the FitBit App page. I hadn’t seen one but I liked the effect so much that I recreated it

We are going to use the Divi built in module functionality as much as possible so it is super easy to edit, then create some custom animation to replicate the effect seen on FitBit.

Get the code you need in the accompanying blog post, scroll to the bottom for your fabulous freebie and be sure to let me know what you think in the comments!

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes.

A transparent PNG of an iPhone frame or other device. You can download the free one I am using here.

4 images to place ‘inside’ the iphone, I just took screenshots on my own phone, the image dimensions I am using are 750px wide by 1334px high and I suggest you use the same dimensions so you don’t have to bother tweaking the padding settings.

Cooking time

This should take you around 40 minutes.

Preparation

The first thing we are going to do is set up our two sections. We are going to hide the full layout and display the slider layout when the device width hits 980px as that is Divi’s tablet breakpoint when columns start to stack. So instead of messing with column widths and a ton of media queries, this will make it nice and clean and ensure the content doesn’t get too bunched up.

We are going to be using a specialty section for the desktop layout, so add a new specialty section to your page and choose 2/3 1/3 layout which is the last one you see at the bottom right.

Then open up the section settings and click on the Custom CSS tab, give the section a CSS Class of ds-app-desktop-section

Whilst you are still in this tab, scroll down to the Main Element box and paste in the following CSS. This gives the background a nice gradient effect. There is a link commented at the top to the actual gradient on Colorzilla.com so you can easily change it to fit your own colour scheme. Once you have done that, Save & Exit.

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#003348+0,001822+100 */
background: rgb(0,51,72); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,51,72,1) 0%, rgba(0,24,34,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,51,72,1) 0%,rgba(0,24,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,51,72,1) 0%,rgba(0,24,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003348', endColorstr='#001822',GradientType=0 ); /* IE6-9 */

Next, click on where it says Insert Column(s) and add a single column, this will be for our title and subtitle.

Then click on Add Row and insert 2 columns.

Your final section structure should look like this:

Now for the mobile section setup.

Add a standard section below the specialty section you just created and again select the last layout in the list, which is ¼ ½ ¼ .

Next open up the Section settings, click on the Custom CSS tab and give the section a CSS Class of ds-app-mobile-section.

Then scroll down a bit more and in the Main Element paste in the same CSS for the background gradient we used earlier. Here it is again for you.

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#003348+0,001822+100 */
background: rgb(0,51,72); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,51,72,1) 0%, rgba(0,24,34,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,51,72,1) 0%,rgba(0,24,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,51,72,1) 0%,rgba(0,24,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003348', endColorstr='#001822',GradientType=0 ); /* IE6-9 */

When you have done that, Save & Exit.

For the final step of preparation, click on the Clone Row button in the section we just created so we have two identical rows in that section.

Your final layout with both sections should look like this:

That’s our prep done, now for the method.

Method

The first thing we will do is populate our sections with the required modules.

So in our desktop section which is the Specialty section, add the modules as follows:

Row 1, Column 1 = Text Module
Row 2, Column 1 = Blurb Module, Divider Module, Blurb Module, Divider Module
Row 2, Column 2 = Blurb Module, Divider Module, Blurb Module, Divider Module
Then in the single column to the right you will want 5 image modules and then a divider module.

The section should look like this:

In the mobile section which is the standard section, add the modules as follows:

Row 1, Column 2 = Text Module
Row 2, Column 2 = Slider Module

The section should look like this:

Now, back up to our Specialty Section and we can start to add some content.

Open up the text module in the first row and add in your title and subtitle.

You can set your fonts, sizes and colours in the in the Advanced Settings, I will leave any text styling to you so it matches the site you are working on but you will want to choose Light for the Text Colour in the module’s General Settings tab if you used the gradient background code from earlier for the section background colour. Here is the HTML I am using in the demo.

<h1>App Features</h1>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem vivamus magna justo, lacinia eget consectetur.</p> 

You can then Save & Exit, nothing else we need to do with this module.

Next, open up the first Blurb module in the first column of the second row. Give it a title and a link if you want it to go somewhere when clicked, and set the icon you want.

Then scroll down and apply the following settings:

Icon Colour: White
Circle Icon: No
Image/Icon Placement: Left
Image/Icon Animation: No Animation
Text Colour: Light
Text Orientation: Left

Then add the text you want to show below the title in the content area.

Style your text how you want it in the Advanced Settings tab, then click on the Custom CSS tab and give the module a CSS Class of ds-app-blurb1.

Then Save & Exit

Repeat this process with the other 3 Blurb modules, but increase the number appended to the class you add by 1 each time, so your Blurb modules should have the classes added like this:

Now open up the 4 Divider modules that sit below your Blurbs and give them each a height of 20.

That’s our Blurb section done. If you preview your page, depending on the text settings you have chosen you should see something like this:

Now for the iPhone column.

Open the first Image module in the Single Column on the right of your Specialty section and click on Upload an Image.

Upload the iPhone frame image I have provided or one of your own to your media library and then select it as the image for that module. My image dimensions are 617px wide by 1280px high

Scroll down and apply the following settings:

Animation: No animation
Remove space below the image: Yes
Image alignment: Right

Then in the Advanced design settings tab:

Always center image on mobile: Yes

Finally, click on the Custom CSS tab and give the module a CSS Class of ds-iphone-image, then Save & Exit

Now, repeat the steps above for the 4 remaining image modules with the images you want to display, apply the same settings but increase the number appended to the class you add by 1 each time, so your image modules should have the classes added like this:

Now for the tablet and mobile section.

Open up the text module in the first row and add in your title and subtitle.

You can set your fonts, sizes and colours in the in the Advanced Settings, I will leave any text styling to you so it matches the site you are working on but you will want to choose Light for the Text Colour and Center for the Text Orientation in the module’s General Settings tab if you used the gradient background code from earlier for the section background colour. Here is the HTML I am using in the demo.

<h1>App Features</h1>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem vivamus magna justo, lacinia eget consectetur.</p> 

You can then Save & Exit, nothing else we need to do with this module.

Now open up the Slider Module and in the General Settings tab apply the following:

Arrows: Show Arrows
Show Controls: Yes
Automatic Animation: On
Automatic Animation Speed: 5000 (this is to match the timing of the animation we will be creating)
Remove Inner Shadow: Yes

Then in the Custom CSS tab, give the module a CSS Class of ds-app-slider.

Now we need to add our slides. Back in the General Settings tab click Add New Slide. In the slide that is created, set the background colour to transparent using the RGBA slider on the colour picker but do not touch any of the other settings.

Scroll down to the content area and add the following HTML:

<p><img class="ds-slider-image" src="https://playground.divisoup.com/wp-content/uploads/2017/04/screenshot1></p>
<p>&nbsp;</p>
<h3>Weather Forecast</h3>
<p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p>

Be sure to change the image URL to that of your own image and the text to your own, but make sure to keep the ds-slider-image class before the URL as you see in my example. Then click Save.

Now duplicate that slide 3 times so you have 4 slides in total.

Then go into each slide and change the image URL and text in the content area to your own so you end up with 4 different slides, just as we have 4 different images in the desktop section.

Finally, open up the settings for the row that contains the slider we created.

In the Advanced Settings tab, scroll down to the Column 2 Background Image field and insert your iPhone frame image.

Then click on the Custom CSS tab and in the Column 2 CSS Class field, add a class of ds-slider-col then Save & Exit.

If you preview your page now it will look a bit of a mess. Time for some CSS!

As always the full CSS has commenting to help you, but let’s take a look at what each section is doing.

First the Desktop version CSS. In  this section we are positioning our elements. Firstly the iPhone frame image, then the desktop section on smaller screens but before tablet size, and then the images inside the iPhone frame. We are adding some padding to these images so they sit nicely on all screensizes. You may need to adjust this padding if you use different size images.

.ds-iphone-image img {
    position: relative;
    z-index: 10;
}

@media only screen and (max-width: 1280px) {
    .ds-app-desktop-section .et_pb_column_single {
        margin-top: 10%;
    }
}

@media only screen and (max-width: 1135px) {
    .ds-app-desktop-section .et_pb_column_single {
        margin-top: 20%;
    }
}

.ds-app-image1,
.ds-app-image2,
.ds-app-image3,
.ds-app-image4 {
    position: absolute;
    top: 9.5%;
    padding: 14% 7%;
    opacity: 0;
}

Next we are setting the states of our images and blurbs before our animation begins. So we have our images set to zero opacity and our blurbs set to 50% opacity.

.ds-app-image1,
.ds-app-image2,
.ds-app-image3,
.ds-app-image4 {
    opacity: 0;
}

.ds-app-blurb1,
.ds-app-blurb2,
.ds-app-blurb3,
.ds-app-blurb4 {
    opacity: .5;
}

Here we are defining the animation name and timing for our blurbs and images, this is so that they switch at the same time, every 5 seconds and they do this on a loop and never stop.

.ds-app-blurb1,
.ds-app-blurb2,
.ds-app-blurb3,
.ds-app-blurb4 {
    -webkit-animation: dsBlurbSwitch 20s linear infinite normal forwards;
    -moz-animation: dsBlurbSwitch 20s linear infinite normal forwards;
    -o-animation: dsBlurbSwitch 20s linear infinite normal forwards;
    animation: dsBlurbSwitch 20s linear infinite normal forwards;
}

.ds-app-image1,
.ds-app-image2,
.ds-app-image3,
.ds-app-image4 {
    -webkit-animation: dsImagexFade 20s linear infinite normal forwards;
    -moz-animation: dsImagexFade 20s linear infinite normal forwards;
    -o-animation: dsImagexFade 20s linear infinite normal forwards;
    animation: dsImagexFade 20s linear infinite normal forwards;
}

Now we set the animation delay, we have the delay for the first transition at zero so immediately our first image is displayed and our first blurb is highlighted. We then switch both the blurbs and images every 5 seconds, creating a 20 second total animation sequence.

.ds-app-blurb1,
.ds-app-image1 {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
}

.ds-app-blurb2,
.ds-app-image2 {
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    animation-delay: 5s;
}

.ds-app-blurb3,
.ds-app-image3 {
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    animation-delay: 10s;
}

.ds-app-blurb4,
.ds-app-image4 {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    animation-delay: 15s;
}

Here is the actual animation effect for the blurbs and images. We are fading the active element out a quarter of the way through our animation, this is what gives us the cross fade effect. If we didn’t do this, we would have a gap between the transitions.

@-webkit-keyframes dsBlurbSwitch {
    0% {
        opacity: .5;
    }
    1% {
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    25% {
        opacity: .5;
    }
    100% {
        opacity: .5 !important;
    }
}

@-moz-keyframes dsBlurbSwitch {
    0% {
        opacity: .5;
    }
    1% {
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    25% {
        opacity: .5;
    }
    100% {
        opacity: .5 !important;
    }
}

@-o-keyframes dsBlurbSwitch {
    0% {
        opacity: .5;
    }
    1% {
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    25% {
        opacity: .5;
    }
    100% {
        opacity: .5 !important;
    }
}

@keyframes dsBlurbSwitch {
    0% {
        opacity: .5;
    }
    1% {
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    25% {
        opacity: .5;
    }
    100% {
        opacity: .5 !important;
    }
}


@-webkit-keyframes dsImagexFade {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    25.1% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes dsImagexFade {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    25.1% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes dsImagexFade {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    25.1% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes dsImagexFade {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    25.1% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

Now for our tablet and mobile CSS. Firstly we are positioning the iPhone frame image we placed in the background of our column and making sure the image doesn’t repeat. Then we are adding padding to our content and slide images so they are spaced nicely on screen. After that we are adjusting the position of the slider arrows a little so they don’t sit over our images.

.ds-slider-col {
    background-size: 85%;
    background-repeat: no-repeat;
    background-position-y: 0;
}

.ds-app-slider .et_pb_slides .et_pb_slide_content {
    padding-top: 10%;
}

.ds-app-slider .ds-slider-image {
    padding: 1.5% .5% 0 1%;
}

.ds-app-slider .et_pb_slide_content img {
    padding-bottom: 40%;
}

.ds-app-slider .et-pb-controllers {
    bottom: 0;
}

.ds-app-slider .et-pb-arrow-prev {
    left: -50px;
}

.ds-app-slider .et-pb-arrow-next {
    right: -50px;
}

.ds-app-slider.et_pb_slider:hover .et-pb-arrow-prev {
    left: -15px;
}

.ds-app-slider.et_pb_slider:hover .et-pb-arrow-next {
    right: -15px;
}

In the next section we are using Divi’s default slider animation settings but renaming the animation so we can change the way the effect works.

.ds-app-slider .et-pb-active-slide .et_pb_slide_description {
    -webkit-animation: dsSliderxFade 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: dsSliderxFade 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: dsSliderxFade 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: dsSliderxFade 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

And here is where we change the effect, we are simply changing the animation to a fade effect instead of a slide effect, and having that fade happen 40% of the way through the animation to again create a cross fade effect.

@-webkit-keyframes dsSliderxFade {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes dsSliderxFade {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes dsSliderxFade {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes dsSliderxFade {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

And finally, we are using media queries to define at which screen size each of our sections display and hide.

@media only screen and (max-width: 980px) {
    .ds-app-desktop-section {
        display: none;
    }
}

@media only screen and (min-width: 981px) {
    .ds-app-mobile-section {
        display: none;
    }
}

Here is the complete CSS. Copy and paste this into your child theme stylesheet, page specific CSS box or the Divi theme options Custom CSS box.

Now view your page and you should have an animated app showcase very similar to my demo.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X