Setting the divider height with a vw length unit will make sure the divider style will scale nicely for a consistent design on all screen sizes. Since the design of your text will take place using the section dividers, it is important to keep the section compact without any padding so that dividers will overlap the text with minimal divider height. Top Divider Arrangement: On Top Of Section Contentīottom Divider Arrangement: On Top Of Section Content
COPY AND PASTE TEXT DIVIDERS UPDATE
Open the section settings and update the following:īackground Gradient Left Color: rgba(124,218,36,0.66)īackground Gradient Right Color: rgba(0,106,193,0.61) We will start with customizing the section first. You don’t need to add a module at this point. Add a new section with a one column layout. In this first text design, I’m going to use section dividers to break up the text and add a uniquely shaped highlighting element using a gradient background. Now you are ready to start! Design #1: Broken Text with a Gradient Highlight Then give your page a title and deploy the visual builder. From your WordPress Dashboard, navigate to Pages > Add New. Here is just a few examples of the text designs possible using this technique:įor this design, you will need to create a new page using the visual builder. In this tutorial, I’m going to explore the power of Divi’s section dividers to create some unique text designs that will take your page headers to the next level. The trick is to use Divi’s section dividers to overlay your text to add breaks and texture in a number of different ways. With Divi (and some “out of the box” thinking), you can create some unique text designs without any external css or custom images.
Creating unique text designs for your website can be challenging, especially if you don’t want to use a ton of CSS or resort to supplementing seo-friendly text for images you design in Photoshop.
0 kommentar(er)
