The brand new Divi grow to be choices have opened a ton of latest doorways in opposition to developing visually-appealing internet design. It brings us one step nearer not to desiring any symbol enhancing tool when designing a web site from scratch. We will grow to be it to appear precisely the way in which we need to whilst nonetheless having a 100% responsive design.
On this put up, we’re going to make use of the brand new grow to be choices to superbly stack portfolio pieces. This can be a nice means for showcasing in the past made internet sites, for example. We’ll additionally make certain the photographs keep proper the place they’re, it doesn’t matter what display dimension guests are the usage of. We are hoping this educational evokes you to get inventive with Divi’s new grow to be choices when customizing a web site for your wishes.
Let’s get to it!
Preview
Earlier than we dive into the educational, let’s take a snappy take a look at the result on other display sizes.
Let’s Get started Recreating!
Upload New Phase
Gradient Background
Get started by way of including a brand new phase for your web page. Open the phase settings and upload a gradient background to it.
- Colour 1: #f4f4f4
- Colour 2: rgba(255,255,255,0)
- Gradient Sort: Radial
- Radial Route: Heart
- Get started Place: 30%
- Finish Place: 30%
Spacing
Then, cross to the design tab and adjust the customized padding values within the spacing settings.
- Best Padding: 0px (Desktop), 18vw (Pill), 40vw (Telephone)
- Backside Padding: 0px (Desktop), 18vw (Pill), 40vw (Telephone)
Upload New Row
Column Construction
Proceed by way of including a brand new row to the phase the usage of the next column construction:
Sizing
With out including any modules but, open the row settings and alter the sizing settings.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
- Equalize Column Heights: Sure
Spacing
Then, cross to the spacing settings and take away the highest and backside default padding.
- Best Padding: 0px
- Backside Padding: 0px
Show
We’re additionally ensuring each columns seem subsequent to one another on smaller display sizes. To do this, we’ll want to upload one unmarried line of CSS code to the principle part of the row.
show: flex;
Upload Symbol Module #1 to Column 1
Add Symbol
We will now get started including the other modules! For the sake of having the ability to observe this educational, cross forward and save the next print display for your pc:
Add the print display to an Symbol Module within the first column.
Sizing
Then, cross to the design tab and allow the ‘Power Fullwidth’ choice. While you do, the picture will absorb all of the width of the column.
- Power Fullwidth: Sure
Spacing
To shrink the scale of the picture, we’re going so as to add some customized left and proper margin. You’ll realize that we’re the usage of a viewport unit to verify the scale of the picture stays intact, regardless of the display dimension.
- Best Margin: -10vw
- Left Padding: 11vw
- Proper Padding: 11vw
Border
Upload ‘2vw’ to every probably the most corners within the border settings subsequent.
Field Shadow
In conjunction with a field shadow.
- Field Shadow Blur Energy: 80px
- Shadow Colour: rgba(0,0,0,0.3)
Grow to be Translate
Now we will get started remodeling the picture! Upload the next values to the grow to be translate tab of the grow to be choices:
- Backside: -26vw
- Proper: -2vw
The values you upload right here rely at the width and peak of your symbol so in case you’re the usage of a unique symbol, you’ll have to change the values accordingly. Make sure to’re the usage of viewport devices to verify the location of the picture stays the similar throughout all display sizes.
Grow to be Rotate
Transfer directly to the grow to be rotate tab and rotate the picture accordingly:
- Left: 24deg
- Heart: 46deg
- Proper: -7deg
Translate Skew
Ultimate however no longer least, allow translate skew with the next values:
- Backside: -4deg
- Proper: 24deg
Upload Symbol Module #2 to Column 1
Add Symbol
Directly to the following Symbol Module! Save the next print display for your pc or use any other print display of your selection:
Proceed by way of importing the print display to the second one Symbol Module in column 1.
Sizing
Then, cross to the sizing settings and allow the ‘Power Fullwidth’ choice.
- Power Fullwidth: Sure
Spacing
We’re shrinking the scale of the picture and making it overlap with the former symbol by way of the usage of some customized margin values within the spacing settings.
- Best Margin: -81vw (Desktop), -50vw (Pill & Telephone)
- Left Margin: 11vw
- Proper Margin: 11vw
Border
We’ll upload ‘2vw’ to every probably the most corners within the border settings subsequent.
Field Shadow
And we’ll upload a field shadow too. Understand how we’re the usage of a darker field shadow for the second one portfolio merchandise symbol. This may occasionally assist you to create extra intensity between the portfolio pieces.
- Field Shadow Blur Energy: 150px
- Shadow Colour: rgba(0,0,0,0.6)
Grow to be Translate
Then, cross to the grow to be settings and adjust the grow to be translate values:
- Backside: -8vw
- Proper: 0px
Once more, those values truly rely on how you need to put the print display and what dimensions your print display has. The smaller the picture, the extra you’ll must push it to the left by way of the usage of a bigger unfavorable price.
Grow to be Rotate
Transfer directly to the grow to be rotate tab and mess around with all 3 values.
- Left: 24deg
- Heart: 46deg
- Proper: -7deg
Translate Skew
Ultimate however no longer least, adjust the translate skew values:
- Backside: -4deg
- Proper: 24deg
Upload Symbol Module #3 to Column 1
Add Symbol
Directly to the following and final Symbol Module we’d like in column 1. Save the next print display for your pc or use another print display of your selection:
Upload the print display you’ve stored to a brand new Symbol Module.
Sizing
Then, cross to the sizing settings and allow the ‘Power Fullwidth’ choice.
- Power Fullwidth: Sure
Spacing
Pass to the spacing settings subsequent and adjust the margin values accordingly:
- Best Margin: -107vw
- Left Margin: 19vw
- Proper Margin: 19vw
Border
Proceed by way of including ‘2vw’ to every probably the most corners of the Symbol Module.
Field Shadow
Upload a field shadow subsequent. Once more, we’re the usage of a more potent shadow colour than those we’ve used for the 2 earlier Symbol Modules.
- Field Shadow Blur Energy: 200px
- Shadow Colour: rgba(0,0,0,0.82)
Grow to be Translate
Then, cross to the grow to be settings and adjust the grow to be translate values:
- Backside: -42vw
- Proper: 11vw
Grow to be Rotate
Transfer directly to the grow to be rotate tab and make some adjustments there too.
- Left: 24deg
- Heart: 46deg
- Proper: -7deg
Translate Skew
Ultimate however no longer least, adjust the translate skew values.
- Backside: -4deg
- Proper: 24deg
Upload Name Textual content Module to Column 2
Upload H2 Reproduction
Directly to the second one column! Upload a Textual content Module with some H2 content material of your selection.
H2 Textual content Settings
Pass to the H2 textual content settings subsequent and make some adjustments.
- Heading 2 Font: Roboto
- Heading 2 Font Weight: Skinny
- Heading 2 Textual content Alignment: Left
- Heading 2 Textual content Colour: #000000
- Heading 2 Textual content Measurement: 5vw (Desktop), 6vw (Pill), 7vw (Telephone)
- Heading 2 Letter Spacing: -1px
Spacing
Proceed by way of including some customized margin values within the spacing settings.
- Best Margin: 35vw (Desktop), 10vw (Pill), 0vw (Telephone)
- Left Margin: -4vw
- Proper Margin: 4vw
Upload Divider Module to Column 2
Visibility
The following module we’d like in column 2 is a Divider Module. Be sure that the ‘Display Divider’ choice is enabled.
- Display Divider: Sure
Colour
Then, cross to the design tab and alter the divider colour.
- Colour: #8193fa
Sizing
Alter the sizing settings too.
- Divider Weight: 8px
- Width: 28%
Spacing
And upload some customized margin values.
- Best Margin: 1vw
- Left Margin: -4vw
- Proper Margin: 4vw
Upload Description Textual content Module to Column 2
Upload Content material
The following module we’d like in column 2 is any other Textual content Module. Upload some paragraph content material of your selection.
Textual content Settings
Then, cross to the textual content settings and make some adjustments.
- Textual content Font: Open Sans
- Textual content Measurement: 0.6vw (Desktop), 1.2vw (Pill), 1.8vw (Telephone)
- Textual content Line Peak: 3.1em (Desktop), 2.7em (Pill), 2.6em (Telephone)
- Textual content Orientation: Left
Spacing
Upload some customized margin values subsequent.
- Best Margin: 1vw
- Left Margin: -4vw
- Proper Margin: 4vw
Upload Button Module to Column 2
Upload Reproduction
The following and final module we want to entire the design is a Button Module. Upload some replica of selection.
Button Settings
Then, cross to the design tab and adjust the button settings.
- Use Customized Kinds for Button: Sure
- Button Textual content Measurement: 1vw (Desktop), 2vw (Pill), 3vw (Telephone)
- Colour 1: #5627ba
- Colour 2: #8fb5fc
- Gradient Route: 122deg
- Button Border Width: 0px
- Font Weight: Extremely Daring
- Font Taste: Uppercase
Spacing
Alternate the customized margin and padding values too.
- Best Margin: 2vw (Desktop), 3vw (Pill), 5vw (Telephone)
- Backside Margin: 6vw (Pill), 8vw (Telephone)
- Left Margin: -4vw
- Proper Margin: 4vw
- Best Padding: 1vw (Desktop), 2vw (Pill), 3vw (Telephone)
- Backside Padding: 1vw (Desktop), 2vw (Pill), 3vw (Telephone)
- Left Padding: 3vw (Desktop), 5vw (Pill), 7vw (Telephone)
- Proper Padding: 3vw (Desktop), 5vw (Pill), 7vw (Telephone)
Field Shadow
Ultimate however no longer least, upload a refined field shadow and also you’re performed!
- Field Shadow Blur Energy: 40px
- Shadow Colour: rgba(0,0,0,0.3)
Preview
Now that we’ve long gone thru the entire steps, let’s take a last take a look at the result on other display sizes.
Ultimate Ideas
On this put up, we’ve proven you learn how to get inventive with Divi’s new grow to be choices. Extra in particular, we’ve stacked portfolio pieces to create a pleasing and visually-appealing design. We’ve additionally made positive that the photographs glance nice throughout all display sizes. When you’ve got any questions or tips, make sure to go away a remark within the remark phase underneath!
The put up How to Beautifully Stack Portfolio Items with Divi’s Transform Options seemed first on Elegant Themes Blog.
WordPress Web Design