I used a SaaS company as the niche for the template, but it could be used as a landing page for a lot of different industries.
I wanted to create a template which couldn’t be achieved with just the Divi builder, but was also easy for people to update who used the template.
All the animations are using pure CSS, so no Javascript! I’ve annotated all the CSS so it’s clear what does what.
You can download the template from the slide-out form on the demo.
What’s included:
The layout download includes everything on the page, including all the CSS animations.
Once you download the template you’ll need to move the CSS from the code module to your custom CSS.
The menu and pop-out email sign-up form are not included, but I’ll be releasing tutorials on both soon!
Licensing:
You are free to use the layout on both commercial and personal project, without attribution!
All assets are from Unsplash and Elegant themes and are also free to use for both commercial and personal projects.
Template Preview:
More articles
How to add photo credit to images in Divi
Divi doesn't have a setting to add credit to images, but luckily it's an easy effect to achieve right within the builder using a little bit of CSS. This method using something know as a "pseudo-element", which can be found in the advanced tab of the module settings....
Why it’s important to keep your WordPress website up-to-date
Updating a WordPress website is often overlooked. Many businesses think they just need to set up the website once and forget about it. But this is not correct. Let’s look at why it’s important to keep your WordPress installation up to date. Exposure to Security Risk...
30 Lawyer websites for Web Design inspiration 2020
If you’re looking for inspiration for a law firms website, you’ve come to the right place! I’ve done the hard work for you and collected what I think are some of the best lawyer websites out there. If you think I’ve missed any, leave a comment below and I’ll add it to...
Hi, Thanks for this awsome free saas divi layout.
I am missing the red download button, i wanted also a download button in this layout what for css have you used to reach this?
Best regards,
Idaniël
Hey Idaniël,
The red download button isn’t part of the layout as requires a child theme, but I am making a tutorial on how to do this which will be out soon!
I’ll also be making a tutorial on how to add a download button.
Cheers!
Cool thanks for your response. I just wait 🙂
Thanks for the tutorial already..
Best regards,
Idaniël
Gracias estoy buscando dinero para contratar un hosting u hacer mi página
Hii, Thanks for the free layout. It is a well made layout and ready to use. Thank you soo much!
Friend. This is a really clean and attractive template. Thank you.
In my particular instance, I’d like to stop (or slow down considerably) the color bar animation on the left and right of the screen in the very top image (the buildings). Can you help? Thank you.
Hey Jeffrey – glad you like it!
To slow down the animations:
1. Go to the CSS
2. Look for “#floating-line-1” or similar
3. In the following part “animation: floating-line-1 5s infinite;” change the “5s” to a larger number. The number is in seconds, so 10 would probably be quite nice.
4. Repeat for all the lines
Hope that helps!
Andy, that’s so very helpful. Thank you.
Your Saas page is perfect for me. I’m not fiddling with layout or design to any great degree either. Just drag and drop pictures, rewrite headings and text, and I’m done.
I just want you to know that your gifts aren’t going to waste! Blessings.