This tutorial will guide you through the creation of buttons like you see on the live demo site:
Technically they are not buttons, but more of a text link made to look like buttons. Simple to make, we will just add some classes to a text link to achieve the buttons like the demo site displays.
Normally the most basic HTML text link looks like this:
<a href="http://www.yourdomain.com">Text Label</a>
But we are going to turn that into a button that looks like this:
All we need to do is make a text link in our content editor, then switch to the “Text” html view and add the class “btn” to the link like this:
<a class="btn" href="http://www.yourdomain.com">Text Label</a>
With Influential, you get a few button sizes that you can use in your pages, posts, widgets, or even in custom forms.
All we need to do is add another class to our text link button based on the size you want. For the default button, you don’t have to do anything, but for the others, your classes are:
- Large = btn-lg
- Small = btn-sm
- Extra Small = btn-xs
When you add a size to your text link, it will look like this example for a small button:
<a class="btn btn-sm" href="http://www.yourdomain.com">Text Label</a>
Create Icon Buttons
On the live demo site, I have a “Research” section which shows some fancy looking icon buttons in the left sidebar column:
This tutorial will take you through the steps of creating one of these, including how to customize the button from the customizer. We can create these manually with entering in HTML code ourselves, or we can use the Black Studio TinyMCE Widget plugin (a text widget with a fully functional editor) to make things a bit easier if you don’t want to handle HTML too much. For the demo site, I also have another plugin installed called Better Font Awesome which adds an icon generator to your content editor.
NOTE You can create these buttons inside your page content, or a text widget, but for this tutorial, we will do it in a widget.
Using the Black Studio Widget
- Go to Appearance >> Widgets
- Drag a “Visual Editor” widget into your sidebar, such as the left or right page sidebar position.
- In the content area, type your button label. For example, let’s use the above screenshot of our buttons and enter in “Resources Brochure”
- Click right in front of “Resources Brochure” to position our cursor so that we can insert an icon.
- On the editor, look for the Insert Icon button and click on it to find the icon we want, such as the demo’s PDF icon. Once you click on the icon, it gets inserted and will automatically accept the font size of your text link label.
- Select the whole thing…the icon shortcode and the Resources Brochure label you typed because now we need to make this whole thing a link
- Now we need to switch to the “Text” view of our editor because we have to add a class of “icon-button” to our text link so it looks like this:
<a class="icon-button" href="http://www.yoursite.com/resources.pdf"> <i class="fa fa-file-pdf-o"></i>Resouces Brochure</a>
- Click “Save“
If done correctly, your button should now look like this when viewed on the front of your site:
Using a Text Widget
All you need to do is drag a “Text Widget” into your sidebar position, and use the code below as a template. The only drawback is that you need to know the icon name when you make this button. Use the Font Awesome website as a reference.
<a class="icon-button" href="http://www.yourdomain.com"> <i class="fa fa-file-pdf-o"></i>Resouces Brochure</a>
Colour Our Icon Button
You can colour your icon buttons with any colour you want by going to the customizer. Please note that whatever you choose, it will affect all icon button instances throughout your site.
- Go to Appearance >> Customize >> Colours
- Look for the settings labled as “Icon Button….” which can be found near the bottom of the colour options column.
- Choose your colours for each part of the button
- Click “Save & Publish“