Add an Elementor Text Editor Widget with a Circle Background

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.

Prerequisites

Please make sure you have the following installed and activated:

• Elementor

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.