How do I add an hr tag between two columns in Webflow?

To add an <hr> tag (horizontal rule) between two columns in Webflow, you can use a combination of Webflow's built-in design tools and custom code. Here's a step-by-step guide to help you achieve this:

1. Open your Webflow project and access the page where the two columns are located.
2. Select the parent container of the columns by clicking on it. This could be a section or a div block.
3. Navigate to the Style panel on the right-hand side of the Webflow interface.
4. Under the Layout section, choose the "Display" property and set it to "Flex".
5. Go to the Columns section and set the desired number of columns for the container.
6. Customize the width and spacing of the columns as needed using the provided controls.
7. Next, click on the parent container again to reveal more options.
8. Click on the "Add Child Element" button (+ sign) to insert a new child element inside the container.
9. Choose the "DIV" element and position it between the two existing columns.
10. With the new DIV element selected, go to the Style panel and customize its styling attributes, such as width, background color, and padding.
11. Now, you can add the <hr> tag inside this new DIV element. Click on the "Add Child Element" button once again and select the "HTML Embed" element.
12. An HTML embed component will appear within the new DIV element. Click on it to open the HTML embed settings.
13. Inside the HTML embed settings, enter the <hr> tag in the "Embed code" field.
14. Customize the <hr> tag using CSS, either by adding inline styles or by selecting the Embed element and applying custom classes in the Style panel.
15. Adjust the positioning and dimensions of the <hr> tag by manipulating the parent DIV element.

By following these steps, you should be able to insert an <hr> tag between two columns in Webflow. Remember to save and publish your changes to see the updated design on your live website.

Additional Notes:

• Using this method allows you to have more control over the styling and positioning of the <hr> tag compared to simply inserting it as a standalone element.
• Be cautious when using the Embed element and adding custom code in Webflow, as it may affect your site's responsiveness or create conflicts with other elements. Always test your design changes across different devices to ensure optimal display.

Example Code:

<div class="parent-container">  <div class="column">    <!-- Content for the first column goes here -->  </div>  <div class="divider-column">    <div class="divider">      <hr>    </div>  </div>  <div class="column">    <!-- Content for the second column goes here -->  </div></div>

CSS Stylesheet:

.parent-container {  display: flex;}.column {  flex: 1;}.divider-column {  display: flex;  flex: 0 0 auto;  align-items: center;}.divider {  width: 100%;  background-color: #333;  padding: 1px; /* Adjust as needed */}.hr-tag {  /* Customize the <hr> tag styles */}

Additional questions:

1. How do I create columns in Webflow?
2. What is the HTML embed element in Webflow?
3. How do I customize the styling of an HTML embed component in Webflow?