Divi’s new column layouts have freed up some thrilling possibilites for distinctive web page designs. And with the toughen of as much as six columns, you’ll truly discover new designs for a picture gallery. On this use case educational, I’m going to turn you learn how to design 3 distinctive layouts on your photographs. I believe you’ll be shocked by way of how simple those layouts are to design. And, expectantly, they’ll provide you with some new concepts to discover.
Let’s get began.
Sneak Peek
Web page Setup
With the intention to get began, create a brand new web page, give your web page a identify, and deploy the Visible Builder. Make a choice the choice “Select a Premade Structure”. Within the load from library popup, make a selection the Florist structure pack after which load the Florist Gallery web page structure on your web page.
As soon as the web page is loaded, you’re ready to start out.
Symbol Gallery Design #1
For this primary design, I’m going to make use of the 1/2 1/6 1/6 1/6 column structure. With this structure, I’m going to stagger photographs within the 3 columns at the proper in order that they devise a triangular form. This may occasionally function a super complimentary visible for my huge textual content content material at the left.
To begin, replica all of the phase containing the present symbol gallery pictures. We’d like the additional replica of that phase for our subsequent design.
After that, trade the column structure of your row to the 1/2 1/6 1/6 1/6 column structure by way of clicking the “select structure” icon to your row menu.
After the column trade, you will have 3 huge photographs within the left column. Drag the ones over to the a ways proper column which is lately empty. You will have 3 columns with 3 photographs in each and every with the left column empty.
Replica the textual content module within the header phase above and paste it within the left column.
Then delete the ground two photographs in the second one column and the very backside symbol within the 3rd column. This may occasionally crew the pictures in a triangle form.
That is what it will have to appear to be up to now.
Subsequent, replace the row settings as follows:
Customized Width: 80%
Gutter Width: 2
Customized Padding: 3vw Best, 3vw Backside
Save settings.
Then open the textual content module settings and building up the Heading textual content measurement to 11vw.
Then upload a divider module at once below the textual content module and provides it the next settings:
Colour: #dddddd
Divider Weight: 4px
Top: 2vw
Customized Margin: 5vw Left, -10vw Proper
The unfavorable proper margin pulls the divider into the open area left in the second one column in order that the design feels extra balanced.
Save Settings.
Now create a brand new textual content module below your divider line. Then use the correct click on choices to duplicate the module types of the textual content module you first added after which previous the module types into the brand new textual content module.
After that, open the brand new textual content module settings and replace the next:
Textual content Textual content Measurement: 1.8vw (desktop), 18px (pill)
Textual content Line Top: 1.6em
Customized Margin (desktop): 7vw Left, -9vw Proper
Customized Margin (pill): 0vw Proper
Very similar to what we did with the divider, the unfavorable proper margin pulls the textual content module over to the correct to assist steadiness out the design and line up well below the divider.
Environment the textual content to a vw duration price will be sure the textual content scales well on other desktop browsers. Environment the textual content measurement to 18px on pill will be sure the textual content doesn’t display up too small on cellular.
For the final step, give your row a background gradient to assist body the triangular grid of pictures at the proper of your web page. Open the phase settings and replace the next:
Background Gradient Left Colour: rgba(236,213,163,0.61)
Background Gradient Proper Colour: rgba(255,255,255,0)
Gradient Route: 231deg
Get started Place: 33%
Finish Place: 0%
This is the general design.
Symbol Gallery Design #2
For this subsequent symbol gallery design, we’re going to use the duplicated phase of our unique structure we created previous. However ahead of we commence enhancing the phase, replica it once more so we will be able to use it for our subsequent design.
After you replica the phase, trade the column structure to a six-column structure.
Then drag 3 of the pictures from the primary 3 columns into each and every of the empty columns at the proper. Then delete the rest photographs within the first 3 columns so that you’ve got just one symbol in each and every of the 3 columns.
Now upload a white interior field shadow that blends well with the white background to create a dream-like impact over your symbol.
Field Shadow: see screenshot
Field Shadow Unfold Power: 8px
Shadow Colour: #ffffff
Then upload a 10px rounded corners to the picture.
Now that you’ve got your first symbol designed, replica the module types and paste them to each and every of the rest symbol modules.
Overlapping Letters on Every Pictures
The six columns permit us so as to add overlap a letter on each and every of our photographs to spell out a phrase (like “INDOOR”). To do that, upload a textual content module below the picture within the first column and put a capital letter “I” within the content material field.
Subsequent replace the design settings as follows:
Textual content Font: Alice
Textual content Textual content Colour: #ffffff
Textual content Textual content Measurement: 12vw (desktop), 18vw (pill), 150px (smartphone)
Textual content Line Top: 1em
Textual content Orientation: proper
Customized Margin: -12vw (desktop), -20vw (pill), -160px (smartphone)
Realize the customized margin values set for cellular gadgets. The smartphone view calls for a px duration unit as it wishes to house for the breakpoint from a smaller pill to smartphone. When the use of the vw duration unit for textual content, it’s at all times a good suggestion to modify to px unit on cellular gadgets for the reason that display screen measurement turns into too small and unpredictable.
Now that we have got our first textual content module completed, replica the textual content module and paste it below each and every of the rest photographs. Then replace each and every letter in order that the phrase “INDOOR” is spelled out throughout all six photographs.
Finally, replace your row settings with a customized gutter width of two.
That is what the design looks as if up to now.
As a result of the overlapping textual content, the picture is simplest clickable at the most sensible portion to deploy the lightbox impact. So this design is also easiest as strictly a design part as a substitute of a conventional gallery. However you’ll at all times do with out the textual content.
Further Symbol Gallery Structure
Now you’ll simply create an extra symbol gallery below the present row with a brand new column structure. This may occasionally glance truly great with the pictures that spell out “INDOOR” serving as an ornamental identify for the pictures beneath.
To create the extra gallery of pictures, replica the row and provides it the 1/5 3/5 1/5 column structure.
Now delete all of the textual content modules below each and every symbol. And ensure the primary and 3rd column each and every have 3 photographs to steadiness out the gallery.
This is the general design.
Symbol Gallery Design #3
For this subsequent design, I’m going to make use of the five-column structure. Then I’m going to get ingenious with the sizing and field shadow results to provide the semblance the pictures get larger within the middle column and smaller within the outer columns.
To do that, pass to the duplicated phase of the unique structure. Then replace the column structure to a five-column structure.
This design works easiest with photographs that experience the very same dimensions in order that the design is symmetrical. For this case, you’ll simply use one symbol from the prevailing photographs within the structure after which replica and paste it into each and every of the 5 columns. Delete the remainder of the pictures you don’t want.
Now replace the picture settings for the picture within the first column as follows:
Width: 50%
Module Alignment: Proper
Rounded Corners: 10px
Field Shadow: see screenshot
Now replica the module types and paste them into the picture within the a ways proper column. Then replace that symbol to have a module alignment of left (as a substitute of proper).
Now replace the settings for the picture in the second one column as follows:
Width: 75%
Module Alignment: Heart
Rounded Corners: 10px
Field Shadow: see screenshot
Field Shadow Blur Power: 36px
Save settings. Then paste the module types over to the picture within the fourth column.
Now it’s all the way down to the picture within the middle column. Replace the picture settings as follows:
Width: 75%
Module Alignment: Heart
Rounded Corners: 10px
Field Shadow: see screenshot
Field Shadow Blur Power: 63px
After all, to provide the pictures extra respiring room, replace the row settings as follows:
Make This Row Fullwidth: YES
Gutter Width: 2
Now let’s take a look at the design up to now.
Stacking Any other Row of Pictures for Symmetry
Any other factor you have to do with this design is replica the row and provides the highest row photographs a customized padding as follows:
column one symbol customized padding: 5vw most sensible
column two symbol customized padding: 10vw most sensible
column 4 symbol customized padding: 10vw most sensible
column 5 symbol customized padding: 5vw most sensible
This is the outcome.
Ultimate Ideas
Exploring the brand new column layouts is numerous amusing and the 3 designs on this educational are simplest the top of the iceberg. And those symbol galleries can simply get replaced with different modules to create distinctive layouts for featured services and products, movies, and extra.
I stay up for listening to from you within the feedback.
The publish 3 Image Gallery Designs Using Divi’s New Column Layouts seemed first on Elegant Themes Blog.
WordPress Web Design