Category Archives: elegantthemes

15 Best Adobe InDesign Tutorials for 2019

The Adobe Creative Cloud is the industry standard for all things design and is the favorite layout design program for desktop publishing. With InDesign, you can create print and digital projects like magazines, books, brochures, and booklets.

Some creative professionals actually prefer Adobe InDesign over Adobe Illustrator or Adobe Photoshop for their design projects. In fact, they might even tell you that it’s the most versatile of all three Adobe products for designers!

In order to help you decide, we have put together a collection of the best InDesign tutorials released in 2019. These were all created for the last version of InDesign or updated to include new functions. The majority of the tutorials below are free and in both text or video format. In addition, the ones at the end are available through subscription-based sites like Udemy and Skillshare.

read more

Elegantly Hiding Your Copy Below Section Dividers in a Stunning Design with Divi

Divi’s built-in options allow you to use one particular design setting for multiple purposes, which in turn helps spark creativity. Today, we’re going to use section dividers in a unique way to elegantly hide your website’s copy. This is a great way to add extra interaction to your page without the need for custom code. We’ll recreate a beautiful example from scratch and you’ll be able to download the example’s JSON file for free as well.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

read more

How to Create a QR Code and Use It Effectively

Not that long ago, QR codes had a bad reputation. After their widespread introduction in the mid-1990s, they quickly turned into an ongoing joke. Anyone and their neighbor would create QR code graphics and slap them onto anything. This resulted in sites like WTF QR CODES, where QR code fails were showcased for the world to giggle at. But then, sometime around 2017, QR codes started making a comeback. And now, they are a pretty well accepted visual marketing tactic and are finally being used how they were meant to.

read more

The Brand New Column Options & Column Editing Interface!

More Options And An Improved UI

Now You Have Full Control Over Column Designs And Better Tools For Adding, Deleting And Rearranging Columns

Today we are excited to release the new Divi column options and improved column editing interface for the Visual Builder. This updates brings tons of new design options to columns and separates each column on your page into its own unique builder element, giving you more control over the design and position of each. The improved interface also makes it easier to add, delete and move columns on the page. It’s a really great update that opens up new design possibilities and makes your general page building experience even easier.

read more

Adding 3D Effects to GIFs and HTML5 Videos to Display Unique Product Animations in Divi

Animated GIFs and HTML5 videos can be great for animating how a product works on your website. These short animations communicate valuable information to the visitor in a way that is more readily digested than a regular video. Adding these type of GIFs and HTML5 videos can be done pretty easily with Divi. And with a little creativity, you can add 3D effects for unique product animations.

In this tutorial, I’m going to show you how to add 3D effects to GIFs and HTML5 videos to display unique product animations in Divi. This design works really well for those looking for a creative layout to showcase a featured product or service. To do this, we’ll first need to understand how to add GIFs and HTML5 video embeds to your page using Divi. Then we’ll be able to use Divi’s transform options to position and rotate the GIF (or video) in 3d space. To finish things off, we’ll be using a few Divi design techniques to create a beautiful section layout to go with those 3D GIFs and Videos.

Let’s get started.

Sneak Peek

Here is a sneak peek at the design we will build in this tutorial. The design looks similar when using a GIF and a HTML5 video to create the product animations.

gif and html5 video product animations

gif and html5 video product animations

gif and html5 video product animations

Download the 3D Effects for GIF and HTML5 video Product Animations Divi Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder.

Let’s get to the tutorial shall we?

Using GIFs for Short Product Animations

GIFs have been around for a long time. This is probably because GIFs are easy to make and widely supported across browsers. And they can work well for really short product animations. Because a GIF is an image, you can use it in a Divi Image module just like you would any other jpg or png. This allows you to style the GIF with the full power of Divi’s built-in settings. But be warned, GIFs with a longer duration and higher frame rate can result in really large file sizes. So it is best to keep your GIFs short and as small as possible.

Using HTML5 Video as a GIF Replacement

HTML5 videos are becoming a popular GIF replacement, especially for longer product animations. You may have noticed them being used on the new Elegant Themes website design. They are significantly smaller in size compared to GIFs and therefore take less time to load. And adding an HTML5 video to your Divi site is simple. All you need to do is add the HTML5 video element to embed the video to your page (similar to how you would add a video shortcode in WordPress). You can also customize the video with hidden controls, looping, and autoplay which results in a high quality animation that functions just like a GIF. Plus, when adding the embed to a Divi Module, you can also use Divi builder to style the Video in creative ways.

