Today we come to the last Series post on Divi Modules Power concerning the Text module; we have seen how to create springing up texts, how to use Text modules for creating a Background of different shapes, how to create puzzles with Text modules and lastly how to create Tooltips. Now we want to design a magnetic triangle taking also advantage of the last Divi update about Hover options.

So, let’s get started!

A SNEAKPEEK
Let’s see before a sneak peek of our final result:

Y

our content goes here. Edit or remove this text inline or in the module Content settings.

LAYOUT STRUCTURE

The layout is really simple, just a two-columns row with two text modules!

TEXT MODULE OPTIONS 

In order to get this layout we just need some customisations on our two text modules, some custom css in the modules settings and also in our container row.

TRIANGLE MODULE

Our left text module will be our triangle, so we just have to delete all the default content but the first letter (“Y”) making it Heading 1, then we select a blue background and move on to the Design tab; from here we can change the text color to Light and center it, then we change the font size to 60px and set the font family “Acme”.

Next we change the module width to 32% (under the Sizing toggle) and add some top and bottom padding:

Now we have to transform our rectangular module in a triangle, so we take advantage of the Css clip-path property writing a couple of lines in Advanced -> Custom Css -> Main Element:

TEXT MODULE

For our text module we need few settings, we leave the text but the first letter, we select a green background, we change the text color to light, change the module width to 80% and add some padding:

Finally also here we have to add some css in order to clip the background in a way that it can fit with the triangle one:

ROW SETTINGS

Now we can enter our Row settings, we go to Advanced -> Custom Css -> Second Column Main Element and add a line of css in order to make our text module sliding to the left:

Then, taking advantage of the last Divi Feature Update about the Hover option we click on the Hover icon and change a little the margin left on hover so that our triangle will look like attracted by the text one on hovering the row:

NEXT SERIES

This 5 Posts Series ends here but taking a cue from the Hover options Divi update we will publish soon a new Divi Series for new awesome designs just taking advantage of the power of Divi and its fantastic Hover options.

See you next post! Cheers

SupportHost

You have Successfully Subscribed!

CodeCanyon Plugins

You have Successfully Subscribed!

Elegant Themes

You have Successfully Subscribed!

Try Divi!

You have Successfully Subscribed!

Divi Plugins

You have Successfully Subscribed!

Advanced Blurbs Plugin

You have Successfully Subscribed!

Bloom!

You have Successfully Subscribed!

Divi Cake Layouts

You have Successfully Subscribed!

Divi Cake Plugins

You have Successfully Subscribed!