Supercharge The Basic Text Element In Bricks Builder With HTML and CSS

Published on: May 2, 2024 | Last Update: July 28, 2024

Table of Contents:

Introduction

Hello, everyone! Welcome back to the Bricks Coach blog. In today’s post, we’re diving into how you can enhance the basic text element in Bricks Builder by adding a bit of HTML and CSS directly to the basic text content. Since Bricks allows you to enter HTML directly into the basic text element, you can easily add a bit of flair to your basic text with animations, custom styles, classes, and even decorated links. Let’s enhance those plain text blocks into something eye-catching.

How To Add HTML And CSS To The Basic Text Element In Bricks Builder.

We begin this tutorial in the Bricks Builder interface. The structure panel is setup with a section, a container, and the focal point—the basic text element.

In the video above, we start by enhancing the word “supercharge” through HTML and CSS. You can create an animation keyframe and apply the animation directly to a class called ‘bounce’. Next, you can quickly apply dynamic animations to your text blocks by simply applying the class directly to your basic text element by adding class=”bounce” to a span in your basic text element.

I like to add this CSS to my child theme’s styles.css file, but you can add it directly to the builder in a global class or on the custom CSS of any element on your page.

The key takeaway here is in the HTML snippet below. To apply this class to your basic text element, simply wrap a word or words in a span tag and apply the class “bounce”. 


//The HTML
<span class="bounce">Supercharge</span>

//The CSS
@keyframes bouncey {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bounce:not(.ignore){
  display: inline-block;
  animation: bouncey 1s ease-in-out infinite;
}

Add Gradient Color To The Basic Text Element In Bricks Builder

You can easily give your text a gradient color by applying a linear gradient background color, setting the background clip to text, and rendering the text color transparent. In the CSS below, simply add this snippet to your child theme, and then add this HTML to your basic text that you want to have a gradient color. You could even add the bounce class if you wanted to. 

//The HTML
<span class="gradient-text">Supercharge</span>

.gradient-text:not(.ignore){
    background: linear-gradient(90deg, blue, red); 
    -webkit-background-clip: text;  
    background-clip: text;
    color: transparent;  
}

Add Links To The Basic Text Element In Bricks Builder

Just like the span examples above, you can wrap your text in an <a> tag and then add the href attribute to turn a bit of text into a link.

You can also apply the gradient-text color to your link by adding class=”gradient-text”. My experience has proven that transforming text into interactive links with aesthetic appeal can increase user engagement and drive more clicks than a boring link that has a simple black underline. 

//The HTML
<a class="gradient-text" href="https://bricksbuilder.com">Supercharge</a>

.gradient-text:not(.ignore){
    background: linear-gradient(90deg, blue, red); 
    -webkit-background-clip: text;  
    background-clip: text;
    color: transparent;  
}

Advanced Techniques for Text Element In Bricks Builder

Beyond basic styling, certain advanced CSS selectors can make your styling more efficient. In the video and snippets proved in this post, I use the ‘:not’ selector to apply styles only to elements without specific classes. This allows for more targeted styling without cluttering your HTML with excessive classes. Depending on if you set up your CSS in the builder with global styles or in the child theme, the :not selector can help you only apply styles exactly where you want them.

If you use the builder to store your global classes, your CSS would look something like this:

//The HTML
<span>Supercharge</span>

.gradient-text span:not(.ignore){
    background: linear-gradient(90deg, blue, red); 
    -webkit-background-clip: text;  
    background-clip: text;
    color: transparent;  
}

This CSS says to apply the gradient text directly to all span tags that don’t have the .ignore class on the span.

The reason you may want to use the :not selector is you are applying the global class to the entire text element. The CSS is set to target ALL span tags. So you can add the ignore class to any spans you don’t want the effect to apply to.

The other option would be to apply the gradient-text selector explicitly in your HTML for each element you wanted to target. You would have to apply the class to the element or somewhere on the page using the builder. 

//The HTML
<span gradient-text>Supercharge</span>

.gradient-text{
    background: linear-gradient(90deg, blue, red); 
    -webkit-background-clip: text;  
    background-clip: text;
    color: transparent;  
}

Conclusion

Advanced text styling is more than just making words look attractive; it’s about using text as a tool to create more dynamic and engaging web experiences. By integrating the discussed techniques into your Bricks Builder projects, you can elevate your web designs from standard to stand out.

As you experiment with these strategies, remember the power of simplicity combined with creativity. If you have questions or want to share your experiences with text styling in Bricks Builder, feel free to reach out on social media or comment on the YouTube video.

Related Posts