How to Wrap Text Around Widget in Elementor

In order to wrap text around a widget with Elementor, you may use the Text Editor Widget, a template shortcode, and a bit of CSS.

Create A CSS Class

We will first need to add a CSS class to our Site Settings > Custom CSS region. You can find this snippet at the bottom of this document.

Create A Template

In another Browser Tab, create a template in Elementor and save it to your template library. Keep this tab open for the next step.

Wrapping The Widget In The Text Editor

  1. From the Widget Library, drag a Text Editor Widget to your desired location
  2. Insert the needed text into the editor
  3. From the Template Library above, select the shortcode of the saved template, and copy the shortcode
  4. In the Text View of the widget paste the shortcode inside a divider with the class ID (example: <div class=”widget-wrap-left”>SHORTCODE HERE</div>)
  5. Save and preview your page

Note: The shortcode will not display until the editor is refreshed

CSS Snippet

.widget-wrap-left{
    position: relative;
    width: 40%;
    float: left;
    margin-top: 7px;
    margin-right: 15px;
}

@media only screen and (max-width: 768px) {
 .widget-wrap-left{
    width: 100%;
}
}

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email
Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

Want to learn from Elementor Web creators?

Join Our New Community Hub!