Powersport Dealer Site Guide

1.Logging into your site #

Go To Your URL: [yourwebsite]/wp-admin
example: www.countryroadgraphics.com/wp-admin

Username: Enter the User Name Provided
Password:
Enter the Password Provided

* You can click the “Remember Me” check box IF you are on your personal computer
Click the Log In Button

Login Screen Example

2.The Dashboard #

The Dashboard is where you’re taken after you log into your site. From here you can easily navigate through the capabilities of your site, and perform tasks such as editing pages, creating blog posts, adding slides to your slider, etc. Each dashboard will look slightly different depending on what capabilities your website has. Your various features are listed on the left-hand side of the Dashboard. We keep the menu on the left as clean as possible allowing you to edit the content on your site quickly. From here you can get to your posts, pre-owned equipment, forms, pages and media with one click.

Dashboard Example

2.1.View All Pages #

Go to Pages > ALL PAGES

All Pages

(A) When you hover over the title of the Page you would like to edit, a list of Page Options will appear: Edit, Quick Edit, Trash, View.

  • Edit: this takes you to the content editing screen (guide).
  • Quick Edit: options listed below.
  • Trash: deletes the page.
  • View: opens the page in the current browser window.

View All Pages Example

 

All Pages: Quick Edit

(A) Change the Title and Slug. Keep it short and to the point in order to capture the reader’s attention so they click on it to read more. This is what is typically shown when a post is shared via social media, so keep that in mind when creating a title. The Slug should be the same as the title without any punctuation (even apostrophes) and with dashes between the words.

(B) You can change the date the page was published on here.

(C) Parent. This dictates what (if any) parent page the page should fall under. This is a great tool for organization and the page’s URL will match this hierarchy.

(D) Template. If your website uses a template for page layouts you can select which one you’d like to use here.

(E) Status. Change your page status from published to draft.

(F) Click “UPDATE” to save your changes.

Pages Quick Edit Example

2.2.Add New Page/Blog Post #

  1. Go to
    Pages > ADD NEW to add a new page
    Posts > ADD NEW to add a new blog post (news, events, blog post)
  2. Fill Out the Required Fields (same for pages and posts. See image below):
    (A) Title
    (B) Basic Content (view the basic content guide)
    (C) Page Builder This editor give you access to special widgets and the ability to change the page/post layout (view the page builder guide)
    (D) Save Draft save for future editing without having the content viewable by the public
    (E) Preview will open the page in a new window so you can preview your changes before saving
    (F) Visibility change the page/posts visibility from public, password protected and private (logged in users/admin only)
    (G) Publish default is to publish immediately. Can change to a specific publish date
    (E) Click Publish or Update once complete.

New Page/Post Example

2.3.Add/Edit Menu #

Go to Appearance > Menus

(A) Select the menu you want to edit from the dropdown or click ‘create a new menu’.

(B) With a new menu enter the menu name here and save the menu so you can start adding menu items. On an existing menu you can change the name here.

(C) Add items to your menu from the column on the left. You can add pages, posts, custom links. You might be able to add other items from this column as well depending on the capabilities of your site. With your items selected click ‘Add to Menu’.

Edit Menu Example 1

 

(A) Once your menu items are added you can drag and drop them in the order or hierarchy you want. A dotted outline will show you where your item is going to be before you place it. Indented items will be ‘drop’ menus under the parent item.

(B) Select where you want the menu to go here. If nothing is selected you can use this menu in other areas of your site like widget areas (guide) or other areas we’ve created for you.

(C) Click ‘Save Menu’ when you are finished with all of your changes.

Edit Menu Example 2

3.Home Page Slider #

The powersport site uses a carousel as its home page slider.

From the menu on the left click on Pages> All Pages> Home. The slider is the first item at the top of the page.

Each carousel item contains an image widget where you can change the image. Each image is 1800px X 600px in size. The settings are set up specifically to be used as a slider on the home page so its best to just change out or add images.

(A) Select each slide by clicking on the corresponding tab. Click on the plus icon will add a new item. It is best to copy an existing slide in order to retain existing settings (see below)

(B) Click on the pencil icon to see the item settings.

(C) Click on the double page icon in order to duplicate the item. *best way to add a new slide.

(D) Click on the trash can icon to delete the selected slide.

(E) use the image widget to add slide images

Home Slider example

View the carousel guide for more carousel options.

4.Pre-Owned Inventory #

