Then you need to locate the page builder menu, it looks like this:įrom here, select ‘ Add Row’. To do this, go to the page you want to edit, in my case the homepage. The first task I had to use it for was to create this IconBox with Popover section beneath the homepage’s header: Getting to grips with SiteOrigin’s Page Builder plugin was absolutely critical in recreating the Auto Demo. For example if you have written a piece of content marketing to try and sell something, use the shortcodes to create an effective CTA button at the bottom of your blog-post. You can of course use shortcodes in other places than just the slider.
Just edit the button’s text within the code to suit your needs and it is ready to go. All you need to do is copy and paste this code into the ‘slide text’ section of the slider. There is a ‘Shortcodes’ section in all of our themes’ documentation which provides you with many available options for the style and functionality of button you can insert. If you don’t have the plugin activated, the code itself will appear in the slider, rather than the button you are trying to create. The mistake I made was to insert the shortcode into the ‘slide text’ without having activated the ProteusThemes Shortcodes plugin.
Why? Because on the Auto Demo I am recreating, there are buttons within the slider.Īt this point it is important to emphasise that you really need to install of the recommended plugins. Recreating the front page slider brings us nicely into shortcodes. Once you have changed to ‘ Front Page With Slider’, there will be a new meta at the bottom of the screen entitled ‘ Front page slider’, click here to add your images and text to the slider:
Find that, and change the ‘ Template’ to ‘ Front Page With Slider’. To make this happen, select Pages -> All Pages -> Home once you are in the editor for your home page you need to find the ‘ Page Attributes’ drop-down menu on the right side of the screen.
Recreating the Auto Demo required adding a slider as a feature on the homepage. Tick that box if the information in the Icon Box is extra important and you would like it to stand out more. All you need to do is to give the Icon Box a title and decide which information you would like to appear next to it.īeneath all the icons in the widget menu, you will see an option to ‘ highlight this widget‘. You will now see that there are a lot of icons to choose from within the widget, for the purpose of this exercise I chose the telephone. You can either drag and drop the widget to the right of the screen and place it in the header, or when you click on the widget you will see a drop-down menu of its applicable locations, you can just select ‘ Header’ from this list and click the blue ‘ Add Widget’ button: ProteusThemes: IconBox is the widget you are looking for. Once you have located ‘ Header’, direct your attention to the left of the screen, where you will see a list of ‘ Available Widgets’. To do this, in your dashboard you need to go to Appearance -> Widgets and then within ‘ Theme Sidebars’ select ‘ Header’. My task was to add the icon boxes into the header of the homepage. It may seem obvious, but having your company’s phone number next to a telephone icon is a simple but effective way of improving your site’s user experience. Icon Box widgets are a very handy piece of visual language. These are the most important lessons I have learned so far. Just like before, my colleagues set me step-by-step tasks to set me on my way. To go beyond the simple basics in my last WordPress Beginner blog, over the past couple of weeks I have been working to recreate one of our ProteusThemes demo pages.