03009 – How to setup a Button Block

The Button Block allows you to add a button anywhere on your Campaign or Course pages.
Below is an overview of the various Button Block settings.

Button Label

Add the text you want to appear on your button.
You can also use the formatting buttons: Bold, Italic, Underline, and Strikethrough, to change your button label’s typographical emphasis.

Button Type

From the drop-down, select the width you prefer for your button from the options provided: i.e. Full Width | 90% | 80% | 70% | 50% | 35% | Padding Defined

Font

This tool will help you fully customize the font style of your button text.

  • Font Family
    Use this feature to change your button text’s Font type.
    Click on the drop-down and select the Font type you want.
  • Font Size
    This changes the size of your button text.
    Simply click on the slider and move it left or right to increase or decrease the text size.
  • Line Height
    This feature increases or decreases the space between the lines of text.
    Click on the drop-down and select the line height you prefer.
  • Text Color
    This feature changes the color of your button text.
    To use custom colors, simply paste the Hex code of the exact color you want in the field provided e.g. #000000 = black, or click on the Color Picker button to the right of the field.
    This will open the Color Wheel, where you can select whichever color you prefer.

 

Icons

This feature allows you to add an icon next to your button text.

  • Icon Drop-down (Left/Right)
    From the drop-down menu, select the icon you prefer.
  • Icon Color
    This feature changes the color of your button icon.
    To use custom colors, simply paste the Hex code of the exact color you want in the field provided e.g. #000000 = black, or click on the Color Picker button to the right of the field.
    This will open the Color Wheel, where you can select whichever color you prefer.

 

Subtext

This is a small text that will appear below the Button Label.
This will allow you to add more information about the button.

  • Label:
    The text that you want to appear below your button label.
  • Font Family:
    Use this feature to change your subtext’s Font type.
    Click on the drop-down and select the Font type you want.
  • Font Size:
    This changes the size of your subtext.
    Simply click on the slider and move it left or right to increase or decrease the text size.
  • Text Color:
    This feature changes the color of your subtext.
    To use custom colors, simply paste the Hex code of the exact color you want in the field provided e.g. #000000 = black, or click on the Color Picker button to the right of the field.
    This will open the Color Wheel, where you can select whichever color you prefer.
  • Margin Top:
    The space between the main button label and subtext.
Background

This feature allows you to change the background color of the button block.

  • To change the background color, you can either add a Hex code in the field provided or choose a color from the Color Wheel.
  • If the Color Wheel is closed, simply click on the Color Picker button to the right of the background field.

 

Hover Style

This feature allows you to change the style of your button upon hovering.

  • Color
    Change the color of your button label upon hovering.
  • Background Color
    Change the color of your button upon hovering.
  • Border Color
    Change the color of the button border upon hovering.

 

Borders

This feature allows you to add a border around your button.

  • Borders
    Select whether you want a full border where the button is wrapped in a border, or simply one side of the button has a border e.g. None | All Border (full border) | Top Border | Bottom Border | Right Border | Left Border | Left and Right Borders.
  • Border Type
    You can select the style for your border.

TIP! In order to see the border around your button, you need to select one of the actual style options available e.g. Solid, dashed, or dotted. If the setting is left on No Border Style, your selection in the Borders setting will not work.

  • Border Size
    You can change the thickness of the border by selecting the pixel width you prefer.
  • Border Radius
    You can add rounded edges to the border by selecting the relevant pixel width. You may now control each side by entering the number on Top Left, Top Right, Bottom Right and Bottom Left box.
  • Border Color
    You can change the color used for the border. To use custom colors, simply paste the Hex code of the exact color you want in field provided e.g. #000000 = black or click on the Color Picker button to the right of the field.

 

Link