Your Powersport theme includes a pre-owned inventory manager. With this manager you can add in any product and be able to have your customers sort those products by manufacturer and type. You can find the pre-owned options in the left menu labeled as “Pre-Owned”. Click to goto all of your inventory or hover to view the other options. This guide will show you how to manage existing and add new items.

Pre-owned menu

 

This guide will show you how to manage existing and add new items.

4.1.All Inventory #

The All Inventory menu option will let you see everything you’ve entered into the pre-owned inventory manager. From here you can find products to edit, or add new products.

A) Click on the ‘Add New’ button to add a new product

B) Hover over an existing product to see options to edit the product, quick edit, trash and view.

  • Edit – takes you to the product editing page.
  • Quick Edit – Allows you to make small changes (listed below).
  • Trash – Places the product in the trash. If you enter the trash you can permanently delete a product, or recover a deleted product.
  • View – Will open that product in the same window.

C) Checking the boxes will allow you to trash or quick edit multiple items at the same time.

View All Inventory Example

 

All Inventory Quick Edit

A) Change the title of the product.

B) Change the slug of the product, the slug is what shows in the page link. Use no spaces and dashes between words.

C) Change the date published.

D) Add or remove inventory categories.

E) Change product type. Only one can be used at a time even though the field will allow you to add more.

F) Change manufacturer. Only one can be used at a time even though the field will allow you to add more.

Pre-owned quick edit sample

4.2.Add/Edit Pre-owned Inventory #

The page used to add a new product is the same as editing an existing product. Click on the image below to reference the letters.

Product Edit Screen Sample

 

A) Change product name. When this is changed click on the ‘edit’ button beside the link under the name and delete everything there before saving. On a new product the name you entered will be automatically made into a link to the product when saved.

B) Select from existing manufacturers.

C) Select from existing products.

D) Add a new manufacturer or product by clicking on the + icon and typing in the new option. This will be saved for future items and can be managed through the manufacturer and product type pages.

E) Insert or edit the model of the product.

F) Insert or edit the price of the product. If nothing is entered then “Call for price” will automatically be placed in that spot on the site.

G) Insert or edit the sale price.

H) Add or edit Inventory categories. Select existing category from the list. *currently only ‘featured’ is used on the site, the others are in place for future site features Featured will allow the item to be used on the home pages featured product area. Only up to the most recent 3 items can be shown at a time if you have more then 3 selected with this category. View the featured inventory widget guide for details.

I) Add or edit a brief overview description of the product. Uses the basic text editor. View the basic content editor guide here.

J) Add or edit product details & Specifications. Uses the basic text editor. View the basic content editor guide here.

K) Add or edit product images (view example image below).

  • a) click “add to gallery” to add a new image to the product gallery. Uses the add media popup viewed in this guide.
  • b) the first image will be used at the featured product image on the home page and the main inventory page.
  • c) images can be re-ordered by dragging and dropping.

Inventory images

 

When you are finished adding a new product or editing an existing product click on the “publish” button on the top right of the screen (will say “update” when editing).

4.3.Manage Manufacturers and Product Types #

The page for managing the manufacturers and product types are the same.

A) Enter the name for the new manufacturer or product type.

B) The slug will be automatically generated when saved. 

C) Hover over an item in the list to bring up options

  • Edit – opens up the editor in a new screen to change the name and slug
  • Quick Edit – allows you to edit the name and slug without opening a new window (recommended)
  • Delete – Delete a manufacturer or product type. Some are generated by the site and cannot be deleted.
  • View – View all inventory of that manufacturer or product type.

D) Shows the amount of inventory in with that manufacturer or product type. Clicking on the number will open up a page with those items listed.

E) Click on the “add” button to save the new manufacturer or product type. 

Manage manufacturers or Product types

4.4.Heading Settings #

The Pre-Owned Inventory page header can be edited here. This page is generated automatically so there is no normal ‘page’ to edit these settings.

A) Click on the image to add a different image. Images must be 1800px X 600px and in jpg, jpeg or png formats. Not other sizes or file types will be accepted.

B) Insert the page title here.

C) Optionally insert a sub title here.

D) Click on the update button to save the heading settings.

Pre-owned heading settings

5.Basic Content Editing #

Adding and editing content for posts and pages is identical so you can use this guide for both. If you want options for layout or anything beyond basic text editing look at the Page Builder guide.

  1. Go to Pages > ALL PAGES or POSTS (on the left side of the screen)
  2. Hover over the page (post) you wish to edit, and click the blue text, “EDIT” or “ADD NEW”
  3. (A) In the main content area you can type, delete or add text (much like a MS Word doc).
  4. (B) The drop down (defaulted as paragraph) is where you can set your heading levels. These will probably be styled differently for your site.
    Use these to create a visual hierarchy for your page and draw attention to different sections.
  5. (C)You may see some other icons here as well. These will add additional functionality to your editor based on what plugins are included on your site. See the plug-in guides for more information. The Add Media icon is always available and is included on this page.

