Welcome Tiles Tutorial
Hello, I’m happy to welcome you to the tutorial for the ‘Welcome Tiles’ plugin. Here, we will be covering the A-Z of using the various features offered by this nifty WordPress tool.
I’ve tried to keep this tutorial thorough but if by the end of it you are left with any queries feel free to mail them over at firstname.lastname@example.org and I will be happy to address them.
Before we begin, a couple of important terms you’ll need to be clear about:
Welcome Tiles: You already know what these basically are, but keep in mind that each welcome tile can hold up to five elements – Title, Special text, Content, Image/Video and Link, and of course, a minimum of one.
Tile Yard: This refers to the box that contains one or more welcome tiles. The tile yard has its own customization features and can also contain a ‘header’ (a title for the tile yard itself) besides as many welcome tiles as you need.
Now that that’s cleared up, I’ll invite you to get started with the following tutorial videos for the plugin:
The instruction material that follows mostly (though not entirely) comprises of the transcript of the above videos.
To being with, you need to create tiles and save them in the tile storage area. Tiles can be picked up from the tile storage area and sent to the demo area. A preset of your choice can be applied to them, and you can add plenty of customizations of your own.
Creating New Welcome Tiles
Before I begin explaining how to use the ‘Create a New Tile’ section, I’d first like to define a ’tile’ in terms of this plugin. Head over to any of the Welcome Tiles presets, and you’ll notice they’re all basically groups of some sort of boxes or containers, with various elements within each of them. These individual containers are referred to as ‘Tiles’ by this plugin, and each tile can have up to 5 elements. These are referred to as the ‘Title’, ‘Image/Video’, the ‘Content’, which usually comprises of the bulk of the tile’s text, then an element called ‘Special’ (which you can use for adding a sub-title or byline or date, price, etc), and finally the ‘Link’. Each of these elements are ‘individually’ and ‘highly’ customizable, so you get a lot of options to help make a tile look just the way you want it to.
But styling your tiles comes later, first we will begin with actually creating these tiles. So let’s head over to the ‘Create a New Tile’ section on your plugin’s settings page.
Creating a new tile is straightforward, you just need to enter the information for the tile elements, like – Title, Content, Link, etc. To begin with, I recommenced creating tiles for use with specific presets. So head over to the Welcome Tiles homepage at webfixfast.com/welcome-tiles and browse through the preset categories, then pick one that suits your specific purpose. So let’s say you want to attractively list out your company features or strengths. In that case, you should create tiles that you intend to use with one of the ‘Feature Boxes’ type presets.
Now in the ‘Create a New Tile’ section you will want to know what to enter in which input field when you’re trying to create a tile for the Feature Box preset. Where should the feature name go? Where should its description go? etc. Fort the answer to this, click on the ‘For Preset Type’ drop down men at the top right of this section and select the ‘Feature Boxes’ type preset. You’ll find that the tile creation input fields have now been relabeled according to the preset you selected. As you can see, the ‘name of the feature’ goes in the title area, a sub-title in the special element’s input field, the description of the feature in the content area, there there’s the link you wish to add to the tile, plus some text for that link such as ‘Read More’ or ‘Know More’, etc. And of course, you can select an image for the tile, or add a video link.
Now, keep in mind, while you ‘can’ use all these input fields, you don’t really have to. For example, if you are’t interested in adding a link button to your tile just leave these ‘Link’ related input fields blank. Also keep in mind, that if any fields are ‘labeled’ as ’empty’, then all the presets of that category are simply going to ignore those input fields.
So for example, if we were creating ‘notifications’ type presets, you can see on the notifications presets page, the tiles are using only the title, content and image elements. Accordingly, when you’re creating tiles to use with the notification type presets, and you select ‘notifications’ from the ‘For Preset Type’ drop-down on the settings page, the special and link related input fields are all relabeled ‘Empty’. That’s because the ‘Notifications’ type presets are going to be using only the content field, and ‘some’ may use the image you select as well, but they will all be ignoring the special and link related elements, so there’s no point entering text for them.
Now, coming back to our ‘feature-boxes’ type preset, lets enter some text for our tiles. Let’s say you want to enter ‘Lightning Quick Response!’ as the title of one of the features, and let’s place some random text for the description of that feature. Also, let’s suppose we don’t really need any sub-title or links. So we just set the title, some content, and fix an image that we want to use as the icon for that particular feature, and leave the rest empty. You will find simple to use options later on in the settings to enable or disable certain elements of all the tiles in a set, and we’ll just use those to disable the ‘special’ and ‘link elements.
Now that we’re done entering the information for this tile, we’re going to save it by pressing the ‘Save This Tile’ button at the bottom of this section, and if you scroll down, you’ll find that your tile gets saved in the ‘Tile Storage’ section below. That section will be covered in the next tutorial. But before we close this chapter, there are a few more small things to note.
When you want to prepare a new tile, and wish to quickly clear the input fields for your next tile, click the ‘Clear All Inputs’ button. Then enter the information for your next tile. While creating new tiles, you don’t need to bother about their order, because there’s an easy drag-and-drop tile sorting facility later on to help you conveniently do just that, so you may go ahead and create new tiles as they come to your mind. However, please note that for technical reasons and ease of use, I recommend using the ‘visual’ editor instead of the ‘text’ editor while creating tiles.
The Tile Storage
The first thing to note about the tile storage area is that it contains all the tiles you’ve created via ‘Create a New Tile’ section in the past. Whenever you hit the ‘Save This Tile’ button in the ‘Create a New Tile’ section, a brand new tile gets added to the ‘Tile Storage’.
To select a tile from the ‘Tile Storage’, you need to simply click it; click it once more if you need to unselect it. You can select a bunch of tiles and then click the ‘Use Selected Tiles’ button to send those tiles down to the ‘Demo Area’ further below.
Tiles stored in this ‘Tile Storage’ area can, of course, be reused any time in the future for new projects. Suppose you created a set of 4 testimonial tiles and published them somewhere on your website, and in the future get two new testimonials that you wish to add to the set. In that case, simply create the 2 new testimonial tiles via the ‘Create a New Tile’ section and then select them from the ‘Tile Storage’ along with the earlier testimonial tiles and then send all of them to the demo area in order to create a new testimonial set with all 6 testimonial tiles.
Now, suppose you notice an error in one of your tiles. In stead of having to create a new tile from scratch, you could simply select that tile, press the ‘Copy Selected Tile’ button which basically copies all the contents of the tile onto the ‘Create a New Tile’ section above and then make the necessary edits, before saving the new tile and then using it in place of the previous tile.
Now what do you do with botched tiles, like this one? Or other tiles that you are certain you won’t be re-using in the future? Such tiles don’t really need to exist in the ‘Tile Storage’ area. If you find such tiles cluttering your ‘Tile Storage’ space, you have the option of selecting and trashing them. Trashing a tile hides it permanently from view. And just to make sure you do not have any wrong tiles selected while trashing tiles, you could choose to use the ‘deselect all tiles’ button before making your selection of tiles to trash. But what if you’ve published a set of tiles containing a tile that you are now about to trash. Won’t that hide or delete that tile from your websites pages as well? The answer to that is ‘no’. Please note, that tiles on font-end of your website, are not affected if you trash their counterparts in the ‘Tile Storage’.
Welcome Tiles presets can be viewed via the presets page here. The main purpose of the ‘Welcome Tiles’ presets is to help you get done with creating great looking tile arrangements quickly and to showcase some of the variety of output this plugin is capable of. Please note that all the presets of this plugin were created right from the settings panel offered to you. Which means the plugin is capable of highly diverse output.
Let’s begin by sending the tiles we prepared earlier using the ‘Create a New Tile’ section to the demo area. If you recall, these tiles were created specifically for the feature boxes presets. So let’s use a suitable preset from the feature presets page. Presets 126, 127 and 128 appear most useful for our purpose. So let’s try them out on our tiles.
Type in the preset code number in the ‘Get Settings From a Preset or Previous Shortcode’ section and click on the ‘Grab Settings From this Code’ button. After just a moment of loading and you’ll find the settings will have been applied onto the tiles in the demo area.
For those who may like to know, what has happened here, is that the preset number you entered, made certain settings changes in the ‘Tile Design Specifications’ section and the settings from that section were applied onto the tiles. So you can actually see the preset settings inside the ‘Tile Design Specifications’ section.
To give the tiles a header, simply use the ‘Header’ tab in the ‘Tile Design Specifications’ section and type in a suitable heading, then press the ‘submit’ button below.
You can try out other presets in the same way and arrive at one that you prefer the most. Keep in mind that regardless of the preset type that a tile was prepared for, any preset can be applied on your tiles.
Once a preset has been applied, you may want to make some simple modifications to its colors or fonts, etc, and all this can be achieved through the options available in the ‘Tile Design Specifications’ section. Each element can be customized including the tile and the yard, which refers to the overall container of the tiles.
The ‘normal’ as well as ‘mouse hover’ versions of the tile can be customized. Suppose you want the tile background to be white when normal and light grey upon hover, you can achieve such settings via these options.
On the presets pages, you’ll find customization notes next to the presets, which will make the customization process very simple by guiding you through the probable customizations you would want to make. Just follow the instructions for quick customization.
To sort the order of the tiles, use the ‘Tile Sortability’ button to enable sorting so you may conveniently drag and drop tiles into the order that you prefer. Once you are satisfied with the way your tiles look, use the ‘Save and Get’ shortcode button in the ‘Shortcode Generator’ section to receive a shortcode for your tiles and use that shortcode on your website to make your tiles appear wherever you need them to.
There is one last important point regarding this topic. You can also use any previous shortcode as a preset. Just enter the shortcode in the presets input field and get the settings from it for your new tiles. This feature is especially useful when you want to replicate your customized settings onto new tiles on your website.
Delving deeper into the Tile Design Specifications
- Elements: Here is where you can decide what elements you want your Welcome Tiles to display and in what order. To remove an element, click its ‘Added’ button which toggles its state. To change the order of the elements, simply drag and drop them as you see fit. To view the effects of your tinkering, you can press the ‘Submit’ button to the right, bottom of this section which will apply your new settings onto the Tile Yard in the demo area.
- Header: Self-explanatory. You’ll find more settings for the header area clubbed with other elements in other sub sections.
- Dimensions-Width/Height: Except for the Image/Video element, heights are automatically set for elements based on area covered by their text, while widths are set by users. This system avoids the hassle of needing to calculate appropriate heights to avoid overflowing content. It is important to note here that in most cases, the tile’s overall width calculation is best left to the plugin. There’s a check-box for auto calculate option there, and I recommend leaving it checked.
- Dimensions-Padding: Padding is the gap between the inner content of an element – whether it is video, text or image and its border. The background color given to an element will flood its padding as well, right up till its border.
- Dimensions-Margin: Margin is the gap between two adjacent elements. This area is not colored by the element’s own background color, since it is not part of the element, unlike padding. Use the margin setting of an element when you wish to decide the space between it and adjacent elements.
- Dimensions-Alignment: Align is the option to go for when you want your element to fall to the right or the left of the next element. Suppose ‘Image/Video’ is my first element, then if I choose it to be aligned left, it will fall to the left of the the next element, let’s say, title.
- Dimensions-Tile Spread: The ‘Tile’ itself does not have an ‘alignment’ section it has another unique option called ‘Tile Spread’. An interesting option in this is ‘justify’ which pushes the tiles to the corners and edges of the tile yard. The effect it produces is often more appealing for ‘featured’ sections than a normal spread.
- Dimensions-Tiles Per Row: Here you can decide the maximum number of tiles you wish to display per row. Welcome Tiles will try to fit that many tiles per row, however, depending on the space availability and your settings, if it is unable to do so, it will switch to its response feature of spreading across the available area and space the tiles it can display on the screen in an even manner. This is easier to see than to describe. This ‘full width’ feature can also be triggered by leaving the input field empty (welcome tiles will then try to fit in as many tiles as it can per row), which is recommended in most cases when you wish to cover an entire horizontal section with a tile yard. In the previous option, besides ‘justify’, there was a ‘restrict’ option.
- Text: Self-explanatory.
- Image/Video: While you can set the height and width of the image ‘area’ in the welcome tiles, it is in this section that you get to decide how the actual image’s height and width are set. If you want the Image/Video element to display videos instead of image (default option), then you can configure that too here.
- Animations: First important thing to note about animations is that only one animation per element can be used. Also, multiple CSS3 animations per tile can be resource hoggers, so to keep things fluid on weaker laptops and mobile phones, use minimal animations. Finally, consider the ‘Animate on Tile Hover’ button where appropriate.
- Backgrounds: For more tech savvy users – the ‘Gradient Code’ input overwrites the background color value when filled out and can be used for setting a linear gradient for the element. Also try out the ‘Opacity’ input which takes values between 0-1 and adds an interesting effect.
- Borders: Set border values to 0 to kill borders, or try setting a single side to, say, 5 for a neat look. For hover effects where border seems to appear when the element is hovered over – you need to give the border the color of the background in normal mode and then a different hover color. The edge curve input can give a rounded look to an element.
- Misc: While preparing a tile yard for your sidebar or content area, you may wish to set the width of your demo area to the same. This gives you a clear idea of how the tile yard will fit in and at times that can be really helpful in making the right choices when it comes to element, tile and yard dimension settings.