Check out this post for more info on why you should consider using HTML5 Video over regular GIFs.

Now that we understand a bit more about using GIFs and HTML5 videos, we are ready to start using them in Divi.

What You Need for this Tutorial

To get started, you will need the following:

  1. A GIF image
  2. An MP4 Video File (and the URL to that video file) to be used in the HTML5 video Element embed. For maximum browser support, you can also include the same video in webm format as well (more on this later).
  3. The Divi Theme installed and active
  4. A new page created to build from scratch on the front end (visual builder)

After that, you will have a blank canvas to start designing in Divi.

Adding a 3D Effect to an Animated GIF or HTML5 video

gif and html5 video product animations

Before we get too far into designing the complete section layout for this tutorial, I thought it would be best to show you how to add the 3D effect to both a GIF and an HTML5 video. Once we are done, we will polish off the rest of the section layout with a nice modern design.

For now, let’s start with adding the 3D effect to a GIF in Divi.

Creating a GIF

There are a lot of ways to create a GIF on the web. Since this tutorial is about creating a GIF to animate how a product works, you will want to record a section of your screen (using a screen recorder) and then convert the video file into a GIF file. Remember to create the GIF as small as possible to limit the file size and load time. Once the GIF is created you will be able to use it like you would any other image in Divi.

If you want to learn how to create a GIF using Snagit, check out our post on How to Switch a Background Image with an Animated Gif on Hover.

Adding a 3D Effect to a GIF in Divi

Now it’s time to add the GIF to Divi so we can style it with a cool 3D effect.

To get things started, add a new regular section with a two-column row.

gif and html5 video product animations

Before you add a module, we need to add the perspective property to the column that will contain our GIF. To do this, open the row settings and add the following snippet of CSS to the Column 1 Main Element:

perspective: 1000px;

gif and html5 video product animations

This perspective property is necessary to add perspective to the element within the column. An element needs perspective so we can get a 3D effect when using Divi’s transform options. For a better understanding, check out our post on how to use perspective with transform options to design 3D photo walls.

Now add an image module to column 1.

gif and html5 video product animations

Upload the GIF to the image module. For this design, the GIF should be around 600px by 700px.

gif and html5 video product animations

Then use the transform options to scale, rotate and skew the GIF in 3D space.

Transform Rotate Y Axis: 8deg
Transform Rotate X Axis: 28deg

gif and html5 video product animations

Transform Skew Y Axis: 10deg
Transform Skew X Axis: -8deg

gif and html5 video product animations

Transform Scale (tablet): 80%

gif and html5 video product animations

Now let’s look at the result.

gif and html5 video product animations

Adding a 3D Effect to an HTML5 Video in Divi

Before we add the 3D effect, we first need to create our HTML5 Video. We will go over the steps on how to do this below. But if you want a more complete explaination, check out our post on How to Use HTML5 Video to Create Animated Gifs at Smaller File Sizes.

Creating the HTML5 Video Embed Code

The HTML5 video Element has the following basic structure.

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

You don’t have to know much about HTML to see what this code is doing. Inside the <video> element, you have two <source> elements that holds the path/url to the video files you want to display. Each source element has a video in a different file format (webm and mp4). Both are necessary for maximum browser support. The order is important as well. The webm video is placed above the mp4 video in the code because it is a higher quality video format but is less supported by browsers. So if a browser supports webm video, it will display it. But if the browser doesn’t support webm video, it will use mp4 video format below it. It isn’t necessary to include both video formats, but it is best practice. And if you are going to use only one, use the mp4 format because it is more widely supported.

In fact, whenever you use Divi’s video module to display self-hosted videos, Divi creates this same HTML5 video Element to display videos. Which is why the Video module allows you to add both an mp4 and a webm video file.

To use the code for your own video, you simply need to add the video url inside the parentheses after the src attribute.

If you upload the video files to your WordPress site, you can grab the urls from the media library.

gif and html5 video product animations

Then paste the video urls inside the parentheses after the src attribute.
gif and html5 video product animations

It should look something like this when you are done.

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

read more