You have access to a toolbar, similar to MS Word. You may need to open this “TOOLBAR TOOGLE”. You can do this by clicking on the icon that looks like a bunch of boxes (D)
REMEMBER: Remember to click the blue “Update” or “Publish” button (on the right (E)), once your changes are complete.

Content Editing Example

5.1.Add Images/Media #

On the edit content screen (pages or posts) click “ADD MEDIA” (A)

Add Media Example A

 

  1. A modal window will pop up. You can drag image files from your computer directly onto this window in order to upload (A).
  2. Select the image you want to change options to or to add to page (B).

Add Media Example B

 

After the image is selected you can modify the “Attachment Details”

  1. (A) This is the URL. You can copy this if you want to create a link (guide) to go directly to the image file location. This can also be used to link to documents like .pdf, .doc, .xls, etc.
  2. (B) The title section is initially populated by the file name. This can be changed to something more legible and descriptive.
  3. (C) Alt Text should be filled out every time. This is used for Google searches and this is the descriptive text used for screen readers for accessibility purposes. Text should be descriptive to the image and kept at a reasonable length.
  4. (D) Alignment. Options are: left, centre, right, none. Left and right will ‘float’ the image to either side of the page making any text flow on the other side. Centre will align the image to the centre of the page forcing text to be above or below. None allows the image to stay within the flow of text.
  5. (E) Link to. Options are: None, Media File, Attachment Page, Custom Url.
    1. Media file will add a link to the image that will allow the user to go to the image file directly (full size) or to open the image in a lightbox, depending on how your site is setup.
    2. Attachment page will open the image up on its own page as the only content on the page with your site’s header/footer.
    3. Custom URL will allow you to add a link that will take the user to the url you enter.
  6. (F) Size. Depending on how your site is set up, you will see a variety of sizes to choose from. Use the smallest one you can to achieve the results you want.
  7. Click “INSERT INTO PAGE”  to finish adding the image to your page.

Attachment Details Example

6.Page Builder #

The powersport theme has a versatile page builder to allow you to manage your content in your pages and posts. Use of rows and columns give you the ability to develop pleasing layouts for your content. The use of widgets allows your content to be displayed in an attractive way.

6.1.1.Rows #

Initial View

Once you have a row on the screen, there are several options you can apply to it.

Initial Row View

A) Select the number and layout of columns. When you hover over this area, a few default options appear for you to select, or you can click on “Custom” and add in your own format using fractions of 1/6, 1/4, 1/3. For example: 1/4 + 3/4 or 1/4 + 1/4 + 1/2.

B) Click on the pencil icon to edit the row settings.

C) Duplicate the row when you click on the double page icon.

D) Trash the row when you click on the trash can icon. A confirmation not will appear.

E) Click on the + icon to insert a widget into the column area.

6.1.1.1.Rows General Settings Part 1 #

After Clicking on the pencil icon (note C above) a screen will pop up with general options. This has been broken into two images to make it easier to see.

