Template Reference

This article contains all the information you need to know about each setting within the Templates page.

Written by Robert van Boesschoten Updated over a week ago

Templates are parts of your webpage that can be accessed from within your front-end. They usually consist of html, javascript or css and can be used for various purposes, such as making PDF’s and emails, importing your scripts or stylesheets and creating a layout for your website. You can start creating your own templates by going to Tools > Templates.

The navigator

The navigator is the black bar at the top of your screen.

Here’s what everything does:

+New: This button opens a window where you can create a new template.Question mark [ ? ]: By clicking this button, a new panel pops-up. This panel has a small video that shows you how to create a new template, as well as links to some helpful articles.

Search bar: Here you can search for templates by description, kind or HTML contents.Type filter: Using this bar you can select what type of templates you want to see or create.

Types of templates

At the time of writing, there are 8 types of templates you can use.

Endpoint templatesThese templates are where you can create the outline of your website like a regular HTML document. Once you’ve finished your template, you can use a liquid {{yield}} tag in order to declare where you want your content to go. A good endpoint template would look something like this:

Betty Blocks also automatically generates an endpoint template when you create a new webpage. This is where the code you put into a website’s template goes.

MailsHere you can create a template for your emails. These are great if you want to give off a professional vibe.

PDFThese templates are great for when you want to create a PDF dynamically. They contain Prince XML markup. If you want to learn more about creating PDFs, you can do so here: HowTo in using PDF files.

SOAPThese templates are automatically generated by Betty Blocks when you create a new web service template, but you can also make your own here. These are used to talk to web services and are written in SOAP.

JavascriptIf you want to include a script on your website, this is the best place to do so. You can write or paste a script here to use later in an endpoint template.

StylesheetsThis is where you can add a stylesheet to your website, which you can add to an endpoint template when you want to style your webpage.

PartialsPartials are small bits of your website that you can re-use as many times as you’d like. They’re usually used for a small block of a website that’s used on multiple pages (e.g. a navbar that isn’t always present). You can include them using liquid. You can learn how to use partials here: HowTo use partials in custom HTML pages? or here: HowTo use partials in the UI Builder? depending on whether you are using the UI Builder or a custom HTML page.

Creating a new template

When you first open up your templates window, there’ll be two ready for you: bootstrap_layout and Main template . Bootstrap_layout is the basic layout Betty Blocks automatically applies to your webpages and contains Bootstrap 3 and jQuery. It’s also required to use the UI builder, so don’t delete it! Main template is just a starter page.

Personally, I don’t have much of a use for these templates as I prefer to build my apps from the ground up. So, let’s create our own! Let's start by pressing the + New button.

Here, you can make a new template, give it a name, select its kind, give it HTML content and plaintext content, and select another layout for it to use.

Name: This can be anything, but it’s recommended to avoid spaces or special characters.Kind: Select the type of template it should be.HTML: Here you can give your template its real content. This can be HTML, Javascript, XML or CSS depending on the kind of template you’re using.Plain: Here you can enter plain text for your template to use. Layout: If you want your layout to contain another layout, you can select it here.

Editing or deleting a template

You can edit a template by pressing the Edit button in the top right after selecting it. Here you can change its name, content and layout.

You can also delete a template by pressing the Delete button in the bottom left of the screen while you’re editing it.

Dependencies

Before you delete a template however, you’ll want to make sure nothing important depends on it, or it might break! Thankfully, Betty Blocks has an integrated tool to help you check. You can find more about it on theWhat are Dependencies? page, but in short; when you press the edit button on a template, you can see what depends on it by clicking on the dependencies button.

Changelog

Want to know how come your template’s suddenly changed name, layout or content? No problem! Betty Blocks automatically tracks changes to your templates. You can see when someone changed a variable and see exactly who did it by pressing the changelog button on the navbar whenever you’re on a template’s detail page.

Using templates

In the UI Builder

In the UI Builder, the only templates you can use are endpoint layouts. You can pick what layout to use by going into the settings and selecting it.

Everywhere else

You can include a template anywhere you can write HTML in Betty Blocks by using Liquid tags. Javascript and CSS will come with a liquid tag, whereas Partials need to be included using their own tag. You can find Javascript and CSS template’s Liquid tag in its detail page.

To use partials, you need to use the following Liquid tag:

{% include 'Partialname' %}

Endpoints can be selected when you are creating or editing a webpage.

All of the other templates can be used when prompted and serve no further purpose.