Website Instructions for Clients

Call us: 09 418 3127

studio@graphicdetail.co.nz

Website Instructions

To log in to your website you will need to go to www.YourDomainName.co.nz/gd_dashboard. This will open the login screen where you need to enter your supplied username and password.

Main Page

When you have logged in you will come to this page. Please see below the areas that you will need to use.

Posts

All of the Blog entries on your website are located under the
“Posts” tab. Here you can change text and imagery in your blog posts, as well as create new blog posts.

Forms

Under forms you can change the details of any forms that you have on your website, view and download all the entries.

Pages

All of the pages on your website including the home page are located under the “Pages” tab. Here you can change out text and imagery, as well as create new pages.

Menu Bar

Under Appearance is where you will need to go to remove / add new pages to the menu bar.

Edit Page

To edit your pages you need to go into the “Pages” tab on the left hand side.

Hover over the name of the page you want to change and click on “Edit.”

Edit Text

To edit any of the sections you simply need to hover over the block and click on the small pencil.

IMPORTANT: Once you have completed making changes to the page you will need to click the “Update” button otherwise none of your changes will be saved.

It will then open the below screens where you can edit / add text. To get more options to change features of the text click on the “Toolbar Toggle” button. Once you have completed editing the text click on the “Save” button at the bottom of the ‘Text Block Settings’.

IMPORTANT: If you are copying and pasting text into the website you will need to ensure you click on the “Paste as Text” button, this is because other programs have their own formatting and could cause the text to sit incorrectly.

Edit Image

To edit any of the images on the page hover over the image and click on the small pencil that appears.

IMPORTANT: Once you have completed making changes to the page you will need to click the “Update” button otherwise none of your changes will be saved.

WARNING : The images you add will need to be less than 150KB.
If the image is any larger than 150KB it will take a long time to load and slow down the entire site.

It will then open the below screen, click the “x” to delete the image used currently, and then click on the “+” to add a new image.

When you click on the ‘+’ it will open the “Upload Image” screen where you can either drag and drop images, or click on the upload files button. Then click ‘Save Image’.

It will then open this screen, click the “x” to delete the image used currently, and then click on the “+” to add a new image.

When you click on the ‘+’ it will open the “Upload Image” screen where you can either drag and drop images, or click on the upload files button. Then click ‘Save Image’.

Adding text blocks / new image blocks / buttons and more

You can change out the page layout by adding additional image blocks, text blocks, buttons etc by simply clicking on the ‘+’ button at the top or bottom of each row (depending if you want the new text / image block to appear at the top or bottom).

IMPORTANT: Once you have completed making changes to the page you will need to click the “Update” button otherwise none of your changes will be saved.

Duplicating Page Content as a Template

It may be that your website contains a number of pages which all need to look and feel the same. For example, if you provide multiple services and you have a separate page for each service all listed under a dropdown menu in your website’s navigation menu, you will most likely want each of those service pages to look the same, with the same layout, etc, but with the text and images changed for each.

Go to the page editor for the page that you want to use as the template for your other pages.

In the top-left corner of the editor, click the “Templates” icon.

This will open the “Templates” window.

Enter a title for the template.

Click “Save Template”.

You will see the template name you entered appear underneath “My Templates” at the bottom of this window and the “Save Template” button will change to a green button saying “Saved!”.

Click the “X” in the top-right corner of the “Templates” window to close the window.

Now go to the page editor for the page that you want to copy the new template into.

If the page does not yet exist, then create the new page.

If you create a new page, then you will find that it looks different because it will be set to use WordPress’s default content editor.
Click the “WPBakery Page Builder” button to enable the WPBakery Page Builder for this page.

The WPBakery Page Builder will now be enabled, but it will still be showing a default text editor as we have not yet selected which Page Builder editor to use.

Enter a title for the new page.

Click the “Backend Editor” to enter WPBakery Page Builder’s “Backend Editor” mode.

In the top-left corner of the Page Builder editor, click the “Templates” icon.

This will open the “Templates” window and there you will see the template you created earlier underneath “My Templates”.

Click on the template.

Note: Depending on the amount and complexity of the content within the template, it may appear as though nothing is happening for a while because WPBakery Page Builder has to process all of the information in the template. It is working though…

After a moment or two, the “Templates” window will automatically close and you will find the page is now populated with all the content from your template.

Note: You can use these templates in pages that already have other content in them; the templated content will be appended to the end of the existing content.

You can now go through all of the content and change the text and images, etc, as required.

IMPORTANT: Once you have completed making changes to the page you will need to click the “Publish” button (or the “Update” button if this is a pre-existing page), otherwise none of your changes will be saved.

You will see a “Page published” message appear at the top of the page editor (or “Page updated” if this is a pre-existing page). You can now view the page.

You can also now add it to your website’s navigation menu (Click here to go to Menu instructions).

Edit Form

