October 16, 2023

Add an Elementor Text Editor Widget with a Circle Background

Play Video

Creating a website often involves more than just laying out text and images. One such design element that can make your content stand out is a Text Editor Widget with a Circle Background. In this tutorial, we’ll walk you through how to achieve this using Elementor and a bit of CSS magic.


Please make sure you have the following installed and activated:

Understanding the Basics

Before diving into the steps, it’s essential to understand what we’re working with. The Elementor Text Editor Widget allows you to place, edit, and style body text on your website. It offers various customization options, including the ability to wrap text around images and adjust alignment settings.

Step 1: Create a Container

  1. Start by creating a new section in Elementor.
  2. Set the section to full width and full height (100 VH).
  3. Centralize all the elements within the section.

Step 2: Add Text Editor Widget

  1. Drag a Text Editor Widget into the section.
  2. Leave the text content as is for now.
  3. Navigate to the Advanced Tab.

Step 3: Customize the Widget

  1. Set the width to custom and input 400px.
  2. Change the background color to orange.
  3. Modify the text color to white and make it weightier.
  4. Add padding inside the widget, around 50px.

Tip: You may need to adjust the top padding later for better centering.

Step 4: Add CSS for Circular Shape

  1. Go to the section’s Custom CSS tab.
  2. Input the following CSS code:
    selector {
      height: 200px;
    selector [GREATER THAN SYMBOL] * {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

Note: This CSS ensures that the text is centered within the circular shape.

Step 5: Fine-Tune the Design

  1. Adjust the top padding by adding an extra 15px for better centering.
  2. Test with different text lengths to ensure the design remains consistent.

Step 6: Additional Styling (Optional)

  1. Rotate the widget for a unique look by going to the Transform settings.
  2. Set the rotation angle as per your preference.

Conclusion – Elementor Text Editor Widget with a Circle Background

And there you go! You’ve successfully added a Text Editor Widget with a Circle Background using Elementor and a bit of CSS. This design element can add a unique flair to your website, making your content more engaging.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Add an Elementor Text Editor Widget with a Circle Background
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.