Elementor’s widgets covered the visa site’s pages until the day they did not, a specific comparison layout I wanted, structured exactly, that no combination of stock widgets produced. The escape hatch is the HTML widget, a box you paste raw markup into, and this post is how to use that door properly, because it is both the most powerful widget and the easiest place to make a mess.
The widget itself is trivial, drag HTML from the panel, paste markup, done. The craft is in what you paste. Markup dropped into a builder page lives inside Elementor’s wrappers and alongside the theme’s styles, so it must be self-contained and defensive, my working pattern namespaces everything:
<div class="cuv-compare">
<div class="cuv-col">
<h3 class="cuv-h">30 Days Single Entry</h3>
<ul class="cuv-list">
<li>Processing 24 to 48 hours</li>
<li>Passport scan and photo required</li>
</ul>
</div>
<div class="cuv-col cuv-featured">
<h3 class="cuv-h">60 Days Single Entry</h3>
<ul class="cuv-list">
<li>Processing 24 to 48 hours</li>
<li>Best for family visits</li>
</ul>
</div>
</div>
<style>
.cuv-compare { display: flex; gap: 20px; flex-wrap: wrap; }
.cuv-compare .cuv-col { flex: 1 1 260px; border: 1px solid #e3e6ea;
border-radius: 12px; padding: 20px; }
.cuv-compare .cuv-featured { border-color: #b8860b; }
</style>
Three habits in that block earn their keep. The cuv- prefix on every class keeps my names from colliding with the theme’s or Elementor’s, a page builder page is a crowded namespace and generic names like col or featured are already taken somewhere. The styles scope through the wrapper, .cuv-compare .cuv-col, so they cannot leak outward onto the rest of the page. And flex with flex-wrap makes the block responsive on its own, because Elementor’s responsive controls do not reach inside an HTML widget, whatever you paste must handle mobile itself.
The honest rule for when to open this door, use stock widgets while they express what you mean, reach for HTML when the design in your head has structure the widgets cannot make, and never paste anything you do not understand, because inside the HTML widget you are the builder, Elementor is just holding your coat.
A few things people ask me about this
Where should the CSS for an HTML widget live? For a one-off block, a scoped style tag beside the markup keeps the piece portable. If the same block appears on several pages, move the CSS to the site’s custom CSS so it exists once.
Why does my pasted block look broken on mobile? Elementor’s responsive settings do not apply inside the HTML widget. Your own markup needs its own responsiveness, flexbox with wrapping or your own media queries.
Next
Pasting my own markup started a war I did not expect, my styles versus the theme’s and Elementor’s, and the weapon that decides such wars is CSS specificity. That fight is the next post.