In this tutorial, I will show you how to create a mosaic effect on your website like I did on the top of this page.
It’s very simple and provides many possibilities!
There is two ways to make this possible… Using background images in empty sections (which won’t be displayed on tablet and mobiles) or using images module.
For this tutorial, I will choose the second way!
First thing you have to do is checking that all the images you want to use have the same width & height (because if you don’t, those rows won’t have the same height).
Then, you’re ready to begin…
(This tutorial will teach you how to create two rows with three 1/3 modules each but the way to make it work is the same if you want two 1/2 or four 1/4 modules)
STEP ONE: CREATE YOUR SECTION
Click on « Standard Section » and choose the column structure you want
(Like I said, in this tutorial, it will be the three 1/3 modules)
STEP TWO: FIRST SETTINGS
Now that your row is created, you have to make sure you will have the perfect mosaic effect on your website.
Click on the « Row Module Settings » button and set those settings.
« Make this row fullwidth » and « use custom gutter width » (set on « 1 ») is very important, this will create a large row and delete space between columns.
« Custom padding » (set on « 0 » for both) is here to make sure there will be no space on top and bottom of this row (in case you want to create multiple mosaic rows).
Click on « Advanced Design settings to find « Equalize column heights », which will set every module you choose (image, text, video, …) at the same height!
STEP THREE: COLUMN CUSTOMIZATION
Here is the customization part!
This example is a two mosaic rows section but you can do a 1, 2, 3, 4, 5, 10, 100 or a full mosaic website if you want.
First, I will create an « image-text-image » row and then, I will create a « text-image-text » row.
Click on « Insert Module(s) » and choose which one you want to add!
My first column is an image!
Upload your image and set those settings!
Choose « No animation » to make sure your image is fixed.
« Remove space below » to delete space under your image and choose « center » for a better effect.
My second column is a text!
Set those settings to create a cool effect!
Write your text, chose his color, size and orientation, then go to the « Advanced design settings » and enter the padding you want regarding to the size of your image and where you want your text to be. For this tutorial I have chosen a 60px padding-top (adding « px » is not necessary for the padding settings)
Then, go to the « Row Module Settings » and set the settings you want!
I want a background image for my text module so it’s here than I have to upload it.
Repeat the first operation to add an other image for the third module.
That’s it, you have your first mosaic row!
You can know duplicate it and change the position of the text and the images (pay attention to the column settings) to create you’re second row or you can follow the tutorial again and begin step three by adding a text module instead of the image module.!
Change those images and modify your text to have a beautiful mosaic like the top one!
Don’t forget that there are many creation possibilities.
1/3 – 1/3 – 1/3
1/4 – 1/4
1/4 – 1/4
1/2 – 1/2
2/3 – 1/3