![]() On top of the background color of your section, add the following gradient background: Although you could use whichever color you want, we’ve chosen the ‘#FFFFFF’ white color code to emphasize the contrast between both sections.Īgain, start off by choosing a background color for your first section. To create a beautiful transition between both sections, without having to set a color for the divider, we’re going to add a background color to the second section of this example. The bottom divider of this example contains the following settings: You can choose for yourself, depending on the modules and rows you’re using, whether or not you want the divider to appear underneath the section content or on top of it. To achieve the exact same top section divider, use the following settings: However, the top divider is a lot more subtle which gives a kind of reflection effect. The divider style and settings are almost the same. The first section you’re working on contains both a top and a bottom section divider. On top of the background color, we’re adding the following beautiful gradient background: We’ve mentioned at the beginning of this post that you should always start off by choosing a background color for your section, even if you’re going to add a gradient background on top of it. Subscribe To Our Youtube Channel Recreate Example #1 Recreate This Example How to Recreate the Section Divider Examples with Divi After every example showcase, you can find a button that will take you to the tutorial steps of that specific example. Let’s take a quick look at the different examples we’ll be recreating. We’re recreating the section dividers of each example only.Likewise, this color difference allows a top divider to pick up on the color of the previous section.The color difference between neighboring sections allow a bottom divider to pick up on the color of the next section.You can always add a gradient background on top of your background color, but the background color needs to be there.Always start off each section by choosing a background color.What You Need to Knowīefore we show you all of the examples and how to recreate them, there are some things you need to know (and understand) before you start: Not only can you use them for your own website or next project, but they will also help you understand how section dividers within Divi work. To help you get started with these new section dividers, we’re going to show you how to recreate each one of these examples. Within the Divi update announcement blog post, a ton of design examples we’re included and they simply blew us away. You can also use the Opacity setting.Section dividers are part of a long-awaited Divi update that changes the entire look and feel of any website. To make the a color transparent, instead of using a Hex Number #000000, type the word 'transparent' (without quotes) into the color input."įor a semi-transparent color, instead of using a Hex Number #000000 for the color you can use a RBGA color rgba(0,0,0,0.15) The 0.15 is how transparent the color is. Design the Divider Line once, then use the element copy/move feature to copy the element to different areas or pages." Use the Line Attributes style and size settings to design your divider line OR use a background with the height setting to controls the design of the divider line, but probably not both together.īe consistant. You can find a few, basic, divider line examples and the setting values needed to make the examples on your site, here: Divider Line Demo and Settings. Control the Opacity (the lines transparency).Control the spacing above and below the line.Use a Background Color instead of a styled line. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |