HTML
Add your own HTML markup, filtered like the content of a WordPress post.
The HTML widget adds your own markup to the page, such as a small custom badge or a block of text with its own formatting. Use it when no widget does the job; for text, images and layout, the native widgets are easier to edit and to keep responsive.
Add HTML
Insert it
Open Insert in the left panel, find HTML under Basic (or type
htmlin Search widgets) and click it or drag it onto the canvas.Paste your code
Paste the code into Content → HTML → HTML code. The canvas shows the result.
What HTML is allowed
The HTML widget keeps only the HTML that WordPress allows in the content of a post, for every user, administrators included. Scripts, iframes, <style> blocks and event handlers such as onclick are removed when the page is saved. Text formatting, links, images, lists, tables and inline style attributes stay.
To embed content from another service, use the widget made for it: Video for YouTube and Vimeo, Google Maps, SoundCloud or Facebook Embed. For other services, use the Shortcode widget with a plugin that provides the embed.
Settings
Content tab
| Setting | What it does |
|---|---|
| HTML code | Your HTML. It is filtered like the content of a post for every user: scripts, iframes, <style> blocks and event handlers are removed when the page is saved. |
Design tab
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Tracking codes need a plugin. Analytics tags and pixels cannot run from the HTML widget. Add them with a plugin made for that. With Google Consent Mode v2 on in the cookie banner, Google tags wait for the visitor's answer.
- Mind the width. Content with a fixed width can overflow on phones. Use
max-width: 100%in itsstyleattribute. - Shortcodes. To show a shortcode, use the Shortcode widget: the HTML widget does not run shortcodes.