Row General Settings A

  • Type:
    This drop down has three options.
    In container: any background colour, images, and all content will be contained within the site’s ‘content area’ settings.
    Full Width Background: Background colours and images will go to the edge of the screen but content inside of the row will remain within the ‘content area’ boundaries.
    Full Width Content: Background colours, images and content within the row will expand to the edge of the page.
  • Equal Height:
    All columns in the row will have an equal height. Selecting this will also open an option with options to choose how they are aligned: top, middle, bottom.
  • Background Image
    Selecting a background image brings up several new options shown in the “Row Background Image” image below.

    Row Background Image

     

    • Background Image Mobile Hidden: Hides the image on mobile devices where it’s not likely to be seen under content anyway. Select this if your page has a lot of large images to help mobile users load your page. Select a background colour that will be shown instead if you want it to be different than the normal background colour.
    • Background Position: Adjust this to suit your image. Typically center/center works well, but center/top or center/bottom might work to ensure that what you want someone to see is on the screen when people are scrolling when using a parallax effect.
    • Background Repeat: Only set this to repeat if you have an image that will look good repeating on the screen like a tile-able texture.
    • Full height row: This will make the row full height of whatever screen it’s shown on.
    • Parallax Background: This will open up an additional option for Parallax Background Speed. This is a special effect for background images to slide behind the content as you scroll down the page. Use images that you can still easily read the content over. These images should also have enough height to look good with the effect. There is no magic number for this. It depends on what the image is and the effect you’re going for. Images are typically 1800 pixels wide and anywhere from 600-1800 pixels high. Use as small an image as possible to keep page load times as quick as possible.
    • Parallax Background Speed: Choose from Slow, Medium, Fast, and Fixed. Choose whatever is appropriate for the image. Fixed will keep the image in place while the content flows over top while with the others, the background image moves at a different speed than the content.
  • Background Colour
    Select a background colour for your row. Choose a colour that will contrast well with your content so everything is still legible. Make sure you choose a colour that also suits the style of the website and your branding.
  • Mouse Based Parallax Scene
    This can get quite complicated to build, so we don’t support it for client use.
  • Video Background
    New field opens up when you select this for links to the video you’d like to use and the option to use a colour overlay on top of the video is shown. Select ‘mute video’ as an option and have a good looking preview image of the video that matches the size of your video to show while the video is loading on the page. Depending on your video, a first frame might work best.
  • Text Colour
    Choose from light or dark. This should change the text of items within the row unless the text colour is being set by another style or something we’ve done when styling your site. Use to make sure your text contrasts the best way with the colour of your background to maximize legibility.
  • Text Alignment
    This will set the alignment for all text and some other object within the row unless you specifically set that item to align differently in its settings. Nice to use if you want to align everything entered in that row but don’t want to have to align each item separately

6.1.1.2.Rows General Settings Part 2 #

Part 2 Image B

Row General Settings B

  • Padding Top & Padding Bottom
    Each row should have some padding to separate its content from the other rows on the page. Most rows should have the same padding so the layout of the site looks consistent. Look at this setting on other rows of existing pages to find out what your site is using. You might want to increase this in order to show more of a background image. Adjust to suit your content.
  • Extra Class Name & Row ID
    Some sites might have something here when the site was created to apply a specific style to the content of that row. The Row ID might be used for links to go to specific spots on your page: e.g. your site.com/aboutus/#mycontent The #mycontent would be your Row ID (don’t place the # symbol in the field, the site will automatically do that for you). If your website uses these features it will be mentioned in the guide sent to you.
  • Disable Row
    This will hide the row and content from view. Useful for a spot on your site where you might want to show announcements that you want to manually enter. This allows you to have an announcement and change it without having to set it up over time from scratch.

6.1.2.Columns #

Initial View

Once you have a row on the screen, there are several options you can apply to add columns to it.

Initial Column View

A) Select the number and layout of columns. When you hover over this area, a few default options appear for you to select, or you can click on “Custom” and add in your own format using fractions of 1/6, 1/4, 1/3. For example 1/4 + 3/4 or 1/4 + 1/4 + 1/2 to fill the column.

B) Click on the pencil icon to edit the column settings.

C) Trash the row when you click on the trash can icon. A confirmation not will appear.

D) Click on the + icon to insert a widget into the column area.

6.1.2.1.Column General Settings 1 #

After Clicking on the pencil icon (note B above) a screen will pop up with general options. This has been broken into two images to make it easier to see.

General Column Options 1

  • Enable Column Animation?
    Checking this will show a dropdown with animation options for how the column comes on the screen. You can add a delay (in milliseconds) so your columns can animate onto the screen at different times.
  • Boxed Style
    This will apply a shadow around the column and apply a hover effect when your mouse goes over the column area.
  • Centered Content Alignment
    This will horizontally center the text and some other content items in the column. Use this instead of centering each individual item if you want many things centered. This can be overridden by the individual item alignment settings.
  • Column Padding
    This provides a % base amount of space between your content and the edge of the column.
  • Column Padding Position
    Choose the sides you want your column padding to effect.
  • Background Color
    Add a background colour to individual columns.
  • Background Color Opacity
    Change the opacity of your column background so the row background or page background will show through.
  • Background Color Hover
    Change the colour the background of your column is when a mouse enters its area.
  • Background Hover Color Opacity
    Change the opacity of your column background so the row background or page background will show through when a mouse enters its area.
  • Background Image
    Add a background image to the column. When chosen, a checkbox will appear to enable ‘Scale Background Image To Column’. This will constrain the width of the image to the edges of the column. When adding an image, keep in mind the aspect ratio of the column and keeping your content legible inside the column.

6.1.2.2.Column General Settings 2 #

After clicking on the pencil icon (note B above) a screen will pop up with general options. This has been broken into two images to make it easier to see.

