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.
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!
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
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.
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.
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.
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.
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.
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.
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:
A GIF image
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).
The Divi Theme installed and active
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
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.
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.
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:
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.
Then paste the video urls inside the parentheses after the src attribute.
It should look something like this when you are done.