How to make a page with call of action button

Hi Swit,

To do this we recommend the use of our plugin, SiteOrigin Page Builder with the SiteOrigin Widgets Bundle installed.

Once you’ve installed both please navigate to PluginsSiteOrigin Widgets and enable the Call to action widget. Now open up the desired page and click the page builder tab. Please be aware that this will convert your page / post into a page builder powered page.

Now, you have two options of doing this. A call to action or a hero widget. The latter being more like what we have. I would suggest having a play around with both before proceeding.

Now, presumably, you’ve decided on the hero widget due to it being more like ours. I’m going to start these instructions under the assumption that we’re starting fresh. Add a new row, and edit it (it’s the wrench just above the row) Set it as one column and then head over to the row styles sidebar and set the row layout to “Full Width Stretched”.

Now add your hero widget to that row. Add a hero frame. We really don’t need multiple frames at this time but you can always add more later on. Let’s set up our layout to mimic SiteOrigin.

<h1 style="text-align: center;">Example attention-grabbing title</h1>
<h3 style="text-align: center;">Subtitle outlining what you can do with your products</h3>
<div style="text-align: center;">[buttons]</div>

Place the above HTML into our content editor, please be sure to switch to the text view or the above HTML won’t work.

Now you’ve obviously noticed that I’ve added two “buttons”. These will be our CTA. Add two buttons and set the button text and destination URL. Adjust the button designs and layouts, and then finally add a background image for the hero image and you’re done.

Please tell me if you need any clarification on anything I’ve said.

By the way; as you’re a Vantage Premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on this page. Please reference this thread.