Free shipping on orders over $200

User Guide Overview

This User Guide is designed to help with adding text, image and video content to both website pages (Pages) and blog posts (Posts) using the Content Builder functions.

It does not cover admin of the Logo Carousel or the Home Page Image Slider.  For changes to these, or to arrange training, please contact Best Impressions.

The guide does not include WYSIWYG editor guidelines (such as text formatting and adding links) as these are the same as they were on the Peak Movement website.

Key Note: Remember to click the “Paste as text” button before pasting content into the editor.

Please note that the website admin area also gives access to the Shopkeep Online Store.  The same pages that are available through the Shopkeep login can be accessed from the website back end.

Content Builder

All pages and posts in the Bona Fide website use a custom content builder for adding and managing content. When creating a new page/post, you will see the empty content builder, as shown below:

You can add an unlimited number of sections to the content by clicking on the “Add New Section” button.

Section types you can choose from, are:

  • Text – this can be used to add rich text content (text with formatting), as you did with your Peak Movement website.
  • Title – this can be used if you want to add just a title in a section. This is usually not needed, because each other section type allows you to define a title for the section.
  • Shortcode – this can be used to add custom content using shortcodes given by 3rd party plugins. This is not usually needed.
  • Content box with background – this can be used to add a content box in the middle of the browser, with a background image behind it, which fills the entire section container. This is used on the Home Page for the About section.
  • Slider – this can be used to add an image slider to the content. As we have not yet done training for the Slider tool, I have not added training for this option.  I can add sliders if you need them, and we can train you on this at another time.
  • Latest Posts – this can be used to add blocks of the latest Blog posts. This is used to add your abbreviated Blog view (Latest Posts) on the Home page. Please note: in each blog post edit page, you need to define a featured image, so that it can be shown in the latest posts block (index view). Featured images are used for the latest posts section and for displaying posts in the blog index and blog search pages. They can also be displayed at the top of each Blog post.
  • Info Rows – this can be used to add info rows. This is typically used for contact info. Each info row allows you to define an icon alongside the text.

For each section you add, these are the controls you can use:

  1. Click and drag with your mouse if you have multiple sections and you want to reorder them.
  2. Click on the “+” icon if you want to add a new section above the current one.
  3. Click on the “-” icon if you want to delete the current section.
  4. Click on the up/down arrow in order to collapse/expand the current section. Collapsing non used sections may help to optimize the admin view (helpful on small screens).

Section Fields

Each section type uses both global fields and fields defined for that section only. The global fields you can see in any section type are:

  • Section Title – this can be used if you want to define a title which will be visible on the frontend website above the section content
  • Admin Section Title – this can be used to better describe what the section is. It is visible when the section is collapsed. It is only visible in the admin edit page/post screen.
  • Section Width – you can choose the width for the section on the website. The full width option will fill the full browser width. The boxed option will allow the section to be maximum 1080px wide. This is the “content width” view. If you are adding text content, it is always better to use the boxed width, for better readability.
  • Section Spacing – you can use these fields to customize the default spacing between sections (top/bottom fields) and between the section and the browser edge (left/right fields). It is typically best to leave the default values. If you are making changes, please ensure that its looks good in both mobile and desktop screens. If you want to remove spacing on mobile devices, simply check (select) the “Remove side spacing on small screens” checkbox.

“Text” section fields

This section type has these special fields:

  • Main rich text content – this is used to enter content for the section. Please see the separate section below “Adding Images/Gallery/Video to text sections” for more details on image and video content.
  • Key Note: Remember to click the “Paste as text” button before pasting content into the editor
  • Icon above the content – by selecting this checkbox, you will be able to define an icon which will appear just above the content.
  • Content Background Image – by selecting this checkbox, you can define a background image for the content. Please be sure that your background image allows text to be readable.

“Content box with background” section fields

This section type has these special fields:

  • Main rich text content – this is used to enter content for the section.
  • Box spacing – this is similar to section spacing, but these spacing fields define the spacing from the content box to the section edges. You can increase top/bottom spacing in order to show more of the background image.
  • Box Max Width – this field allows you to define how wide the box will be.
  • Background Image – in this field you define the image for the section background.
  • Box Button – in this field group you can define the custom button which will be placed below the box content. If you leave the title or the URL fields empty, the button will not be displayed.

