This theme offers two layout styles for icon boxes, the default centered one, as well a left aligned icon: Create an Icon Box Copy your snippet from below Go to your page, post, or text widget, and paste the code into it. For pages and posts, make sure you paste this code in the “Text” editor view because you are working with HTML code Replace the sample content with your own. I recommend you do most of this while in the “text” view so you don’t accidentally delete an html tag like a <div> etc. Change the sample icon “icon-mobile” to the one you want (see further below for a list of available icons) Save your page, post, or widget Defaut Icon Box Snippet This is an example from the first icon box on the live demo site: <div class=”pref-icon-box”><div class=”pref-icon-header”><div class=”icomoon icon-stack”></div><h3>Mobile Responsive</h3></div><div class=”pref-icon-content”><p>Using Twitter’s… read more
Sushil Adhikari
The Preferential Lite theme comes with a preset of font based icons which gives you the flexibility to size and colour them just like you can with any font (text). This theme uses them for the social icons as well some of the HTML Snippets that you can use and change the icon from the large selection that comes with Preferential Lite. You can view the available icons by going into your download package of Preferential and then look for the folder named “icons”. Inside that is a demo.html page you can view in your browser. In this icon folder, there are other items and files, such as a font file that you can install on your “Windows” computer so that if you use a graphics program with font capability, you can create mockups and other artwork using the font “icomoon” which is what the icons are. There is also… read more
Preferential Lite is ready for navigation, should you decide to implement it using a plugin called Breadcrumb NavXT. Very easy to setup, and it will give you navigation for your pages or posts. Here is what a breadcrumb navigation looks like with this theme: Install the Plugin Go to Plugins >> Add New Search for “Breadcrumb NavXT” and then click to install and activate it This gets added to your WordPress Settings menu group which you can customize to your needs Once done, the theme has code already in it that displays your breadcrumb navigation on most pages and posts with exception to the “Front Page”.
There are many ways to create a contact page, but the one thing hey all have in common is that they use a plugin for the actual form that people fill out. Normally I used Contact Form 7 as the plugin, but since I am using Jetpack in the live demo site for Preferential Lite (and the premium version), I decided to give this a try and created this tutorial based on Jetpack. For a basic form, it’s very solid and we know it’s coded well because it’s from the developers over at Automattic (makers of WordPress). Each contact form can easily be customized to fit your needs. When a user submits your contact form, the feedback will be filtered through Akismet (if it is active on your site) to make sure it’s not spam. Any legitimate feedback will then be emailed to you, and added to your feedback management area. NOTE:… read more
This tutorial will help you make a gallery using WordPress. Although this is a common thing with any theme, I will show you how it looks with Preferential as your theme. Sample Gallery with Captions First thing you want to do is prepare your images ahead of time. I am one who likes to keep things consistent so that I get a nice gallery that is evenly displayed within a page, post, or text widget. This means preparing images by cropping, sizing, and optimizing photos before you upload them. If you were to create a gallery with different sizes of images and some are vertical while others are horizontal, you get a very uneven gallery layout…however, sometimes you may not have the option to make them all the same. Create a page or open a page (or post) where you plan on adding a gallery Click on the Add Media… read more
Preferential Lite gives you the ability to customize almost every colour within this theme. There may be some elements that you need to create custom CSS to manage the colours of those elements, but for the most part, you should be able to achieve unlimited colour combinations with your website with the built-in colour selectors. There are many colour options throughout the theme option settings and can be found on different tabs within the customizer. For example, the one in the screenshot below is found on the Navigation tab: Go to Appearance >> Customize >> Colours Click on any of the colour selectors and choose your colours Click on Save and Publish
WordPress offers several post formats that are made available through any theme as long as the theme has support for each one. Unfortunately, creating a custom post format is not possible, so we are limited to the following formats….the ones in red are not available in Preferential Lite: Standard Post Format Aside Post Format Image Post Format Gallery Post Format Audio Post Format Quote Post Format Status Post Format Video Post Format Link Post Format Chat Post Format If you would like to read more about WordPress Post Formats, you can visit the Codex page: Post Formats If you would like to see the available post formats on a live site, you can check out the demo website for Preferential by going to the “WordPress” menu link and visit each submenu: Demo Website You do not have to use all the post formats that are listed above, but they are… read more
In addition to customizing the top half of the page (the header area), you can also change the page background. Preferential does come with a default background which you can use, as well it’s a transparent image which means you can change the background colour without losing the background image. Your choices are: Using the default background Upload and use your own background Use a transparent image with background colour Or just have a background colour without an image Some people may opt in for a full sized image, or you can use an image and with the WP Background settings, tile it to how you want it. Transparent Image with Background Colour Go to Appearance >> Background You can upload your own or keep the existing transparent image Click on the colour selector for your background colour Click Save Changes Image Background Go to Appearance >> Background Click on… read more
I’ve utlized the WP Header feature to allow the ability to customize the top header background area of the page. This is the top half part of your page background that sits behind the main content container and logo. You can use a solid colour or you can even use a background image. Screenshot Background Colour Go to Appearance >> Customize >> Colours Find the Top Half Background setting and click on the colour selector Choose the colour you want and click Save and Publish Background with an Image Go to Appearance >> Header Choose File (your image file) to upload (Suggested width is 2560 pixels. Suggested height is 450 pixels.) and click Upload You can crop the image to your liking, otherwise you can skip the cropping if you made your image the size you want before uploading Save it Background with a Transparent Image and Background Colour Go to Appearance… read more
Many people actually like to hide their page titles for many reasons and apparently is quite common. So what I will do is give you a quick tutorial on how you can do this on a per page basis or globally. Hide Titles Globally Go to Appearance >> Customize >> Basic Settings Check the box next to Hide Page Titles Click Save and Publish Hide Titles Indivually To accomplish this, we need a plugin that hides titles; this one will be the “Hide Title” plugin. Go to Plugins >> Add New Search for “Hide Title“ Click Install and Activate To hide the title from a page or post, you need to have either of these open in your editor because in the lower right column, you should see an option to disable (hide) the title for that particular page or post. The only caveat when hiding a Post title is… read more
