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    Multi-Purpose QR Code Generator

Documentation: Multi Purpose QR Code 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 QR Code" 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 QR Code"
  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 the QR Code Content

  1. Open the element's settings
  2. Under the "General" tab, select the type of QR code wanted from the dropdown box.
  3. Fill out the below fields for the information to record on the QR code.
    1. NOTE: You can insert shortcode into almost any QR code content fields in the "General" tab.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Add a Logo or Short Text to the middle of the QR code

  1. Open the element's settings
  2. Under the "Design" tab, select either "Logo" or "Text" from the buttons.
    1. For a logo, upload an image to the "Center Logo" field.
    2. For text, add the content to the "Center Text" field.
      1. You can also change the text color with the "Center Text Color" field.
      2. 1-5 characters are recommended for the size as more characters will overflow the QR code or make it difficult for QR code applications to read it.
  3. You can choose to set a background color for the logo/text with the "Logo/Text Background Color" field.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Style the QR Code Colors

  1. Open the element's settings
  2. Under the "Design" tab, you can change the "Foreground Color" (default is black) and the "Background Color" (default is transparent).
    1. Your foreground and background colors should have a fairly high contrast so QR code applications can easily read it.
  3. You can also set a background image with the "Background Image" field.
    1. Your background image should be fairly plain and contrast with your foreground color.
    2. If you have a busy background image, choosing a 50% transparent background color might help QR code applications read it.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Change the QR Code Size

  1. Open the element's settings
  2. Under the "Design" tab, enter a maximum width in the "Width" field
    1. You can use any CSS unit (px, %, em), but it defaults to pixels if no unit is given.
    2. The default size of the QR code is 100% of the container with a max width of 1000 pixels.
  3. Click "Save" to apply the changes
  4. Update the page and view it to see the results!


Responsive behavior

Sizing note: the QR element is responsive, and will scale to fit the width of its container on smaller screen sizes.  This includes the logo and center text if they are applied to the element.