/INSTRUCTIONS

 Your turn

Replacing a section

Step 1: Choosing to Rebuild the Section from Scratch

Rebuilding the Project Showcase section from scratch allows for greater flexibility and customization. It ensures that the section aligns perfectly with your design vision and meets the specific needs of your business.


To rebuild the section from Empty:

  1. Remove the Existing Section: Select the existing Project Showcase section and delete the section to start fresh.
  2. Add a New Section: Hover between sections and click + Add Section and select Empty to create a blank section.
Step 2: Adjust Section Layout and Columns

Proper spacing and column widths are crucial for a balanced and visually appealing layout.


  1. Set Spacing Between Columns: Select the new section, and in the design panel, set Spacing between columns. (ex: set to 5%).
  2. Adjust Column Size: Select a column and set its width. (ex: Select the first column and set its width to 40%. Select the second column and set its width to 55%).
Step 3: Updating Content and Adding a Button

Update the content and add a button:

  1. Add Widgets to the First Column: From the Widgets panel, add desired functionality. (ex: Add four widgets sequentially: text, text, text, button).
  2. Update Text Widgets:
  3. Replace placeholder text with updated copy.
  4. Format text widgets.
  5. textA: Set as Bold, font color Dark Orange, font size 14.
  6. textB: Set as heading 2.
  7. textC: Leave as is.
  8. Customize Button:
  • Update button text. (ex: to “More of our works”).
  • Select where the button links to (e.g., a website address).
  • Adjust the button height. (ex: to 50px).
Step 4: Add and Configure the Media Slider Widget

A media slider widget is perfect for showcasing multiple project images in an interactive and visually appealing way.


To configure the Media Slider widget:

  1. Add Media Slider Widget: Add the Media Slider widget to the second column.
  2. Configure Media Slider Content:
  3. Open Media Slider Content.
  4. Delete all placeholder slide images.
  5. Click + Add Slide and + Click to add media.
  6. Select images from the media manager. (ex: hp-featuredProject-A.jpeg, hp-featuredProject-B.jpeg, hp-featuredProject-C.jpeg.)
  7. Update Slide Details:
  8. Set visibility of the button for each image. (ex: Hide).
  9. Set Media Slider Layout:
  10. Select the Media Slider widget.
  11. Choose a layout style in the design panel. (ex: the second layout style with three long cards.)
  12. Set Number of columns. (ex: set to 2).
  13. In Navigation indicators, select Type as Bullet

In this lesson, we'll guide you through customizing the Project Showcase section of the electrician template. This section is crucial for highlighting your best work and attracting potential clients. We'll cover rebuilding the section from scratch, adjusting layout and columns, updating content, adding buttons, and configuring a media slider widget.


Follow the instructions below to recreate this section: