Step-by-Step: How to Use Flatsome UX Builder for Course Breakdown with Icons

1. Open UX Builder:
   • Navigate to the page where you want to add the course breakdown.
   • Click on “Edit with UX Builder” to start customizing the page.
2. Add a New Section:
   • Insert a new section by clicking on “+ Add Elements”.
   • Choose “Row” to start with a structured layout.
3. Insert Columns for Modules:
   • Inside the row, add columns depending on how many modules you want to display per row (e.g., one column per module for clarity).
   • Click on “+ Add Elements” inside each column.
4. Add Icons:
   • Choose “Icon” from the list of elements. Flatsome allows you to search through various icons or upload custom ones.
   • Set the icon size, color, and alignment as needed.
5. Add Text for Module Descriptions:
   • After the icon, add a “Text” element.
   • Type in your module title and description. Use formatting tools to style the text (e.g., bold for titles).
6. Styling the Section:
   • Customize the background, margins, and paddings of the section and columns to align with your site’s design.
   • You can use background colors or images to differentiate the module sections visually.
7. Add Interactivity (Optional):
   • Use “Accordion” or “Tabs” elements to make the module descriptions collapsible or tabbed. This is useful if you have extensive content for each module and want to keep the page clean.
   • Place each module’s content inside an accordion or a tab for a compact and user-friendly experience.
8. Preview and Adjust:
   • Use the preview function in UX Builder to see how the elements look on the site.
   • Adjust alignments, spacings, or styles based on the preview to ensure everything looks perfect.
9. Save and Publish:
   • Once satisfied with the layout and design, click “Apply” and “Publish” to make the changes live.

Example HTML Structure with Icons

If you still need the raw HTML for any reason, here’s how you might add icons using HTML and CSS:

htmlCopy code<div class="course-module">
    <div class="icon-container">
        <img src="path/to/your/icon.png" alt="Icon Description">
    </div>
    <div class="content">
        <h2>Module Title</h2>
        <p>Description of the module.</p>
    </div>
</div>

cssCopy code

.course-module {
    display: flex;
    align-items: start;
    padding: 10px;
    background-color: #f0f0f0;
    margin-bottom: 10px;
}

.icon-container {
    margin-right: 15px;
}

.icon-container img {
    width: 40px; /* Set your preferred size */
}

.content h2 {
    margin-top: 0;
}

Using Flatsome’s UX Builder, you’ll be able to create a more engaging and interactive course breakdown that fits perfectly with the rest of your site’s design and improves user experience.