/INSTRUCTIONS

Step 1: Rearrange and Modify the Services Section

To change position and layout:

1. Preview the Services Section: Identify the necessary changes in position and layout.
2. Move a Section:

• Select the section. (ex: Recent Projects).
• Use the arrow icons in the floating design panel to move the section. (ex: move down three times.)

1. Update Layout:

• Change the layout. (ex: from showcasing two rows of service to one)
• Add a column to match the amount of cards shown in the mockup. (ex: add a column in Section B of Services)
• Empty sections that are no longer needed to create a section to hold the button as shown in the mockup. (ex: Section C of Services.)
• Set the background color of all Services sections to Orange Tint.

In this lesson, we will guide you through customizing the Services section of the electrician template. This section showcases the services you offer and is crucial for converting visitors into customers. We will cover rearranging and modifying the sections, adjusting fonts and spacing, duplicating columns, and adding buttons.

Follow the instructions below to recreate this section:

Adjust Section A

Step 2: Change Font Color

To adjust section A:

1. Set Font Color: Select the text (ex: “SERVICES”) and set the font color (ex: to Dark Orange).
   

Modify Section B

Step 3: Duplicating Columns, Replacing Icons, and Updating Text Copy

To modify section B:

1. For each column in Section B:
2. Replace icons:
3. Click the icon. Then, in the floating design panel, select Replace Icon.
4. In the Icon Content overlay, click Choose Icon.
5. Upload icon images. (ex:  hp_icon_Furniture.svg, hp_icon_Interiors.svg, hp_icon_Flooring.svg, hp_icon_Outdoors.svg).
6. Update card title text copy:
7. Click on the text widget and enter the new copy.
8. Update description text copy:
9. Click on the text widget and enter the new copy.
10. Set description text font color:
11. Select the description text widget and change the font color. (ex: set to Dark Brown). Or, update the site theme setting for paragraph style text. (ex: update to Dark Brown; note this may cascade and affect previously-made edits).
12. Customize button: Set button design properties.
13. Duplicate the newly formatted button and replace the template buttons with the newly formatted buttons.
14. Apply Finishing Touches: Set the column Spacing values to match the mockup (ex: padding-left and padding right to 1%). And in the first column, adjust the column Size values (ex: set height to 198px).

Customize the button with the following properties:

Customize Section C

Step 4: Update the Buttons, Spacing, and Section Settings

To customize Section C:

1. Add Button:
2. In the new section created, add a button.
3. Replace button text. (ex: with “Contact us”).
4. Link to new content. (ex: Existing site page Contact Us).
5. Switch the button style to the Secondary button theme.
6. Align Content and Set Spacing of a Column:
7. Select the column and set alignment. (ex: set to Horizontal Center and Vertical Top).
8. Set Section Settings:
9. Select the section and set Size properties. (ex: Set height to 174px).
10. Set Button Height: Select the button and set Size properties. (ex: Set height to 50 px.)