Under forms you can change the details of any forms that you have on your website, view and download all the entries.

Navigate to the “Forms” tab in the left hand side.

Editing an existing form

Hover over the name of the form you want to edit and click on the word “Edit” that appears.

Here you can add / remove form fields

To add a field you simply click on the field you want to add and it will appear at the bottom of the form. You can then drag and drop the field to where you would like it to appear.

To remove any field you simply hover over the field you wish to remove and click on the “x” that appears.

If you want to make a field compulsory then click the tick box next to “Required”.

IMPORTANT: Once you have completed making changes to the page you will need to click the “Update” button otherwise none of your changes will be saved.

Exporting Form Entries

Hover over the name of the form you want to edit and click on the word “Edit” that appears.

Navigate to the “Forms” tab in the left hand side and click on “Import/Export”.

Select the tab “Export Entries” and select the form you want to export.

Select the fields that you wish to be exported by ticking the box next to each category

If you only want to export entries from a certain date range you can specify the “Start” and “End” date.

Then click on “Download Export File”.

Viewing Form Entries Online

If you don’t want to download the entries but you want to view them, Navigate to the “Forms” tab in the left hand side and click on “Entries”.

Here you will see a list of all of the form entries. Hover over the entry you wish to view and click on “View”.

The entry will open and display all fields

Posts

Adding a New Blog Post

To add a new blog post, click on “Posts” in the left menu. This will take you to the “Posts” page.

Click “Add New”.

Type in the title for your new blog post.

In the right hand column under “Categories” select the category for your blog posts (in this example, we’ve simply called the category, “Blog”).

You can enter all of the text for your blog post directly into the main text window.

You can also add images to this window by clicking the “Add Media” button.

Either upload a new image from your computer or else select an existing image from the Media Library.

WARNING : The images you add will need to be less than 150KB.
If the image is any larger than 150KB it will take a long time to load and slow down the entire site.

Select how you would like the image to be aligned in relation to the rest of the content in the post.

Select the size that you would like the image to be displayed at.
Then click “Insert into post”.

You will be able to see the full layout of your blog post including images directly in the text editor.

Alternatively, if you wish to design and layout your blog post using Visual Composer in the same way as the rest of the pages on the site, you can switch to the Visual Composer editor by clicking the “Backend Editor” button.

Now you can build your blog post like any other page on the website using Visual Composer.

Add a Featured Image to your blog post by clicking “Set featured image” in the right hand column.

Either upload a new image from your computer or else select an existing image from the Media Library.

WARNING : The images you add will need to be less than 150KB.
If the image is any larger than 150KB it will take a long time to load and slow down the entire site.

Then click “Set featured image”.

You will be able to see that the image has been attached to your blog post as the featured image by the appearance of a thumbnail of the image under the “Featured Image” section.

At the bottom of the post there are a number of settings that will need to be changed in order to get the post to display in a consistent manner with the rest of the posts on the website.

Set all dropdown options to “No”, except for “Show Slider / Video / Audio on the top of the post?” (Setting this to “Yes” will allow the featured image to be displayed as a banner image at the top of the post).

Set “Select Post layout” to “Post with no sidebar”.

Scroll back to the top of the page and click “Publish” to save the blog post and have it become visible to the public on your Blog page.

Alternatively, if you don’t want it to be visible to the public just yet and would like to come back to continue editing it later before making it public, you can click the “Save Draft” button.

Once you have published your blog post, you will be able to see it appear on your Blog page.

Clicking the featured image or title of the blog post will take you to a page showing the full post.

Solds

Adding a New Sold Property

Sold properties are “Posts” which use the post title as the address and the featured image as the property photo.

To add a new sold property, click on “Posts” in the left menu. This will take you to the “Posts” page.

Then click “Add New”.

On the “Add a New Post” page, enter the address of the sold property (or whatever information you would like displayed over the property’s photo when the mouse is rolled over it) as the post title.

Select the “Solds” category.

To add a photo of the sold property, click the “Set featured image” link.

Select the image that you want to use for your sold property.

If you want to upload a new photo that isn’t already in the Media Library, click the “Upload Files” tab. There you can click-and-drag the photo you want to use from your computer’s File Browser onto the Media Library window and it will then automatically upload and become selected as the image to use.

WARNING : The images you add will need to be less than 150KB.
If the image is any larger than 150KB it will take a long time to load and slow down the entire site.

Click the “Set featured image” button to continue.

You should now see the photo attached under “Featured Image”.

Now scroll back up to the top of the page and click the “Publish” button.

Your sold property will now be visible on the front end of the site.

Sliders

Changing an Existing Slide

Click on “Slider Revolution” in the left administration menu in the WordPress back end.

Click on the slider that you want to edit.

You will be taken to the Slider Editor for the slider that you have selected.

Click on the slide that you want to change so that it becomes the active slide in the editor.

