ByteEditor Site Builder

Wiki menu

Custom CSS for the Headline element

By following the steps in this instruction, you will be able to add custom CSS for the Headline element. You can use the code snippets provided in the guide to recreate this element, or you can modify the steps to tailor the element to your specific needs.
Screenshot At Dec 05 09 29 30

Step 1. Add custom CSS code

  1. Open the design page you've chosen
  2. Go to the Custom CSS tab
  3. Please copy the following code and add custom CSS code in the provided space
.headline-with-decor-lines {
    display: flex;
    align-items: center;
    gap: 10px;
}
 
.headline-with-decor-lines::before,
.headline-with-decor-lines::after {
    content: "";
    flex-grow: 1; 
    height: 2px;
    background-color: #000; 
}
 
.headline-with-decor-lines::before {
    margin-right: 10px; 
}
 
.headline-with-decor-lines::after {
    margin-left: 10px;
}
2

⚠ Note

Please note that the design with Custom CSS must be specified for the page where you want to change the elements

Step 2. Add custom CSS classes

1. Open the page with the Headline element
2. Click on the Headline element to open the right-side menu 
3. Copy the following custom CSS class and add it to the Custom CSS field

headline-with-decor-lines
3

Congratulations!

You now know how to add custom CSS code to your elements.  

The result of the work done!

Screenshot At Dec 05 09 29 40
Previous
Next
Built with ByteEditor