Introduction:
In this course we’ll be guiding you through the very basics of creating a Site with Siteglide using CMS and Site Manager. As suggested above this course is all about starting from scratch, no pre loaded Pages or pre existing code. You'll be starting from the very beginning, let's think of it as a blank canvas.
For some starting from scratch may seem daunting, however we've put together some excellent content to help guide you through. Simply follow our step by step instructions below and by the end of the course you'll be able to use all of the following:
- Portal Clients
- Portal Sites
- Pages
- Layout Library & Design System
- Visual Editor
- Templates
- Toolbox
- WebApps
- Forms
Note: This is a live course and is regularly updated with videos and documentation for a better user experience. Got feedback? Let us know.
Section 1 - Creating a Site:
First off, we're going to create a new website for a new client.
In this section, we’ll look at how to create a Client company, we do this first as you can then invite client users later and they will only have access to sites you have created within their company. Once you have created the Client's company, we'll move forward and look at how to create a Site.
Introduction to Clients
Clients
Read the full document here.
Step One: Create a Client Company
Create A Client
Read the full document here.
Step Two: Create a Site for your Client
Create A Client Site
Read the full document here.
Section 2 - Adding Pages:
Next we're going to create four pages for our site: Home, About, Services and Contact. We'll be editing Home and About first, then coming back later to edit Services and Contact.
In this section, we'll look at how to create Pages, find out how to set a page as the "home page" and get to grips with using our fully responsive page sections from the Layout Library. Let’s go ahead and create our first couple of Pages.
Step One: Create four Pages
1) Home Page
- Name: 'Home'
- URL: 'home'
- Set as your Homepage: True.
- SEO Page Title: 'CompanyName - Home'
- SEO Meta Description: 'Welcome to the new home page of CompanyName'
2) About Page
- Name: 'About'
- URL: 'about'
- SEO Page Title: 'CompanyName - About'
- SEO Meta Description: 'Welcome to the about page of CompanyName'
3) Services Page
- Name: 'Services'
- URL: 'services'
- Page Title: 'CompanyName - Services'
- Meta Description: 'Welcome to the new services page of CompanyName'
4) Contact Page
- Name: 'Contact'
- URL 'contact'
- Page Title: 'CompanyName - Contact'
- Meta Description: 'Welcome to the new contact page of CompanyName'
Note: URLs automatically generate based on name but can be edited if you wish.
Create a Page
Create A Page
Read the full document: here
Page Details
Page Details
Read the full document: here.
SEO Settings
SEO Settings
Read the full document: here.
Next we are going to start editing these pages and adding in some layouts from the Layout Library, starting with the Home Page. You'll notice that the layouts don't look right when you add them in, don't worry, we'll fix this in the next step.
Step Two: Edit 'Home' and 'About' Pages
1) Home Page
Using the Layout Library, copy a "Title-02", "Testimonial-01" and "Hero-03" Layout to your Home Page - these should go into the Page Builder tab of your page.
2) About Page
Using the Layout Library, copy a "Content-01","Team-02" and "Call-To-Action-16" Layout to your About Page - these should go into the Page Builder tab of your page.
Note: To access our Layout Library click here. To find out more about the Layout Library and Design System, click here.
Editing A Page
Editing A Page
Read the full document: here.
Page Builder
Page Builder
Read the full document: here.
Section 3 - Page Templates:
A Template simplified is effectively what wraps around content; it's a structure that can be replicated throughout a Site. We'll be making a blank template in this step, so that Design System can be automatically applied to our pages and our Layout Library Layouts render nicely with the CSS applied.
In this section, we’ll be moving further down the Menu on the left hand side to click into Site Manager. We'll start by creating a Template then go on to outputting from the Toolbox and finally using Code Editor.
Step One: Create a new Template
- Template name: 'Layout'
- Template Type: 'Page'
Creating a Template
Create A Template
Read the full document: here.
Note: make sure you check the box ‘Use Design System?’ this will allow compatibility of the code framework (Bootstrap 4) to work with your Pages and so the Layouts will appear as they were intended to.
Note: Headers go at the top of our Page, and so would be written in the body section of code before the content code. Footers go at the bottom of our Page, and so would be written in the body section of code after the content code. We'll come onto this later.
Step Two: Apply Template to Pages
Now we're going to apply our newly created template to all four of our pages.
Applying a Template
Page Templates
Read the full document: here.
Once you have applied the template, take a look at the front-end page. The layouts you copied from Layout Library should now look just as they do in the Library!
Note: With Visual Editor you are able to view a rendered version of a page to point and click edit page content such as text and images without needing to look at code.
Section 4 - Services:
A 'Services' Page is an opportunity for you to show Clients how they can incorporate a dynamic list of specific services on their site. To make that easy to manage we'll be using a feature called a WebApp.
WebApps are a dynamic content element powered via database, they allow you to draw out information and present it in a variety of ways. It may seem counterproductive at first, however setting them up this way means that your client can manage their services without ever looking at code! In addition, when you edit a WebApp item that is displayed on more than one page, the changes will update everywhere!
In this section, we’ll look at the WebApp feature and how to create a WebApp tailored for services. Once the WebApp is ready we'll create a 'Services' Page and output the WebApp to that Page using the Toolbox.
Step One: Create a Services WebApp
The first thing we're going to do here, is create a new WebApp with some basic fields to form our Services database.
Settings:
- Name: 'Services'
- Has Detail View?: Checked (true)
- Slug: 'service'
Custom Fields:
An Image field to provide a visual of what this service is about and draw visitors in, using the "image" field type.
- Name: 'Image'
- Type: Image
- Required?: Checked (true)
A short description field, to display on the list view of our WebApp Item. As there are a number of services in a list. We don't want to make this too long, so we'll pick the smaller "string" field type.
- Name: 'List Description'
- Type: String
- Required?: Checked (true)
A longer description field, to display on the detail view of our WebApp Item to form the main "bulk" of information about the service. We'll want to allow for more content here, so we'll pick the larger "Text (Multiline)" field type and also enable "Rich Text Editor" to allow for customisation of text.
- Name: 'Full Description'
- Type: Text (Multiline)
- Rich Text Editor? Checked (true)
- Required?: Checked (true)
Creating A WebApp
Creating And Editing A WebApp
Read the full document here.
Step Two: Create four Services
Now that we've created our Services WebApp, we want to add in our services!
From the left hand menu, navigate to "WebApps" and then click on your newly created WebApp name "Services". You are now viewing a list of WebApp Items (services), which is of course empty at the moment.
Next, click the blue "+ Add new item" button to the right of the search field to begin creating some WebApp Items.
WebApp Items:
- Name: 'Training'
- Item Slug: 'training'
- Image: Upload an image of your choice
- List Description: 'Welcome to Defensive Computing Training.'
Full Description: Add a few paragraphs of your choice
Name: 'Software'
Item Slug: 'software'
Image: Upload an image of your choice
List Description: 'Welcome to the Cloud-based Sales Automation Platform.'
Full Description: Add a few paragraphs of your choice
Name: 'Design'
Item Slug: 'design'
Image: Upload an image of your choice
List Description: 'Welcome to Graphic Design for Business Web Graphics'
Full Description: Add a few paragraphs of your choice
Name: 'Consulting'
Item Slug: 'consulting'
Image: Upload an image of your choice
List Description: 'Welcome to IT Consulting for Software Development'
Full Description: Add a few paragraphs of your choice
Step Three: Output your services WebApp to the 'Service' Page
Finally, let's go and output our newly created WebApp Items onto the Services Page we made earlier. Head on over to that page by clicking on "CMS" and then "Pages" in the menu on the left hand side. Next, click on the "Services" page.
From here, you can use toolbox to select and output the Services WebApp we just created. Use the default layout for now, we'll show you how to create a custom layout later.
Outputting the WebApp
Toolbox
Read the full document here.
Section 5 - Contact:
The most important aspect of a website is how and why a visitor interacts with it. We're going to create a basic contact form and add it to our Contact page, so that visitors can get in touch with us and also provide us with some of their details.
In this final section of the course, we’ll look one of the essentials features we need to complete the Contact Page we made earlier, forms. We'll go through how to create a form, how to add custom fields and how to output it on our page.
Step One: Create a form
When creating our form we will add a custom field to let visitors send us a message.
Custom fields:
- Name: 'Message'
- Type: Text Multiline
- Required?: Checked (true)
Create A Form
Creating A Form
Read the full document here.
Step Three: Displaying the form
Now that we've created a basic contact form, let's add it to the Contact Page we created earlier. Head on over to that page by clicking on "CMS" and then "Pages" in the menu on the left hand side. Next, click on the "Contact" page.
From here, you can use toolbox to select and output the Services WebApp we just created. Use the default layout for now, we'll show you how to create a custom layout later.
Outputting the Form
Toolbox
Read the full document here.
Congratulations! You’ve now successfully completed Course 1: Getting Started.