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.

1. Drag a custom html or text widget into the Top Banner widget
2. Copy and paste the code below into the custom html or text widget
3. Use the Visibility button in the widget to assign where  you want it to appear.
4. 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.

[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:

---

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:

---

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:

---

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:

---

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:

---

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:

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:

The section will adapt to the width of the page or you could put inside a max width DIV like this:

<div style="width:100%;max-width:800px">