Skip to main content
In this article, you will learn how to:
  • Add an HTML element
  • Edit HTML code
  • Position your HTML element

​
Add an HTML element

  1. Click Add element in the left sidebar.
    • Click the + icon if you’ve selected the Design menu.
  2. Click Media > HTML.
Add element panel with Typography and Media groups, with the Html element highlighted

​
Edit HTML code

Widget Studio with the Add element tooltip over the plus icon, the Content tab, and Screen1 with its Popup and Background elements
  1. Add your HTML code in the HTML Content section.
  2. Click the enlarge icon in the upper right corner of the code editor to open the editor in full-screen.
Widget Studio Custom code view with the Custom CSS file open, showing an example CSS comment, and Custom JS, Html, and Recommendations entries
If you add custom CSS in the Custom code section, you can reference its classes in your HTML code. For example, in the Custom code section, you can add the following custom CSS code:
Then, apply this class to an element in your HTML code (here, the <h1> tag): <h1 class="demo">My title</h1> Click the camera icon to show the custom styles in the right preview area.

​
Position your HTML element

Your HTML code is not positioned in your widget by default. However, you can position it wherever you want, using CSS properties such as margin and padding. Check Enable wrapper container to position your HTML block in the right preview area like any other element.
Html1 element settings with the Html Content code editor open, beside a canvas preview of a promo box with a title, image, and Button