This feature allows you to add a link to your button.

  • Link
    From the drop-down menu, the options are an internal page, an external link, optin boxes and others.

    • To add an internal page, simply select one of the page options available.
    • To add an external link, simply scroll down to the bottom of the menu and select the Insert URL. Then add your URL to the field provided. Make sure it is a valid and complete URL that starts with http:// or https://
      TIP:
      You can use your Portal Page’s URL to redirect your members.
    • Optin Boxes – On clicked, the optin box will appear on the page.
    • Other
      Notification Popup – You may link the button, once clicked, it will display a browser notification pop up. For more details, read Web Notifications
  • Open in New Tab
    Select YES or NO, depending on if you want the link to open in a new tab or not.
  • Optional: No follow
    This feature will allow you to set your links to no-follow. This is important if you want search engines to ignore your link.
    If this is enabled, your link will not impact search engine rankings.
  • Optional: Pass URL parameters to next URL
    This feature allows you to pass tracking tags or data parameters from one page URL to another. Enable this feature if you are applying tracking tags to your URL or using certain features that require data to be passed on in order to work e.g. Auto Deadlines, Webinars, Viral Share tool, etc.

The options below are only available on the Course Page

  • Link

    • Open Members Directory
      Choose this option if you want to display the member directory after clicking the button, instead of the normal way of going to the Avatar Profile -> Members
    • Members of Course
      This will open a pop-up window showing only members who have access to a specific course/course page they are viewing. With this, they can communicate and send private messages with each other and connect.
Alignment

The feature allows you to re position the button on the page.

  • Align
    You can choose either Left, Center or Right alignment from the drop-down

 

Spacing

This feature allows you to add more space around your Button Block.

  • Padding
    You can add padding around your text, so that there is additional space. Simply add the numeric (pixel) value to the Top, Bottom, Right or Left Padding field provided.
    This is particularly helpful if you want to add spaces inside your Button block border.
  • Margin
    You can add margin around your text, so that there is additional space.
    Simply add the numeric (pixel) value to the Top, Bottom, Right or Left Margin field provided.
    This is particularly helpful if you want to add spaces outside your Button block border.

 

Options

This is a specialized feature for your Button Block.

    • Audience
      If you want to take advantage of Audience segmentation, this is a great tool to use.
      It allows you to set up a custom link/URL that will redirect users when the button is clicked for each Audience group that you have created.

      To use this feature
      From the drop-down menu, select the Audience you created in the Boosters section.
      Once open, you will see an individual text field for each Audience group.
      Simply add in the custom URL/Link you want to use for each group.

  • NB! Use this link to access page
    To ensure the Audience feature will work, use this Audience page Url in your marketing emails, instead of the standard page Url.Simply replace the XXX, with the Email merge field used by your Emailing system. That way, when a user registered to a specific Audience group accesses this page, your site will pick up their email and then show the relevant button linked to that Audience group.
    Customers not registered to an Audience will simply see the default button text you added to the top Button Label field.

 

Animation

This tool allows you to add animation effects to your Button Block.

  • Type
    From this drop-down you can choose a trigger to activate the animation i.e.
    + None = no animation will be applied
    + On Page Load = the animation is triggered as the page loads
    + On Page Scroll = the animation is triggered only when the user scrolls to that section.
  • Style
    This feature adds an animation style to your Button Block. Simply choose the preferred option from the dropdown menu.
    + Fade In = the Button block will fade in from the background
    + Scale In = the Button block scales in from the background
    + Top = the Button block will slide in from the top
    + Right = the Button block will slide in from the right
    + Bottom = the Button block will slide in from the bottom
    + Left = the Button block will slide in from the left
  • Delay (ms)
    If you want to add a time delay for when the Button Block appears, simply add the delay in milliseconds e.g. 3000ms will be 3 second delay.

 

Mobile

This feature allows you to adjust the size of the font as well as adjust the padding and margin of your Button block when in mobile view.

  • Font Size
    You can enter the size of the text for mobile view
  • Padding
    You can add padding so that there is additional space. Simply add the numeric (pixel) value to the Top, Bottom, Right or Left Padding field provided.
    This is particularly helpful if you want your Button block to automatically add spaces inside your Button block border when in mobile view.
  • Margin
    You can add margin so that there is additional space.
    Simply add the numeric (pixel) value to the Top, Bottom, Right or Left Margin field provided.
    This is particularly helpful if you want your Button block to automatically add spaces outside your Button block border when in mobile view.

 

Display

This feature allows you to choose the type of device you want the Button block to display.

  • Display
    From this drop-down, you can choose which device you want to display the Button block
    + All Devices = the Button block will be displayed in both desktop and mobile devices
    + Desktop Only = the Button block will be displayed in desktop devices only
    + Mobile Only= the Button block will be displayed in mobile devices only

That’s it, click on SAVE CHANGES and you are done!