Do It Yourself – Tutorials – Web Design tutorial: How to create website section transitions in WordPress a Divi 3.0 tutoial

by | Jul 9, 2021 | 0 comments

Do It Yourself – Tutorials – Web Design tutorial: How to create website section transitions in WordPress a Divi 3.0 tutoial

by | Jul 9, 2021 | Do It Yourself - Build Your Own Website | 0 comments

Do It Yourself – Website Tutorials



Looking to make your website more visually interesting? In this web design tutorial I’ll show you how to add different types of section transitions using the Divi theme.

If you haven’t heard of Divi or want to know more about it check out my Divi them review. It’s one of my favorite themes for wordpress:

Link to clippy
https://bennettfeely.com/clippy/

For an image separator how to calculate the percentage padding you need to maintain the look
https://blog.omgmog.net/post/some-approaches-for-creating-diagonal-section-separators-for-your-website/

What’s covered in this website design tutorial:
Creating an organic complex section transition 0:56
Creating a slash between columns using the gradient filter 3:15
Creating a complex angle transition between sections 5:50

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>