Just a quick post to share a design element. Similar to the ability to use a separator above or below or left or right using a nested column, just using some custom CSS makes it easy to do. This CSS can easily be edited to meet your needs.

This is an H2 title.

This is an h3 title.

This is an h4 title.

.has-title-bar {
  display: flex!important;
  align-items: center;
  gap:10px;
}

.has-title-bar:before {
  content: "";
  width: 70px; /* adjust the width of the bar */
  margin-right: 20px; /* adjust the spacing of the bar */
  background-color: var(--awb-custom_color_8); /* adjust the color of the bar */
  display: inline-block;
  height:5px; /* adjust the height of the bar */
}

Originally published on July 9, 2022

RSS and Avada
Avada 7.8 is liveWhere to find all the new features in 7.8

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read New Avada-based website

    I am launching a new website using Avada taking advantage of the lessons learned over the past two years of builder evaluations.

    March 5, 2023

  • Read Going Green-ish

    Going Green-ish

    Do you know how much energy your website consumes per visit? I was shocked and made immediate changes.

    December 28, 2022

  • Read Analytics Alternative: Cabin.

    If you are looking for an alternative to Google Analytics, I recommend checking out Cabin - a privacy-first solution.

    December 25, 2022

  • Read New Section: Code Snippets

    I created a new Code Snippets section to start collecting and sharing code that I have found helpful for Avada or WordPress in general.

    December 18, 2022

  • Read The State of WordPress

    The future of WordPress is very bright, but it is going to take a new way of thinking and a willingness to learn new things. Gutenberg is only a part of that future.

    December 15, 2022

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022