/INSTRUCTIONS

Step 1: Change background image

To change the background image:

1. Access Design Settings: Click on the section container holding the background image and select Edit Design to open the design panel.
2. Upload New Image: In the Background property of the design panel, under the Image tab, click Replace. To view the Image Picker in full view, click Full View and select the new background image. (Depending on the tab you select, your other options to set a background include Color or Video. For this activity, we are using Image.)
3. Adjust Image Settings: Set image properties such as size (cover, contain), position (center, top, bottom), and repeat options to ensure the image fits well.
4. Add an Overlay: If necessary, add a color overlay to the background image to improve text readability and enhance visual appeal. The template we are using already has one in place.
   

Step 2: Update Copy in Text Widgets

To update text content:

1. Select Text Elements: Click on the headline or subheadline text to activate the text editor.
2. Update Text: Replace the existing text with your new copy. Ensure the headline is compelling and the subheadline provides necessary context or detail.
3. Styling: Use the text editor tools to adjust font size, weight, color, and alignment to match your design.
   

Change the following in your template:

Change the following text in your template:

Step 3: Update Button Content and Design

Updating the button is crucial for guiding visitors to the next step. 
To update the copy in a button:

1. Access Content Settings: Right-click or simply click the button widget and select Edit Content.
2. Enter New Text on Button: Type the text you want to display on the button in the field provided: “Get a free quote today”.
3. Select Button Navigation: In Select where button links to, update where site visitors will be directed to upon clicking the button. (ex: Contact Us).

To change the button style:

1. Access Design Settings: Right-click or simply click the button widget and select Edit Content to open the design panel. 
2. Adjust the Button Style: In the Button Style property of the design panel, select the button Theme style. (ex: Primary).
   

Step 4: Align elements within columns

1. Access Design Settings: Select the column that holds the hero section elements and select Edit Design to open the design panel.
2. Align Elements:
3. Vertical Alignment: Adjust the vertical alignment settings to top, middle, or bottom, depending on your design preference. This helps in positioning content in a way that is visually appealing and functional.
4. Horizontal Alignment: Set horizontal alignment to left, center, or right to position elements within the column as needed. This ensures that the text and visuals are placed where they can best capture user attention.
5. Spacing: Use padding and margin settings to fine-tune the spacing between elements for a balanced look. Proper spacing prevents elements from appearing cluttered and enhances readability.
   

Change the following in your template:

Step 5: Change the Quick Facts Section Underneath the Hero Image

To change the quick facts section underneath the hero image:

1. Select Section Container and Set Spacing: Select the section and in Spacing set the desired spacing. (ex: Set margin-right and margin-top to 0px; Set padding-left and padding-right to 0% and padding-top and padding-bottom to 2%.)
2. Replace Icons: Delete the Icons and replace them with text widgets. 
3. Update Text Copy: Update the text copy of all the widgets in this section.
   

Change the following text properties in your template:

[continued from above]

1. Change the Background Color: Select the section, and in Background, set to desired color. (ex: White).
2. Adjust Spacing and Size of Elements within the Section: 
   
3. Set Spacing between Columns: Select the section and in Spacing, set Spacing between columns. (ex: set to 2%).
4. Adjust Column Size per Column: Select the second text block in the first column. In Size, set the Width and repeat for each column. (ex: set Width to 100%). Then, select the first text block in the first column. In Size, set the Width and repeat for each column. (ex: set Width to 75%).
5. Apply Finishing Touches: As a finishing touch, go back to the first hero section and select the second text block. In Size, set the Width. (ex: set Width to  55%).

🎉 Nice work!

You've created a compelling hero section that captures attention, communicates your client's message, and encourages user engagement. This section sets the tone for the rest of your site, so take the time to perfect it!