General Column Options 2

  • Font Color
    Change the colour of the text within the column. This doesn’t necessarily change all of the text colours because it can be overridden by specific widget settings and styles created for your site.
  • Column Link
    Add a link to the entire column. There is no setting for this link to open a new window or tab so it’s best to use it for internal links instead of external ones.
  • Margin top / Margin bottom
    Add spacing outside of the edge of the column area. Use this to ‘push’ your column up and down within the row to line it up. Keep in mind how it is viewed in mobile devices as well though.
  • Extra Class Name
    Some columns will have an extra class name because we have added a certain style to your site that requires it. This should be noted in your how-to guide if needed.

6.1.2.3.Column Responsive Settings #

The responsive options allow you to set what the column will do on different device sizes.

  • Width
    You can set the width of the column from here as well. This could impact how it fits with the other columns within the row.
  • Device
    Icons that show you the size of the device and the orientation (portrait, landscape)
  • Offset
    These drop downs will shift the column to the right by a column amount.
  • Width
    Change the width of the column on different devices.
  • Hide on Device
    Hide the entire column on certain device sizes.
  • Tablet Text Alignment
    Change the text alignment based on device size (typical tablet).
  • Smartphone Text Alignment
    Change the text alignment based on device size.

Column Responsive Options Example

6.1.2.4.Column Border Options #

Set a border on your column. This works well with the column padding option so your content isn’t touching your border.

  • Border Width
    Set the width of the border to suit your content.
  • Border Color
    Set your border colour using the colour picker.
  • Border Style
    Select the style of border you want to use.
  • Enable Border Animation
    With this checked, the border will be animated. You can delay the animation to time it with other animated objects on the page.

Column Border Options Example

6.2.Widgets #

Widgets are the tools used to display your content on your site. They range from a basic text editor to animated effects.

A) There are many ways to add a widget. Anywhere you see a + symbol, the widget popup will appear for you to choose which widget you’d like to add.

Add a Widget Example

6.2.1.Widget Popup #

The widget popup is a library of all of the widgets available to use in the layout builder. It has a few options to allow you to quickly find the widget you’re looking for.

A) Clicking on a + symbol in the layout editor will bring up the widget library.

B) You can segment these widgets into smaller groups. Nectar Elements are specific to the Powersport Theme. Structure will be widgets that relate to page layout or code. Content show widgets related to displaying content. If you have WooCommerce installed then there will be an option to show widgets that relate to your Woo Commerce tools.

C) You can use the search bar to search for the widget you’re looking for. This is often the fastest way to find a widget because there are so many to choose from.

D) Click on the widget you want and it will be placed in your layout related to where you clicked on the + symbol.

Widget Popup Example

6.2.3.Text Block #

The Text Block allows you to add content with the basic content editor that you would normally see on the blog page or if there wasn’t a layout builder. A more detailed description of how to use the basic content editor is found in our Basic Guides Add/Edit Content section. If you’re not familiar with using this tool, check that guide out. We will cover the options that are unique to the Text Block widget.

When added to the page (or when already on the page) hover over the widget and click on the pencil icon in order to edit the content.

A) Add animation to the text block for how it appears on the screen as the viewer sees it. When selected, you can add a delay in milliseconds (1000 is 1 second) so elements on your page animate in at different times.

B) The extra class name is used if we have a specific style that we’ve applied to the widget for customization on your site. This will be mentioned in your site’s guide.

C) Use the max width to contain your text block to a certain size on larger screens. For instance, it might make a single long sentence look better with a max width of 200 pixels and be easier to do it this way than create a complex column layout to achieve the same thing.

D) You can add many of the widgets from the widget popups through Shortcodes. These are more difficult to adjust after they’ve been entered compared to the widgets themselves. There are some common ones explained here otherwise it is better to use the actual widget.

E) Design Options tab is shown in the Design Options guide below.

F) The cog icon will allow you to set your options as a preset or default setting for this widget (this is common with all widgets). This is useful if you find yourself using the same settings over and over again.

Text Block General Settings

 

6.2.3.1.Text Block Design Settings #

