SVGs (Scalable Vector Graphics) can add beautiful and versatile backgrounds to your Elementor pages. This is one of the tools for creating eye-catching designs that adapt seamlessly to various screen sizes and resolutions. One particularly innovative application of SVG is using it as a text background, a technique that can add depth, vibrancy, and a unique touch to your website’s typography.
This article will show you how to use SVGs as text backgrounds in Elementor. The method is compatible with any version of Elementor you have (free and pro version). So, what are you waiting for? Let’s get started!
Steps to Use SVG as Text Background in Elementor
Step 1: Upload SVG to the WordPress Media
To use SVG as a text background in ELementor, first, you must upload any SVG file that you want to use as a text background to the Media.
You can download the SVG background from any online SVG background generator. In this example, we use SVG Backgrounds. This website allows us to customize and apply the SVG background fast.
So, pick your desired SVG background, customize, export, and download it as an SVG file.
Next, upload the SVG you’ve downloaded to your Media. Once uploaded, copy the URL by clicking the Copy URL to clipboard. We will use the URL later in the next step.
Step 2: Add the Additional CSS
Next, we will add the CSS snippet to the WordPress Additional CSS. Input the URL of your image to this CSS snippet and then add it to the Additional CSS field.
.svg-text-background {
background: url('URL_OF_YOUR_SVG');
border-radius: 0.3rem;
color: inherit;
padding: 0.03em 0.03em;
text-decoration: none;
white-space: nowrap;
}
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet and paste it into the Additional CSS input field:
Note: If you’re using a block theme, click here to learn how to enable Theme Customizer on your WordPress.
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
Step 3: Add the HTML Code
Alright, now we’re in the last step of this tutorial. In this step, we will add the HTML code. Specify the words or letters you want to have an SVG background.
In this example, we want to use SVG as the text background on the Heading widget. Switch the editor from Visual to Text mode if you use it on the Text widget.
Once you specify the text, add the <span> tag and close it with </span>. Write class="svg-text-background" within the tag. Look at the illustration below.
That’s it. As you can see from the image above, now you have SVG as the text background. Feel free to modify the SVG background by editing the property values on the CSS snippet you’ve added on the Additional CSS input field, such as the border-radius, padding, etc.
The Bottom Line
SVG as a text background in Elementor is a great way to add a unique and visually appealing touch to your website. SVG files are vector graphics, which means they can be scaled up or down without losing quality. This makes them ideal for use as text backgrounds, as you can be sure that your text will always look sharp and crisp. Additionally, SVG files are lightweight and won’t slow down your website.
However, we also have another option to make your text stand out. Highlighting the text is one of the ways that we recommend (read: How to Highlight a Text in Elementor).
