Team - Design Guide

THE END GOAL IS THIS

Step 1 - Right now you are on the editor screen. As you can see below the screenshot. 

After that when you click on the section. Now it looks like this. (below screenshot)

Step 2 - Add a row in a section by simply just click on the (+) button and add an element which is Headline-(Large call to action headline)

Step 3 - Add the headline element into 1 column row to write OUR BEST TEAM.

Step 4 - Now let’s change the text (by double-clicking on the text) and text setting(color, font, weight, etc). See the yellow line in the below screenshot.

Step 5 - Now add a paragraph element below that headline element (OUR BEST TEAM). 

As you can see the “+” which We marked as a red box in the left-hand corner.

Simply click on it and choose the elements and you’ll find that paragraph element just simply drag and put it below the headline element.

Step 6 - Now the first row is done. It’s time to add a “3-columns” row below that 1st row. 

As you can see the “+” which We marked as a red box in the left-hand corner. 

Simply click on it and choose the rows and you’ll find that “3-columns” row just simply drag and put it below that 1st row.

Step 7 - Now let’s take the 1st column and add an image element and a sub-headline in that column.

As you can see the “+” which We marked as a red box in the left-hand corner. Simply click on it and choose the elements and you’ll find that image(1st put image) and sub-headline(2nd put sub-headline) element just simply drag and put it below that 1st row.

Step 8 - Let’s put an image and change the text & text settings(to change the text and text settings see the previous screenshots).

1. Change an image by double-clicking on the image.

 you can find an image gallery where you can put your image and use that in the editor. 

2. Change the text and text settings (see previous screenshots).

Change the margin so that it will look more clear. (see the red box to change the margin)

Step 9 - Now add:-

1. Paragraph element 

2. Divider element  

3. Paragraph element 

4. The social link blocks the element 

As you can see the “+” which We marked as a red box in the left-hand corner. 

Simply click on it and choose the elements and you’ll find that paragraph(1st), Divider(2nd), again paragraph(3rd) & social link blocks element just simply drag and put it below that 1st column.

- Now change the text by simply double-clicking on it. 

- Change the sizing of the divider. (see the below screenshot)

- Change the color and size of social icons

Now the final column will look like this.

Step 10 - Let’s give it 0px padding of the column. As you see in the yellow boxes in the below screenshot. (you have to give 0px padding to both- top&bottom and left&right )

Step 11 - Now let’s give some effects to the column. As you can see those yellow lines (see the below screenshot) you have to change only those ones.

Step 12 - Now let’s make 3 clones of the selected column (1st do this then delete the blank one) and delete that blank column. 

Now change the images and text. (see the previous screenshots)

And delete the empty columns.

Now it will look like this.

Step 13 - Now give spacing between the first column and the “3-columns” row so that we can shift that middle image to the upside. (see the yellow lines to change the margin of the “3- columns” row)

Let’s shift the middle column to the upside by changing the top margin. 

Select the middle column and Click on the advanced setting and change the position of the middle column.

Step 14 - Now your final step is to make this center column a little bit big. 

Go to the advanced setting and use scale settings in “Transform” settings.

Use Scale X&Y setting

. 

Step 15 - Your section is ready and well done. You achieved your end goal. :-)

NOW, DO PRACTISE TO HONE YOUR SKILL.