Premium Guides

click on thumbnails to bring up larger images

Refer to the basic wordpress guide for how to use the wordpress back end and basic site editing.

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.

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

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.

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.

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.

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.

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

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

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

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 Salient 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

2.2.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.

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

 

2.2.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

2.2.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

2.3.Centered Headline #

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

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

2.4.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.

  • 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

2.5.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

2.6.Button #

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

  • 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

2.7.Icons #

  • 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

2.8.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.

  • 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

2.9.Fancy Unordered List #

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

  • 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

2.10.Testimonial Slider #

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

2.11.Toggle Panels #

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

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

2.12.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.

  • 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

2.14.Flip Box #

Front Side Settings

  • Front Box Content: This will be the text that the viewer will initially see on the box before they flip it over. Think of it as an attention grabber.
  • Background Image: Adds an image that will be behind the Content on the front. How much of the image that shows will depend on the image size and the size of the box. If this is something already setup on your site we will provide ideal image sizes in your site’s guide.
  • Background  Color: Change the colour of the box before it gets flipped.
  • BG Color Overlay on BG Image: This will set the color you chose as a transparency over the background image you chose.
  • Text Color: Choose light or dark to contrast with your background image or colour.
  • Icon Library: Choose what font library you want to use if you want an icon to go with your front box content.
  • Icon Above Title: Choose the icon you want to show above the title.
  • Icon Color: Choose your icon colour from the colours branded for your site.
  • Icon Size: The default icon size is 60px. Preview at this size, then adjust accordingly.

Flipbox Front Settings Example

 

Back Side Settings

  • Back Box Content: This uses the basic text editor the same as the text block. The amount of information you put in here will directly impact the size of the box. It might take some trial and error to find the balance between content and how the box looks on different screen sizes.
  • Background Image: Sets the background image for the backside of the flip box.
  • Background Color: Sets the background colour for the backside of the flip box.
  • BG Color Overlay on BG Image: This will set the colour you chose as a transparency over the background image you chose.
  • Text Color: Choose light or dark to contrast with your background image or colour.

Flipbox Backside Settings Example

 

Flipbox General Settings

  • Min height: The default min height is 300px. Set a height that works well with your content on multiple screen sizes. Set in pixels but you don’t have to add px after your number.
  • Horizontal Content Alignment: Set how your content is aligned horizontally in the box.
  • Vertical Content Alignment: Set how the content is aligned vertically in the box.
  • Flip Direction: Set which direction the box flips from the front to the back.

Flipbox General Settings Example

Help Guide Powered by Documentor
Suggest Edit