Articles in this section

See more

Understanding BlueberryCMS Page Templates

Marky Shaw
  • Updated
Follow

If you want to create your own BlueberryCMS template from scratch, you've come to the right place. 

After creating a blank website, everyone starts with the default Main template.

mceclip1.png

As you can see it consists of all the basic HTML elements. 

Notice the {bb_tags} placed throughout the code. These are the most essential tags that should be used on all of your Page Templates so you can take advantage of all the core features of BlueberryCMS. Rarely should they be removed unless you have special things in mind for your template. 

Main Template

<!DOCTYPE html> 
<html lang="en" class="no-js"> 
<head> 

  <title>{bb_pagetitle}</title> 

    {bb_siteheader}

    {bb_pageheader}

 </head> 

  <body> 

    {bb_webpagecontent}

    {bb_sitefooter}

    {bb_pagefooter}

 </body> 

</html>

Let's go over each of the tags in detail.

{bb_pagetitle}

The {bb_pagetitle} tag comes from the Meta Title field under the SEO tab when you create a brand new Web Page. You can also use {bb_pagename} as a great alternative if you'd like to just want to use whatever you named the page. 

mceclip0.png

{bb_siteheader}

By using the {bb_siteheader} tag, your page will process anything you put in in the Header section from the Content > Design > Global Settings options. Be sure to include bb_siteheader on all your Page Templates to ensure your Global Settings are actually applied globally!

mceclip1.png

{bb_pageheader}

The {bb_pageheader} tag inserts the Header information that you've inserted on a specific page. It gets loaded after bb_siteheader. It's good to use when only certain pages need to load special stylesheets or meta tags.

mceclip2.png

{bb_webpagecontent}

The {bb_webpagecontent} tag is by far our favorite tag! Without it, you won't see any of your page content! It is by far the most important tag. This displays anything that you've inserted in to the Page HTML section for your Web Pages. 

mceclip3.png

{bb_sitefooter}

Hey this is all starting to make sense now, eh? By using the {bb_sitefooter} tag, your page will process anything you put in in the Footer section from the Content > Design > Global Settings options. Be sure to include bb_sitefooter on all your Page Templates to ensure your Global Settings are actually applied globally!

mceclip5.png

{bb_pagefooter}

You've seen this one before up above! The {bb_pagefooter} tag is actually located on the same page as the bb_pageheader under the Header/Footer section of a Web Page. This tag inserts the custom Footer you've specified for a particular page. It gets loaded after bb_sitefooter. It's good to use when only certain pages need to load special javascript or tracking code.

mceclip4.png

META Descriptions, Keywords, Google Analytics, and other tracking

Under Site > Business Profile you can setup various populate analytics tracking systems.

{{analytics_facebookpixel}} 
{{analytics_google}}
{bb_seo_googlewebmaster}
{bb_seo_bingwebmaster}

Congratulations! Now you know the basics of our BlueberryCMS template. Using this in conjunction with  Content Holders, Data Collections, and all of our Modules, you have virtually unlimited potential in creating beautifully dynamic websites.

Related articles

Comments

0 comments

Please sign in to leave a comment.