Divi Text Tilt

Do you want to give a 3D-like effect to your texts? With Next Text Tilt Module, you can add a title and body text, and with your cursor hovering on it; you will get a 3D-like feel and the characters will bounce off the surface enunciating the content you will put here. With 9 unique ways of customizing the Tilt Effect!

Content → Text

In the Module’s ‘Content’ tab, you will see under the toggle named ‘Text’ a field for ‘Heading’ and a ‘Select Heading Tag’ field. Move to enable the body text switch to include a summary.

1. Heading – include heading text in the field below.
2. Heading Tag – select a heading tag for the heading text.
3. Body Enable – enabling this will display the Body Text field.
4. Body – type in the body text

Content → Background Color

1. Background Content Color – enable the switch to view the color selection tool
2. Select Background Color – pick a color using the pointer or put the hex code to get the exact shade required.

Design → Tilt Effect

Within the Module’s ‘Design’ tab, you can recreate the tilt effects with the many options to alter your text. One of the significant toggles would be the “Tilt Effect.” Here you will find various ways to edit the tilted text’s perspectives. 

1. Glare – add a glare to the tilt design using the slider 
2. Max Glare – this allows you to adjust the intensity of the glare
3. 3D Enable – if you’d like to have the tilt effect have a 3D-like effect enable this switch
4. 3D Transform – adjust the 3D transform using the slider
5. Tilt Reverse – reverse the tilt shift (it will tilt from the opposite direction)
6. Tilt Perspective – adjust the perspective if the tilt using the sider
7. Tilt Max – adjust to lessen the excessive movement. Higher the value faster the tilt movement when hovered on.

Design → Tilt Effect (continued)

Within the Module’s ‘Design’ tab, you can recreate the tilt effects with the many options to alter your text. One of the significant toggles would be the “Tilt Effect.” Here you will find various ways to edit the tilted text’s perspectives.

1. Tilt Speed – adjust the speed of the tilt effect.
2. Tilt StartX – adjust the vertical angle of the tilt shift.
3. Tilt StartY – adjust the horizontal angle of the tilt shift.
4. Tilt Scale – increase or decrease the scale of the text using the slider.

Design → Heading Text

1. Font – Select a font from the collection or use a custom font.
2. Font Weight – define how you want your font to show either regular, italic, bold extra, or even extra light.
3. Font Style – Pick a style of font for both front and back.
4. Text Alignment – align the text to the left, center, or right.
5. Text Color – manually select a color for the background of the text using the pointer, or you can state the hex code and get the exact color you require.
6. Text Size – easily resize the text for both the front and back parts of the flip box.
7. Letter Spacing – you can space out the letters using the slider for an easier read for the website visitors.

Design → Heading Text (continued)

1. Line Height – adjust the space between the lines using the slider.
2. Text Shadow – add text shadow to have the texts highlighted.

Design → Body Text

1. Include text, links, bullet points, numbered lists, or quotes. 
2. Font – Select a font from the collection or use a custom font.
3. Font Weight – define how you want your font to show either regular, italic, bold extra, or even extra light.
4. Font Style – Pick a style of font for both front and back.
5. Text Alignment – align the text to the left, center, or right.
6. Text Color – manually select a color for the background of the text using the pointer, or you can state the hex code and get the exact color you require.
7. Text Size – easily resize the text for both the front and back parts of the flip box.

Design → Body Text (continued)

1. Letter Spacing – you can space out the letters using the slider for an easier read for the website visitors.
2. Line Height – adjust the space between the lines using the slider.
3. Text Shadow – add text shadow to have the texts highlighted.

Design → Content Spacing

1. Content Margin – a margin is a space around an element’s border
2. Content Padding – padding is the space between an element’s edge and the element’s content

Design → Content Border

1. Rounded Corners – include rounded corners around the edges of the tilt text.
2. Border Styles – add borders on all four sides or specific sides using border styles.
3. Border Width – adjust the border width using the slider.
4. Border Color – add color to the border using the pointer or place the hex code to get the exact color you want for the design.
5. Border Style – select a premade border style.

Design → Content Box Shadow

Include content box shadow to the tilt text design. You pick a premade shadow and configure the positions, blur, and intensity of the shadow.