Web Pages allow you to create and manage page content and folders. Web Pages can be arranged to match your site map, secured from unauthorised access using Secure Zones, hidden from search engines, and have full SEO properties among various other settings. Web Pages can contain all sorts of content managed via the WYSIWYG editor or for more experienced users HTML Code View.
Basic Building Blocks Of A Web Page
- Page Templates - Allows you to create a template and apply the same consistent structure to any Web Page within your website.
- Content Holders - Content Holders are a great way to compartmentalize blocks of code and design elements that can easily be referenced using
{bb_contentholder}tag throughout your website. - {bb_} tags - A library of dynamic BlueberryCMS tags that allow you to display Modules and dynamic data elements throughout your website.
- Liquid Code - An open-source template language created by Shopify and written in Ruby. You can take full advantage of Liquid Code within BlueberryCMS for conditional statements, FOR loops, and a variety of dynamic features. See the Developers section of our knowledge base for more information.
CSS and JavaScript
There are a many different options for utilizing CSS and JavaScript on your website. Right out of the box, you can create a website using the world's most popular frameworks, Foundation and Bootstrap. You can also start from scratch and create your own style sheets from the ground-up. Whichever option you choose when creating a website, these are the ways you can begin customizing your style sheets and inserting custom JavaScript.
Foundation Users: When you setup a new website project, you can select to have Foundation automatically installed. No need to install the Foundation CSS and Javascript files and add links to them in your HTML. We do all that for you behind the scene using the Foundation CDN. See Using Foundation
Bootstrap Users: When you setup a new website project, you can select to have Bootstrap automatically installed. No need to install the Bootstrap CSS and Javascript files and add links to them in your HTML. We do all that for you behind the scene using the Bootstrap CDN. See Using Bootstrap
- Click the Design button on your Website to enter the Website Portal and then navigate to Content > Design > Global Settings. You don't have to be a CSS expert to configure simple styling options like Typography, Buttons, Images, Backgrounds, and more. But if you are an expert, simply go to the CSS tab to create styles that apply to every single page on your website. Use the Header and Footer sections to insert custom JavaScript that load on all pages throughout your website. Global Settings means that everything under this section gets applied globally throughout your website. You can override these settings for individual pages by using the next options.
- Navigate to Content > Design > Web Pages and on any page, click the Edit Settings button under the Actions column. Here you can configure a variety of options like SEO, Header/Footer, Page HTML, Page CSS, and Page JS. These options are fantastic for pages that require special code and styles that are different from the rest of your Web Pages.
- Using your own CSS and JS files is easy to do as well! Simply go to Content > File Manager > Documents to upload your files. Then use the relative path to the file when using the script and link elements as such:
<script src="/Documents/path-to-file/scripts.js"></script>
To get you started, BlueberryCMS provides you with a very basic Default Page Template.
As you can see objects like Page Templates, Content Holders, and Web Pages themselves can contain a mixture of HTML and dynamic elements that we like to call {bb} tags. This makes it easy to create your own templates and pull content that you've entered into BlueberryCMS. Try creating your own Page Template and use some of our handy-dandy {bb} tags to pull in some dynamic goodness.
To see our complete list of {bb} tags and our Liquid Code Reference, visit the Developers section of our knowledge base.
