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
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.
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.