Developing web page designs that have interaction isn’t all the time a very easy job. But even so specializing in consumer enjoy, design rules and design traits, you additionally want to create one thing that fits your corporate branding and mesmerizes your guests in the beginning look.
For those who seek our weblog, you’ll discover a ton of inventive tactics to means your internet design the use of Divi and Divi’s flexible integrated choices. As of late, we’re including every other inventive solution to that checklist. We’ll display you the right way to creatively overlap row borders to create a shocking design. We’re ensuring we’ve the similar form of design on all display sizes.
Let’s get to it!
Preview
We’ll create an instance from scratch however sooner than we dive into it, let’s check out the outcome on other display sizes.
Obtain Loose Mightype Font
The very first thing you’ll want to do is obtain the unfastened Mightype hand-lettered font through AF studio. Move to the next link and allow the unfastened obtain by the use of electronic mail.
Upload New Phase
Spacing
While you’ve downloaded the unfastened font discussed within the earlier step, you’ll cross forward and create a brand new web page. After you accomplish that, allow the Visible Builder, open the primary segment of your new web page and upload some customized padding:
- Best Padding: 250px
- Backside Padding: 250px
Upload New Row
Column Construction
We’ll want two rows in overall. We’ll get started with the primary one and clone it afterwards as soon as it’s achieved. Upload a brand new row in your segment the use of the next column construction:
Column 1 Gradient Background
With out including any modules but, open your row settings and upload the next column 1 gradient background:
- Colour 1: #ffffff
- Colour 2: rgba(0,255,233,0.25)
- Column Gradient Kind: Radial
- Column Radial Course: Left
- Column Get started Place: 59%
- Column Finish Place: 59%
- Column Position Gradient Above Background Symbol: Sure
Column 1 Background Trend
Proceed through saving the next trend in your pc and importing it as your column 1 background symbol:
While you’ve uploaded the trend, employ the next background symbol settings:
- Column Background Symbol Measurement: Exact Measurement
- Column Background Symbol Repeat: Area
Row Alignment
Permit proper Row Alignment as neatly.
Sizing
We’re additionally the use of some customized Sizing settings for this row:
- Use Customized Width: Sure
- Customized Width: 950px
Spacing
Those are the Spacing values you wish to have so as to add subsequent:
- Backside Margin: 100px
- Proper Margin: -30px (Pill & Telephone)
- Best Padding: 0px
- Backside Padding: 0px
Border
Ultimate however no longer least, upload a border to the highest, left and backside of your row:
- Border Width: 14px
- Border Colour: #000000
- Left Border Taste: Double
Upload Identify Textual content Module
Upload H2 Reproduction
We will be able to now get started including our modules! Upload a name Textual content Module and ensure your replica is H2.
Background Colour
We’re going to break the left border of our row through including a white background colour to the Textual content Module.
Add Mightype Font
Find the Mightype font for your pc subsequent and add it in your font library through clicking at the add button on your checklist of fonts.
Choose the Mightype font record, give your font a reputation and add it in your font library.
H2 Textual content Settings
While you’ve added the brand new font, cross forward and make any other adjustments to the H2 textual content settings:
- Heading 2 Font: Mightype
- Heading Textual content Colour: #000000
- Heading 2 Textual content Measurement: 150px (Desktop), 100px (Pill), 60px (Telephone)
Spacing
For every probably the most modules you wish to have to overlap the row borders, you’ll want to upload detrimental margin. This detrimental margin will most effective impact the module in query, no longer the row it used to be positioned in. The detrimental margin you’ll want to upload relies on the selection of characters which can be used on your replica.
- Best Margin: 200px
- Backside Margin: 100px
- Left Margin: -35%
- Best Padding: 50px
- Backside Padding: 50px
Mix Mode
And to verify the Textual content Module background colour most effective impacts the border of the row, and no longer the column 1 background, allow the ‘Multiply’ Mix Mode within the Filters settings.
Upload Description Textual content Module
Background Colour
Proper underneath the name Textual content Module, cross forward and upload an outline Textual content Module with a white background colour.
Textual content Settings
Move to the textual content settings and make some adjustments:
- Textual content Measurement: 22px (Desktop), 18px (Pill), 15px (Telephone)
- Textual content Line Top: 1.8em
- Textual content Orientation: Middle
Sizing
Lower the Sizing of this Textual content Module to ‘96%’ subsequent.
Spacing
Upload some spacing as neatly:
- Backside Margin: 200px
- Left Margin: -50%
- Best Padding: 20px
- Backside Padding: 20px
Mix Mode
And use the ‘Multiply’ Mix Mode right here too.
Clone Row
We’re achieved editing the primary row! Let’s create the similar consequence however at the different aspect of the web page. To save lots of ourselves a while, we’ll clone the row we have already got and make some adjustments alongside the best way.
Alternate Row Settings
Column 1 Gradient Background
The very first thing you’ll want to trade is the column 1 gradient background:
- Colour 2: rgba(255,187,0,0.33)
- Column Radial Course: Proper
Row Alignment
We wish the row to look at the different aspect, that’s why we’ll make a choice left Row Alignment.
Spacing
We’re adjusting the Spacing settings as neatly:
- Left Margin: -25% (Pill & Telephone)
Border
Take away the left border that’s been carried out in your row and use it on the suitable aspect as a substitute:
- Proper Border Width: 14px
- Proper Border Colour: #000000
- Proper Border Taste: Double
Alternate Identify Textual content Module Settings
Spacing
Alternate the Spacing settings of your name Textual content Module subsequent:
- Left Margin: 52% (Desktop & Pill), 58% (Telephone)
- Proper Margin: -52% (Desktop & Pill), 58% (Telephone)
Alternate Description Textual content Settings
Spacing
Ultimate however no longer least, the outline Textual content Module wishes any other Spacing values as neatly:
- Left Margin: 50%
- Proper Margin: -50%
Preview
Now that we’ve long gone via all of the other steps, let’s take a last take a look at the outcome on other display sizes.
Ultimate Ideas
Overlapping row borders the use of Divi’s integrated choices can carry your site the customization and personalization you could have been on the lookout for. On this put up, we’ve proven you precisely how to do this. We’ve recreated an exquisite instance from scratch. This situation seems to be nice on all display sizes and we’ve used Divi’s integrated choices most effective! If in case you have any questions or ideas, you’ll want to depart a remark within the remark segment underneath!
The put up How to Horizontally Overlap Row Borders with Divi seemed first on Elegant Themes Blog.
WordPress Web Design