Full Width Responsive CTA Links

Responsive CTA Links

One of the biggest challenges to a web designers is getting visitors to move beyond the landing page and commit to an action such as making a purchase or seeking more information.
Text hyperlinks are next to useless for this purpose and are also not suitable for use on pages that will be viewed on touch devices such as an iPad.
Modern web design uses CTA (Call To Action) button links which have proved to be very effective in getting clicks if presented properly.
These inline responsive CTAs have many styling options, can open an internal or external page and have the option to open the link in a new window.

Google CTA Link Button Widget

Widget Settings

Check the "Full width" box in the Metrics inspector and set the module container maximum width, the CTA button width and button maximum height.
Set up each of the hyperlinks by entering the icon name.
NOTE: The format for the icon name is "icon_name".
Set the icon size and color.
Enter the text and choose the "Link to:" page
For an external link, check the box and enter the URL.
Check the box to open either type of link in a new window.
Adjust the vertical position of the icon and the text if required.

Full Width CTA Google Icon Widget
Full Width CTA Google Icon Widget

EverWeb Widgets | Full Width

Font Styles

Enter the font family name, check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the font size and color.
If the text extends to two or more lines by using line breaks <br>, adjust the line height.

Button Styles

Set the background color and adjust the opacity.
Set the border width, color and radius if required.
Set the box shadow color and radius if required.

Fix Or Fade On Scroll

The modules can be fixed when used with a slide over layer by checking the "Fixed Position" box in the Metrics inspector.
For fade on scroll, check the box and enter the scroll amount.

This widget is included in the Full Width widget pack.