Call To Action Banner Widgets
Watch the video then grab some codes…
If you’ve got the Socrates Toolkit Plugin installed, here’s some simple code you can add to a Text Widget to create a simple call to action button.
[soc_panel color="white" margin="20"] [soc_two_third] Edit this text with your call to action information, then replace the url with your own.[/soc_two_third] [soc_one_third class='last'] [soc_button color='ghost' size='large' href='http://yourdomain.com/' align='right']Click Here[/soc_button] [/soc_one_third][/soc_panel]
See the example at the top of the page?
Here’s how I did it.
- Drag a custom html or text widget into the Top Banner widget
- Copy and paste the code below into the custom html or text widget
- Use the Visibility button in the widget to assign where you want it to appear.
- That’s it.
Note: If you want a call to action on a specific post, you need to make a unique “tag” to work with the visibility option. So I just added a tag called: cta button
Here’s the code for my Simple3X Call To Action at the bottom of the page.
[soc_divider height="5" margin_top="15" margin_bottom="0" color="#a7d3ff"][soc_full_section bgcolor="#0b5299" textcolor="#fff" margin_top="0" margin_bottom="0" margin_left="0" margin_right="0" padding_top="25" padding_bottom="25" padding_left="0" padding_right="0"][soc_two_third][soc_headline color="#fff" font_size="30" shadow="0" align="left" margin_top="0" margin_bottom="5"]So What Is Simple3X?[/soc_headline]It's ONE very simple idea for changing habits, reaching goals and improving productivity in both LIFE and BUSINESS. [/soc_two_third][soc_one_third class='last'] [soc_button color='green' size='huge' href='https://simple3x.com' align='center']Get The Idea [/soc_button][/soc_one_third][/soc_full_section][soc_divider height="5" margin_top="0" margin_bottom="20" color="#a7d3ff"]
You can play with the top and bottom margins to fix spacing issues.
Here’s some code that lets you add a custom background color with a banner in the middle. Insert in text mode. See example in footer.
[soc_full_section class="my-class" bgcolor="#000" textcolor="#444" margin_top="0" margin_bottom="0" margin_left="0" margin_right="0" padding_top="25" padding_bottom="25" padding_left="0" padding_right="0"]<a href="https://socratestheme.com"><img class="size-medium aligncenter" src="https://socratestheme.com/images/socrates-728x90.png" width="728" height="90" /></a>[/soc_full_section]
Here’s a two column section image background, make sure image is as wide as your container.
Call To Action Headline
[soc_full_section bgcolor="#f4f4f4" textcolor="#444" bgimage="https://customers.socratestheme.com/wp-content/uploads/2017/04/masthead_bg.jpg" parallax="0" margin_top="0" margin_bottom="0" margin_left="0" margin_right="0" padding_top="25" padding_bottom="25" padding_left="0" padding_right="0"] [soc_two_third] [soc_headline color="#fff" font_size="40" align="center" margin_top="25" margin_bottom="25"]Call To Action Headline[/soc_headline] [/soc_two_third] [soc_one_third class='last'] [soc_button color='orange' size='large' href='#' target='new' align='left']Action Button[/soc_button] [/soc_one_third][/soc_full_section]
Here’s a Parallax image background, make sure image is as wide as your container, and if using parallax taller than height.
[soc_hero_banner parallax="1" height="auto" min_height="200" margin_top="0" margin_bottom="25" margin_left="0" margin_right="0" padding_top="25" padding_bottom="25" padding_left="25" padding_right="25" bgimage="https://socratestheme.com/wp-content/uploads/2017/09/bigsky.jpg"] [soc_headline color="#fff" font_size="40" font_size_tablet="30" font_size_phone="20" shadow="0" align="center" margin_top="25" margin_bottom="25" element="h1"]FEATURES[/soc_headline][/soc_hero_banner]
Left Aligned Headline
[soc_full_section bgcolor="#181818" margin_top="10" margin_bottom="10" padding_top="25" padding_bottom="25" padding_left="50" padding_right="50"] [soc_headline color="#fff" font_size="70" font_size_tablet="50" font_size_phone="25" shadow="1" align="left" margin_top="40" margin_bottom="25" element="h1"]THIS IS MY HEADLINE[/soc_headline][/soc_full_section]
Example:
THIS IS MY HEADLINE
Centered Headline and Sub Headline
[soc_full_section bgcolor="#181818" margin_top="10" margin_bottom="10" padding_top="25" padding_bottom="25" padding_left="50" padding_right="50"] [soc_headline color="#fff" font_size="70" font_size_tablet="50" font_size_phone="25" shadow="1" align="center" margin_top="40" margin_bottom="15" element="h1"]THIS IS MY HEADLINE[/soc_headline] [soc_headline color="#fff" font_size="50" font_size_tablet="30" font_size_phone="20" shadow="1" align="center" margin_top="0" margin_bottom="25" element="h1"]This is a sub headline[/soc_headline] [/soc_full_section]
Example:
THIS IS MY HEADLINE
This is a sub headline
Left Headline with Profile Image
[soc_full_section bgcolor="#181818" margin_top="10" margin_bottom="10" padding_top="25" padding_bottom="25" padding_left="50" padding_right="50"] [soc_two_third] [soc_headline color="#fff" font_size="70" font_size_tablet="50" font_size_phone="25" shadow="1" align="left" margin_top="40" margin_bottom="25"]THIS IS MY HEADLINE[/soc_headline] [soc_headline color="#fff" font_size="40" font_size_tablet="30" font_size_phone="20" shadow="0" align="left" margin_top="10" margin_bottom="25"]This is my sub headline text[/soc_headline] [/soc_two_third] [soc_one_third class='last'] <img src="http://speakertheme.com/wp-content/uploads/2018/05/business-person.png" alt="" width="566" height="600" class="alignnone size-full wp-image-83" /> [/soc_one_third][/soc_full_section]
Example:
THIS IS MY HEADLINE
This is my sub headline text

