FUSION BUILDER LIVE  Compatibility Underway!

Ticket Support Hours: Monday-Friday 9am-5pm Eastern
Please note ticket response may take up to 24-hours.

Okay
  Print

Home    Articles    Horizontal & Vertical Duo Button

Documentation: Horizontal & Vertical Duo Button Element

Table of Contents

  1. Software Requirements
  2. Recommended PHP Configuration Limits
  1. Installation
  2. Registration
  3. User Guide

i. Software Requirements

  • WordPress 4.6 or higher
  • PHP 5.3 or higher (5.6 recommended)
  • MySQL 5.6 or higher

ii. Recommended PHP Configurations Limits

  • max_execution_time 180
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M

1. Installation

  1. Download the plugin from your CodeCanyon "Downloads" page
  2. Open WordPress, go to plugins, then "Add New"
  3. Click "Upload Plugin"
  4. Upload the plugin .ZIP downloaded from CodeCanyon, then click "Install Now"
  5. Activate the plugin.
  6. Go to Fusion Builder > Settings
  7. Make sure the "ArcticLune Duo Button" element is checked. Click Save Settings.

The element will now be available to add to your pages!

2. Registration

To enable updates including new features and bug fixes, you’ll need to register the plugin. 

After the plugin is activated in the WordPress plugin list, a notification bar will appear near the top of the screen with registration instructions. Once that process is complete, plugin updates will be activated. 

If for whatever reason the notification bar does not show up, you can also register by clicking "Registration" underneath the plugin name. This registration link will only show up if the plugin is activated. 

You can check for updates by going to the WordPress plugin list, and clicking "Check for updates" below the plugin description. 

3. User Guide

This element is designed to be used with the Fusion Builder page builder interface. 

Quick Start Guide

  1. Click the "+ Element" button, then "ArcticLune Duo Button"
  2. Open the element's settings
  3. Use the fields provided to add the popup content, and customize other settings as needed. Note there is an "Animation" tab where you can set an intro animation to draw attention to the element when it comes in to view.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Change Between Horizontal & Vertical

  1. Open the element's settings
  2. Under the "General" tab, set "Orientation" to "Horizontal" or "Vertical" depending on how you want the button to display
    1. If you set this to "Horizontal", you can also choose to display the button "Vertical on Mobile" to help certain button display better responsively.
  3. Click "Save" to apply the changes
  4. Update the page and view it to see the results!

Change the Center Icon or Text

  1. Open the element's settings
  2. Under the "General" tab, set the "Center Option" to either "Text" or "Icon" depending on which you want displayed.
    1. If "Icon" was chosen, use the FontAwesome selector to choose the icon to display in the "Center Icon" field.
    2. If "Text" was chosen, use the "Center Text" field to enter the 2-3 character text to show.
  3. Click "Save" to apply the changes
  4. Update the page and view it to see the results!

Style Each Duo Button Section

  1. Open the element's settings
  2. Under the "Design" tab, choose the area to modify in the "Choose Button Section to Modify" field.
  3. Choose the button colors, popover colors, and button icon/icon styling.
    1. You can also choose to copy the primary button & popover colors to the secondary button by setting the "Copy Primary Button Colors" and "Copy Primary Button Popover Colors" options to "Yes"
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Adding a Fusion Builder Modal

  1. Open the element's settings
  2. Under the "General" tab, set the "Primary Modal Window Anchor" or "Secondary Modal Window Anchor" to the same text as in the "Name Of Modal" field in the Fusion Builder Modal element.
  3. Click "Save" to apply the changes
  4. Update the page and view it to see the results!

Adding a Popover

  1. Open the element's settings
  2. Under the "General" tab, set the "Display Popover on Primary Button" field or ""Display Popover on Secondary Button" field to "Yes" depending on which section of the Duo Button you want to trigger the popover
  3. Next set the heading, content, position, and trigger for the popover for the desired button.
  4. Under the "Design" tab, you can modify the popover styling differently for each Duo Button section.
  5. Click "Save" to apply the changes
  6. Update the page and view it to see the results!

Responsive behavior

Sizing note: the Before/After element is responsive, and will scale to fit the width of its container on smaller screen sizes.  You may also set the "Button Span" field (under the "Design" tab) to "Yes"  for the button to always span the full-width of its container.