Your title is one of the most important parts of your homepage. This is usually what you see first, and therefore what determines the first impression. Like any other first impression, you want it to be good. Now, if you are looking for a creative way to present your title, you will enjoy this tutorial as we will show you how to add CSS text block animations to your title and you can also download the layout JSON file for free!
Preview
Before we dive into the tutorial, let's take a look at the result on different screen sizes.
Let's start the design
Add section # 1
Gradient background
Start by adding a regular section to a new page or to the page you are working on. Open the section settings and apply the following gradient background:
- Color 1: # f0f2b
- Color 2: # c10b1a
- Gradient type: linear
- Gradient direction: 63deg
Spacing
Switch to the section design tab and apply the following custom top and bottom fill values on different screen sizes:
- Upper padding: 7vw (desktop), 20vw (tablet), 25vw (phone)
- Bottom padding: 7vw (desk), 20vw (tablet), 25vw (phone)
Border
Also add a border to the section.
- Border width: 2vw (top, left, right)
- Bottom border width: 0vw
- Border color: #ffffff
Add a new line
Column structure
Continue adding a new line to the section using the following column structure:
sizing
Open the line parameters and modify the dimensioning parameters accordingly:
- Width: 100%
- Max width: 100%
Add a text module to the column
Add H1 content
Then add a text module with an H1 title of your choice.
Add Div tags to each word in the H1 title
Switch to the text tab of your title copy and add a different div to each word in your title. The CSS ID must be different for each word.
Ready
at
Build
Beautiful
Web sites?
H1 text settings
Switch to the module design tab and change the H1 text settings accordingly:
- Title font: Work Sans
- Title font weight: medium
- Header Text Color: #ffffff
- Header Text Size: 4vw (desktop), 5vw (tablet), 6vw (phone)
- Head line height: 1,4 em
Spacing
Then change the margin values on different screen sizes.
- Left margin: 20vw (desk and tablet), 15vw (phone)
- Right margin: 35vw (desktop), 20vw (tablet), 15vw (phone)
Add a code module to the column
Insert CSS code
In order for the text block animation to apply to our title, we will need some CSS code. We will add this CSS code to a new code module.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
Spacing
Switch to the module design tab and remove all the default bottom padding.
- Bottom margin: 0px
Add a button module to the column
Add a copy
The next module we need is a button module. Enter a copy of your choice.
Button settings
Switch to the module design tab and change the button settings accordingly:
- Use custom styles for the button: Yes
- Button text size: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Button text color: #ffffff
- Button background color: # 000000
- Button border width: 0px
- Button font: Work Sans
Spacing
Then go to the spacing settings and apply custom margin and padding values on different screen sizes.
- Top margin: 3vw (office),
- Left margin: 20vw (desk and tablet), 15vw (phone)
- Upper padding: 1.2vw (desktop), 2vw (tablet), 4vw (phone)
- Bottom padding: 1.2vw (desk), 2vw (tablet), 4vw (phone)
- Left padding: 1.8vw (desktop), 3vw (tablet), 6vw (phone)
- Right padding: 1.8vw (desk), 3vw (tablet), 6vw (phone)
Animation
Customize the animation settings as well.
- Animation Style: Flip
- Animation direction: down
- Animation delay: 2000 ms
- Animation intensity: 100%
- Animation start opacity: 100%
- Animation speed curve: ease-in-out
- Animation repeat: once
Add section # 2
Continue by adding a new regular section just below the previous one.
Spacing
Open the section settings and remove the default upper padding.
- Upper padding: 0px
Add a new line
Column structure
Continue adding a new row using the following column structure:
sizing
Without adding more modules, open the line parameters and let the line occupy the entire width of the section container.
- Width: 100%
- Max width: 100%
Add a text module to the column
Add content
Next, add a text module with a contents description of your choice.
Background color
Add a white background color.
- Background Color: #ffffff
Text settings
Switch to the module design tab and change the text settings accordingly:
- Text font: Work Sans
- Text color: # 9b9b9b
- Text size: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Height of the line of text: 2.6em
Spacing
Also add custom spacing values on different screen sizes.
- Top margin: -5vw (desktop), -20vw (tablet), -27vw (phone)
- Left margin: 20vw (desk), 13vw (tablet), 8vw (phone)
- Right margin: 20vw (desktop), 13vw (tablet), 8vw (phone)
- Upper padding: 5vw (desktop), 7vw (tablet and phone)
- Bottom padding: 5vw (desk), 7vw (tablet and phone)
- Left padding: 3vw (desktop), 5vw (tablet), 6vw (phone)
- Right padding: 3vw (desk), 5vw (tablet), 6vw (phone)
Shadow box
And complete the module settings by applying a subtle box shadow. That's it!
- Box Shadow Blur Strength: 50px
- Shadow color: rgba (0,0,0,0,1)
Preview
Now that we've gone through all of the steps, let's take a final look at how it looks on different screen sizes.
Latest Thoughts
In this article, we showed you how to add CSS text block animations to your title. It's important to make sure your title is visible and read from the start, adding animation to your title can definitely help! You were also able to download the layout JSON file for free. If you have any questions or suggestions, feel free to leave a comment in the comments section below.
Translated from: ElegantThemes
