With people spending so much time at home these days, home improvements are booming. That’s where your new Renovation & Construction template comes in. Sleek, modern, and designed with great images in mind, it’s great for all types of construction-related businesses. 

This template has 5 renovation categories: kitchen, bathroom, balcony, outdoor, and the very trendy home office. The template also has a portfolio page for displaying finished projects, which features an inner page with a before-after widget. Duplicate the page for as many finished projects as your.

How to Reproduce the First Section on the Services Page



As always, you can save any part of this template as a Section and then use it again in other websites. If you want to recreate the top section, watch this video or follow the steps immediately below. 

Add a row below the header. Set it to full bleed and reset the padding to 0 px.

Add a column to the row so it has 2 columns.

In column 1

1. Set the background color to #222222.
2. Set top and left padding to 100px; set the right padding to 50px. 
3. Add a text widget and set it to Heading 1. Set the font to white, Spartan, 50px. Add your text.
4. Add another text widget. Set the font to white, Roboto Slab, 20 px. Add your text.
5. Add a button widget and select the button shape with right-angle corners.
6. Set the button width to 280px and height to 70px.
7. Align the button text left.
8. Set the background color to transparent and add a background image. In this example, it’s an orange circle with an arrow.
9. Set the image position to No repeat and align it right. 
10. Open the context menu and align the button to the left.

In column 2

1. Add two inner rows with two columns. 
2. Reset all padding.

In the top inner row:

1. Reset all padding.
2. Adjust the width of the columns to create a ratio of about 2:3. 

In column 1: 

1. Set the background color to #222222.
2. Set the top padding to 100px and the right padding to 40px. 
3. Add an image widget.

In column 2: 

1. Add a background image and set the position to Cover and Center.
2. Adjust the ratio between the two columns so it is 1:2.

In the bottom inner row

In column 1:

1. Set the background color to #222222.

In column 2:

1. Reset the padding.
2. Add an image widget, and set to 340px width.
3. Set the top margin to 50 px and the left margin to -150px.
4. Open the column editor and set the bottom padding to 50 px.
   

Mobile version

Adjust the mobile version as follows. 

Open the row editor and reset all spacing.

In the top column:

1. Set the top and bottom padding to 60px.
2. Adjust the button width and align the text to the left.

In column 2

1. Reset the padding.
2. In the top inner row: Change the inner row layout to two columns.

In the next inner row, in column 1 

1. Align the image to the left and set the width to 150px.

In column 2: 

1. Set top and bottom padding to 100px. Set the image position to center.

In the bottom inner row:

1. Reset the padding.
2. Hide column 1 on mobile.

In column 2: 

1. Reset the padding.
2. Set the image widget to 150 px and align the image widget to the left. 
3. Set the top margin to -50px.