Logging In

First you will need to go to the login screen of your website to be able to log in and begin using the system.

To do this, you will need to visit this address ‘www.yourdomainname.co.uk/login
you will then be presented with a similar screen to this:

login

You will then need to login with the details you have been provided by your designer via e-mail.

Dashboard

Once in, you will see something similar to this screen:

As you can see, the options down the left are what you will be using to edit the site, options like:
Portfolio: – This allows you to add ‘posts’ (similar to a news feed), which you can add to areas around the site.

Media: –
This is where all your websites media is stored (images, videos, etc.). You will use this to refer back to when adding images into your pages.

Home Slider: – This is where you would add a standard slider on your pages (this is not needed as we use the slider described below [Nectar Slider] because it is more versatile).

Nectar Slider: – This will allow you to add a series of banner images that can be set to cycle and add a striking, visual element to the site.

Pages: –
These will allow editing of any page and allow you to add new ones (and delete ones).

Contact: – This will allow you to edit the contact us forms throughout your site

SEO: – This is highly recommended to be left alone, unless you know exactly how to use SEO clients (this controls your SEO of the site and can dramatically disrupt your Google ranking).

Collapse Menu: – This will simply allow you to minimise the menu to conserve space (clicking this again will expand the menu back out).

Pages

By clicking on the ‘pages’ tab, you will see a couple of options appear underneath the menu to the left:

-All Pages

-Add New
To the right, you will see a list of what your pages are, this will also show you the date they were added and by whom.

img2

To edit a page, hover over which page you would like to edit in the list and additional options will appear. This will then allow you to Edit, Trash (delete) or View the page.

img3

To create a new page, you can either click on the ‘Add new’ at the top of the list of pages or from the menu to the left:

img4

This will bring you to the a new page layout where you can start building your websites pages (this is also the same layout used to edit your existing pages).

Adding a New Page

img5

The ‘add new’ page feature starts with this:

  • At the top you will see a wide white bar where your Page title will go (Name of the page).
  • Underneath that you will see the main content area where all of your pages visible content will go (text, images, video etc.).
  • At the top right, you will see the ‘Publish’ panel, this allows you to preview the site (lets you see your changes before committing to them and making them live) and ‘Publish’ the site, which allows to you save your changes and show them permanently on the site.

Adding Content to the Page

Before starting a new page you will want to click on the blue button at the top ‘Visual Composer’:

img6

This will make the page editor a now visual editor and can be created using drag and drop. Upon clicking this, you will be presented with a fresh look to the page layout:

img7

To continue on with building a page, click the ‘Add row’ button and a new box with a ‘+’ mark in the centre will appear:

img8

At figure 1. You will see when hovered over, presents a number of options. This will allow you to create columns. This is great for laying out the page. So if you would like a column of images and a separate column of text to the right, a two column configuration is the best choice. You can add all manner of column layouts and even custom ones.

At figure 2. You will find the big plus mark previously mentioned. This will allow you to start adding content elements such as; text boxes, images, galleries etc. (we will cover this in depth soon).

At figure 3. You will find the settings for each row created;

  • The little pencil to the left is the edit button – this will allow you to change the background colour, padding and other aspects.
  • The two pieces of paper icon is the clone tool, this allows you to clone any row to save you time of having to recreate the same configuration again and again.
  • The cross simply acts as a delete button.

All of these options become available for each and every column and row so look out for them and keep track of them.

To add a content element, click on the big ‘+’ sign shown on each row/column, then you will be presented with options to add to the page:

img9

All the icons have brief descriptions which describe their function.

Text Block

img10

To begin we will go through some frequently used text boxes. By selecting the Text Block, you will be able to format text and images using a similar interface to Microsoft Word.

img11

You can then add text, images and links to this section with a simple editor (left).

Familiar formatting options such as text align, font styles, bullet points etc. areavailable.

Remember to click ‘Save’ to ensure the changes are applied to the current page.

Now that you have added a text block it should look like this;

img12

Now you can move on to adding a second element; like an image.

Single Image

img13

Click the big ‘+’ icon on the second column and select ‘Single Image’:
This is used to upload individual images with no animation or visual effects.

img14

Here, you can add an image using ‘Add image’. This will forward you on to the Media Library (previously mentioned) to select your image. You can either select an image from the current images in your media library or upload a new image to the media library to use later.

