A user wanted to know how to create colored section titles. With Avada this is easy and available using a variety of options.
- If you are using builder elements for everything
- A column or nested with a background color and spacing
- Text element with color and spacing added
- If you want a background color on your main column
- Nested column
- Text element with color and spacing added
For reuse purposes save this to your library.
1 . Section Using Column
2. Section Using Nested Column
Eaque conubia. Occaecat aut mi parturient euismod eveniet. Quia optio, voluptatibus malesuada massa sint cubilia taciti, proident rutrum, proin fames quibusdam eius lobortis nostrum, dolore quo dignissim rhoncus cillum reprehenderit.
Curabitur vitae senectus aute, totam! Nullam voluptate delectus morbi hendrerit, leo! Fermentum congue numquam enim, torquent reiciendis ratione ipsa facere. Quia aperiam nesciunt vehicula facere urna! Congue? Dignissimos voluptate pariatur.
Using CSS Only
If you want to minimize the number of elements, you can just apply CSS to the title element. The obvious benefit is that you can use this everywhere without the need to add and modify elements then if there is a change needed — such as changing the spacing or background color — you just do it once and everywhere it is used is updated.
Title Element Using CSS (.section__title–blue)
Eaque conubia. Occaecat aut mi parturient euismod eveniet. Quia optio, voluptatibus malesuada massa sint cubilia taciti, proident rutrum, proin fames quibusdam eius lobortis nostrum, dolore quo dignissim rhoncus cillum reprehenderit.
Title Element Using CSS (.section__title–green)
Curabitur vitae senectus aute, totam! Nullam voluptate delectus morbi hendrerit, leo! Fermentum congue numquam enim, torquent reiciendis ratione ipsa facere. Quia aperiam nesciunt vehicula facere urna! Congue? Dignissimos voluptate pariatur.
CSS only, no title elements
If you want add headings within a text element using the builder or a heading within Gutenberg, just create a class that includes a text color override. Since a heading is a block element, with will act like an outer div with spacing and background features. The !important is required on the text color to override the typography setting in Avada.
<h2 class="section__title--green">Section using CSS in Text Block</h2>.
Section using CSS in Text Block
One of the advantages of the CSS-only option is that you can change the block behavior from block to inline-block so that the effect is only the width of the heading text. To prevent odd layout shifts, you should wrap the text in a span and then adjust your CSS accordingly.
<h2 class="section__title-block--blue">Section using CSS in Text Block</h2>
/* or */
<h2 class="section__title-block--green"><span>Section using CSS in Text Block</span></h2>
Section using CSS in Text Block
Cupiditate harum itaque provident nostrum aliquid erat amet arcu rem torquent viverra. Nam, soluta! Erat lobortis! Natus. Beatae nascetur? Magnam, montes molestie vehicula tempora? Magnis vehicula suscipit enim nesciunt officiis.
Section using CSS in Text Block
Voluptatum interdum fringilla? Hymenaeos sunt recusandae eveniet facere, provident mollis. Litora quidem dapibus, praesent? Consequatur tristique do, augue, cursus dolorem tortor harum vestibulum non veniam explicabo lacus! Excepturi taciti velit