It’s all the time nice to have additional assets that you’ll use when construction a brand new web site for your self or for a shopper. That’s why we’re ensuring you obtain new format packs each week. However there are different assets that can turn out to be useful as neatly, akin to “border pictures” or pictures that you’ll use alongside one facet or every other of a Divi design component so as to add a stylistic flourish. The use of Divi’s integrated choices at the side of those border pictures can carry surprising effects. On this put up, we’ve equipped you with 5 other border pictures which you’ll obtain totally free underneath. We’re going to provide an explanation for how you’ll use those border pictures for your merit and create a surprising finish consequence.
Let’s get to it!
Preview
Let’s check out the other border pictures you’ll be capable of obtain additional down this put up. For every one of the crucial shapes, you’ll to find 4 variations: a peak, backside, left and proper one. Those pictures will assist you to reach the very same consequence as proven within the first 4 pictures underneath:
Obtain The Symbol Information for FREE
To get your palms at the loose border pictures, you’re going to first want to obtain it the usage of the button underneath. To realize get right of entry to to the obtain it is very important subscribe to our Divi Day by day e mail listing by way of the usage of the shape underneath. As a brand new subscriber, you’re going to obtain much more Divi goodness and a loose Divi Format pack each Monday! Should you’re already at the listing, merely input your e mail cope with underneath and click on obtain. You are going to now not be “resubscribed” or obtain additional emails.
@media simplest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}
Obtain For Unfastened
Sign up for the Divi Newlsetter and we can e mail you a replica of without equal Divi Touchdown Web page Format Pack, plus lots of alternative wonderful and loose Divi assets, guidelines and tips. Observe alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind for your e mail cope with underneath and click on obtain to get right of entry to the format pack.
You have got effectively subscribed. Please test your e mail cope with to substantiate your subscription and get get right of entry to to loose weekly Divi format packs!
Way
- When you obtain and unzip the folder containing all 5 border pictures, you’re going to to find 4 subfolders: peak border, backside border, left border and proper border
- Which means there’s a complete of 20 pictures information to be had so that you can use
- Later in this put up, you’ll to find the accompanying settings that fit every one of the crucial border aspects
- To peak it off, you’ll mix the border pictures with gradient overlays
- Those coloration overlays will can help you make the photographs seem as colourful or refined as you need
- You’re loose to make use of those border pictures with none restrictions, even for industrial functions
Growing the Total Design
Upload New Segment
Spacing
Let’s get started by way of developing the full design we’ve used to show off the border pictures. Open a brand new or present web page, upload a brand new common segment and upload some customized padding:
- Most sensible Padding: 300px
- Backside Padding: 300px
Upload New Row
Column Construction
Proceed by way of including a brand new row for your segment the usage of the next column construction:
Sizing
With out including any modules but, open the row settings, cross to the Sizing settings and make the row fullwidth.
- Make This Row Fullwidth: Sure
Upload Identify Textual content Module to Column 1
Upload H2 Content material Field
Let’s get started including some modules! The primary module that’s wanted is a Textual content Module. Upload one to the primary column and upload your H2 replica of option to the content material field.
Heading Textual content Settings
Then, make some adjustments to the H2 textual content settings within the Design tab.
- Heading 2 Font: Abril Fatface
- Heading 2 Textual content Dimension: 80px (Desktop), 70px (Pill), 50px (Telephone)
Spacing
Proceed by way of including some margin to the highest of this Textual content Module.
- Most sensible Margin: 150px
Upload Hyperlink Textual content Module to Column 1
Upload Hyperlink to Content material Field
Proper underneath the identify Textual content Module you’ve simply added, cross forward and upload a brand new Textual content Module. We’re the usage of this Textual content Module as a button so you’ll want to upload a hyperlink to the CTA.
Hyperlink Textual content Settings
Subsequent, exchange the hyperlink textual content settings within the Design tab.
- Hyperlink Font Weight: Extremely Daring
- Hyperlink Font Taste: Uppercase
- Hyperlink Textual content Colour: #000000
- Hyperlink Textual content Dimension: 21px
Spacing
Upload some peak margin to make space between this Textual content Module and the former one as neatly.
- Most sensible Margin: 100px
Border
Finally, upload a refined backside border to the hyperlink Textual content Module.
- Backside Border Width: 1px
- Backside Border Colour: #333333
Upload Description Textual content Module to Column 2
Textual content Settings
The second one column wishes an outline Textual content Module simplest. After including content material to the content material field, follow the next textual content settings:
- Textual content Dimension: 22px (Desktop), 20px (Pill), 18px (Telephone)
- Textual content Line Top: 2.6em
- Textual content Orientation: Justify
Sizing
Make the Sizing settings fit other display screen sizes as neatly:
- Width: 82% (Desktop), 100% (Pill & Telephone)
Spacing
And finally, upload some peak and backside margin.
- Most sensible Margin: 100px
- Backside Margin: 100px
Including the Border Shapes
Left Border Background Settings
Now that we’ve finished the full design, we will be able to get started including the border pictures! We’ll get started off with the left border facet. In finding your border symbol of selection within the ‘Left Border’ folder and add it because the segment background symbol. Then, follow the next background symbol settings:
- Background Symbol Dimension: Exact Dimension
- Background Symbol Place: Heart Left
- Background Symbol Repeat: No Repeat
Proper Border Background Settings
Or, you’ll to find your border symbol of selection within the ‘Proper Border’ folder and upload it because the segment background the usage of the next settings:
- Background Symbol Dimension: Exact Dimension
- Background Symbol Place: Heart Proper
- Background Symbol Repeat: No Repeat
Most sensible Border Background Settings
The similar factor is going for the highest border symbol, however as an alternative, use the next background settings:
- Background Symbol Dimension: Exact Dimension
- Background Symbol Place: Most sensible Heart
- Background Symbol Repeat: No Repeat
Backside Border Background Settings
Or, closing however now not least, you’ll to find the ground border pictures within the ‘Backside Border’ folder and mix it with those segment background settings:
- Background Symbol Dimension: Exact Dimension
- Background Symbol Place: Backside Heart
- Background Symbol Repeat: No Repeat
Mix Colours The use of Semitransparent Overlay
For every one of the crucial incorporated border shapes, you’ll come to a decision so as to add a colour overlay as neatly. This overlay is helping you are making the border pictures glance extra refined. So as to add an overlay, cross for your segment settings and upload a gradient background on peak of the border background symbol.
- Colour 1: #ffffff
- Colour 2: rgba(255,255,255,0.36)
- Gradient Path: 141deg
- Position Gradient Above Background Symbol: Sure
Preview
Now that we’ve long past thru all of the steps, let’s take a last take a look at some attainable designs you’ll reach the usage of those loose border pictures.
Ultimate Ideas
On this put up, we’ve shared 5 other border pictures which you’ll obtain totally free. You’ll use those border pictures for any web site you’re operating on with none restrictions. We inspire you to check out they all out and create surprising designs. In case you have any questions or ideas, you’ll want to go away a remark within the remark segment underneath!
The put up Download 5 FREE Border Images for Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design