Editing a menu

  1. From the top menu bar, select "Menus"

2. Make sure that "top-nav (The Main Menu)" is selected. If it is not, find it in the drop down menu and press "Select"

Screenshot 2019-04-05 at 11.43.52

3. You will now see the screen below that has the possible pages to be selected on the left (with tick boxes) and on the right is your menu. The menu is a tree structure that shows in the order displayed. Idents identify the sub menus. Below "How to maintain your website" is on the main menu, when you hover over it on the website the submenu of the items indented below will appear.

Screenshot 2019-04-05 at 11.47.57

Adding or editing a button

  1. Edit the page using the BoldLight builder and then when you hover over an existing button you will see a blue edit box. Click on the button, or the small spanner to edit the button settings.
Button

2. This will open up an edit menu, here you can change the button wording, the icon and the link that the button goes through to.

Edit button

3. In the Link box you can either paste in a link or if it is linking to a page on the site click on 'Select' and type in the page title (or part of it) and a list will come up to select from.

Screenshot 2020-04-22 at 13.39.55

To add a new button you can use the button module, this is found in the menu on the right hand side when you are in the page builder.

Screenshot 2020-04-22 at 13.43.06
    1. Edit the page using the BoldLight builder and then when you hover over the corporate supporter logos you will see a button to edit the Image Carousel.

 

Image carousel

2. To add, remove or change the order of the logos click on 'Edit gallery'

Add image

3. You can delete or move the order of existing images. Click Add photo to add a new logo and then upload this to the Media Library in the usual way.

Add an item to the menu

  1. Once you are editing a menu. Select the page on the left (Section called "Page" by ticking box (you can tick multiple boxes to add multiple pages). You will now need to move it to the right place. See "Moving an item in the menu" to see how to do this
Screenshot 2019-04-05 at 11.47.57

Moving an item in a menu

  1. Find the item you wish to move, we will use "Test page' as an example. For newly added items, they will be at the bottom of the list. Existing items will be in the order they appear in the menu.
Screenshot 2019-04-05 at 11.56.12

2. Click on the item and drag it to where you would it to appear. If you would like it to be a main menu item then drag it so it is inline with other main menu items.

Screenshot 2019-04-05 at 11.56.23

If you would like it to be a part of sub menu. Drag the item so it is underneath the item that will be the main menu heading then drag it to the right so it indents as per the image below.

Screenshot 2019-04-05 at 11.56.30

3. Now press "Save Menu"

Screenshot 2019-04-05 at 11.57.00

Remove a menu item

  1. Once in the Menu admin screen (See "Editing a Menu Item" to recap how to do it"), find the item you wish to remove and click on the down arrow at the end of the block. We will remove "Test page" as an example.
Screenshot 2019-04-05 at 11.56.23

2. Click on the red "Remove" hyperlink to remove the item.

Screenshot 2019-04-05 at 11.56.41

3. Press "Save Menu' to save changes.

Screenshot 2019-04-05 at 11.57.00

Pasting text from Microsoft Word

1. When you are pasting text from Microsoft Word into Beaver Builder, we recommend pasting the text without any of the formatting from Word and using the built in styles we have set up in your website.

2. Copy into clipboard as you normally would when in Microsoft Word. Add a Text Editor component to your webpage. If you're adding to an existing text box, make sure the option detailed in Step 3 is enabled,

Screenshot 2019-04-17 at 13.23.23

3. Press the end icon on the "Visual" tab.

Screenshot 2019-04-17 at 13.28.49

4. A new menu bar will appear, select the icon with a clipboard and the letter T to turn it on.

Screenshot 2019-04-17 at 13.29.01

5. You can now paste the text into the text box.

Adding a Wag dog

  1. Go to the 'Wag dogs' section in the admin area and click Add new.
  2. Fill in the form with the name of the dog in the first box
  3. Pick the date the Wag dog qualified from the date picker
  4. Click 'add a featured image' to add a picture of the dog from the media library (or upload).
  5. Hit publish

Note, you can add dogs to categories but they are not currently displayed on the website in different categories.

If you need to crop the Wag dog images to make them fit the square crop shape used on the home page, you can find instructions on how to use WordPress' crop tool here:

https://www.wpbeginner.com/beginners-guide/how-to-crop-rotate-scale-and-flip-images-in-wordpress/

 

Adding a Case Study

  1. Go to the 'Posts' section in the admin area and click 'Add new'.
  2. Fill in the form with the name of the case study in the first box
  3. Add a short sentence to the 'Excerpt' box - this will be shown in any boxes on the site that show a link to the case study.
  4. Click 'add a featured image' to add a picture from the media library (or upload).
  5. Select the 'Case study' checkbox from the categories section
  6. That's the page set up... now we need to add the content...
  7. Click BoldLight Builder > Launch BoldLight Builder

You should now see a blank page for your case study. You can use the page builder to drag in the content you want from the 'plus' icon in the top right corner.

To begin with it might be useful to use the starter template we have set up for a case study. To do this:

  1. In the page builder go to the plus icon in the top right corner
  2. Choose templates
  3. Choose 'Case study - example'
  4. If you already have content in the page you will be asked if you'd like to overwrite this content with the template, or append the template to the end of your page.
  5. Once you have the template in place you can edit it, add new content (eg, saved rows, etc)
  6. Once your case study is finished hit Done > Publish

 

Changing donation prompt amounts

You can change the donation prompt amounts by clicking into the prompt module and changing:

  1. The text field for the module title (eg. £5)
  2. The text of the button (eg. Donate £5)
  3. The amount parameter at the end of the URL in the link field (eg. ?amount=5)

The 'Choose a different amount' box pick up the donate URL from a hidden HTML module at the top of the page, which shows with a red outline when in edit mode in the page builder.

These settings boxes are used on the donation page and the Friends of Wag pages. They should not be removed!

Screenshot 2020-05-18 at 22.06.34
Screenshot 2020-05-19 at 13.18.29

This is what the settings boxes look like in the editor.

When you click into the settings box, the donation url is set with a parameter that looks like this:

<div id="donate-url" data-donate-url="https://wagandcompany.boldlight-built.co.uk/support-us/donate/make-your-donation/"></div>

Adding a Vimeo video

  1. To add a vimeo video use the Video content block (or copy one from elsewhere) and then select 'Embed'.
  2. Log into Vimeo to get the Embed code for the video you want to show.
  3. Make sure that the Video Embed settings use the pre-set 'Wag - Just Controls' setting - this strips out all the Vimeo branding and stops it automatically trying to play another video in the library.
  4. Click on embed and then copy and paste the code into the content block on the site.

 

Screenshot 2020-05-19 at 13.18.29
Screenshot 2020-05-19 at 13.18.53