Center Headline / Subheadline with Call To Action Button
[soc_full_section bgcolor="#181818" margin_top="10" margin_bottom="10" padding_top="25" padding_bottom="25" padding_left="50" padding_right="50"] [soc_headline color="#fff" font_size="70" font_size_tablet="50" font_size_phone="25" shadow="1" align="center" margin_top="40" margin_bottom="25"]THIS IS MY HEADLINE[/soc_headline] [soc_headline color="#fff" font_size="50" font_size_tablet="30" font_size_phone="20" shadow="1" align="center" margin_top="0" margin_bottom="25"]This is a sub headline[/soc_headline] [soc_button color='green' size='huge' href='#' target='new' align='center'] Your Call To Action[/soc_button] [/soc_full_section]
Example:
THIS IS MY HEADLINE
This is a sub headline
Two Column Call To Action with Buttons
[soc_full_section bgcolor="#181818" margin_top="10" margin_bottom="10" padding_top="25" padding_bottom="25" padding_left="50" padding_right="50"] [soc_one_half] [soc_headline color="#fff" font_size="50" font_size_tablet="40" font_size_phone="30" shadow="1" align="center" margin_top="50" margin_bottom="25"]This is a call to action[/soc_headline] [/soc_one_half] [soc_one_half class='last'] [soc_divider margin_top="50" height="0"] [soc_button color='green' size='huge' href='#' target='new' align='center']Your Call To Action[/soc_button] [soc_button color='red' size='huge' href='#' target='new' align='center']Your Call To Action[/soc_button] [/soc_one_half] [/soc_full_section]
Example:
This is a call to action
Centered Headline with Two Buttons
[soc_full_section bgcolor="#181818" margin_top="10" margin_bottom="10" padding_top="25" padding_bottom="25" padding_left="50" padding_right="50"] [soc_headline color="#fff" font_size="60" font_size_tablet="40" font_size_phone="30" shadow="1" align="center" margin_top="60" margin_bottom="25"]THIS IS A CALL TO ACTION[/soc_headline] [soc_divider margin_top="30" height="0"] <div class="soc_button_center"> [soc_button color='blue' size='huge' href='#' target='new' ]Learn More[/soc_button] [soc_button color='green' size='huge' href='#' target='new']Join Here[/soc_button] </div> [/soc_full_section]
Example:
THIS IS A CALL TO ACTION
Two Column Image Left Inside Panel
You can remove the panel or change the panel.
[soc_full_section bgcolor="#fff" margin_top="10" margin_bottom="10" padding_top="25" padding_bottom="25" padding_left="50" padding_right="50"] [soc_panel color="white"][soc_one_half] <a href="https://getsitecontrol.com/?ref=40618"><img class="alignnone size-medium wp-image-165" src="https://customers.socratestheme.com/wp-content/uploads/2017/04/getsitecontrol_banners_300x250_2-300x250.png" alt="" width="300" height="250" /></a> [/soc_one_half] [soc_one_half class='last'] [soc_headline color="#000" font_size="40" font_size_tablet="30" font_size_phone="20" shadow="0" align="center" margin_top="5" margin_bottom="25"]My Favorite Marketing Tool[/soc_headline] Capture Leads, Handle Live Chat, Add Social Share Icons and More with <strong>Get Site Control!</strong> [soc_button color='ghost' size='huge' href='https://getsitecontrol.com/?ref=40618' target='new' align='center' rel='']Learn More[/soc_button][/soc_one_half][/soc_panel][/soc_full_section]
Example:
<div style="width:100%;max-width:800px">