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.
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.