- Logging In
- Adding a New Page
- Adding Content To A Page
- Adding A Text Block
- Add A Single Image
- Nectar Slider
- Add a Video Player
- Add a Team Member
- Add a Google Map
- Add a Gallery
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:
You will then need to login with the details you have been provided by your designer via e-mail.
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).
By clicking on the ‘pages’ tab, you will see a couple of options appear underneath the menu to the left:
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.
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.
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:
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
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’:
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:
To continue on with building a page, click the ‘Add row’ button and a new box with a ‘+’ mark in the centre will appear:
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:
All the icons have brief descriptions which describe their function.
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.
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;
Now you can move on to adding a second element; like an image.
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.
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.
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.
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.
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.
To create a new slide, click ‘New Slide’ and you will be presented with the folowing panel:
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).
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).
Then you will be presented with this:
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):
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:
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:
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.
Here you can add a google map.
First of all, you will see this settings box:
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:
These coordinates will be needed further down the settings panel so it’s important they are correct.
A gallery will allow you to create a showcase of images displaying projects, products, events or just general images of your team or your business at work.
When you chose to add a gallery you will be presented with this settings box:
The ‘Gallery Type’ allows 3 options; you can choose one of the following:
‘Basic Slider’ -this cycles through your images.
‘Nectar Slider’ – this creates a slider similar to the slider we created at the top of this page.
‘Image Grid Style’ – is a gallery that formats each image side by side in rows allowing you to add images that could become visual links or show types of products available.