WebBoss® Tutorials

Here you find instruction on how to edit your new website

Initial Walk through

Dashboard

The dashboard is the first page you’ll see when you log in. It displays useful information about the site and is a good jumping off point if you ever get lost using the system. You can always get back to this by clicking the ‘Dashboard’ icon along the top right of the screen or the dashboard link towards the top of the main menu.

Main menu

On the left-hand side of the system you’ll see the main menu. This is where the majority of the features on the system are. To speed things up there’s a search function at the very top. Most of the top-level menu categories will expand to reveal sub-categories inside.

View Website

You can always view the homepage of the website you’re working on by clicking the ‘View Website’ icon along the top right of the screen.

Add pages

Add new page

Main Menu > Add New Page

Page Editor

1. Add a page name
2. Add page content
3. Use the formatting tools at the top of the page editor to change design.
4. Click “Save and Publish New Page” to finish.

Edit pages

Edit page

Main Menu > Edit Pages > Edit Pages

Page Editor

1. Click the name of the page you’d like to edit.
2. This takes you to the page editor of that page.
3. Edit the content required or update page options etc…
4. Click “Update and Publish Page” to finish.

Code View

To the right of the formatting tools of the page editor there is a “Source Code” button. This will bring up the HTML of the page where you can edit in code view. This give’s you more control over the layout etc…

Insert Templates

To the right of the formatting tools of the page editor there is a “Source Code” button. This will bring up the HTML of the page where you can edit in code view. This give’s you more control over the layout etc…

Extra page Text

You may want to keep parts of a page separate. To do this you can add an “Extra Page Text” At the top of the Page Editor click the “Add Extra Page Text” button. This will allow you to open up another Page Editor that is separate from the main page content. You’ll need to add the extra page text tag within the main HTML in the advanced mode. Use the tag [pagetext2] to choose where the extra section will display. You can have up to pagetext4.

Edit Themes

Edit Theme

Main Menu > Edit Theme > Theme Designer

Logo

Theme Designer > Appearance > Website Logo Click to upload a new website logo. You can adjust where this displays using the main HTML in the advanced section. Click “Save and Update Theme” to save your changes.

Favicon

Theme Designer > Appearance > Website Logo You can upload a favicon to the site here. Click “Save and Update Theme” to save your changes.

Website Width

Theme Designer > Appearance > Site Background You can choose how wide the website is using this section. This can be in Pixels, Percentage or Ems. Click “Save and Update Theme” to save your changes.

Menu appearance

Theme Designer > Menu These are the settings for how the menu looks and behaves. Including the padding and hover effects. Click “Save and Update Theme” to save your changes.

Responsive Burger menu

Theme Designer > Menu Theme Designer > Menu > Responsive / Mobile Menu Here’s where you can control the appearance and behaviour of the mobile menu as well as decide at which screen width the menu will come in. Click “Save and Update Theme” to save your changes.

Font List

Theme Designer > Fonts Here is where you control which fonts different elements of the site will use. Including the colour and weighting. Click “Save and Update Theme” to save your changes.

Google Fonts

You can choose from the entire Google Fonts library directly from the font selector. Click “Save and Update Theme” to save your changes.

Link Styles

Here is where you control colours and hover effects that links will have within the site. Click “Save and Update Theme” to save your changes.

Search

Theme Designer > Extras > Search This is where you can enable the search function within the site and also the behaviour of it. You can choose where the search is displayed using the [search] tag within the main HTML in the advanced section. Click “Save and Update Theme” to save your changes.

Custom Header / Footer

Theme Designer > Extras > Extra Sections

You may want to have areas of the header and footer that can easily be edited. Just enable the “Custom Header” and click edit. This will bring up the normal content editor including the source code editor. Click the green tick to save. Click “Save and Update Theme” to save your changes.

Advanced Code Editor

Advanced Code Editor

Main Menu > Edit Theme > Advanced Code Editor

Main HTML

On the right-hand side under the “Main Template” is the main HTML. This is the main structure of the site itself.

1. Click the name
2. Edit the HTML
3. Click “Save and Update Current File” to finish

This is where you’ll add in tags used within the site. Tags that go directly into the main HTML use a tag format [tagname]. If the tag is in the page content of the CSS then it needs to use the format of . Changing where the tag goes changes how it will be displayed

