Written by on

iThemes Builder 101: Different Usages for the Builder HTML Module

The HTML Module in iThemes Builder is as versatile as its name suggests. Being able to contain and display HTML opens up an infinite number of possibilities for you to build and style your content. This week we’re going to show you a few of the things you can bring to your site with the HTML Module including some things you may not have thought of before.

Code and Scripts

The HTML Module allows you to use just about anything inside of it. That includes any valid HTML tags, such as headers, paragraphs, etc. You could create style tags to add custom CSS that can be used to style the content within. Being that these will be inline styles, they will automatically override other existing styles in your theme, unless they aren’t specific enough. You can also add script tags to use JavaScript or jQuery functions. You can even use PHP, though you will need to enable it with the drop-down menu below the input field.


Absolute Positioning

It’s possible to use absolute positioning to remove your content from the normal flow of your page and suspend it in place somewhere else on the page. First, create the HTML Module with the content that you wish to position. In this case, we create one using several repeating images, which could be used as links to other areas of the site.


Next, we’ll need to add the custom CSS to change the module’s positioning. You can use the View Source trick we’ve discussed in previous Builder tutorials to find the ID of the HTML Module to target it within the CSS. Once you’ve copied the ID, you can create a selector to add your new styles within your theme’s style.css. From there you can position the module wherever you want to on screen.


If you want to have the module remain as the page is scrolled, you can use “fixed” instead of absolute. Be careful though, as this is relative to the screen size it is being viewed on. Experiment with it and find what works best for your content.

A Blank Slate

There is also an option near the bottom of the HTML Module to “Remove div wrappers”. What this option essentially does is provide you a completely blank HTML page, free of any of Builder’s styling, in which you can put any content you want. While you can stretch the size of the HTML Module’s text window while you edit it, if you find yourself needing more space, you may find it more convenient to write out your content in a text editor first and copy it over to Builder when you’re finished.


Pre-Built Layouts

Our very own iThemes Codex also provides several pre-built layouts for different page types that can be directly imported into Builder. You can download any of these layouts and easily in corporate them into your own site from the Import/Export tab within Builder’s Settings menu. Many of these layouts are built using the HTML Module! Feel free to download them and give them a look, or incorporate them directly into your site.


Watch the Webinar – Builder 101: The HTML Module



Sale ends Nov. 30! Save 50% OFF our entire library of WordPress tools Get the coupon