The Design Options for the Text Block allow you to add some customization to the Text Block through some basic CSS settings.

  • CSS box
    • Margin: Applies space to the edges of the text container to give it space from other elements on the page. Use px for pixels (10px) or use % for percentage (5%) Try to keep this consistent with how the site is laid out. If you use a lot of different spaces around your objects, your page will look messy and unprofessional.
    • Border: Use a pixel amount (1px) to create a border at the edge of the Text Block. The pixel amount will be the thickness of the border. To the right are options to change the border colour, style (solid, dots etc), and Radius (rounded corners).
    • Padding: Applies to the space between the edge of the text block and the content inside. If you’re using a border it will be important to also use this so your content doesn’t touch the border. Use px for pixels (10px) and use % for percentage (5%) Try to keep this consistent with how the site is laid out. If you use a lot of different spaces around your objects, your page will look messy and unprofessional.
  • Background: Set a background colour or background image to the text block. If you select an image, make sure it doesn’t conflict with your content. You want to make sure your content is legible. Often just a background colour is more appropriate and use the row/column settings to apply an image.
  • Theme Defaults Dropdown menu: These apply if an image is set. The default will align the image top left and it will display at whatever size it happens to be. Cover will make the image fit within the size of the text block. Make sure your image will fit without having to be stretched or it will look like it’s of poor quality. Contain will make the entire image fit within the text block. This would be very tricky to use in different screen sizes well. No-repeat will keep a small image on the top left of the text block. Repeat would be good for an image that you can seamlessly tile across the background. Cover and repeat are likely the best options.
  • Box Controls: This simplified controls check box just allows the CSS box options to have one input so if you want the same margin, border, padding around your text block you just have to enter the number in once instead of for each side.

Text Block Design Options

6.2.3.2.Text Block Nectar Shortcodes #

In the text block widget, the nectar shortcut button brings up a window that allows you to play a widget inside of the text block itself. These are harder to modify once they are placed because they don’t bring up the same options window as an actual widget does. Instead, it has a text format of the options for the widget called a shortcode. Because of this there are only a few of these shortcuts we like using in this way because it’s easier for our clients to modify their content with an options window. We will cover the top used ones and you can explore the others.

Icon

A) Choose ‘Icon’ from the Nectar Shortcodes list.

B) Choose they style of icon you want. Recommendations for use are under the choices.

C) Choose the colour of the icon from a list of colours set up to your site’s branding.

D) Choose the font set your icon comes from. Try to keep the same set or similarly styled icons through the site for consistency.

E) Choose your icon from the list.

Click ‘add shortcode’ to add the code to the page.

Icon Shortcode Example

Button

A) Select ‘button’ from the nectar shortcode list.

B) Choose the size of your button. Typically we chose medium on the sites we build. Consistency is best, but there might be some occasions where a jumbo button is appropriate.

C) Paste the Link URL into this box. It should look like http://website.com or https://website.com.

D) Enter the text you want displayed on the button. Keep this short and to the point.

E) Open link in a new tab if the link you’re using is to an external site or to a file like a PDF.

F) Choose the style of the button. Try to keep this consistent with other buttons on the site. You don’t want 6 different kinds of buttons.

Button Shortcode Example

6.2.4.Centered Headline #

The Centered Heading is used often for the headline for each section of content on a page.

When added to the page (or when already on the page) hover over the widget and click on the pencil icon in order to edit the content.

A) Type your heading in the content area. You don’t usually need to format it as the widget makes it a headline.

B) If you do need to format it, keep it simple with changing the paragraph tag to maybe Heading 1 or Heading 2 with bold or italics. The other settings might give you questionable results.

C) Enter the subtitle here. This will be placed under the line from the heading.

Entered Heading Example

6.2.5.Single Image #

The Single Image widget is good if you want to keep your images separate from your text blocks for layout purposes. The Single Image will make your image take up the width of the column you have it in. Sometimes this will make the image too wide so you might want to have your image inside of a text block instead of where you have different controls over how the images are handled.

When added to the page (or when already on the page) hover over the widget and click on the pencil icon in order to edit the content.

  • Image: Select the image you want to use from the media gallery by clicking on the + symbol
  • Image Alignment: Select how you want the image to align on the page. With the image being constrained in a column usually align center will work well.
  • CSS Animation: Select how the image animates onto the screen when it comes into the viewer’s view.
  • Animation Delay: Enter the delay (in milliseconds, 1000 = 1 second) to control when the image animates in compared to other elements you might be animating in.
  • Link to Large Image: This will make a link for the image to open up large in its own window.
  • Image Link: Copy a URL here to have the image go to a file or web page.
  • Extra Class Name: Used if custom CSS is being applied to specific elements in your theme. If your theme is doing this it will be mentioned in your specific how to guide. This one isn’t typically used.
  • Box Shadow: Applies a shadow around the image making it look like it’s floating above the background.
  • Max Width: Normally the image is constrained 100% inside of the column it’s in. This setting allows the image to go outside of the column’s dimensions.