Main CSS

On the right hand side under the “Stylesheet” is the main CSS for the site. The system has SCSS built in so this is the format by default. You can find the normal CSS file under the “Stylesheets” list to the left of this section.

Creating Custom Templates

1. Click the green “Create New File” button.
2. Add in the HTML you’d like
3. Click “Save As New File”
4. Select “Page Template” from the dropdown menu and rename the template what you’d like.
5. Click “Save File”
6. This will now be in the list of templates

Custom Tags

Adding Custom tags

Main Menu > Edit Theme > Custom Tags

Custom tags are re-usable bits of code that can be placed where needed. Custom tags can include HTML, JavaScript, jQuery, PHP.

1. Click the blue “Create New Tag” button
2. Add your code (including script tags)
3. Enter Template Tag Name at the top right of the page
4. Click “Save As New Template Tag”
5. Add this tag using the correct tag structure ( [tagname] or ) to the main HTML in the advanced mode or the page content.

A full guide to tags can be found in the Advanced Code Editor by clicking the “Template Tag Guide” button

File Upload

Upload Files

Main menu > File Upload > File Upload & Media Browser

Upload a File

1. Click “Choose Files” in the top left-hand corner
2. Select files and click “Open”
3. Choose which upload settings you’d like (overwrite etc…)
4. Click “Upload Files”
5. Once the files are uploaded click the back button in the top left-hand corner.
6. Scroll down to see your uploaded files

Compress a File to Webp

You can convert a single file to webp using the “webp” icon next to the file path in the uploads list.

Alternately you can convert a batch of images.
1. Click “batch Optimise Images” at the top of the file uploads list
2. Select webp
3. Tick which files you’d like converted
4. Click “Start Batch Compression”

Upload Options

On the right-hand side of the file upload page you’ll see different options for uploading files. This is where you set the limitations for which files can be uploaded etc…

Animated Banners

Add a Banner

Main Menu > Modules > Banner Creator > Banner List

1. Click “Create New Benner” or click the name of the banner you’d like to edit
2. Click “Upload Images” and follow process
3. Scroll down to adjust banner settings
4. Scroll further and click “Add Image”
5. Select the image, caption and link you’d like
6. Click “Update Banner” to save
7. The banner is then added to the list and given an ID.
8. Add the banner tag and then the id of the banner you’d like. (ie. {=banner id=”1”})
9. Or use the modules tab in the page editor to add the banner

Form Designer

Add a contact form

Main Menu > Modules > Web Forms > Form List

1. Click “Create New Form” or click the name of the form you’d like to edit
2. Adjust the settings like “form Name” and “Form Title”
3. Click “Save and go to Form Designer”
4. Drag the elements from the left-hand side to the main form
5. Click the cog icon of the elements to edit them
6. Click “Save and Update Form”
7. The form is then added to the list and given an ID.
8. Add the form tag and then the id of the form you’d like. (ie. {= form id=”1”})
9. Or use the modules tab in the page editor to add the form

View form data

Main Menu > Modules > Web Forms > Form Data

1. Click the name of the form data you’d like to view
2. Scroll to view data
3. You can also export this to a CSV file using the “Download Data to CSV” at the top of the page

Photo Gallery

Add a Gallery

Main Menu > Modules > Photo Gallery > Manage Galleries

1. Click “Create New Gallery”
2. Adjust the Gallery Name and settings
3. Scroll down and click in the “Drop files here to upload” box to upload files and follow process
4. Click “Save and Update”
5. Add the gallery tag and then the id of the form you’d like. (ie. {= gallery id=”1”})
6. Or use the modules tab in the page editor to add the gallery

Blog

Add a Blog

Main Menu > Modules > Blog > View All Blogs

Creating a Blog Post

1. Click “Add New Blog Post” or click the name of the post you’d like to edit
2. Scroll and Add your post title.
3. Upload and choose a blog image
4. Add text to your blog
5. Adjust the settings using the tabs on the right-hand side.
6. Click “Save and Publish New Blog Post”

Adding a blog to a page

There is default blog page when the blog is active. Alternatively, you can add a blog using the modules tab of the page editor.

Add a Blog Preview

