Roni Landau • Jan 26, 2021
New Template: Online Education
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
- Set the top and the bottom padding to 100px and the left padding to 40px.
- Set the background color to #000000.
- Add a background image and set the position to No repeat and Top Right.
- Add a column to the row, so it has a total of 2 columns.
In column 1
- Set the right padding to 50px.
- Add a text widget, add your text, set the style to Heading 1 and set the font to Bevan. Align text to the left.
- 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.
- Add a button below this text, add your text, set the height to 55 px, and set the background color to #ffffff. Align left.
- Add another button below this one, set the background color to #5c37d0, set height to 55px.
- Add an image widget below the buttons, set its width to 90px and set the top margin to -130px. Align right.
In column 2
- Add an image widget, set its width to 445px and set rounded corners to 3%. Align left.
- 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
- Set the animation trigger to Entrance and
choose Fade from left.
- Set
the duration
to 1200 ms and the
intensity to 30.
Buttons
- Set the animation trigger to Entrance
and choose Zoom in.
- Set the
duration
to 800 ms, the delay to 500, and the
intensity to 50
Top image widget
- Set the animation
trigger
to
Entrance
and
choose Fade in from Right.
- Set
the duration
to 1200 ms and the
intensity to 30.
Bottom image widget
- Set the animation
trigger
to
Entrance
and choose Fade in from right.
- 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
- Set the top and the bottom padding to 50px.
- Position the background image to
bottom center
and set it to
No repeat.
Image
- Set the image width to 80px and align it left.
In the column
- Set all padding to 0px.
- Set the top image width to 300px and align the image center.
- Set the top padding to 30px
- Set the bottom image width to 170 px, the top margin to -40px and align right.