“Info Rows” section fields

This section type allows you to add an unlimited number of info rows, by clicking on “Add New Info Row” button. For each row, you can define:

  • Icon, which will be shown before the title.
  • Title, the title / text to show.
  • URL, if you want the row to be linkable.
  • Link Options, this allows you to select whether the link (if defined) should be opened in a new browser tab.
  • Icon size, if you want to customize the size of the icon.

An example use of the info rows content section are the contact icons and information on the Store Locator page.

Featured Image In Posts

In the Posts edit page, you can define the Featured Image. The Featured Image will be shown in the Blog index page, the “Latest Posts” Blog section on other pages (i.e. the Home Page) and the Blog search page.

By default, if you define a Featured Image for a post, it will also show at the top of the post itself. If you want to hide it from the Blog post page, select (check) the “Hide image from post details page” checkbox (as shown in the image above).

Note that if you use a Featured Image at the top of the post, the date published shows below the image.  If you add a single image at the top of the Blog Post (using a text section) the date published shows below the title and above the image.

Adding Images/Gallery/Video to text sections

As well as text content and titles, you can also add single images, an image gallery and/or a video player to all text sections in posts/pages.

Adding a single image to a text section

To add a single image to a text section, position your cursor in the content where you want the image to appear, and click on the “Add media” button:

You can then upload a new image from your computer (# 1) or select the image from the media library (# 2). When you have selected the image, just click on the “Insert into page” button (# 3)

If you want to change a single image size or define that the image should open in a lightbox, check the next screenshot. If you want to define that the image can open in a lightbox, select Link to: Media File in the sidebar on the right hand side after you have selected the image. Here you can also change the image size shown on website. As discussed during development, please note that the website implements a 400px max height limit for every image even if you select a larger image to be shown. This ensures that the images are not too large on all devices.

Adding multiple images to a text section (creating a gallery)

You can also add multiple images in a text section by creating a gallery. Click on the “Add media” button, as above when adding a single image. Then choose the  “Create gallery” option on the left side, select (or upload) the images you want to add to the gallery, and then click on “Create a new gallery” button.

If you select less than 5 images, the website will try to fit those into a single row. This depends on the format and ratio of the images selected. Otherwise the gallery will be placed into multiple rows.

Edit Gallery

Once you have added images to a Gallery, you can edit them by adding captions, managing images and re-ordering the images.

When you add a gallery of images to a Post, you will see them in the content section.

To edit the gallery, click once in between the images and you will see a blue box appear around the gallery images.  At the top are two icons:

  • The pencil icon allows you to edit the images, re-order them, and add captions
  • The “x” icon allows you to delete the gallery

If you click the pencil icon, you will be in gallery edit mode.

  • Click the “X” icon in the top right hand corner of an image to remove it from the gallery
  • Click “Add to Gallery” in the left hand menu to add new images to the gallery (as described above)
  • Click below the image in the Caption field to add a caption (these appear below the image in the lightbox view)
  • Click, drag and drop an image to re-order the images
  • Click the Update Gallery button at the bottom to save changes.
  • Remember to also press the Update button in the Post to save the updates.

 

Adding video to a text section

To add a YouTube or Vimeo video to a text section, you simply paste the video URL into the text section. The website will automatically create a video player. You will also see the video load into the editor section. No additional configuration is required.

SEO

For each Blog post and web page, you should add the SEO (search engine optimization) tags to ensure that the post / page is well optimized.

Refer to the separate search engine optimization training for how to optimize posts / pages effectively.

The “All In One SEO Pack” section has fields for:

  1. The Title, this includes your key words / phrases with separators “|”. These are shown in browser tabs and in Google results pages.
  2. The Description, this includes your key words / phrases in sentence format. These are shown in Google results pages.
  3. The Keywords, this includes your key words / phrases with comma separation (no gaps) and is used for verification of words / phrases being optimized