Documentation : Inline CTA Builder

Inline CTA Builder – Responsive Call To Action For WordPress

Installation Instructions

  • Unzip inline-cta-builder.zip
  • Upload all the files to the /wp-content/plugins/
  • Activate the plugin through the ‘Plugins’ menu in WordPress.
  • For customizing the plugin’s settings, click on Inline CTA Builder menu in WordPress left admin menu.
  • To display the Inline CTA Builder in the frontend, please use automatically generated shortcode from Inline CTA Builder Usage metabox or you can even use shortcode generator displayed on list of Inline CTA builder posts.

Plugin Introduction

A standout amongst the most powerful cta builder platform with 50 pre available templates with simple text & button, Text/Image/Button CTA, Text/Video/Button CTA and 1 advanced Duet CTA templates layouts in an most attractive and easy way. Our plugin also provides the feature to create your own custom CTA using Inline CTA Builder. Display CTA using generated shortcode.
Once the plugin is installed and activated you will find a menu named “Inline CTA Builder” in the left menu bar of the admin menu. Once you click on that menu , you will go to the plugin’s listed page and you will also see “Add New CTA” button to create new call to action layer post, just click on that button you will go to the Inline CTA Builder page where you can create new call to action layer with many configuration settings.
Basically, there are 2 main metabox settings i.e., Display Settings and Configuration Settings.
There are mainly 2 sub menus i. to Add New CTA and Import/Export CTA Settings.

B) Inline CTA Builder Lists

Inline CTA Builder All Lists Page

This is the landing page for our plugin. Here you can see the listing of the created Call to action post data of post type “inline-cta-builder”. Here you can see Add New CTA button at top of Inline CTA Builder listing table. For creating a new Inline CTA Builder, you will simply need to click on Add New CTA submenu of our plugin or click on the Add New CTA button in the Inline CTA Builder’s listing table. You can add, edit, delete or create duplicate Inline CTA Builder from here. Once you click the button, you will be redirected to the new cta builder page with 2 main settings.


C) Add New CTA Steps

Inline CTA Builder Add New CTA Page

Maximize your site views, unique visits, brand awareness and boost your conversions of your business, by creating unlimited call to action layer section and display it in a unique style on your site. This plugin is useful since you can create multiple CTA as per your requirement and add shortcode anywhere you prefer.There are basically 2 main plugin settings while creating CTA which are described below more briefly.


D) Display Settings

Inline CTA Builder Display Settings

In this settings, you can pre available template layouts or create your own custom CTA using CTA builder. Our plugin provides 50 pre available template which is divided into 4 layout for simplicity as Simple Text CTA, Text & Image CTA, Text & Video CTA and Advanced CTA templates.

E) Available Template Design Settingstop

Inline CTA Builder Available Template Settings

Pre Available templates layouts are briefly defined below:

  • a) Simple Text CTA : In this layout, there is total 19 templates where you can display header text, description using WP Editor and buttons as per template defined.
  • b) Text & Image CTA : In this layout, there is total 19 templates where you can display header text, description using WP Editor, default image or upload your own custom image and buttons as per template defined.
  • c) Text & Video CTA : In this layout, there is total 11 templates where you can display header text, description using WP Editor, video and buttons as per template defined.
  • d) Advanced CTA : In this layout, there is total 1 advanced templates where you can display 2 header text, 2 image (left and right section) and 2 buttons as per template defined.

Using our plugin, you can even create your own custom CTA. You can find the custom elements on left section which can be simply drag and drop to CTA builder right section to create custom CTA.


F) Custom Design Settings

