This is tutorial will help you create an embedded Showcase Gallery in your page content. With a previous tutorial, we created a showcase gallery in the Showcase sidebars using widgets, but this one is going directly into your page content with the help of an unordered list. This also means that we will be more hands on with HTML code doing it this method because we need to work in the “Text (HTML)” tab of your editor.
After the Introduction to the Showcase Gallery, we can move on to making an actual showcase gallery with this tutorial! We’re going to make this:
With the live demo of Emotions, you will have seen the Showcase galleries that gives you a creative way of displaying photos that can be used as a gallery or even a portfolio. You can have a showcase gallery in your page content or in one of the two Showcase sidebar group positions like you see below. You also have the option to display other types of content instead of photos, and even add individual background colours for each showcase sidebar position.
Emotions offers optional custom widget styles that changes the look to widgets when applied. When we say “optional”, we mean that they are available to you if the “Widget CSS Classes” plugin is installed and activated. Unfortunately, WordPress does not have this feature capability built into it, so we need a plugin to add this function. There are not a lot of plugins available that can do this, but the one I recommend is called “Widget CSS Classes” by C.M. Kendrick.
When we say “page background“, we are referring to the overall page, not the content area. For example, here is a screenshot where the page background is using a photo and the page width is using a boxed setting of 1600px.
Every theme offers a selection of page templates, so Emotions is no different. You get the basic templates, plus a couple special templates that I will outline in a moment. Available templates are:
As it is a common feature with all of our themes here at Shaped Pixels, you can customize your colours for Emotions with ton of selectors that are found in the Customizer. Although most elements can be customized, there still may be a few that don’t have selectors, so creating some custom CSS might be required.
The colour selectors are easy to use by clicking on the button and using the sliders on the colour fields to adjust the colour and tone (light or darker) by using the right side vertical slider.
Emotions comes with several blog styles that you can take advantage of, including a few extra customizing options for various elements relating to the blog. More on this in a moment, but to get started, we will look at our blog styles in relation to the screenshots you see below.
Emotions comes with an option to wrap all content and widgets in a block (box). These blocks have a padding (inner spacing) and a background colour (light grey) to help them stand out from the content area background colour, which is white by default. Enabling the content blocks feature will affect the blog as well as pages. Here is an example showing the very suttle difference with the blog:
This tutorial won’t take you through the setup of your menu because there is another TUTORIAL for that. However, what this tutorial will help you with is to adjust the top margin spacing of your main menu. Why would you need this? It depends on the header style you choose, but the idea is to give you the flexibility to adjust the menu positioning by adding/reducing the top space of your menu container.