There are also additional options to make the impact of the image/site more noticeable, for example: The CSS Animation option allows your image to fade/grow into the page when scrolling instead of continuously appearing on the page in a static state.

You can also add a link to another page or to view a larger version of the image.

img15

Now you have added a text block and single image you can see the page begin to take shape. To continue and carry on showing some of the features, we will add another row (see above) and then click on the ‘+’ icon again.

Nectar Slider

img16

The Nectar Slider allows you to create a versatile slider which can be edited to generate some great visual effects.

Using the Nectar Slider you can choose all sorts of options, such as adding arrow navigation to different slides and also adding bullet navigation, ( ie. bullet points that allow a user to click ahead through slides). This also allows you to add links and buttons to the slider.

On the options menu (below) you’ll need to assign a height value to the slider. This is used to prevent the images you add to the slider from exceeding a defined height if they are different sizes.

You’ll also need to ‘Select Slider’, this is currently on Home which means it will draw all the sliders added to the ‘Home’ location you’ll need to create before adding a Nectar Slider.

img17

To add a location, you’ll need to leave the page (remember to save changes at the ‘Publish’ panel on the main page layout section) and go to the ‘Nectar Slider’ tab on the right menu (discussed previously).

There are four options available; ‘All Slides’ shows all created slides ready for editing or deletion. ‘Add New’ allows you to add a new slide. ‘Slider Locations’ allows you to create a location (ie. the page it will display on). ‘Slide Ordering’ allows you to change the order the slides appear in.

img18

To create a new slide, click ‘New Slide’ and you will be presented with the folowing panel:

img19

When creating a new slide you can choose between an image background and a video background. Then you can add the image by clicking ‘Upload’.

There are additional options including; font size and font colour available.

Moving further down the page you can change the ‘Heading’ (the heading on the slider) and ‘Caption’ (the description you can assign to the header which appears under the Heading).

Progressing down the page there’s also the option to add a button link to another page (either on your site or externally to another site).

img20

After this you can add a location. Click on the ‘Slider Locations’ tab (after saving your changes to the slider that has just been created).

img18

Then you will be presented with this:

img21

Here you just assign a ‘Name’ to the slider location and then a ‘Slug’, which is the url of the page you want the slider to display on – for example; if you want to display the slider on the ‘About’ page, the ‘Name’ would probably be ‘About’ and the ‘Slug’ will most likely be ‘/about’.

After assigning the name and slug values return to the page you want to add the Nectar Slider to (previously discussed):

img22

After creating your slider, you can return to the main page layout to add an additional element. Take note, primarily sliders go at the top of a page and the layout has added the Nectar Slider underneath the text and the image added.

You can fix this by dragging the Nectar Slider above the text block and single image by grabbing the move icon (3 straight lines to the far left of the row) and dragging it up:

img23

Video Player

img24

Next, we can add another row/column and add a video player:
This will simply require a link from an external source i.e.a YouTube/Vimeo video you may have previously uploaded.

Team Member

img25

You can add a ‘Meet the Team’ section that will allow you to display names and images for individual staff members.

When adding this feature, you will be presented with this:

img26

Here you can add an image of the team member, their name, job title, and a description allowing you to tell the user a little about each member of staff.

Google Map

img27

Here you can add a google map.

First of all, you will see this settings box:

img28

You can see the map height needs assigning, this will determine how big the map will display dependant on height.

The ‘Map Center Point Latitude’ and ‘Map Center Point Longitude’ fields are for the map pointer that pin points the exact part of the map you are trying to show the user. You will need to obtain the latitude and longitude values from Google Maps, which can be found in the URL of the google map you are wanting to use:

img29

These coordinates will be needed further down the settings panel so it’s important they are correct.

Blog

Add a new page

You will need to create a new page to create your blog.

Title

Page Builder

You will need to click on the the ‘PAGE BUILDER’ tab to active the custom CMS.

Title

Add Element

You will then need to click on the the ‘Add element’ tab to add the blog feature to the page.

Title

Add Blog

You will then need to click on the the ‘Blog’ opton to add the blog feature.

Title

Publish the Page

You will then need to click on the the ‘Publish’ button to the right of the page.

Title

Add New Post

You will then need to click on the the ‘Posts’ tab on the left of the page (the darker bar). Here you can click on ‘Add New’ to add a new post entry.

Title

Creating Your New Post

From here you will be able to create a new post and publish them to the Blog Page, we just created.