/INSTRUCTIONS

Analyze the About Section Structure

Before we start editing things, let's take a look at the structure of this pre-designed About section in our Electrician template.  The About section consists of two main columns:

• Left Column: This column contains images and other visual elements.
• Right Column: This column includes text, such as the company’s history, mission, and values.

If you look at the Layers Panel for this section, you'll noticed that we've got an Advanced Grid in the left column—containing other child elements (an image and inner columns).  In the right, we've got an Inner Column  that contains more child elements: images and text blocks.

Understanding the structure of these columns is crucial to effectively manipulating the elements within the section. Watch the video below to review how these columns are constructed:

First, before you get started:

We know you might be thinking — "Whoa,This is a lot of steps!"   You're not wrong. This is a heavy section that contains many steps. But hang in there. This particular lesson gives you experience with Advanced Grids and Inner Columns — two really important widgets to understand when building sites yourself.

Step 1: Modify a Column Containing an Advanced Grid

Proper arrangement of images can greatly enhance the visual appeal of the section.

To change element arrangement:

1. Select the Element: Click on the element you want to adjust.
2. Open the Design Panel: Right-click the widget you want to align and select Edit Design to open the design panel.
3. Align Elements: In the Arrangement property of the design panel, set alignment. (ex: click and align the image Left and Top, to position the image as desired; click on the parent inner column containing all of the nested elements in that block and align the column Right and Bottom.)
   

Step 2: Replace Images

Replace the image in the advanced grid:

1. Access Design Settings: Click on the image element and select the Replace Image option.
2. Choose New Image: Choose the image "hp-workshop-cropped.png”.
   

Step 3: Change Corner Radii

Adjusting the corner radius can soften the appearance of images and other elements.

Set the corner radius of an element on the advanced grid:

1. Access Design Settings: Click on the element and navigate to the Image Style property of the design panel.
2. Set Corner Radius: Adjust the corner radius. (ex: set All corners to 10px.)
   

Modify a Column Containing Text, a Button, and an Accordion Widget

Step 3: Update Text Copy
To change the copy:

1. Select Text Elements: Click on the text widgets you want to update.
2. Edit Text: Enter new text that accurately represents your business. Ensure font color and style match your design.

Step 4: Add a Button

To add and customize a button:

1. Add Button: In the side panel of the editor, select Widgets and then select Button to drag and drop onto the canvas.
2. Access Content Settings: Right-click the widget and select Edit Content to open the content modal. 
3. Set Button Text: Enter a call-to-action. (ex: “More about us”).
4. Set Button Link: Set the button to link somewhere. (ex: the existing site page "About Company")
5. Access Design Settings: Right-click the widget and select Edit Design to open the design panel. 
6. Set Button Style and Button Navigation: Select a desired button style and link it to the appropriate page. (ex: select Secondary style).
   

Step 5: Configure the Accordion Widget

Accordions are useful for organizing information without overwhelming the user.

To update accordion content:

1. Access Content Settings: Right-click the widget and select Edit Content to open the content modal.
2. Update Items: Click on an accordion item to view and edit its content. (ex: In Textual Content, update text).

• To add items: Click + Add Item.
• To delete items: Click the x icon next to the item you want to remove.

To change accordion design:

1. Select Accordion Widget: Right-click the widget and select Edit Design to open the design panel. 
2. Adjust Layout: In the Layout property of the design panel, set the accordion layout. (ex: change layout to the second preset option, the one with plus icons.
3. Adjust Icon Settings: In the Expansion Icon property of the design panel, set the icon color (ex: to Dark Orange) and set the icons size (ex: to 40px).
4. Customize the Expanded Font Settings: Set the font size (ex: to 16px).
5. Customize Frame Settings: To add a missing border, go to the Frame property of the design property and set the top border to 1px. Use the eyedropper tool to save the existing border color from the accordion and set the top border color  to this color (ex: Light Gray).

Customize the accordion in your template with the following properties:

🎉 Good job! We know this was a longer section.

You've effectively customized the About section and practiced working with Advanced Grids, Inner Columns, and accordions.