Single Image Example

6.2.6.3.Touch Enabled Slider #

The Touch Enabled & Spaced slider works well on mobile devices and touch screen computers. It provides a large central image with a preview of the next and previous image that you can touch and swipe over (also using the mouse).

  • Image source: Choose Media Library. If you choose external URLs there is the risk that those URLs will change outside of your control. Use this if you’re in control of those URLs (through a content distribution network for example).
  • Gallery Type: Choose Nectar Slider Style for this guide.
  • Images: Click on the + symbol to add additional images. Click on the X on an image to remove it. You can drag and drop the images in a different order.
  • Image Size: This will set the height of the slider. Typically we set the width to 1800px especially for full width slides. Make sure your images are sized accordingly to prevent quality issues. 1800xheight.
  • Controls: Pagination provides wider bullets under the slider to navigate from slide to slide. Material Pagination provides a more classic style bullet to navigate from slide to slide. Arrows show arrows between the main image in the center and the previews on the edges. None show no navigation controls . The slides can still be ‘grabbed’ by the mouse and swiped.
  • Columns: Set the number of images to show on different devices.
  • Free Scroll: Sets the ability to ‘flick’ the slider to slide through several slide at once.
  • Enable Auto Play: Make the slider automatically slide without the user interacting with the slider.
  • Auto Play Duration: Set the time each image advances to the next.
  • Box Shadow: Places a drop shadow behind the images in the slider.
  • On Click: Pretty photo will open the image larger in a lightbox window. Custom link opens a new field where you can enter URLs for each image in order. Might be easier to do this in an external document than to copy/paste it over.
  • Extra Class Name: Used if custom CSS is being applied to specific elements in your theme. If your theme is doing this it will be mentioned in your specific how to guide. This one isn’t typically used.

Touch Enabled Slider Options Example

6.2.7.Button #

The Button widget is a great way to attract the viewer’s attention to a way of accessing additional information on your site.

When added to the page (or when already on the page) hover over the widget and click on the pencil icon in order to edit the content.

  • Size: Choose the size of your button. Typically the sites we design use the medium size.
  • Link URL: Paste the link of the page you want the button to go to. Should be formatted like http://website.com/page
  • Text: This is the text that will be displayed on the button.
  • Open Link in New Tab: Select this if you use an external link outside of the site or if you’re linking to a document like a pdf.
  • Style: Select a style that matches other button styles through the site.  It’s better to look consistent with one or two styles than a lot of styles.
  • Button Color: Choose a colour from the ones branded for your site.
  • Color Override: Use this if you want a colour not offered in your branded colours. It’s still a good idea to keep the colours on your site consistent.
  • CSS Animation: Animate how the button appears on the screen when the viewer sees it.
  • Icon Library: Choose the type of icon you want to go with your button text.
  • Icon: Select your icon. If you choose none for icon library then this option doesn’t appear.
  • Margin: This allows you to adjust the distance the button appears from other elements around it. Enter the distance in pixels e.g. 15px.
  • Extra Class Name: This is used if there is custom styles added to your button for your site. This will be mentioned in your site’s guide.

Button Settings Example

6.2.8.Icons #

When added to the page (or when already on the page) hover over the widget and click on the pencil icon in order to edit the content.

  • Icon Library: Choose the font library that contains the icon you wish to use. Often the font awesome library is used on the sites we design
  • Icon: Choose the icon from the list available
  • Icon Size: The default size is 50px. Preview the default size before adjusting larger or smaller. No need to add px after the number, as the widget does that automatically.
  • Icon Style: Choose from icon only, icon with border, icon with animation effect. Choosing border or animation will bring up an option to choose the border thickness.
  • Icon Color: Choose your icon’s colour from your site’s branded colours.
  • Link URL: Have the icon link to a webpage or file.
  • Open Link in New Tab: If the icon links to an external link or to a file, it’s best to use this option.
  • Icon Padding: This will adjust the space between the icon and the border, or provide space around the icon if there is no border.
  • Margin: Adjust the spacing around the icon and other elements on the page.

Icon Settings Example

6.2.9.Text with Icon #

Text with Icon is most often used on the contact page of the sites we design to use the icon to show off the different kinds of contact information. It displays an icon to the left of the text content.

