A Page Template is an essential component, any of our Marketplace Templates will come with at least one already but you can create them here:

SiteBuilder simply leverages the Page Templates functionality in Siteglide but builds it for you with useful options to save you time.

In the popup, choose:

• A name e.g. "Main"

• Default Page Template - optional

• the Flowbite Theme (other SiteBuilder Themes will be available to download from Marketplace)

• Optionally, add a Menu, but this is not neccesary for this tutorial

Themes automatically add any of the following to a Page Template:

• CSS

• JavaScript

• Config Files

• Standard Page Template HTML and Liquid

These will then be applied consistently to any Page the Page Template is attached to.

Once created, you can find your template in the SiteBuilder Page Templates tab and in the Siteglide Admin under SITE MANAGER > Templates. These Page Templates are fully editable and you can attach them to Siteglide Pages as normal.

Once you've created a Page Template, you'll unlock the PageBuilder, Layouts and Settings tabs.

Flowbite-specific options

When creating your Page Template, you can select a Tailwind build method of either:

• CLI

• Preview

• Use the default from the SiteBuilder Settings tab

When editing your Page Template later, you can modify the template_build_method parameter and set it to either 'cli', 'preview' or empty string ''.

You can learn more about which build method to use here, or continue to set up our recommended CLI method!

SiteBuilder Themes help you to find content for your site which uses a consistent CSS and JS framework.

A Theme becomes active when you create a Page Template in SiteBuilder using that Theme in the Page Templates tab.

Choosing a Theme

Each Theme will have a different combination of features:

• CSS or JavaScript Framework e.g. Bootstrap / Tailwind

• The selection of Modules supported

• The selection of Dynamic and Static Layouts available

Take these into consideration and choose a Theme which is the best fit for your project.

More Themes are available on the Siteglide Marketplace. Any Themes which you decide not to use can be safely uninstalled from your Site, except for any that ship with the main SiteBuilder Module.

SiteBuilder Marketplace Templates

Marketplace Templates help you get started quickly without having to build a site from scratch. Templates will generally be based on a specific Theme (Flowbite or Bootstrap5 typically).

From the Siteglide Portal on either the Dashboard page or the Sites page you should see a button to create a new site. It will open a modal to select either a Template or Custom Site.

Step 1: Select a Template

This will take you to the Marketplace where you can select a category of templates. You can choose between all of our Flowbite layout templates or a couple of Bootstrap 5 options. It's recommended to use Flowbite, especially if you're familiar with Tailwind.

Step 2: Choose the Appropriate Template

We recommend starting with the Landing Page or the Marketing Site Template. Choose the Marketing Site if you want to see more Siteglide functionality or the Landing Page if you'd rather just learn the basics first.

Step 3: Create the Site

Finally, give your site a name and click 'Create Site'.

And that's it! You've successfully created a new site, you will need to wait for it to be ready to use. You will receive an email when it's done but can also find it under the Sites area:

Next Steps:

Continue with our Quickstart guide?

Check if you have already installed the SiteBuilder Module on your site (click Install if not).

The version should be at least 4.11.2 (we'd recommend updating to the latest version).

The SiteBuilder Module comes with the Free Flowbite Theme automatically.

If the download does not show as Installed after some time, try refreshing the page and trying again - it is a large package of files.

Next Steps:

You'll need to create a Page Template:

Before You Start

Introduction

If you don't have the Siteglide CLI installed or need help with the CLI follow our Quickstart guide:

Using the Command Line Interface (CLI) to build a Tailwind CSS file allows you to:

• Use the latest versions of TailwindCSS and its various 1st and 3rd party plugins.

• Get the best performance front-end as Tailwind can scan your entire codebase to carry out "tree-shaking" to only include utility classes you actually need

• Faster development performance as you can rebuild your CSS faster, and therefore build things faster

Each time you start working on a new project, you will need to follow these steps, however, the setup time is worth it as it will give you a much smoother experience going forward.

Step by Step Guide

Step 1) Check Your SiteBuilder Tailwind Settings are Set to CLI Build

Older versions of SiteBuilder would have defaulted to use the JIT option as a default. Make sure it's set to CLI!

Step 2) Set up Project Folder in a Code Editor and Connect it with your Siteglide Site Using Siteglide CLI

You will need to install Siteglide CLI- if you haven't or are not sure if you have, head here first:

Next you'll need to follow the steps to create a project folder for your new Site and setup Siteglide CLI for this new Site:

Once you've pulled the Codebase for the new Site down into your project folder, continue to the next step.

Step 5) Move the Tailwind Files to the Correct Folders

We'll be using npm (Node Package Manager) to install the software and settings we need to run Tailwind on your machine. This is the same tool you will have used to install the Siteglide-CLI.

We've built files in the Site Template which contain the instructions npm needs to set you up automatically.

Find the files in the folder:

└───marketplace_builder
    └───assets
        └───modules
            └───module_86
                └───src
                    │   readme.md
                    └───open_me_to_set_up_tailwind_1st_time
                        ├───copy_and_paste_my_files_into_the_root_project_folder
                        │   package-lock.json
                        │   package.json
                        └───copy_and_paste_my_files_into_the_src_folder
                            tailwind.config.js
                            tailwind.css

And copy and paste these two files package.json and package-lock.json into the root project folder (next to- but not inside - marketplace_builder).

│   package-lock.json
│   package.json
└───marketplace_builder
    └───assets
        └───modules
            └───module_86
                └───src
                    │   readme.md
                    └───open_me_to_set_up_tailwind_1st_time
                        ├───copy_and_paste_my_files_into_the_root_project_folder
                        │   package-lock.json
                        │   package.json
                        └───copy_and_paste_my_files_into_the_src_folder
                            tailwind.config.js
                            tailwind.css

Next, move the tailwind.config.js and tailwind.css files from the copy_and_paste_my_files_into_the_src_folder folder to the marketplace_builder/assets/modules/module_86/src folder:

│   package-lock.json
│   package.json
└───marketplace_builder
    └───assets
        └───modules
            └───module_86
                └───src
                    │   readme.md
                    │   tailwind.config.js
                    │   tailwind.css
                    └───open_me_to_set_up_tailwind_1st_time
                        ├───copy_and_paste_my_files_into_the_root_project_folder
                        │   package-lock.json
                        │   package.json
                        └───copy_and_paste_my_files_into_the_src_folder
                            tailwind.config.js
                            tailwind.css

Step 6) Use NPM to Automatically Install Dependencies

Using your integrated terminal from step 2, which is already open in your project directory, run the command:

npm i

Step 7) Run Commands to Build your tailwind.min.css File and Sync it

Split your terminal in two. We'll need one window to build our Tailwind CSS and a second one to sync our changes to the Site:\

Use this command to build your Tailwind's CSS (we'll look at this in more detail in a minute):

npm run tailwind

In the other terminal window, use this command to sync changes to the Site with Siteglide-CLI (replace <env> with your environment name from step 2):

siteglide-cli sync <env>

Both commands will keep running indefinately and will watch your files for changes. Every time you change a Liquid file the Tailwind will re-compile the CSS if it needs to!

You can now start building your Site using Tailwind CSS!

Next

Head to the next article to understand in more depth:

• The Tailwind Config File

• The Tailwind source CSS file

• The Tailwind distributable CSS file