Insert the tag {='blog_preview'} where you want it to display in your content.
This can then be edited within the blog settings

GDPR Module

Add Privacy Policy

Main Menu > Modules > GDPR > Privacy Policy Generator

1. Scroll down and enter the privacy policy into the page editor
2. Or if you need help creating one, use one of the 2 guide buttons at the top of the page and follow the steps.
3. Copy and Paste the finished privacy policy into the page editor.
4. Click “Save Privacy Policy”

Add a Terms and Conditions

Main Menu > Modules > GDPR > Terms & Conditions Generator

1. Scroll down and enter the terms and conditions into the page editor
2. Or if you need help creating one, use the guide button at the top of the page and follow the steps.
3. Copy and Paste the finished privacy policy into the page editor.
4. Click “Save Terms & Conditions”

Add a Cookie Policy

Main Menu > Modules > GDPR > Cookie Policy Generator

1. Scroll down and select which options apply to you (ie. Which cookies you’re using)
2. Click “Generate Policy”

Social

Add Social Media Links

Main Menu > Modules > Social > Add/Edit Social Media

1. Choose design settings like size, colour and background
2. Scroll down to see options
3. Tick which social platforms you’d like to link to
4. Enter the URL of those pages
5. Or enter a custom link at the bottom of the list
6. Scroll to the top and click “Save Social Media Options”

eCommerce Module

eCommerce

Main Menu > eCommerce > Shop Dashboard

Add / Edit a Product

Main Menu > eCommerce > Shop Dashboard

1. Click “Products”
2. Click “Add New Product” or click the name of the product you’d like to edit from the list
3. Edit the main product information like Name, Summary and Description
4. Edit extra product information on the right hand-side tabs.
5. Click “Update and Display Product”

Edit Product Tabs

Main Menu > Modules > GDPR > Cookie Policy Generator

• Product settings: Controls price and stock levels, as well as other basic settings for the product.
• Product type: Controls if the product is Physical, Digital or a donation.
• Category: Controls which category/categories a product is in.
• Special Offer Settings: reduced the products price and adds a “Sale” banner.
• Images: Controls which images are displayed with the product.
• SEO: Adds extra SEO settings to the product.
• Seller Profile: Allows your payment gateway to pay someone else.
• Custom Parameters & Attributes: You can set custom things for your products. You control these here.

Add / Edit a Product Category

Main Menu > eCommerce > Shop Dashboard

1. Click “Categories”
2. Click “Add New Category” or the name of the category you’d like to edit.
3. On the right-hand side. Edit the Name and select a category image.
4. Select a parent category if you’d like this category to be a sub-category.
5. Click “Save”
6. On the left-hand side click “Enable Category Sorting” to drag the categories and re-order them

Shop Settings

Main Menu > eCommerce > Shop Dashboard > Settings

• General: controls basic settings of the shop including currency and your address.
• Product Settings: controls settings of the products like gift wrapping options and the zoom on images.
• Cart Settings: controls settings for how the eCommerce cart will be presented.
• Display Settings: controls settings for all the shop preview tags and sliders as well as how the products and categories will be displayed.
• Postage Settings: controls the postage settings for all products. As well as set exclusions for postage.
• Gift Aid: allows you to take Gift Aid donations
• T&Cs: allows you to set the terms and conditions for the shop. This is different to the main site T&Cs
• Order Text: controls what the user sees after they have completed the checkout process
• VAT: allows you to put in your VAT number
• Promo Codes: controls what promotional codes are active at any one time
• Payment Gateway: controls what payment gateway is enabled and the settings for it

Google Analytics

Add Google Analytics

Main Menu > SEO Settings > SEO: Analytics and Tracking Scripts

1. Find Analytics (Tracking ID)
2. Enter your GA tracking code
3. Or paste your tracking code directly into the “Tracking Script” section
4. Click “Save Tracking Codes”

Re-direct to a domain

Re-direct to a domain

1. Go to the domain control panel via your registrar
2. Point the a-records to point at the correct server IP address
3. The a-records can be found by hovering over the “?” in Main Menu > System Options > Website Settings
4. From the dashboard click “Disable Developer Mode”
5. Main Menu > System Options > Website Settings
6. Enter the domain name in the “Website Address field
7. Click “Update Website Details”