You've probably browsed blogs that offer layouts that have flipped text. Generally this design is used on magazine type blogs and it is quite an interesting effect that one can add on Divi. In this tutorial, I suggest you discover how to add reversed text in your layout on Divi.
It must be said that with Divi, it is possible to rotate any element on your page using the transformation options built into the 3.2 update. So we're going to design a three-part layout incorporating examples of rotated text.
Overview of the final result
Use the available package
To achieve this layout, you must download the project saved in a ZIP file. Once you have downloaded it, all you need to do is import it into Divi Builder. You can download this file directly by clicking on the following Download link.
Téléchager
How to add rotated text to Divi
For starters, we will create a header with vertical text. To do this, we will rotate a blurb module using the transformation options. You must create a regular section with a row of two columns.
Before adding the module, you must remove the inner and bottom margins of the section by updating the internal padding settings as follows: rcustom embossing: 0px at the top, 0px at the bottom.
Then you have to change the parameters of the line as well:
- Background image: [add an image of your choice at least 1920 pixels wide]
- Column 1 Background Color: #121212
- Custom width: 100%
- Gutter width: 1
- Equalize column heights: YES
- Custom padding (desktop): 0px at the top, 0px at the bottom
- Custom padding (tablet): 40% on the right
- Custom padding (phone): 30% on the right
- 1 column Custom padding (desktop): 200px at the top, 200px at the bottom
- 1 column Custom padding (tablet): 150px at the top, 150px at the bottom
- Shadow of the box: as in the screenshot
- Horizontal position of the Shadow of the box: 0px
- Vertical box shadow position: -100px
- Shadow Color: #f6454e
Add Summary Module (Blurb)
The next step now is to add a module for the header. To do this, add a summary module in the left column on the same row.
Update the module as follows:
- Title: BLOG DESIGN
- Contents: You can write anything.
- Use the icon: YES
- Icon: heart
- Icon Color: # f6454e
- Icon Font Size: 32px
- Orientation of text: center
- Title Title Level: H1 (because it is the main title of the page)
- Title Font: Muli
- Title Font Style: TT
- Text Title Color: #ffffff
- Text Title Size: 70px (desktop), 50px (tablet), 36px (phone)
- Body text color: #cccccc
- Spacing of the letters of the body: 4px
- Width: 500px
- Alignment of the module: center
Note that since we are going to rotate the presentation module so that it is vertical, the custom width of 500 px will correspond to the height of the vertical presentation module. It is therefore important that the contents fits into this module. For this example, we use a small amount of text and resize the title font on different devices so that the text does not wrap and does not disturb the design.
How to rotate the module
To rotate the summary module (and all its contents), update the transformation options as follows:
- Transform X-axis rotation: -90deg
You will need to enter the -90deg value manually. This will give you vertical alignment of the content from bottom to top.
Add a vertical button
Now we're going to add a button at the bottom of our header to remind the user to scroll down the page. Then we can rotate the button using the transform options, like we did for the summary module.
Create a new row with a one-column structure.
Before adding our button module, update the row settings as follows:
- Background color: #f6454e
- Custom width: 100%
- Gutter width: 1
Then, add a button module to the line and update the following button options:
- Alignment of the buttons: center
- Use custom styles for Button: Yes
- Button text size: 16px
- Button text color: #ffffff
- Width of the button border: 0px
- Space of the letters of the buttons: 9 pixels
- Font weight: light
- Font Style: TT
- Button icon: right arrow
Rotation and button positioning
To rotate and position the button, we will use a combination of margins and transform the rotation as follows:
- Custom Margin (Desktop): -50px at the top, 50px at the bottom, -50px at the left
- Custom margin (tablet): 0px on the left
- Transform X Axis Rotation: 90deg
This time the knob is rotated 90 degrees to obtain a vertical top-to-bottom display for the text. This seems to be fine since we want the user to scroll down.
