Re-Usable HTML Blocks

Sometimes you want the same block of HTML on every page on your site regardless of theme. For example this Static Ultra site you're looking at now has the Latest News and Useful Stuff sections.

There are also times where you want the same block of HTML on several pages. For example, you might have a section with it's own navigation.

The following is a re-usable HTML block:

A re-usable HTML block is a complete .html file that you can tell Static Ultra to load and insert into the page. So, for example, the above is in a folder in my root directory called "html" (you can put them where you want though), and it's called page-block-example.html. The code inside there is as follows:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Page Block Test</title> </head> <body> <div class="page-block-test"> This re-usable block of HTML was loaded by Static Ultra! </div> </body> </html>

As you can see, it's a complete HTML document so that it is valid. Static Ultra extracts everything in the body section and then puts it into your page or theme, when it sees the following:

<!-- [SU_HTML]html/page-block-example.html[/SU_HTML] -->

I put the CSS for the .page-block-test in the main stylesheet, since I want it to look the same regardless of theme. But you could put the CSS in any of Static Ultra's entry points mentioned in the previous chapters.


And that's it for the tutorials, now it's over to you! Good luck and I hope you find Static Ultra useful in building an awesome website!

You may also want to check out the other pages on the menu. :D