Setup Tutorials for Encounters Lite

Welcome to the Setup Tutorials for Encounters Lite. These are the standard guidelines to help you install, configure, and customize your newly downloaded theme. If you have any requests for additional tutorials relating to this theme, please contact me and I will review your suggestions. These tutorials are also based on the assumption you have a basic understanding of how WordPress works.

Create In-line Columns

December 24, 2013 |
|

Encounters provide you with some additional layout options by creating “Inline Columns” that extends your page style and layout further than with just modules. Inline columns are html snippets of code you copy & paste into your content editor and then change the demo content to your own. They are responsive and is based on a 12 grid layout which means your page content is split into 12 columns. The spans you see below are examples of using the grid layout by counting the columns for your column widths. So if your overall width is 12 columns, then span6 + span6 = 12 columns. This is an example 3 column layout: To see the live demo but also to get the code snippets, click here: Inline Columns Demo  

Create Boxed Images

December 24, 2013 |
|

Boxed images are basically images that are in a container and usually will include elements such as content and/or a button. The live demo for Encounters Lite shows what boxed images look like: The Code Snippet You will have to do some html code here by copying and pasting the code below and then replace the content with your own. You are not required to have the content that this sample has, instead if you have something different, feel free to insert your own. This one is for a 3-column layout, but you can have more simply by changing the class=”span4″ to something else. For example, if you want 4 columns, you would use “span3“. This is based on a 12-column layout which means each column span has to equal 12. So if we have 4 columns, each with a class of span3, then span3 x 4 columns =12 columns….    read more 

List Styles

December 24, 2013 |
|

Encounters Lite uses image list styles in addition to standard lists. Aside from the default unordered list and the ordered list, you will be adding a class to the <ul> tag like this: <ul class=”open-arrow”>   Unordered List – Default Unordered List – Open Arrow The class for this is <ul class=”open-arrow”> Unordered List – Closed Arrow The class for this is <ul class=”closed-arrow”> Unordered List – Checkmark The class for this is <ul class=”checkmark”> Unordered List – Square The class for this is <ul class=”square”> Ordered List – Default Definition List – Default Definition lists are used to outline multiple terms and descriptions, for example, a glossary would be ideal for this type of list. An example followed by a code snippet looks like this: <dl><dt>Definition List Title</dt><dd>This is a definition list division.</dd><dt>Definition</dt><dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit uspendisse potenti.</dd><dt>Gallery</dt><dd>Donec nec erat non nibh tincidunt posuere. In…    read more 

How to setup a contact us page like the demo

December 24, 2013 |
|

This tutorial will help you create a Contact Us page just like the live demo site for Encounters Lite and the Pro version of Encounters. However, before we get started, you will need several plugins installed: Contact Form 7 – Activation will add this to the left column admin menu group Dynamic Widgets – Lets you publish widgets on select pages Remove Widget Titles – Lets you disable a widget title by adding a ! in front of your title WP Google Maps – Adds a google map to your page Step 1 – Install the Plugins Go to Plugins >> Add New Search for Contact Form 7 Click Install and then Activate it Repeat for the rest of the plugins Step 2 – Setup Your Form Code Now we need to create our form that the demo site has, but to make it easier, the code below is what…    read more 

Create a WordPress Gallery

December 24, 2013 |
|

The default gallery shortcode that is part of WordPress is extremely limited and getting a good looking gallery in conjunction of working with WordPress thumbnails is a nightmare because there was not enough thought that went into this available feature. However, with Encounters, I did a little extra customization for those who want to use the default WordPress gallery in their website by stripping out the built-in styles they use and opted in for my own. It’s not perfect but it still looks good without the need of a plugin. Prepare Your Photos As I will keep saying this on all tutorials relating to images, prepare your images by cropping, sizing, and optimizing your photos before uploading. I also recommend making your images the same dimensions if you can so you keep a consistent layout and size with each image, but this of course is not required. Before we begin,…    read more 

How to setup the Recent Posts widget with thumbnails

December 24, 2013 |
|

Encounters lite (just like the Pro version of Encounters) has styles included to give you a nice Recent Posts layout when using the “Recent Posts Plus” plugin. Your widget gives you the option to show Featured Images from your posts (required for the thumbnails), as well you can get different layouts. Step 1 – Install the Plugin Go to Plugins >> Add New Type in the search field for “Recent Posts Plus“ Click install, then activate it Step 2 – Setup Your Widget Go to Appearance >> Widgets Drag a Recent Posts Plus widget into the widget position you want this in…most common will be the blog right or left sidebar column. Set your options and settings (see the screenshot and code below) Click Save Widget Options – Demo Site Example This is a what the live demo site of Encounters Lite has for it’s settings, although, your’s might be…    read more 

Change the colours of Encounters Lite

December 24, 2013 |
|

One of the best features of Encounters Lite (all my themes) is that you can modify the colours of almost every element within your page(s) with a colour selector that is already part of WordPress. I simply added more colour selector fields based on what elements you can change to suit your own preferences. Go to Appearance >> Themes >> click on the Customize text link Click on the Colors tab in the left column For each item, click on the select field which opens the colour selector and move the circles around until you find the colour you want You should be able to see the colour changes take effect in the preview window to the right When happy, click on Save & Publish and then Close Move on to the next colour item  

Choose your blog layout style

December 24, 2013 |
|

You get three (3) layout styles for your blog along with a few options with Encounters. For instance, you can have a left or right column (sidebars) blog layout and you get a full width (no sidebar columns) option. Once you decide on how you want your blog to look, you also get the choice of using a full sized featured image or a small image. To give you an idea what the image style sizes look like, I’ve provided a couple screenshots below: Wide Featured Image Small Featured Image Set Your Layout Go to Appearance >> Themes >> click on the “Customize” text link on this theme Click on the Basic Settings tab Choose your Blog, Author, and Archive Layouts Choose your Intro Image style: Click Save Options  

Use the WordPress Header for Images

December 24, 2013 |
|

Part of WordPress includes a “Header” feature that lets you upload and crop photos that you can use in a header of your page. Before in the past the header would have the site title and description on top of it and you were able to change the background of it. Well things have changed and advanced to a point that you can use the header in many ways, whereas for Encounters, you get to use it as a type of showcase banner for your pages…normally used for the “Front Page” only. How to Find the WP Header Feature First, there will be two methods you can work with the WP Header feature: The first is clicking on the “Header” link in the left panel in your dashboard under “Appearance“. When you are in your dashboard, this is going to be the fastest way of accessing the setup of your…    read more 

Setup your main menu and other menus

December 24, 2013 |
|

Encounters Lite comes with one (1) menu, although the pro version comes with three (3) predefined menus for you, but with Encounters Lite, you can create more as you need them. Before you create your menus, you will have what is called a “fallback” menu which means when you install WordPress, you will get a basic menu of pages showing like this: Again, I will assume you know the basics of WordPress, but I will go through the setup for this theme. Setup Your Primary Menu Go to Appearance >> Menus In the “Menu Name” field, type in what you want to name your menu, for example, Primary Menu and then click the “Create Menu” button Then in the left side, you should now see a box that is labeled as “Theme Locations“. In the Primary Menu setting, select the menu you just made and then click “Save“ Now you…    read more 

Black Friday Sale - 50% Off Discount on ALL PRO THEMES AND MEMBERSHIPS Use discount code BFRI2020