Moving Parts

How to create transitioning text with corresponding images.

Before We Start

Please make sure you have read or followed along with "Content Zones" before beginning this tutorial. You will need to have a basic understanding of how to add placeholders, text and images.

Overview

I highly recommend following along with this tutorial. Some of it is hard to explain without seeing what is happening on the screen. My goal in this example is to display the word "Hello" while a picture of a minion waving is displayed and the line "my name is Brittney" while a picture of me is displayed. We will start with text and finish with images.

Text

Step 1

Add a placeholder with text content. Type "Hello" and save.


For my example, I used X-Large font and bold.

Step 2

Add a second text item to this placeholder.
Big image

Step 3

Name the item "My Name" and type "My Name is Brittney" in the text box. Save.


For my example, I used X-Large font and bold.


Depending on the amount of text, at times you may want to increase the duration. For our small sentence, 10 seconds is long enough.

Big image

Step 4

Click on the item named "Text Item" and rename it to "Hello". Save.

Step 5

Change the order of the text items, using the small arrows next to the add buttons, so that the text item "Hello" is first. Set Transition to Fade. Save.
Big image

Step 6

Create a new placeholder and repeat steps 1 through 5, except selecting image instead of text and adding image URLs.


*Make sure to use the exact same duration length and transition type!

Big image

Step 7

Save, Preview, Publish!

Final Product

My final product transitions with fade every ten seconds between "Hello" with a minion and a picture of me with the text "My Name is Brittney".
Big image
Big image

Happy Editing!