Inline CTA Builder Custom Design Settings

  • a) Title Text : Simply drag this element on right CTA builder section and click on it or click on edit icon shown on hover which opens “Inline CTA Custom Element Settings” popup form
    to configure its customization options.
    In Title Text Custom element, you can add simple custom heading text. This elements has 4 advanced tab settings for customization.Inline CTA Builder Custom Design Settings

    • 1. Attribute Options: Here, you can fill custom text and your own html title class required.
    • 2. Design & Layouts: Here, you can customize many design options such as set your own custom width(%) , height (in px), top , left position, z-index, line height , letter spacing, tet align and padding as well.
    • 3. Typography: In this settings, you can set font family, font size, font color, weight , transform for title header text.
    • 4. Animation Settings: In this settings, you can set animation effect for title header text and set its duration and delay time.
  • b) HTML Content : Simply drag this element on right CTA builder section and click it or on hover, click on edit icon which opens “Inline CTA Custom Element Settings” popup form
    to configure its customization options.In HTML Content element, you can add content using WP Editor.
    This elements has 4 advanced tab settings for customization.Inline CTA Builder Custom Design Settings

    • 1. Attribute Options: Here, you can fill content using WP Editor or even you can add shortcode as per your requirements.
    • 2. Design & Layouts: Here, you can customize many design options for this element such as set your own custom width(%) , height (in px), top , left position, z-index and padding as well.
    • 3. Typography: In this settings, you can set font family and text transform for content.
    • 4. Animation Settings: In this settings, you can set animation effect for description and set its duration and delay time.
  • c) Custom Button : Simply drag this element on right CTA builder section and click it or on hover, click on edit icon which opens “Inline CTA Custom Element Settings” popup form
    to configure its customization options.In this element, it helps you to add button on your custom CTA Section. You can add this element which works as button unlimited times.
    This elements has 6 advanced tab settings for customization.Inline CTA Builder Custom Design Settings

    • 1. Attribute Options: Here, you can fill button text and its custom class. Also, you can set button link type as internal link, external link, popup trigger type or scroll effect type. In internal link you can choose any link of pages. In external link, you can add custom url link, for popup trigger options it has 2 options as on click button, open popup with iframe (video such as youtube, vimeo and html5) or simply add shortcode on popup form. For scroll effect, on click button, it will scroll to specific div id wrapper.
    • 2. Icon Settings: This element will works as button where you can even add icon. There are basically 5 pre available icons (Font Awesome, Dashicons, Genericons, Icomoon, Linecons ) or you can even upload your own custom icon. Also set icon postion as top, left and right as well.
    • 3. Design & Layouts: Here, you can customize many design options for this button element such as set your own custom width(%), top , left button position, button text alignemnt.
      Even set your custom background color, background hover color, border color, radius, enable icon & text divider, set icon divider color, set button text padding.
    • 4. Typography: In this settings, you can set font family, font size, color, font hover color,font weight, text transform for button.
    • 5. Animation Settings: In this settings, you can set animation effect for description and set its duration and delay time. With advanced options, you can even set button hover animation effect from options “Button Hover Animation”.
    • 6. Analytics Settings: In this settings, you have to enable option “Enable Analytics” in order to track click event for this button on google analytics. You must have Google analytics enabled on your website.
  • d) Custom Image : Simply drag this element on right CTA builder section and click it or on hover, click on edit icon which opens “Inline CTA Custom Element Settings” popup form
    to configure its customization options.In this element, it helps you to add image on your custom CTA Section.Inline CTA Builder Custom Design SettingsThis elements has 4 advanced tab settings for customization.

    • 1. Attribute Options: Here, you can hide image text title, fill image title, upload custom image and
      enable image type with url link i.e on click image it will redirect to specific link with its specified target.
    • 2. Design & Layouts: Here, you can customize many design options for this button element such as set your own custom image width(px),height(px), top ,
      left position, z-index, text align.
      Even set your custom background color, background hover color, border color, radius, enable icon & text divider, set icon divider color, set button text padding.
    • 3. Typography: In this settings, you can set font family, font size, color,font weight, text transform for image title.
    • 4. Animation Settings: In this settings, you can set animation effect for description and set its duration and delay time.

For all above settings, Click on SAVE button to save the changes data.


G) Configuration Settingstop

