1. Simple Button¶

Create a simple button shortcode which allows you to:

• Enter a title,
• Enter a link,
• Select button size ( small or large ),
• Select button style ( white or dark ),
• Enter additional css classes.

The shortcode should look like this in the backend Visual Composer editor:

And should render an HTML like below, depending on options chosen:

<!-- Example one -->

<a href="http://link_example.com" class="btn btn-large bth-white example_custom_class">title_example</a>

<!-- Example two. -->

<a href="#" class="btn btn-small btn-dark example_custom_class_2">title_example_2</a>

<!-- Example three. No link entered in options. No custom class entered. -->

<a class="btn btn-small btn-dark">title_example_2</a>

Helpful reading:

• Unyson options
• Unyson options: text
• Unyson options: select

2. Button With Related Shortcode¶

Extend the previous button with following options:

• Checkbox to enable / disable the button ( render nothing when disabled ),
• Select simple or separated button,
• If grouped, allow to choose an icon ( as related shortcode ct_icon from the example ),
• If simple, hide icon select.

The shortcode should look like this in the backend Visual Composer editor:

Simple button options view:

Separated button options view:

And should render an HTML like below, depending on options chosen:

<!-- Example one. Simple button. -->

<a href="http://link_example.com" class="btn btn-large bth-white example_custom_class">title_example</a>

<!-- Example two. Separated button with icon. -->

<a href="http://button_link.com" class="btn-group btn-group--separated">
    <span class="btn btn-dark btn-separated btn-small ">button_title</span>
    <span class="btn btn-dark btn-separated btn-small ">
        <div class="ct-iconBox ct-iconBox--type1 ct-iconBox--white">
            <div class="ct-iconBox-icon"><i class="fa fa-instagram"></i></div>
            <h6 class="ct-iconBox-title">icon_title</h6>
            <p class="ct-iconBox-description">icon_desc</p>
        </div>
    </span>
</a>

<!-- Example three. Button disabled. Nothing to render. -->

Make sure you created ct_icon shortcode ( as in example ) beforehand in your project so you use it and not double functionality in button shortcode.

Helpful reading:

• Option type: ‘shortcode’
• Dependency: Shortcodes Visual Composer Integration

1. Background Color & Image¶

Create a simple customizer section which will allow users to:

• Select between background color and background image,
• Pick a background color (visible only when background color is selected),
• Upload a background image (visible only when background image is selected),
• Section should appear above all others Customizer options
• Implement basic HTML for preview

Helpful reading:

• Customizer options: Customizer
• Additional arguments: Customizer arguments
• Controls & further documentation: Customizer controls