When added to the page (or when already on the page) hover over the widget and click on the pencil icon in order to edit the content.

  • Icon Type: Choose from a Font Icon (font awesome icon library) or an image icon (upload your own image). If you’re uploading your own image make sure you create it to be the size you want to appear. If you upload your own image, the options for icon and colour are unavailable.
  • Icon: Choose your icon. There is a space to search, but you must type in ‘icon-‘ to make the search useful.
  • Color: Choose from the colours selected for the branding of your site.
  • Text Content: Add your content here. Keep it simple so it’s easy to understand. Using Bold instead of a range of headline text might be more appropriate at times.

Text with Icon Settings Example

6.2.10.Fancy Unordered List #

The Fancy Unordered List allows you to use icons instead of the usual bullets for unordered lists.

When added to the page (or when already on the page) hover over the widget and click on the pencil icon in order to edit the content.

  • Icon Type: Choose from a Dash, None and Font Icon.
  • Icon: Select your icon from the list. Search by typing ‘icon-‘ then the icon name you’re looking for.
  • Color: Choose the colour of the icon from a list of colours branded to your site.
  • Alignment: Select how you would like the list aligned on your page.
  • Enable Animation: Have the icons and list items animate onto the screen. You can also choose the delay in the animation.
  • Text Content: Add your unordered list here. You can also add in additional content like the text block, but any lists in this content area will have the settings above applied to it.

Fancy Unordered List Settings

6.2.11.Testimonial Slider #

When added to the page (or when already on the page) hover over the widget and click on the pencil icon in order to edit the content.

The Testimonial Slider has two areas where you can set the options.

A) Click on the pencil icon to edit the slider itself and the individual slides.

B) Select the testimonial you want to edit or click on the + Symbol to add another testimonial.

C) Click the pencil icon to edit the testimonials content.

Testimonial Slider Edit Example

Testimonial Slider Settings

  • Style: Basic (default) includes a quote icon above the testimonials and bullets indicators under the slider. Minimal has just the testimonial information and a number count of the number of testimonials under the slider. Use of the multiple visible sliders is discouraged due to the ability to have testimonials that are about the same length. Having testimonials that are long beside short ones isn’t likely to look good.
  • Star Rating Color: Choose a colour from the ones branded for your site to use for Star Rating if that’s being used.
  • Auto Rotate: Set the speed for the slider to auto rotate.
  • Disable height animation: By default, the slider will adjust its height (push content below the slider down) to accommodate larger and smaller testimonials. When it’s disabled, the slider will take the height of the longest testimonial.

Testimonial Slider Settings

Testimonial Settings

  • Image: Adding an image will replace the quote icon with the image. Images need to be sized to the final dimensions wanted.
  • Name: Add the name for the testimonial.
  • Subtitle: Add a subtitle to go under the name.
  • Quote: Add the testimonial here.
  • Star Rating: Add a star rating under the testimonial. We typically don’t turn this on.

Testimonial Settings Example

6.2.12.Toggle Panels #

Toggle Panels are often used for FAQs or managing a lot of content on a page.

When added to the page (or when already on the page) hover over the widget and click on the pencil icon in order to edit the content.

A) Click on the pencil icon to edit the toggle settings.

B) Select the section you want to edit, or click ‘Add Section’ below to add a new section.

C) Click on the pencil icon here to edit the section’s settings.

D) Click on the + symbol to add widgets to the toggle section. Even though you can add any widget to this section, it should be kept fairly simple and usable.

Toggle Panel Example

Toggle Panel Settings

  • Style: Choose between the default and minimal style.
  • Allow Collapsible All: Select if you want to allow all of the panels to be collapsed at the same time.

Toggle Panel Settings Example

 

Toggle Section Settings

  • Title: What you write in there will be displayed in the closed section as the title.
  • Color: Change the colour of an active toggle. Choose from the colours branded for your site.

Toggle Section Settings Example

6.2.13.Video Player #

You can add a video in the text block by copying and pasting a Vimeo or YouTube URL in the content window, but the video player widget gives you a few more options with how the video is displayed.

When added to the page (or when already on the page) hover over the widget and click on the pencil icon in order to edit the content.

  • Video Link: Paste the video URL here. Follow the link provided to see what video formats are accepted. YouTube and Vimeo are common.
  • Video Width: Select how wide your video is displayed. The video by default fills the width of the column it’s in.
  • Video Aspect Ratio: Select the aspect ratio that best matches your video.
  • Alignment: Choose how the video is aligned. A centre alignment works well when viewing on different devices.
  • Extra class name: Used if custom CSS is being applied to specific elements in your theme. If your theme is doing this, it will be mentioned in your specific how to guide. This one isn’t typically used.

Video Player Settings Example

Help Guide Powered by Documentor
Suggest Edit