In this settings, there are mainly 4 tab settings. Two settings i.e Content and Button settings is only displayed for pre avaialble templates and other two settings are displayed for both pre available as well as custom design CTA.

  • a) Content Settings : In this settings, you can set header title, description, custom image, custom video, sub title text with animation effect for each available element according to 50 Pre available templates being defined and choosed from Display Settings. There are 4 types of content settings according to available
    template group.

    1. Simple Text Template Content Options

    In simple text pre available CTA template, you can configure header title, description and background section color settings as per pre available templates requirement.
    Inline CTA Builder Content Settings

     

    2. Text & Image Template Content Options

    In text and image pre available CTA template, you can configure header title, description, primary custom image and background section color settings as per pre available templates requirement.
    Inline CTA Builder Content Settings
    Inline CTA Builder Content Settings

     

    3. Text & Video Template Content Options

    In text and video pre available CTA template, you can configure header title, description, primary custom video options and background section color settings as per pre available templates requirement.
    In video settings, you can two options either to display video frame inline i.e in Call to action left or right section as per available template choosed or else you can simply use Popup options to display custom or fetch URL Image and on click image popup with video will be displayed.
    Inline CTA Builder Content Settings

     

    4. Advanced Duet Template Content Options

    In Advanced CTA Template last layout, you can add two header title, 2 description, 2 button with 2 custom image as per layout structure.
    Inline CTA Builder Content Settings

  • b) Button Settings : In this settings, it includes altogether 6 main settings: Text Settings, Link Settings, Icon Settings, Animation Settings , Customization Settings and at last Google Analytics Settings.
    Number of CTA button is displayed as per pre available template defined. The tab main settings for button is described below:A) Text Settings: In Text Settings , you can hide specific button on mobile, hide specific button on desktop , set button text.
    Inline CTA Builder Button SettingsB) Link Settings: In Link Settings, you can choose 4 button link type as Internal link, external link, Popup trigger event or scroll effect for button link. For external link, you can add any custom link, for internal link, you can choose page/post link by clicking on “Select Internal Page/Posts” Button.
    For popup button works as clicking on button, a popup form will appear where you can display either
    iframe video (Youtube, Vimeo or HTML5) or even display external Shortcodes.
    For Scroll effect, on click button, it will scroll to specific section where you have defined scroll containter id from settings option.
    Inline CTA Builder Button Settings

    1. Internal Link Button type

    Inline CTA Builder Button Settings

    2. External Link Button type

    Inline CTA Builder Button Settings

    3. Popup Button type

    Inline CTA Builder Button Settings

    4. Scroll Effect Button type

    Inline CTA Builder Button Settings

    C) Icon Settings:

    In Icon Settings,it includes pre available icons or upload your own custom icon for button or simpy choose “None” for not displaying any icon for button.
    In pre available icon sets, it includes Font Awesome, Dashicons, Linecons, Genericons and Icomoon. For Custom , you can upload your own icon and set its icon width and height as well. Further you can set position of icon as left of title, right of title or top of the button title.
    Inline CTA Builder Button Settings
    Inline CTA Builder Button Settings

    D) Animation Settings:

    In Animation Settings,it includes button animation how button will appear and another one to choose button hover animation type which works on hover button only. We have more than 12+ animation and 15+ hover button animation effect.
    Inline CTA Builder Button Animation Settings

    E) Customization Settings:

    In Customization Settings, you can customize your own custom background color, font color , background hover color, font hover color, font size and many more options as per your requriement.
    Inline CTA Builder Button Animation Settings

    F) Google Analytics Settings:

    In this settings, you have to enable option “Enable Analytics” in order to track click event for this button on google analytics. You must have Google analytics enabled on your website.
    Inline CTA Builder Button Animation Settings

  • c) Background Settings : This settings is displayed for both pre available and custom designed CTA. This options includes default one which shows default background and another one as custom which includes custom background color, background image, background slider images and video (youtube, vimeo and html5) background setup. Also you can enable parallax effect for background image and video type only.

    Background Custom Color CTA Settings:

    Inline CTA Builder Background Settings

    Background Image CTA Settings:

    Inline CTA Builder Background Settings

    Background Video CTA Settings:

    Inline CTA Builder Background Settings

    Background Slider CTA Settings:

    Inline CTA Builder Background Settings

  • d) Custom Settings : In this settings, you can set backgroud overall CTA Custom Width and height in pixel. Enable Background Overlay and set its color. This also include outer padding for CTA, common button font family, font size options for pre available designs.
    Inline CTA Builder Custom Settings

H) Import/Export Settings

Using our plugin, you can import custom json file related with Inline CTA posts or also import our plugin’s demo json file. Also, you can export your already created CTA post and easily import to another site as well.
Inline CTA Builder Import/Export Settings

I) Shortcode Usage

The plugin has inbuilt shortcodes. Basically you will find shortcode in this each CTA post edit page or in lists of Inline CTA Builder Page. The shortcode will be automatically generated after you create new cta post data from “Inline CTA Builder” > Add New CTA button. You can use these shortcode anywhere to display attractive call to action layer section as per your requirement.
Inline CTA Builder Shortcode Usage Settings

On left side, you can see Inline CTA Builder Shortcode metabox section after creating CTA. Simply copy & paste the shortcode directly into any WordPress post or page.
Inline CTA Builder Shortcode Usage Settings


J) VC Interface Elements

Also, our plugin is fully compatible with Visual Composer and also provides new elements as Inline CTA Builder with Inline CTA Builder Widget which will help you to select created already created CTA Posts using our plugin and display on your site content as per your requriement.


Themes Compatible with the Plugin :

Inline CTA Builder works best with every WordPress theme. It’s even more remarkable when used with popular themes like VMagazine and AccessPress Parallax.

AND IF THIS PLUGIN HAS IMPRESSED YOU, THEN YOU WOULD ENJOY OUR OTHER PROJECTS TOO. DO CHECK THESE OUT :

WPAll Club – A complete WordPress resources club. WordPress tutorials, blogs, curated free and premium themes and plugins, WordPress deals, offers, hosting info and more.

Premium WordPress Themes – 6 premium WordPress themes well suited for all sort of websites. Professional, well coded and highly configurable themes for you.

Premium WordPress Plugins – 45+ premium WordPress plugins of many different types. High user ratings, great quality and best sellers in CodeCanyon marketplace.

AccessPress Themes – AccessPress Themes has 50+ beautiful and elegant, fully responsive, multipurpose themes to meet your need for free and commercial basis.

8Degree Themes – 8Degree Themes offers 15+ free WordPress themes and 16+ premium WordPress themes carefully crafted with creativity.

If you’ve any questions, please submit a ticket in our support system:
https://accesspressthemes.com/support
or

support@accesspressthemes.com

Also, you might want to check out :