A user wanted to know how to create colored section titles. With Avada this is easy and available using a variety of options.

  1. 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
  2. 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.

Copy to Clipboard

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

Copy to Clipboard

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

Copy to Clipboard