With online education booming these days, this template has everything you need to build fantastic sites for clients in the field. The template focuses on web-oriented professions like coding and design, but can be used for any online education site dedicated to helping people up-scale their skills while attending virtual classes.

The template has an exciting, bold vibe, and includes:



• Eye-catching animations
• Blog
• Dynamic pages
• Video testimonials
• And more

Scroll down for step-by-step instructions (+videos!) for reproducing the first section, adding animations, and adjusting for mobile.

How to Reproduce the First Section



As always, you can save any part of this template as a Section and then use it over again on other websites, but if you want to recreate this section on your own, follow these steps.

Add a row below the header 

1. Set the top and the bottom padding to 100px and the left padding to 40px.
2. Set the background color to #000000.
3. Add a background image and set the position to No repeat and Top Right.
4. Add a column to the row, so it has a total of 2 columns.

In column 1

1. Set the right padding to 50px. 
2. Add a text widget, add your text, set the style to Heading 1 and set the font to Bevan. Align text to the left.
3. Add a text widget below this one, add your text, and set the font to DM sans. Align text to the left and set the style to paragraph.
4. Add a button below this text, add your text, set the height to 55 px, and set the background color to #ffffff. Align left. 
5. Add another button below this one, set the background color to #5c37d0, set height to 55px. 
6. Add an image widget below the buttons, set its width to 90px and set the top margin to -130px. Align right. 

In column 2

1. Add an image widget, set its width to 445px and set rounded corners to 3%. Align left. 
2. Add another image widget below this one, set its width to 230px, and set the top margin to -60px. Align right
   

Animations

Once all the elements have been added to the section, add animations to engage site visitors and draw their attention where you want it to go.

Text widgets

1. Set the animation trigger to Entrance and choose Fade from left.
2. Set the duration to 1200 ms and the intensity to 30.

Buttons

1. Set the animation trigger to Entrance and choose Zoom in.
2. Set the duration to 800 ms, the delay to 500, and the intensity to 50

Top image widget

1. Set the animation trigger to Entrance and choose Fade in from Right.
2. Set the duration to 1200 ms and the intensity to 30.

Bottom image widget

1. Set the animation trigger to Entrance and choose Fade in from right.
2. Set the duration to 1200 ms, the delay to 500, and the intensity to 30
   

Adjusting for Mobile

Move to the mobile view and adjust as follows. 

In the row

1. Set the top and the bottom padding to 50px.
2. Position the background image to bottom center and set it to No repeat. 

Image

1. Set the image width to 80px and align it left.

In the column

1. Set all padding to 0px.
2. Set the top image width to 300px and align the image center.
3. Set the top padding to 30px
4. Set the bottom image width to 170 px, the top margin to -40px and align right.