How to use shortcode inside the caption text of Image?

You can place shortcode inside the caption of image inside the post or page.

Steps::

  1. Install Designer Button plugin v2.5.9+
  2. Create page or post
  3. Click on “Add Media”
  4. Select required image and place required shortcode in the caption field
  5. Click on “insert into post” button
  6. After adding the media/image click on “text” tab of content editor
  7. locate the caption shortcode which you added just now using “Add Media” button
  8. Caption shortcode look like this
    [caption id="attachment_561" align="alignnone" width="922"]<img src="http://designerbutton.prali.in/wp-content/uploads/2016/10/google_analytics_3.png" alt="" width="922" height="801" class="size-full wp-image-561" />[wpi_designer_button id=82][/caption]
  9. Replace [caption]] and [[/caption] with [wpi_caption]] and [[/wpi_caption] in above shortcode
  10. Save and check the post/page

 
[ssm_form id=’617′]

How to create “ghost” buttons with transparent background

You can create ghost buttons with transparent background.

Steps::

  1. Create Button Style using  Button WPI menu in WordPress admin left menu
  2. Click on “Add new” button to add new button style.
  3. Click on “Colors” tab in Styles Settings
  4. Click on ” Background Color” tab
  5. Remove color value from the “background color” field
  6. Click on “Border Color” tab
  7. Remove color value from the “Border color” field
  8. Click on “Back” button to go back to main Section in Styles Settings
  9. Click on “Border” tab
  10. Select “No” form the “Border width” field

 

How to track button click using google Analytics tracking code

Now you can track every button click using onclick event of the button and google analytics.

Steps::

  1. Create button using  WPI menu in WordPress admin left menu
  2. Click on “Advanced link section”
  3. Enter Google Analytics event code in “OnClick” input field

“OR text in Twin Button” setting in Global Settings Page

Create Button

google_analytics_1

 

Advanced Link Section

google_analytics_2

 

“OnClick” Input field

google_analytics_3

 

 

How to display Call-to-Action (CTA) button in every post after or before content

Now you can change the text “Or” in the Twin Buttons.

Steps::

  1. Create CTA button using  create “Call to Action” inside WPI menu in WordPress admin left menu
  2. Click on Global Settings inside the WPI menu
  3. Click on CTA button Tab in the Global Setting Page
  4. Select Enable from the “CTA Button Enabled?” dropdown list
  5. Select Required CTA button  from the “CTA Button ID?” dropdown list
  6. Select Below or Above  from the “CTA Button Above/below Content” dropdown list

“OR text in Twin Button” setting in Global Settings Page

Create Call to Action Button

cta_button

CTA Button Global Settings to Display CTA button in every post

cta_button_global_settings

 

How to create button with Predefined styles?

To create button with predefined style please follow below steps.

Steps::

  1. Click on Buttons menu link inside the WPI menu in WordPress admin
  2. Click on “Add New” button
  3. Type button name in the name field
  4. Click on “Button Section”
  5. Enter button name in “button text” field
  6. Click on “Styles” tab located below the button preview area
  7. Click on any button style in the “Styles” tab
  8. Click on back button
  9. Click on “Link Section”
  10. Type button link in “Link” field
  11. Click on “Publish” button to save this button
  12. Copy the button Shortcode which is located below the settings area
  13. Paste the button shortcode anywhere in post/ page

Click on Buttons menu link inside the WPI menu in WordPress admin

wpi_buttons

Click on “Add New” button

wpi_buttons_add_new

Type button name in the name field

wpi_buttons_add_new_button_name

Click on “Button Section”

wpi_buttons_add_new_button_section

Enter button name in “button text” field

wpi_buttons_add_new_button_section_buttontext

Click on “Styles” tab located below the button preview area

wpi_buttons_add_new_button_section_styles_tab

Click on any button style in the “Styles” tab

wpi_buttons_add_new_button_section_button_style

Click on back button

wpi_buttons_add_new_button_section_back_button

Click on “Link Section”

wpi_buttons_add_new_Link_section

Type button link in “Link” field

wpi_buttons_add_new_Link_section_link

Click on “Publish” button to save this button

wpi_buttons_add_new_Link_section_publish

Copy the button Shortcode which is located below the settings area

wpi_buttons_add_new_Link_section_shortcode

 

 

How to display dropdown menu on button click?

Dropdown menu for Button

Now you can display dropdown menu on button click. Please follow below steps.

Steps::

  1. Click on Menus in Appearance menu in wordpress admin
  2. Click on “Create New Menu”
  3. Enter Menu name in “Menu Name” field
  4. Drag menu items from the left sidebar to “Menu Structure” section
  5. Click on “Save Menu” button
  6. Click on “Buttons” menu in “WPI” Main menu
  7. Click on “Add New” button
  8. Enter all required fields
  9. Select Menu in the “Bytton Type” dropdown list.
  10. Select your newly created Menu in the “Menu” dropdown list.
  11. Copy button shortcode and place anywhere in the post/page/widget content.

 

Select menu in “Button Type” dropdown list

Button Type Menu

Select Menu from the “menu” dropdown list

Button Type Menu -Select Menu

Copy Shortcode and place anywhere in the post/page/widget content.

Button Type Menu -Select Menu -Shotcode

 

How to display YouTube video in fullwidth button popup?

Yes you can display youtube video in fullwidth button popup. please follow below steps.

Steps::

  1. Install youtube-embed-plus plugin
  2. Create button using wpi designer button plugin
  3. Select Button type field to “Popup”
  4. Place [embedyt]https://www.youtube.com/watch?v=hMVZ4KeBVTI[/embedyt] in popup field in the button settings
  5. Put empty in the link field to make popup work properly
  6. Click “Youtube-embed-plus” plugin settings page.
  7. Enable check box “Responsive video sizing” in “Default YouTube Options” section

Note::

Replace above Youtube link with your required Youtube link.

“Responsive video sizing” setting

Youtube Embed plus settings

 

How to display youtube video in popup after button click?

Yes you can place youtube video in wpi designer button’s popup. Please follow below steps to get required result.

Steps::

  1. Install youtube-embed-plus plugin
  2. Create button using wpi designer button plugin
  3. Place [embedyt]https://www.youtube.com/watch?v=hMVZ4KeBVTI[/embedyt] in popup field in the button settings
  4. Put empty in the link field to make popup work properly

Note::

Replace above Youtube link with your required Youtube link.

 

youtube video in popup