You will know that the selected slide has become active when its title under the thumbnail image is highlighted in black.

Now click the “Change Image” button.

The WordPress Media Library will open up.

To upload a new image, click the “Upload Files” tab.

WARNING : The images you add will need to be less than 250KB.
If the image is any larger than 250KB it will take a long time to load and slow down the entire site.

You can either click and drag the image you want to upload directly from your computer’s file browser onto this window, or else you can click the “Select Files” button to open your computer’s file browser.

If you have clicked the “Select Files” button, select the file that you want to upload and then click the “Open” button.

The selected file will upload and it will then be automatically selected in the Media Library ready for you to add to the slider.

Click the “Insert” button.

The chosen image will now replace the image that was previously assigned to the active slide.

To save the changes that you have made to the slider, roll your mouse over the green disk icon in the top menu bar and it will expand to reveal the text, “Save Slide”. Click on “Save Slide”.

The new slide will now be visible to visitors on the front end of the website.

Adding a New Slide

Follow the same steps above to get into the Slide Editor for the slider that you want to add an image to.

At the end of the existing slides there will be a blank space with a “+” in the middle of it. Roll your mouse over this space and a menu will appear underneath it.

Click on “Add Blank Slide”.

A new blank slide will be added to the end of the slider. Under the “Source” options, the slider will be set to “Transparent” by default.

Click on the “Main/Background Image” option.

Click on the “Change Image” button.

The WordPress Media Library will open up. You can either upload a new image by following the same steps shown above for changing an existing slide, or else you can select an image which has already been uploaded to the Media Library.

WARNING : The images you add will need to be less than 250KB.
If the image is any larger than 250KB it will take a long time to load and slow down the entire site.

Click “Insert” to continue.

The chosen image will now be added to the slide.

To save the changes that you have made to the slider, roll your mouse over the green disk icon in the top menu bar and it will expand to reveal the text, “Save Slide”. Click on “Save Slide”.

The new slide will now be visible to visitors on the front end of the website.

Bulk-Adding Multiple New Slides

If you want to add several new slides to a slider, it can be a bit time-consuming adding them one by one using the method shown above. Thankfully, “Slider Revolution” gives us the ability to add as many slides as we want all at once.

Enter the Slide Editor for the slider that you want to add slides to.

Roll your mouse over the empty slide space at the end of the slider to bring up its drop-down menu.

Click on the “Add Bulk Slides” option.

The WordPress Media Library will open up.

WARNING : The images you add will need to be less than 250KB.
If the image is any larger than 250KB it will take a long time to load and slow down the entire site.

To upload a new image, click the “Upload Files” tab.

You can either click and drag the images you want to upload directly from your computer’s file browser onto this window, or else you can click the “Select Files” button to open your computer’s file browser.

If you have clicked the “Select Files” button, select all of the files that you want to upload and then click the “Open” button.

Depending on the number of images that you have selected, uploading could take a little while, but you will be able to see the progress of the uploads in the Media Library.

Once the uploads have completed, all of the newly uploaded files will be automatically selected ready to be added to the slider.

Click “Insert” to continue.

The new images will all now be added to the slider.

In this case, because we have added multiple slides and we are not dealing with just one particular slide, the changes will be automatically saved for us and we do not need to click the green “Save Slide” button.

Changing the Order of the Slides

To change the order in which the slides appear in the slider, enter the Slide Editor for the slider that you want to change.

Roll your mouse over the slide that you want to move in the slide order. When the drop-down menu appears, place the mouse over the white arrow that appears in the middle of the image.

Click and drag the slide to the position where you want it to appear in the slide order. As you move the slide over the other slides, the slides will automatically shuffle along, creating a gap for you in which to place the selected slide.

Once you have the slide positioned where you want it, release your mouse button and the slide will be dropped into place.

This change will be saved automatically and you will not need to click the green “Save Slide” button to save the changes.

Deleting a Slide

To delete a slide, enter the Slide Editor for the slider that you want to delete a slide from.

Roll your mouse over the slide that you want to delete. When the drop-down menu appears, click on the “Delete Slide” option.

A confirmation box will appear, asking if you’re sure you want to delete this slide (it cannot be un-done).

Click “OK” to continue.

The slide will now be deleted from the slider. This change will be saved automatically and you will not need to click the green “Save Slide” button to save this change.

While the slide has been deleted, the image that was in the slide will still be in the WordPress Media Library. It is strongly advised that, in order to conserve disk space, you should also delete the image from the Media Library if you have no further use for it.

Click on “Media” in the left administration menu.

This will take you to the WordPress Media Library.

Click on the image that you want to delete.

You will now be taken to a screen showing the full details of the image.

Click on the “Delete Permanently” link.

A confirmation box will appear, asking if you’re sure you want to delete this file (it cannot be un-done).

Click “OK” to continue.

The un-needed file will now be gone from the Media Library.