Installation Customization

Introduction

Box comes equipped with all you'll need to run a successful store and create a recognizable, respectable brand image thanks to sublime modern design, extensive features and lightweight coding for the smoothest buying experience around.

In this guide we'll cover several areas to help you make the most of the theme, with details on the available theme options and features, as well as some simple customization tips.

Guide Structure

This guide is split into three sections:

• Theme Options - Covers the options included in theme that are accessible via the WordPress Customizer.
• Theme Features - Explores the features available in the theme, such as advanced typography and plugins such as News Show Pro and Tabs.
• Frontpage Elements - Details the frontpage elements and how they are created, and provides simple tutorials to help you get started with customizing them for your own content.

Theme Options

Box is packed with multiple options to make it flexible and easy to customize for your needs. You'll find a wealth of settings built into the WordPress Customizer, which offers a real-time preview of changes for comfortable, intuitive customization. To access the customizer, log-in to your WordPress backend and click on Appearance → Customize in the dashboard main menu. The customizer's main page consists of a viewport on the right that displays the live preview of your website (it will show the frontpage by default), with a list of option areas on the left. Clicking on one of these areas will expand the available options for that particular area e.g. clicking on the Fonts area will expand a list of options for changing your site's fonts. In this section of the Customization Guide, we'll look at each option area and their respective settings.

Site Identity

This section provides options for the core branding of the theme and your website, such as names, logos etc...This section includes the following options:

• Site Title - The site title is created when you first install WordPress; it sets what name visitors will see in the browser tab when browsing your site and will be used as the logo content when the Logo Type option is set to Text.
• Tagline - The tagline appears next the title in the browser's tab, to the right of the divider symbol (|.
• Site Icon - This options lets you set a favicon for your site, which is displayed in browser tabs & shortcuts or as app icons on mobile phones.
• Show Tagline - When the Logo Type option is set to Text, the tagline will be displayed underneath the logo of the site.
• Logo Type - Selects the type of logo that will be displayed at the top of the site; the example logo is created via CSS which you can of course modify, or you can define a simple text or image logo, or have no logo at all.
• Select Image - This option appears if you have set the Logo Type to Image, allowing you to upload a new logo to use on your site.

Colors

This section allows for customization of the main colors of the theme via a color picker, which makes it easy to find the color you wish to use instead of modifying the theme's CSS. The available options are:

• Background Color - This options sets the color of the background, which covers any area outside the theme's central width as well as the area behind the top menu.
• Primary Color - This option sets the color of the main color elements of the theme, including menu highlights and on-hover colors, buttons, and the background colors of the frontpage text blocks.
• Secondary Color - This option covers secondary items such as slide buttons and the background color of the image blocks (such as the frontpage "New Models" section).

Background Image

This section provides options for setting and manipulating a background image instead of a background color for your site. The available options are:

• Select Image - Clicking this button will open your media manager, where you can select or upload an image to be used as the background.

The following options are only visible once a background image has been set for your site:

• Remove - Removes the selected background image.
• Change Image - Opens the media manager to allow you to select an alternative background image.
• Background Repeat - Offers four options for controlling the 'tiling' effect of your background image; set the background to No Repeat to use the background image only once, to Tile to repeat the image until all the background area is covered, or to Tile Horizontally or Tile Vertically to repeat the image only horizontally or vertically across your background.
• Background Position - Sets the starting point for the tiled background image; choose from Left, Center or Right.
• Background Attachment - Sets whether the background should allow you to scroll down it like it was part of your site, or to fix the background image in its relative screen position no matter whether the user scrolls or not.

Menus

This tab contains options for creating and setting menus, with the same functionality as the menu page. There are two main options in this section:

• Menu Locations - This option lets you assign available menus to the available locations in the theme.
• Add a Menu - Lets you create new menus and assign items to them.

Any menus you have created will also appear in this section where you can modify their available links and options.

Widgets

This section allows you to add, remove or edit widgets in the widget positions available in the Box theme, similar to the functionality you would find in the Appearance → Widgets section of the dashboard, but with the benefit of the preview window to see the effects of the widget as they are created (with some exceptions; some third-party widgets can be updated in this section, but won't live preview due to the way that they work behind the scenes).

Static Front Page

This section deals with how your frontpage content is laid out, with options for displaying static pages or latest posts. The available options are:

• Front page displays - Choose whether you want your frontpage to display a list of your latest posts, or a styled static page. Box uses a static frontpage to create the majority of its homepage content, so it's advisable to leave this setting as A Static Page.
• Front Page - Sets the static front page; in Box if you've used the quickstart or manual install guide then you should already have a page with the Frontpage template set as your frontpage, and this should not be changed as it is relied upon to create the frontpage layout.
• Posts Page - Sets a separate page where you will display your posts if you are using a static frontpage. This option should not be needed, as Box includes category layouts for displaying your latest posts.

Font Options

Box has support for multiple fonts, from standard web fonts to more complex offerings from Google Fonts, and you can target each individual element of the page to use a particular font, though the standard installation already has all relevant elements targeted if you're not interested in getting that deep into customizing the fonts! The available options are:

• Define Size of the Fonts - This option sets the base size of the font, from which all other text sizes are taken. Essentially, the base size is the size standard text will use, with CSS-styled text being larger or smaller relative to this base size.
• Body Font - Sets the font used in the Body elements of the theme (such as blog post text etc...). This can be a standard web font such as Verdana or Arial, or a Google Font.
• Google Font URL for the Body - This option only appears when the Body Font option is set to Google Font. Here, you can add the URL for the Google Font you wish to use (more information is available in the Using a Google Font section of this guide that follows this one).
• Selectors for the Body font - This field contains all the CSS classes or elements that should be changed to the selected Body Font. These elements are already preset in the theme, but you may add/remove your own elements if desired.
• Header Font - Sets the font used in the Header elements of the theme (e.g. headings, logos etc...); choose from standard web font or Google Font.
• Google Font URL for the Header - Appears if the Header Font option is set to Google Font. The Google Font's URL can be added here.
• Selectors for the Header font - Defines the CSS elements that should use the selected Header Font. Can be customized if desired.
• Other Elements Font - Defines the font used in the Other Elements of the theme (such as the author info section, comments etc...); choose from standard web font or Google Font.
• Google Font URL for the other elements - Appears if the Other Elements Font option is set to Google Font. The URL for the chosen Google Font should be added here.
• Selectors for the Other Elements font - Defines the CSS classes that should use the Other Elements font. Users may add/remove their own classes as needed.

In each of the Font options there is a choice between using a standard web font or a Google Font; follow these steps to apply a new font to each section as needed:

Using a Google Font

Setting up a Google Font in the theme requires some very simple steps:

1. Navigate to to Google Fonts website .

2. From the list of fonts, select the one you wish to use and click the Quick Use icon.

   

3. Select the styles and character sets you wish to use for the font by clicking the tickboxes next to each.

   

4. In the Add this code to your website section, copy only the font URL from the link element.

   

5. In the Appearance>Customize>Font options section of your WordPress backend, select Google Font in the drop-down list for the section you wish to use.

6. Paste the copied URL into the Google Font URL for Header/Body/Other Elements field; after a moment the live preview will update to show you how your site looks with the new font.

7. Click the Save & Publish button to save changes.

The font has now been set as needed, and you will see the changes in the live preview window.

Using a Standard Font

The standard fonts available may be seen and selected in the Header Font, Body Font or Other Elements Font drop-down list; under the initial Google Font option are a list of standard fonts, so if you wish to use one of these fonts you may simply select it from the list, and the live preview will updated accordingly.

Default Font Configuration

The default font configuration covers the settings used in the demo layout of Box, including the fonts used and the selectors specified for each font.

Body Font

This option uses a Google Font with the following Google Font URL for the body:

//fonts.googleapis.com/css?family=Roboto:400,500,700

                         body,
                         .error404 .content-wrapper h2
                    

Header Font

This option uses a Google Font with the following Google Font URL for Header:

//fonts.googleapis.com/css?family=Montserrat:400,700

The following selectors are defined in the Selectors for the Header Font field:

                         h1,h2,h3,h4,h5,h6,
                         .btn,
                         [type=button],
                         [type=submit],
                         button,
                         .article__date,
                         .widget.contact,
                         .bottom__box h3,
                         .post__tag,
                         .product-fields-title,
                         .bottom__links
                    

Layout

This section is concerned with the width of the theme, specifically in regards to the sidebar and the responsive width on each screen size, such as for tablets and mobile phones (which dictates which media elements are loaded etc...). The available options are as follows:

• Theme Width - Sets the max width (in pixels) of the theme; this is the largest that it will stretch to given a screen with a high-enough resolution; the default is 1560px.
• Sidebar Width - Sets the total width of the sidebar; the width is set as a percentage of the total available width to ensure that the sidebar remains uniform across all screen sizes. For example, if your theme width is set at 1000px and the sidebar widget is set at 30%, then the sidebar will be 300px wide. The default setting for this options is 20%.
• Sidebar Position - Sets whether the sidebar should appear on the left or right of the theme on the pages that have a sidebar; the default is set to Left.

Features

This section includes any special features that do not fit with the other option categories. The available options are:

• Enable Classic Menu - When enabled, the main menu of the theme will appear at the top of the screen in the usual position. When this option is disabled, the classic menu is replaced with a 'hamburger' menu icon that opens an Aside menu when clicked.
• Display Details on Pages - When enabled pages will display the author, creation date and other pertinent information, similarly to what is displayed on blog posts.
• Read More Button on Categories - This option toggles whether a "More" text link should appear on post category listing pages under each listed post.
• Display Tags on Category Pages - This option sets whether a post's tags are displayed underneath the post preview in the category page, such as in the blog section of Box.
• Enable Popup Login - When disabled, clicking on a login link will take the user to a separate login page. When this option is enabled, clicking the login link will open a login overlay without navigating away from the current page.
• Date Format - Defines the formatting for the dates in post previews and at the top of posts.
• Copyright Text - Here you can add HTML that will be displayed in the footer of the theme.

Social API

The Social API area provides options related to the addition of share buttons and social network icons in the theme. In Box, the social network sharing options are displayed in a Share With section at the bottom of posts/pages, with individual icons for each social network.

• Post Social Icons - Toggles whether posts will include Facebook, Twitter, Google+ etc...share buttons at the bottom of each post.
• Page Social Icons - Provides the same functionality as the above option, but this time toggles whether the icons appear on pages rather than posts.
• Enable FB Icon - Set whether a Facebook share button is included in the social sharing area.
• Enable Twitter Icon - Toggles whether a Twitter share button is added to the social sharing area.
• Enable Google Icon - Adds a Google+ share button to the social sharing area.
• Enable Pinterest Icon - Adds a Pinterest link to the social sharing area.
• Enable LinkedIn Icon - Adds a LinkedIn link to the social sharing area.
• Enable VK Icon - Adds a VK link to the social sharing area.
• Enable Print Icon - Adds a print icon for users to print out articles to the social sharing area.
• Enable Mail Icon - Adds an email link to the social sharing area so the article link can be emailed.

Cookie Law

This Customizer panel is dedicated to configuring a cookie banner in accordance with EU law.

• Use Cookie Consent Plugin - Enables or Disables the Cookie Law plugin.
• Consent Mode - Defines the type of cookie consent your site uses; choose from Explicit, where no cookies are set until the visitor consents, and Implied, which sets cookies but offers users the option to opt-out.
• Use SSL - Sets whether the Cookie Banner uses Secure Socket Layer (SSL) to protect any data it receives.
• Banner Placement - Choose where the Cookie Banner appears on your site.
• Tag Placement - Selects where the Privacy Settings tag appears on your page, that opens the Cookie Consent overlay when clicked.
• Refresh after gaining consent - Toggles whether the page should refresh after cookie consent is given.

There are some advanced configuration options available with this plugin; more information may be found on our blog in this Features article .

Frontpage

This panel in the WordPress Customizer controls the slider features on the frontpage. In order to see this panel in the customizer the site preview must be displaying your site's homepage. The available options are:

• Tag Name - The frontpage header automatically pulls your latest posts that have the same tag as what is entered in this field; by default this is set to featured, but you can use any tag you like.
• Header Image Height - Sets the height in pixels of the header images.
• Header Image Width - Sets the width in pixels of the header images.
• Enable Header Grid Layout - When this option is enabled the header layout is changed from the default accordion style to a grid layout consisting of a single large post preview and two columns of two smaller previews.
• Amount of Header Columns - Sets the number of post previews that are displayed in the header; the default is 3, but you can have up to 5 previews in the accordion layout.
• Grid Layout - This option is only available when the Grid Header Layout is enabled, and it allows you to decide the order of the photo and two columns; choose whether to have the large photo in the center, left or right column, with the two smaller columns taking up the leftover spots.
• Filter Frontpage Categories - Underneath the header is a grid layout of your latest posts; when this option is enabled you can specify which categories these posts should be taken from via a Select Categories checkbox.

Contact Page

This section is only available when the Customizer preview viewport is on the contact page i.e. when the frontpage preview loads in the demo layout, clicking on the Contact link in the main menu will take you to the contact page, and this section will appear. This section includes options specific to the contact page.

• Enable reCaptcha - When enabled users must complete a reCaptcha before they can send an email via the contact form.
• Display Address Block - When enabled the contact page area that shows the address, phone, fax and mobile fields will be displayed on the page.
• Address - Text in this field will be displayed in the address block next to the Address text.
• Phone - Characters entered in this field will be displayed in the address block next to the Phone text.
• Fax - Characters entered in this field will be displayed in the address block next to the Fax text.
• Mobile - Characters entered in this field will be displayed in the address block next to the Mobile text.

Theme Features

The Box package includes several plugins and other additions that expand the core features of WordPress to give users total control of their content and overall look. In this section we'll examine these features and expand on how they can be used.

Widget Rules

Box includes the GK Widget Rules plugin from GavickPro, which allows you to control exactly where a given widget will appear. Usually, you are limited to defining only the location where a widget appears, but with Widget Rules, you can set different widgets to appear on different pages, or limit particular widgets to a category; there's a large number of options at your disposal, providing a great way to diversify and target your widgets depending on the content.

Using Widget Rules

Once the plugin is activated, a Widget Rules button will appear at the bottom of every widget instance in the Widgets page, reachable by navigating to Appearance>Widgets in your WordPress dashboard. Clicking this button will expand the options accordingly, and you can start configuring where a widget appears.

The options available are:

• Visible At - This option is used to micro-manage a widgets appearance by exception or the rule. For example, you can use No Pages Except to prevent a widget from being displayed anywhere except areas you explicitly tell it to appear; great if you want the widget to appear on one or two static pages only. In contrast, the All Pages Except option applies the widget to the same place in all areas except the ones you tell it to avoid. Finally, All Pages simply displays the widget everywhere; this is the default behaviour.
• Select Page to Add - After selecting whether you wish to automatically include or exclude pages, you need to add the content that should be ignored/included. With this option, you can select any particular page or post, all posts in a category, plus some additional pages such as 404 pages and the like. When necessary, an additional box will appear to allow you to enter category or post slugs; we will cover this process in the next section.
• Selected Pages - This section shows any pages that have already been Included/excluded.
• Custom CSS Class - This option allows you to add a special CSS class to the widget; great if you want to target it for additional CSS styling.
• Visible On - This option lets you decide which devices should see the widget in question. For example, you can set a widget to appear only on desktop browsers, or only on mobiles. This allows you to have a different instance of a widget depending on the device to ensure they get the best experience if a given widget isn't responsive.
• Visible For - This option allows you to hide a widget from particular users; useful if you only want registered users to access the resource, for example.

Adding a Page/Post to the Selected Pages List

This short guide will show you how to add a specific page or post to the selected pages list, so they can be included or excluded from displaying a widget depending on your Visible At settings.

1. Set your preferred option in the Visible At section, depending on whether you want to exclude pages from displaying the widget (All Pages Except) or include them (No Pages Except).
2. In the Select Page to Add drop-down list, select Page or Post, depending on which one you wish to add.
3. A new field will appear called Page ID/Title/slug. Enter the slug for the post or page you wish to include/exclude in this field, then click Add Page to add the page to the Selected Pages list.
4. Click Save to save changes.

You may also set a widget to appear on all pages or all posts; after selecting Page or Post in the Select Page to Add drop-down list, instead of entering a slug in the provided field, just click Add Page, and this will add all pages or posts to the include/exclude list.

To get the post slug for a particular post, navigate to the Post List in your WordPress backend by clicking Posts>All Posts in the dashboard, then highlight the post you wish to display to bring up the options related to that post and click on Quick Edit. This will open a new set of options, including a field that contains the current post's slug, and also allows you to change it if necessary.

The same steps may be used to find the page slug; simply open the Page List from your dashboard by clicking Pages>All Pages in the left menu of your dashboard, then highlight the page you wish to add and click Quick Edit to see the page slug; copy this into the appropriate field in the Widget Rules settings.

Advanced Typography

Box includes some advanced typographical elements for styling your text content beyond the standard HTML tags, such as special list layouts and text highlights.

How It Works

The typography options in Box may be applied in the Text mode of the TinyMCE editor, where you enter raw HTML code alongside basic text. Here, you can manually add the classes required to achieve each effect to the relevant HTML tags. To use the Text mode, click on the Text tab at the top-right of the editor window:

When writing in HTML code in the text editor, you will need to manually attach the classes to the HTML tag, so that the correct CSS rules are applied.

To attach a class to an HTML tag, a new attribute, "class", followed by an equals sign and the class name in quotes, must be added to the opening tag of the element after the tag but before the closing bracket. This assigns a class to that element. For example, to add a class called "special" to an HTML <p> tag, you would write:

                    <p class="special">Your Text</p>
               

The following sections will provide information on the classes available, and their functions.

Warnings

Warnings are highlighted text segments that are meant to draw attention to important information, such as rules, advice or guidelines. There are four types of warning available, each with a different purpose. To use them, simply add the class name to a <p> element:

                    <p class="classname">
               

• gk-info - This attribute adds a grey border around the warning text and prefaces it with a speech-bubble icon to highlight information.
• gk-success - This attribute adds a green border around the warning text and prefaces it with a lightbulb icon. It is useful for adding advice or hints to your content.
• gk-notice - This attribute adds a blue border around the warning text and prefaces the text with an exclamation mark icon in a warning triangle. It is used for warnings or important notices.
• gk-error - This attribute adds a red border around the warning text and prefaces it with a red cross icon; useful for negative messages or warnings.

Highlights

Highlights are a way to make a particular part of a paragraph stand out. Unlike the warnings, highlights can be applied in the middle of a paragraph without damaging the text layout.

To use highlights, you will need to add a set of <span> tags in your <p> tags to separate the phrase, and add the highlight class to the <span> element. For example, if you wish to add a highlight to the word "highlight" in the following <p> tag:

                    <p>This is a highlight phrase</p>
               

You would need to add the opening <span> tag with the highlight class before the word "highlight", and the closing </span> tag after, like this:

                    <p>This is a <span class="className">highlight</span> phrase</p>
               

The available highlight classes are:

• gk-highlight - This highlight adds a yellow background to the text.

Code Listings

Code listings create blocks that separate code content away from the main content of your site, making it easy for users to spot and read your code:

Creating the code block is easy; simply surround the text/code you want to separate with a set of <pre> tags:

                         <pre>
                         #wrapper {
                              float: left;
                              display: block;
                              }
                         </pre>
                    

Unordered Lists

Unordered lists are just that; lists with no particular ordering i.e. no numbered or otherwise ordered entries. This is a good way to list points or minutes in an easily-readable format.

The classes for styling the unordered lists should be added in the opening <ul> tag that begins with list, with the <li> list item tags left as they are:

                    <ul class="className">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    </ul>
               

There are four available unordered list classes, as follows:

• gk-bullet1 - This class uses solid black dots as the delimiter between each point.
• gk-bullet2 - This class uses black tickboxes as the delimiter to each point.
• gk-bullet3 - This class uses black star outline icons as the delimiter to each point.
• gk-bullet4 - This class uses black right-arrow icons as the delimiter to each point.

Number Blocks

Number blocks create circles with character inside, such as a number, followed by a text. They are useful for highlighting larger points or available options.

The complexity of the number blocks means that they require some more complex HTML tags. Each block contains a <p> tag, which also has the class assigned to it, and a <span> tag that contains the character to appear in the block, with the text following this before the closing </p> tag. The basic structure looks like this:

                    <p class="className">
                    <span>Character (i.e. "1", "A")</span>
                    Item Text
                    </p>
               

The classes available are:

• numblocks num-1 - This creates a blue-colored colored circle and character inside, with black text.

Blocks

Blocks are ways to frame text to draw attention to it, either by adding colored backgrounds or outlines.

Creating blocks for your text is very easy; a basic <p> tag with a class added is all that's required:

                    <p class="className">
               

The available classes for blocks are:

• block-1 - This class adds a greyish-green background to the text.
• block-2 - Similar to the above class, but this time using a yellow background.
• legend - Creates a black outline around the text with a Legend label at the top-left of the block.

Blockquotes

Blockquotes allow you to elegantly highlight quotations in your article, to show that they are not from your pen, as it were.

The blockquotes format consists of a <blockquote> tag containing a <p> tag that in turn contains the quoted text.

                    <blockquote;>
                    <p>Your Quote Here</p>
                    </blockquote>
               

There is one blockquote type included in Box:

• No Class - The basic blockquote layout; adds a grey background with blue margin and quote marks to the text.

Floated Blocks

Floated blocks are some of the most visually-appealing typography options available in Box. They allow you to highlight particular phrases or quotes from the text by adding them on the left, right, or centre of your main content, much like a newspaper.

The layout of the HTML tags for floated blocks depends on the type of floated block you are using, and where you want the block to appear. The text to appear in the floating block is defined in a <span> tag within your content. Content added before the <span> tag will appear above it, and content added after will be added alongside it. A standard piece of HTML using these blocks may look something like this:

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.

                    <span class="gk-block-text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

                    Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.</p>
               

Something to note here is that there is no set position for the <span> tag to be added; it should be placed organically at the end of a paragraph or line in the text to highlight a particular phrase. Use the preview option in WordPress as you write the content to see how it looks and make your decision from there, and experiment with the <span> tag placement; you will get the feel for your preference very quickly!

There are a total of two classes for floated blocks:

• gk-block-text-left - This class aligns the text in the <span> tag to the left, with text following the tag appearing to the right.
• gk-block-text-right - The same as the above class, except this time the <span> tag text is on the right, and the main content after the closing tag floating left.

Two-Column Paragraphs

To help your blog look more visually interesting, Box includes a two-column paragraph layout for a newspaper-style look:

The format for this layout uses a <p> tag with a post__double class:

                    <p class="post__double" >Paragraph Text </p>
               

The paragraph text will be automatically split equally between the two columns, so no matter whether you write a short 10-word paragraph or a long-form text, the two-column layout will still work perfectly.

Large Post Images

Posts in Box include three image sizes; a full-width featured image in the header, a smaller size for standard images inserted into the content, and also an optional larger image that sits between the full-width header size and the smaller standard image size. To apply the larger image style, the <img> tag should be wrapped in a <p> tag with a post__oversize class:

                    <p class="post__oversize" ><img src="/img URL" /></p>
               

Font Awesome

Font Awesome is an incredibly useful font for delivering scalable icons to your site. With over 500 icons available covering a wide range of topics, from popular social media icons to transportation and payment icons, there's something for every type of site available.

How It Works

Font Awesome functionality is included as standard with Box, so you can start using their icons immediately. Icons are added to content using an icon <i> tag with a particular class attached that corresponds to the icon you want to display.

Every icon in the Font Awesome set has a class name beginning with fa, such as fa-pinterest for the Pinterest icon. To use an icon, this class name must be inserted into the <i> tag using the following format:

                    <i class="fa fa-ClassName"></i>
               

Notice that fa appears twice in the class attribute; the first time to declare the use of Font Awesome, and the second time as part of the icon's class name. For example, to insert the Pinterest icon mentioned above, the code would be:

                    <i class="fa fa-pinterest"></i>
               

A full list of available icons and their respective class names may be found at the bottom of our Box demo's Typography Page .

The tags should always be left blank, with no text between the opening and closing tags. You may insert these tags anywhere you are entering standard HTML content, including any of our frontpage sections, or in your pages and posts.

The WYSIWYG (What You See Is What You Get) Editor that WordPress defaults to when editing posts and pages will usually clean up blank tags; that is, tags with no content between them. This will include <i> tags that create Font Awesome icons, since they do not have any text between the opening and closing tags. To counter this issue, make sure to only use the plain text editor when adding icons.

GK News Show Pro

News Show Pro is the flagship open-source widget created by GavickPro, with complex functionality that allows it to display article previews in a range of styles and layouts from your chosen sources. In this section we'll look at the core functionality of the widget in both widget and shortcode form.

What is News Show Pro?

News Show Pro is a WordPress plugin that can create article previews. It includes a range of layouts to choose from, each offering a different look for the previews and often slightly different functionality. This plugin is not used on the Box frontpage, but can be applied to display products or articles anywhere on your site.

How is News Show Pro used?

News Show Pro can be inserted into your content in two different ways; either as a widget that is placed in an available widget area and configured via the Widgets page, or directly into your post or page content via a shortcode that accepts various attributes to change the default settings. Let's start by looking at the widget version and the available options therein.

News Show Pro as a widget

Like other widgets, News Show Pro can be added to any widget area on your site either via the WordPress Customizer, or on the Widgets page of your WordPress Dashboard, reached by clicking on Appearance → Widgets in the main menu. Simply drag a widget from the left side of the screen to the chosen widget area:

News Show Pro Widget Options

Once the widget has been placed a group of option tabs will be expanded for you to control the look, layout and sources for the previews. The available options are:

Basic Settings

This tab covers the basic options, including data sources, CSS suffixes and order. The following options are included:

• Title - Sets the title for the widget.
• CSS Suffix - Adding a CSS Suffix to this field allows for targeting particular CSS rules to particular NSP instances.

• Data Source - One of the most important options; this option allows you to specify which articles are displayed by NSP. It can be pulled with the following filters:

  • Latest Posts - NSP will display the latest articles from all categories, with the newest articles displayed first.
  • Categories - Allows you to specify a particular category/group of categories; NSP will then display the latest posts only from the specified categories.
  • Sticky Posts - Will display sticky posts only, from newest to oldest.
  • Tags - Allows you specify a particular tag(s); NSP will then display the latest posts that include the chosen tags.
  • Post Slugs - Allows for specific post slugs to be entered for NSP to display; great if you have particular popular posts you always want users to be able to find.
  • Custom Post Types - Allows for a specific post type to be selected; NSP will then only display the latest posts to use the custom post type.
  • JSON File - Specify a JSON file containing the post information you want to display.
  • RSS Feed - Displays posts that have been added to your selected RSS Feed from newest to oldest.
  • Latest WooCommerce Products - Instead of displaying posts, NSP will display previews of your latest WooCommerce products.
  • WooCommerce Categories - Like the standard category option, but using WooCommerce categories as sources instead.
  • WooCommerce Product SKUs - Allows you to specify particular products to be displayed, much like the Post Slug option for posts.
  • XML File - Specify an XML file containing the post information.
• One Per Category - When this option is enabled NSP will only display one article or product from any given category; very useful if your site sells a wide range of products and you want visitors to get an immediate idea of what's available.
• Order By - Products or articles are sorted by newest to oldest by default; this option allows you to change the order to alphabetical order, by date, ID, modified date or random, and set it to ascending or descending (that is, from newest to oldest or newest to oldest etc...).
• Offset - This option allows you to tell NSP to skip a certain number of products or articles i.e. if you've created a showcase for your new product in the header of the frontpage and don't want it to be duplicated in the product preview section, then you can set this option to 1 and NSP will skip the newest product, displaying the second-newest onwards.
• Use Default CSS - NSP includes a default CSS profile for the widget; unchecking this option prevents it from using the default CSS. Instead, it will use CSS specified in the theme.

Widget Layout

This section covers the overall layout of the widget; number of previews, pagination etc...The options in this section are:

• Article Wrapper - This option allows for a specific functionality to be selected for the current instance of News Show Pro; each of these wrappers were usually specifically designed for a particular theme, but can be applied elsewhere.
• Pages (article block) - Sets the number of "pages" of articles or products to be displayed. This refers to paginated groups of previews; for example, if you have a display of five products on the frontpage, setting this option to 2 would add pagination options to the section, allowing users to browse to a second set of five products for a total of ten in the preview.
• Columns (article block) - Sets the number of columns of previews NSP should display. When combined with the Rows option, it allows for complete control of the number of previews.
• Rows (article block) - Sets the number of rows of previews NSP should display. Combined with the Columns option, these options define the total number of product or article previews.
• Pages (link block) - Some of the available article wrappers for NSP include two sets of previews; one set that display an large image with text, and a secondary set that use smaller images or plain text; these secondary previews are called Links. This option sets the number of pages for the links, if applicable.
• Rows (link block) - Sets the number of rows of article links.
• Article Pagination - Defines the method available for users to move between different pages of articles if the Pages (article block) option is higher than one. Choose between Pagination, which adds a circular button for each page to the link list, or Arrows, which adds left and right arrows, or both.
• Links Pagination - The same option as above, but for the link group rather than article group.

Autoanimation Settings

These options control whether and how often the article or link lists should scroll between different pages.

• Auto-animation - When enabled, NSP will automatically switch between the available pages of articles or links.
• Interval - Sets the time in milliseconds between each autoanimation cycle.
• Auto-animation stops on hover - When enabled the automanimation cycle will pause when a user hovers over a preview.

Article Layout

One of the most complex option tabs, this section covers whether each element of an article should be displayed or not, and the order they are displayed in. The available general options are:

• Article Format - Sets the layout of the individual article using pre-prepared CSS. Whereas the Article Wrapper option defines the overall layout of the widget, this option defines the layout of each article within that layout in terms of image size, text placement, and additional buttons or links if appropriate.
• Padding - Defines the padding for each individual article using the format 10px 10px 10px 10px, with the first number defining the padding at the top of the article, the second defining the right padding, third defining bottom padding, and fourth defining left padding (in pixels)
• Show Image - Sets whether an image is displayed in the article preview or not.

After the general options is the main part of the section, which allow you to control the layout intuitively via the Show X options, such as Show Title, Show Image etc...each of which can all be dragged & dropped into the order you wish to use and enabled or disabled as needed. Each item may include one or two additional options (or more, in the case of images) to give you further control of the layout. Let's look at the available items that can be dragged & dropped, their respective options, and then look at how it may be used.

The Show Title and Show Text block include one option; Length, where you can set the maximum length of the title or preview text in words or characters. By setting a word or character limit you can prevent posts with long titles wrapping to a new line, breaking the preview layout. The Show Text option refers to the preview text; the first few words from an article that can be used in the preview.

The Show Image options are a bit more complex, since there are several image-specific options:

• Size - Sets the size of the image in the article preview (in pixels)
• Default Image - Sets an image to use in the preview when the article being previewed has no featured image to display.
• Image Filter - Add a filter to any images in the preview such as sepia or grayscale.
• Image Popup -
• Margin - Sets the margin size of the image in the preview (in pixels)
• Position - Sets the position of the image in the preview; on the top or the left.

The next section, Info Block, also includes some additional options:

• Format - Sets the format for the article information; here you can decide which information elements to include and which order they will be displayed, including elements such as category, author, comments etc...
• Date Format - Defines how the date should be displayed in the article preview; can be set to display the day, month and year in any order, or omit particular elements as needed.

There's only one more option in this section, Show Read More, which sets whether a Read More button will be displayed in the previews.

To see how drag & drop of these elements work, lets use the default layout as an example:

The default layout is Title, Text, Image, Info Block, Read More. First, we can decide which elements to include in this section by adding or removing checkmarks to each of the Show X options. Once done, we can then shift the order. Hover your mouse over the center of the option block; that is, if you want to drag the Show Title section, hover your mouse in the block between the Show Title checkbox and the Length option; you'll see the mouse icon change to an arrow cross. Click and hold the left mouse button and you can now drag the entire Show Title box; move it under another element and you'll see a dash-outlined box appear to show you where you can drop it. Release the button, and your new order will be set. Repeat this with each element to achieve the exact order of elements needed.

Note: Some modes and layouts available in NSP have specific requirements; in these cases the Article Layout options will be overridden so your changes aren't registered.

Links Layout

This section offers similar functionality to the Article Layout tab, but this time the ordering and options are specific for the links that accompany the main previews. As you'd expect, these options only apply if your chosen layout uses additional links. The available options are functionally the same as the Article Layout tab, with a title, text, image and read more block where you can set whether each element is visible or not and change their order. However, there is one new set of options here that do not appear in the Article tab; a Show Read More Button Under Links setting. This decides if a read more button is added underneath the links block to encourage users to explore a category of articles further. There are also three additional options related to this block:

• Link Text - Sets the text for the link; that is, the text that appears on the button under the list of links.
• Link URL - Sets the target URL for the link button; this can be a category list, external URL; whatever you require.
• Use This Link Also in the Widget Title - When enabled, if the widget title is set as Visible and a user clicks it they will be taken to the link specified in the Link URL option.

Advanced Settings

The options in this tab are very specific, so it's likely you won't need to make any changes here. There are three options available:

• Cache Time - Sets the cache time for the instance of NSP. This is the length of time that a visitor's browser should store the widget in page cache. The advantage of a longer time setting is that users that come back to the page where the widget is will not have to redownload the information, making for a faster page load. The negative of this is that until the cache expires users will not see any changes in the widget; if you're regularly posting new content you might want a shorter cache time so users coming back to the frontpage after reading an article can see any new posts.
• Parse Shortcode in the Article Text - If you use shortcodes to produce any of your content, enabling this option will cause NSP to parse them accordingly if they are used in the content it delivers, such as titles or page text previews.
• Load Font Awesome - When enabled, Font Awesome is loaded by the widget and any Font Awesome codes used in the text or title shown by the widget will be parsed into their respective icon.

This covers all of the options available by default in the widget; note that some other option tabs may appear in particular layouts, and other options may disappear entirely when certain layouts are used since that option becomes redundant. To really get a feel for this widget though, we encourage you to play around with the options using the information above as a guideline; change layouts, data sources and more and you'll see the effect the options have. Soon you'll be able to create flexible, dynamic preview widgets to show off your full range of posts.

News Show Pro as a Shortcode

As well as a widget, it's also possible to create instances of NSP within your site content, whether it's a page, post or text widget. This allows for flexibility of placement while still retaining all the usual sets of options available in the widget version.

How the Shortcode Works

If you've used any kind of shortcode in WordPress then you already have a good idea of how inserting NSP as a shortcode to your content will work; however, unlike many shortcodes, NSP includes a huge amount of attributes to allow for each of the options to be defined. To insert an instance of NSP into your content, we'll need to start with the basic shortcode:

                         [gknsp]
                    

This shortcode will create an instance of News Show Pro in your content. However, the basic shortcode will create NSP with all options set to the default. Usually we can just make any changes in the widget options, but in this case we'll need to add attributes to the shortcode to define the options as needed, using the following format:

                         [gknsp Option_name="New_Option_Value"]
                    

With a space separating each attribute if more than one is to be added. So if we want to set the cache time to "0", meaning users will always download the latest instance whenever they open the page, we'll use the following shortcode:

                         [gknsp cache_time="0"]
                    

More options can be added so that there is functionally no difference between the the widget and shortcode version in terms of content. However, since attributes must be manually added it may take slightly longer to configure than the widget version. Some of the available attributes are:

• before_title - Allows for HTML tag(s) to be defined that will be added before the title. Usually used to change the title to a particular header type for CSS targeting.
• after_title - Same as above, but defines HTML to be added after the widget title; will usually be the closing tags from the before_title option.
• title - Sets the widget title.
• data_source_type - This option is used to specify the data source, or where the widget should look for articles to display. This can be set to pull from particular categories ("wp-category"), specific posts ("wp-post") and more.
• data_source - Defines the particular posts to be displayed when the data_source_type attribute is set to wp-post. Accepts post slugs as values.
• wp_category_list - Defines which categories the widget should pull articles from when the data_source_type is set to wp-category. Accepts category IDs as values.
• article_wrapper - Defines the type of article wrapper used, which changes the layout and other features. Values for this attribute are the same as they appear in the widget version's article wrapper list, such as technews_reviews.
• use_css - This option decides whether the default CSS for the widget is loaded.
• cache_time - This option sets how long the widget settings should be stored in cache. In the demo this is set to 0 so users will always see the latest version of the widget every time they visit, including any new styling or articles.
• article_format - This option is used to specify a particular article preview layout from those available.
• widget_css_suffix - One of the most important options, this lets you define CSS suffixes specific to the widget so that you can target your CSS rules directly.
• article_cols & article_rows - Another two important options; these two attributes sets the number of columns and rows that NSP should create, which in turn defines the number of showcases.
• article_block_padding - This option lets you set the padding for the articles in pixels; up to four numbers can be entered to represent the padding for the top, right, bottom and left margins in turn.
• article_image_w - Defines the width of the article showcase image in pixels.
• article_image_h - Defines the height of the article showcase image in pixels.
• orderby - Sets the ordering for the showcased posts. This can be set to sort items by ID, date etc...
• order - Sets whether the ordering defined in the orderby attribute is ascending or descending.
• article_text_len - This option sets the length of the preview text (in number of words) that each article showcase displays.

There are many more attributes available covering all of the available widget options; you can find a breakdown of the most commonly-used ones in this blog article ; for now, we'll cover the most important things you'll want to do; setting the data source.

Displaying Specific Posts

The default behavior of NSP as a shortcode is to look for the latest posts from all categories, displaying them in date order from newest to oldest. However, it's easy to change this so that you can specify which posts are previewed in the widget. We'll need to use two attributes to achieve this; data_source_type, which should be set to wp-post, and data_source, which should include the slugs of the posts you want to display separated by a comma:

                         [gknsp data_source_type="wp-post" data_source="first-post-slug,second-post-slug,third-post-slug"]
                    

Finding the Post Slug

To find a post's slug, click on Posts → All Posts in the WordPress Dashboard to open the list of posts. Find the post you wish to display in NSP and click the Quick Edit option that appears when you hover over the post in the post list:

This will open a quick edit area where you can change various options in the post; the post slug is defined in the second field, Slug; copy the text from this field and paste it into the data_source attribute. Repeat this process to add more posts, separating each slug with a comma as in the examples above.

Displaying Latest Posts From Category

As an alternative to pulling all your latest posts from all categories, you might want to set NSP to pull the latest posts only from specific categories. Thankfully, this is very easy to do. To change News Show Pro's behavior to pull from categories instead of latest posts we'll need to use two shortcode attributes; data_source_type, which should be set to wp-category, and wp_category_list, which allows us to define which categories to display using the category ID:

                         [gknsp data_source_type="wp-category" wp_category_list="first-category-ID,second-category-id"]
                    

To get the ID of a particular category we'll need to jump through some hoops, since WordPress doesn't include an ID section in its default layout. To find the category ID, click on Posts → Categories in the WordPress dashboard to open the Categories page, then click on the category you wish to use in the list of categories to be taken to the Edit Category page:

The category page does not include any ID field, but you can find the ID in the URL for the current page. In your browser, check the address bar. In the URL you should find a sequence like tag_ID=X where "X" is a number; this number is the category ID:

As you can see in the above image, the URL includes a section that says tag_ID=3; by adding 3 as the value of the wp_category_list attribute we can have NSP pull the latest posts from this category automatically:

                         [gknsp data_source_type="wp-category" wp_category_list="3"]
                    

If you have multiple categories you want to pull from you can add all of their IDs to the wp_category_list attribute; just add a comma between each ID.

GK Tabs

GK Tabs is the second major plugin included with Box, alongside News Show Pro. With it, you can create multiple types of tabs that can display content from any widget; perfect for listing popular posts in the sidebar, for example.

How GK Tabs Works

GK Tabs is a widget, which means it can be deployed in any available widget position on your WordPress site. With the power of the Widget Rules plugin (detailed later in the Theme Features section) you can also limit which pages the widget appears on for total control of your layout.

The basic premise behind GK Tabs is very simple; once the GK Tabs plugin has been installed and activated, a new set of three widget positions are automatically created, called GK Tabs I, II, and III. These widget positions are where you can place and configure the widget content you want to be displayed in a tab; technically you can use any widget area as the source for tabs, but these separate widget areas are safer since they do not have a specific area where they are displayed in the theme. GK Tabs can display all types of widgets, from basic text widgets to complex items such as comment lists.

Once the content for the tabs has been added to the GK Tabs widget areas, the Tabs widget itself is placed in the selected widget area. Then, options set the tab layout and which widget area of the available GK Tabs areas to use as a source. The widget will then automatically sort each widget in the selected source widget area into its own tab.

The GK Tabs Options

The options in GK Tabs are not as extensive or complex as News Show Pro, but there are enough that it is worth familiarizing yourself with what's available so that you can easily adjust the content to your needs. The available options are:

• Title - Sets the title of the widget.
• Style - This option is used to select the tab's style; note that this does not affect the overall look of the section as that depends on the widget content being displayed. This option only changes the style of the tab names/selectors.
• Tabs Source - The most important option! Here you can select the widget area that the Tabs widget should use as the source for its tabs. The number of tabs created is directly taken from the number of widgets in the specified area i.e. if you have three text widgets in the selected widget area, then GK Tabs will create three separate tabs.
• First Tab - Tells the widget which tab to display by default; the widgets are sorted into numerical order according to the order they are in in the widget area, with position 1 being the first widget in a given area, 2 the one underneath it and so on.
• Tabs Activator Event - This option sets what action causes a tab to activate; if set to Click the tabs won't change until one is clicked. If set to Hover, the tab will change as soon as the user hovers over a tab.
• Swipe Gesture - Sets whether touchscreen users can swipe the widget to switch between tabs.
• Navigation Buttons - When enabled, pagination arrows are added to the middle area of the widget, allowing users to click the tab name or on the left or right arrows to change the active tab.
• Tabs Position - Sets the position for the tab names, where users can see which tabs are available and swap between them. Can be set to top or bottom.
• Auto-Animation - When enabled, GK Tabs will automatically scroll through the available tabs at a defined interval.
• Stop On Hover - When this option is enabled auto-animation will pause if a user hovers their cursor on a tab.
• Animation Speed - Sets the speed (in milliseconds) of the transition animation between tabs; that is, when a user clicks on a tab or the autoanimation forces movement to a new tab an animation is played; this option sets how long the animation takes.
• Animation Interval - Sets the wait time in milliseconds between each auto-animation rotation. Obviously ignored if auto-animation is disabled.
• Animation Type - Offers multiple ways for transitions between tabs to be animated, including rotations, fade in/out, and scaling. Test out the different animations to find one you like!
• Amount of Sidebars - This option defines the number of tab widget areas are created by the plugin. The default is three (GK Tabs I, II and II); increasing this number adds more widget areas for you to use, perfect if you have many instances of the Tab widget.
• Cache - Sets options related to the widget's cache. The first field sets the cache store time; that is, how long the widget contents should be stored by the user's browser. The second field lets you control what the cache affects; either the content of the tabs only, the entire widget (tabs and tabs content), or disable the cache entirely.

These options are fairly simple, but provide many ways to change the look of your tabs to suit your needs. Make sure to test the different options to find a layout that suits you.

Adding a Tab

The Tabs Source option in the GK Tabs widget options is where you define the widget area that should be used as the source for tabs content. As an example, let's look at the example tabs from the Widget Styles page in the Box demo:

In this layout, three instances of Text widgets are added to the GK Tabs I widget area. In the Tabs widget, when the source is defined as the GK Tabs I widget area, it will look in the specified widget area and automatically convert each individual widget in that area into a tab. So, in the case of the GK Tabs I area, there are three text widgets, so the Tabs widget creates three tabs. To add a new tab to this section, all you need to do is create a new widget and place it in the selected source widget area; the Tabs widget will do all the hard work of creating a new tab automatically.

If you're looking to add a new instance of the Tabs widget to your site, then you'll first need to decide which GK Tabs widget area to use as the source. Then, create the widgets you wish to display in the tabs, and add them to your chosen GK Tabs widget position. Finally, insert the instance of the GK Tabs widget to the widget position you wish to display the tabs in, and set the source to whichever GK Tabs X widget area contains your tab content. Bear in mind that though there are technically no limits to the number of tabs or the type of content that can be displayed in the tabs, realistically there will be widgets that create too much content for it to be elegantly displayed in a tab. Make sure the widgets you wish to place in tabs have options for controlling how much data is displayed to avoid damaging the theme aesthetics, or that you have sufficient CSS knowledge to style the output accordingly. Also, remember to consider page weight and how it will affect load times; too many tabs will result in a large amount of content being loaded, which can make users on slower connections suffer longer load times.

Frontpage Elements

The frontpage of Box is built almost entirely out of page-based content, with each page containing HTML code and shortcodes that make up the frontpage layout. There is also a single widget that creates the bottom menu, newsletter and social media profile links section at the bottom of the frontpage (and indeed, every page of the theme). In this section, we'll examine how each page's content is laid out, how it works, and how to customize it with your own text, image or product content.

The Frontpage Header

The frontpage header provides a simple introduction to your site with a large background image and overlaid text:

This section is created via the base frontpage page that uses the Frontpage template and assigned as the Static Front Page. The image for the section is taken from the Featured Image of the page, with the overlaid text content provided by the page's mainbody content. The HTML code included in the demo content looks like this:

                    <h1>Premium WordPress theme</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing. Aliquam turpis orci, luctus quis auctor ac, sollicitudin eu ligula.</p><a class="btn btn--rev" href="#!">Download</a>
               

HTML Breakdown

The HTML content here is very basic, so nothing too hard to grapple with when changing it to your own content. First, let's replace the example content with placeholder text that lets you know what each tag's content will provide:

                         <h1>Large Title Text</h1>
                         <p>Text Under Title</p>
                         <a class="btn btn--rev" href="/Button Link URL">Button Text</a>
                    

The opening plain <h1> tag contains the large title text:

                         <h1>Large Title Text</h1>
                    

Followed by the smaller subtitle text, which is created using plain <p> tags:

                         <p>Text Under Title</p>
                    

Finally, the button is created using a plain <a> link tag, with the href attribute providing the link URL and the text between the tags providing the button text:

                         <a class="btn btn--rev" href="/Button Link URL">Button Text</a>
                    

Changing the Title and Subtitle Text

The title and subtitle that are overlaid on the header background image are created in the opening <h1> and <p> tags of the HTML code:

                         <h1>Premium WordPress theme</h1>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing. Aliquam turpis orci, luctus quis auctor ac, sollicitudin eu ligula.</p>
                    

Simply replace the text between the <h1> tags to add your own title, and between the <p> tags for the subtitle:

                         <h1>Your Title Here</h1>
                         <p>Your Subtitle Here</p>
                    

Changing the Button Link and Label

The button is created using the <a> link tag that immediately follows the title and subtitle text:

                         <a class="btn btn--rev" href="/Button Link URL">Button Text</a>
                    

The link (that is, where the browser will be redirected to when the button is clicked) is defined in the href attribute; to change it, simply add your own URL between the quotation marks. To change the button's label, modify the text between the opening and closing link tag:

                         <a class="btn btn--rev" href="/Your Link URL Here">Your Button Label Here</a>
                    

Changing the Header Image

The header image is automatically taken from the Featured Image of the frontpage page. To change it, click on the Set Featured Image option in the right-sidebar of the Edit Page screen (if you already have a featured image set then first you'll need to click the Remove Featured Image option). This will open the Media Library popup, where you can choose an image from your library, or, by clicking the tabs at the top of the section, choose to upload a new image. Click on the image you wish to use in the header, then click on the Set featured image button at the bottom-right of the screen. The new featured image is now set, so save changes and you're good to go!

The Headphones Wi-Fi Section

This section uses a simple text block with link button call-to-action, along with some animated lines in the background for extra style, with an image block underneath for displaying a photo:

This section is created via HTML code added in the first subpage of the frontpage; the demo HTML code looks like this:

                    <div class="section__left">
                    <div class="section__left-box box--blue animated-color-bg">
                    <h2>Headphones Wi-Fi</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing. Aliquam turpis orci, luctus quis auctor ac, sollicitudin eu ligula. Mauris eunisi nec nibh lacinia malesuada. Morbi a accumsan urna, quis egestas tellus.</p>
                    <a class="btn btn--border btn--border--white" href="/">Read more</a>
                    </div>

                    <div class="picture_bottom">
                    <img src="http://localhost/WordPress/Quickstarts/Box/wp-content/uploads/2016/03/image-left.jpg" alt="image-left" width="780" height="600" class="alignnone size-full wp-image-47" />
                    </div>
                    </div>
               

HTML Breakdown

This section's HTML can be split into two sections, the first creating the text block and button, and the second covering the image. First, let's change the demo text to placeholders so it's easy to see what goes where:

                         <div class="section__left">
                         <div class="section__left-box box--blue animated-color-bg">
                         <h2>Text Block Title</h2>
                         <p>Text Block Subtitle</p>
                         <a class="btn btn--border btn--border--white" href="/Button Link URL">Button Label</a>
                         </div>

                         <div class="picture_bottom">
                         <img src="/Image Block Photo URL" alt="image-left" width="780" height="600" class="alignnone size-full wp-image-47" />
                         </div>
                         </div>                         
                    

The code starts with a <div> element using the section_left class, that will wrap the rest of the code and provides the CSS target to align the content to the left of the theme:

                         <div class="section__left">
                    

Then comes the code for the text block, starting with another <div> to separate the content from the image block, utilizing three classes; section__left-box, box--blue, and animated-color-bg. These classes align the block, set the background color (changeable in the WordPress customizer), and provides the CSS3-powered animated lines:

                         <div class="section__left-box box--blue animated-color-bg">
                    

Following this is the text content for the block; the large title text is contained in a plain <h2> tag, and the smaller subtitle text that appears underneath it is contained in a plain <p> tag:

                         <h2>Text Block Title</h2>
                         <p>Text Block Subtitle</p>
                    

Then the last part of the block, the button, is provided by a <a> link tag with the btn, btn--border and btn--border--white classes, which provide the styling and coloring for the button. The label for the button is added between the opening and closing link tags, with the href attribute providing the link URL:

                         <a class="btn btn--border btn--border--white" href="/Button Link URL">Button Label</a>
                    

With the first block finished, the <div> element is closed:

                         </div>
                    

The next part of the code creates the image block underneath the text block. As before, a <div> element is opened to separate the block's code from the rest, this time with the picture_bottom class to align the image correctly:

                         <div class="picture_bottom">
                    

After this is the image itself, which is inserted using the standard WordPress Insert Media formatting:

                          <img src="/Image Block Photo URL" alt="image-left" width="780" height="600" class="alignnone size-full wp-image-47" />
                     

To end this block, a closing </div> is added, and then a second is added to close out the entire section's code completely:

                         </div>
                         </div>  
                    

Changing the Text Block Title and Subtitle

The text block's title and subtitle are created in the <h2> and <p> tags that immediately follow the opening <div> tags:

                         <div class="section__left">
                         <div class="section__left-box box--blue animated-color-bg">
                         <h2>Headphones Wi-Fi</h2>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing. Aliquam turpis orci, luctus quis auctor ac, sollicitudin eu ligula. Mauris eunisi nec nibh lacinia malesuada. Morbi a accumsan urna, quis egestas tellus.</p>
                    

Simply replace the text between these tags with your own:

                         <div class="section__left">
                         <div class="section__left-box box--blue animated-color-bg">
                         <h2>Your Text Block Title Here</h2>
                         <p>Your Text Block Subtitle Here</p>
                    

Changing the Background Color

The background color for the text block is defined in the WordPress Customizer in the Colors section; more information may be found in the Theme Options section at the start of this guide.

Changing the Button Link and Label

The button is created and its label defined in the <a> link tag following the title and subtitle tags:

                         <a class="btn btn--border btn--border--white" href="/">Read more</a>
                    

The link that the button redirects to is defined in the href attribute, with the button label defined by the text between the opening and closing tags; add your own URL and label to these areas to set the button's label and link accordingly:

                         <a class="btn btn--border btn--border--white" href="/Button Link URL Here">Button Label Here</a>
                    

Changing the Image Block Photo

The photo that creates the image block in the second is defined in the second block of the page's HTML code, in the <img> tag that follows the third opening <div> tag:

                         <div class="picture_bottom">
                         <img src="http://localhost/WordPress/Quickstarts/Box/wp-content/uploads/2016/03/image-left.jpg" alt="image-left" width="780" height="600" class="alignnone size-full wp-image-47" />
                    

This tag is the standard format for inserted media in WordPress, so there are two options for changing the image; first, you can simply change the image defined in the src attribute:

                         <img src="/Image Block Photo URL Here" alt="image-left" width="780" height="600" class="alignnone size-full wp-image-47" />
                    

However, a better option is to simply delete the entire <img> tag and its contents, then use the standard Add Media button at the top of the editor to insert an image from your library; this will automatically generate the tag as seen in the HTML code.

The image will automatically be sized to fit the section, but it is still a good idea to size the image accordingly so that it fits the aesthetic perfectly, and also so that you are not using unnecessarily weighty resources, which can potentially slow down the page load speed.

The Slideshow Section

The slideshow section is located to the right of the text and image blocks from the last section, filling up the other half of the page width, and providing a easily-explored set of slides for highlighting products:

This section is created from the second subpage of the base Frontpage; however, unlike the earlier sections this subpage contains very little HTML code apart from an opening and closing <div> tag that aligns the slideshow to the right:

                    <div class="section__right">

                    </div>
               

The actual content for the slideshow is provided by subpages that are added to the slideshow subpage, which we'll cover in the next section.

How It Works

Unlike the other frontpage areas which rely on shortcodes or HTML to create their content, the slideshows work in a similar way to the frontpage as a whole. That is, the subpage itself creates the slideshow automatically, and then any subpages added after that count as slides.

Let's visualize this hierarchy:

• Second Subpage (slideshow)
  • First header slideshow slide
  • Second header slideshow slide

So we have the base slideshow page, which is a subpage of the Frontpage. Then, further subpages are added to the slideshow page, with each subpage creating a slide.

The slideshow base page contains no information except a title for identification purposes, and a single <div> with the section__right class to align the section correctly on the frontpage. The actual meat of the slideshow, that is, the slides plus the descriptions, are all taken from the individual slide subpages.

In each slide subpage there are two elements that are defined; a Featured Image, which defines the slide image, a Title, which is only displayed on the backend to help the user track the slide, and plain text in the mainbody of the page that provides the description. So adding more slides is as simple as creating a new subpage of your header slideshow base page, and adding a title, description and featured image.

Changing a Slide's Image

Each slide in the header is created via a subpage of the slideshow page, with the Featured Image providing the slide. To change an existing slide's image, in your WordPress backend click on Pages → All Pages to see a list of your pages, and click on one of the subpages of your slideshow page (this will be the second subpage of your Frontpage).

Once on the Edit Page screen, you will see the current slide image in the Featured Image section in the right sidebar. To remove the existing slide, click on the Remove Featured Image text under the image.

Once the image is removed, you can specify your new slide image. To do so, click on the Set Featured Image text in the Featured Image section. Your media library will open, and you may upload your slide or select an existing image from your library to use. Once done, click on the Save button at the top of the screen to save changes, and your new slide is ready!

When selecting an image, bear in mind your current image width and height settings (these may be set in the WordPress Customizer). If the image does not match the slideshow's set dimensions it will be resized to fit if larger than the standard, or, if smaller than the demo content, the slideshow will adjust it's height to fit, which will affect the aesthetics of the frontpage. Make sure to standardize your image sizes if possible.

Changing a Slide's Description

Each slide has a description that appears at the bottom of the slideshow, underneath the pagination options. This description is pulled from the mainbody of the slide page; no HTML is required, you can simply type your text into the editor and it will automatically be displayed in the descripion area of the slideshow. To change an existing slide's description, just change the text and save; no other changes are required.

Adding a New Slide

Adding new slides to the slideshow is as simple as adding a new page to your site. First click on Pages → Add New in your WordPress dashboard. Once on the edit screen for your new page, look for the Page Attributes section in the right sidebar. Here, you will see there is a Parent option with a drop-down list of your pages; select your slideshow base page as your new page's parent; the theme will automatically use this new subpage as a slide.

Now we need to add the slide elements. First, set the slide image by clicking on the Set Featured Image button in the Featured Image section of the right sidebar, and uploading a slide image or selecting one from your Media Library.

Next, add a title to the Title field so you know which page is for which slide; as this text won't be displayed on the frontpage you can enter a name that's easier for you to recognize. Finally, add a description into the text editor and click on the Publish button to make the page public; the slide will be automatically displayed in the header slideshow.

Note: The order of the slides in the slideshow is defined by their date of creation, so if you wish to change the order you will need to delete the older slides and recreate them in a new slide page to move them to the end.

The New Models Section

This section combines some elements from previous sections to create an block with two images displayed plus a title and description, as well as animated curved lines as seen in the earlier text block:

The content for this section is taken from the third subpage of the base frontpage, and the HTML code used in the demo uses the following format:

                    <div class="section-second__right animated-circles-left beige-bg">
                    <header>
                    <h2>New models</h2>
                    <p> Donec bibendum nisl velit, non hendrerit gravida. Maecenas ut auctor purus, at bibendum ex. Cras bibendum nibh velit, et facilisis</p>
                    <a class="btn" href="/">Read more</a>
                    </header>
                    </div>
                    <div class="section-second__left pictures ">
                    <div class="pictures__box">
                    <div class="pictures__item">
                    <img src="http://localhost/WordPress/Quickstarts/Box/wp-content/uploads/2016/03/section-second_pic_1_336.png" alt="section-second_pic_1_336" width="336" height="422" class="alignnone size-full wp-image-39" />
                    <span>Headphones description</span>
                    </div>
                    <div class="pictures__item">
                    <img src="http://localhost/WordPress/Quickstarts/Box/wp-content/uploads/2016/03/section-second_pic_2_336.png" alt="section-second_pic_2_336" width="336" height="422" class="alignnone size-full wp-image-40" />
                    <span>Headphones description</span>
                    </div>
                                             
                    </div>
                    </div>
               

HTML Breakdown

Like the earlier text and image block, this section's HTML can be broadly split into two parts, the first providing the title and text on the right side of the block, and the second providing the images. To start, let's look at the HTML with placeholders instead of the demo text:

                         <div class="section-second__right animated-circles-left beige-bg">
                         <header>
                         <h2>Title Text</h2>
                         <p> Subtitle Text</p>
                         <a class="btn" href="/">Button Label</a>
                         </header>
                         </div>
                         <div class="section-second__left pictures ">
                         <div class="pictures__box">
                         <div class="pictures__item">
                         <img src="/First Image URL" width="336" height="422" class="alignnone size-full wp-image-39" />
                         <span>First Image Description</span>
                         </div>
                         <div class="pictures__item">
                         <img src="/Second Image URL" alt="section-second_pic_2_336" width="336" height="422" class="alignnone size-full wp-image-40" />
                         <span>Second Image Description</span>
                         </div>
                                                  
                         </div>
                         </div>
                    

The first tag in this HTML code wraps the right-side content of the block and is used for alignment, coloring and the CSS animations, via a <div> tag with the section-second__right, animated-circles-left and beige-bg classes:

                         <div class="section-second__right animated-circles-left beige-bg">
                    

Then comes the code for the title and subtitle on the right of the block; this starts with a plain <header> tag, followed by the title and subtitle text in plain <h2> and <p> tags, respectively:

                         <header>
                         <h2>New models</h2>
                         <p> Donec bibendum nisl velit, non hendrerit gravida. Maecenas ut auctor purus, at bibendum ex. Cras bibendum nibh velit, et facilisis</p>
                    

Next is the code for the button at the bottom of the right column, which uses the same format as the other buttons on the frontpage; an <a> link tag with the href attribute providing the link URL and the text between the opening and closing tags providing the button label, before the section is closed with a closing </header> and </div> tag:

                         <a class="btn" href="/">Read more</a>
                         </header>
                         </div>
                    

Then comes the second block of content containing the images; this begins with two <div> tags, the first using the section-second__left and pictures classes for alignment and styling of the larger block, and the second using the pictures__box class to set the size and shape of the smaller block that will contain the images:

                         <div class="section-second__left pictures ">
                         <div class="pictures__box">
                    

Then comes the two images; each image is created using four tags. First, a <div> using the pictures__item class wraps the image and description. Then, the image is added via a standard <img> tag. Finally, the description for the image is added via a plain <span> tag, before the item is closed off with a closing </div>:

                         <div class="pictures__item">
                         <img src="http://localhost/WordPress/Quickstarts/Box/wp-content/uploads/2016/03/section-second_pic_1_336.png" alt="section-second_pic_1_336" width="336" height="422" class="alignnone size-full wp-image-39" />
                         <span>Headphones description</span>
                         </div>
                    

This format is repeated again to create the second image of the block:

                         <div class="pictures__item">
                         <img src="http://localhost/WordPress/Quickstarts/Box/wp-content/uploads/2016/03/section-second_pic_2_336.png" alt="section-second_pic_2_336" width="336" height="422" class="alignnone size-full wp-image-40" />
                         <span>Headphones description</span>
                         </div>
                    

And then the section ends with the closing </div> tags:

                         </div>
                         </div>
                    

Changing the Title and Subtitle Text

The text block's title and subtitle are created in the <h2> and <p> tags that immediately follow the opening <div> and <header> tags:

                              <div class="section-second__right animated-circles-left beige-bg">
                              <header>
                              <h2>New models</h2>
                              <p> Donec bibendum nisl velit, non hendrerit gravida. Maecenas ut auctor purus, at bibendum ex. Cras bibendum nibh velit, et facilisis</p>
                         

Simply replace the text between these tags with your own:

                              <div class="section-second__right animated-circles-left beige-bg">
                              <header>
                              <h2>Your Title Text Here</h2>
                              <p>Your Subtitle Text Here</p>
                         

Changing the Button Link and Label

The button is created and its label defined in the <a> link tag following the title and subtitle tags:

                              <a class="btn" href="/">Read more</a>
                         

The link that the button redirects to is defined in the href attribute, with the button label defined by the text between the opening and closing tags; add your own URL and label to these areas to set the button's label and link accordingly:

                              <a class="btn" href="/Your Link URL Here">Your Button Label Here</a>
                         

Changing the Images and Descriptions

Each of the image blocks is made up of three tags; a <div> tag that creates the space for the image (this should be left unchanged), and the content for the block, consisting of an image provided by the <img> tag, and the description provided by a <span> tag:

                              <div class="pictures__item">
                              <img src="http://localhost/WordPress/Quickstarts/Box/wp-content/uploads/2016/03/section-second_pic_1_336.png" alt="section-second_pic_1_336" width="336" height="422" class="alignnone size-full wp-image-39" />
                              <span>Headphones description</span>
                              </div>
                         

To change the image, you may either replace the href attribute with the URL to the image you wish to use from your server, or, more efficiently, delete the existing <img> tag entirely and use the standard Add Media button at the top of the editor to insert the image; there's no special modifiers added so the tag as generated by the Add Media button will work perfectly.

For the image descriptions, modify the text between the <span> tags directly underneath the <img> tag:

                              <div class="pictures__item">
                              <img src="/Image URL Here" width="336" height="422" class="alignnone size-full wp-image-39" />
                              <span>Image Description Here</span>
                              </div>
                         

Repeat these steps to make changes to the second image also, as it uses exactly the same code layout.

The Headphones Section

This section offers a background image with an overlaid text block:

This section's HTML code is taken from the fourth subpage of the base Frontpage and exclusively uses HTML code; the code as used in the demo looks like this:

                         <div class="photo-overlay">
                         <img src="http://localhost/WordPress/Quickstarts/Box/wp-content/uploads/2016/03/headphones.jpg" alt="headphones" width="1560" height="780" class="alignnone size-full wp-image-44" />
                         <div class="box box--blue header">
                         <h2>Headphones Wi-Fi</h2>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing. Aliquam turpis orci, luctus quis auctor ac, sollicitudin eu ligula. Mauris eunisi nec nibh lacinia malesuada. Morbi a accumsan urna.</p>

                         </div>
                         </div>
                    

HTML Breakdown

Despite the elegant layout of this section the majority of the work is done via CSS, so the HTML code is very simple. As always, we'll start by replacing the demo content with placeholder text to make it easy to see what information goes where:

                              <div class="photo-overlay">
                              <img src="/Background Image URL" alt="headphones" width="1560" height="780" class="alignnone size-full wp-image-44" />
                              <div class="box box--blue header">
                              <h2>Title Text</h2>
                              <p>Subtitle Text</p>

                              </div>
                              </div>
                         

As with the other sections, this page's code begins with a <div> tag that will wrap all of the content and provide the core CSS rules for alignment and layout via the photo-overlay class:

                              <div class="photo-overlay">
                         

Then comes the background image code; as before this uses the standard <img> tag that you'd get if you use the Add Media button to insert an image:

                              <img src="/Background Image URL" alt="headphones" width="1560" height="780" class="alignnone size-full wp-image-44" />
                         

Now for the title and subtitle text; as this appears in a separate box that is overlaid on the background image, a new <div> tag is added that uses the box, box--blue and header classes to create the container, the background color and the box layout:

                              <div class="box box--blue header">
                         

Then the title and subtitle text are added using plain <h2> and <p> tags:

                              <h2>Headphones Wi-Fi</h2>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing. Aliquam turpis orci, luctus quis auctor ac, sollicitudin eu ligula. Mauris eunisi nec nibh lacinia malesuada. Morbi a accumsan urna.</p>
                         

And finally, the section closes out with the closing </div> tags for the overlaid box, and the entire section:

                              </div>
                              </div>
                         

Changing the Background Image

The background image is set in the <img> tag after the opening <div> tag:

                         <div class="photo-overlay">
                         <img src="/Background Image URL" alt="headphones" width="1560" height="780" class="alignnone size-full wp-image-44" />
                    

It's possible to modify the image by changing the URL in the src attribute to point to your desired image, however the easier option is to delete the existing tag completely and then use the Add Media button in the text editor to insert an image from your media library; this will create the necessary tag and the CSS code will take care of the alignment and other styling required.

Changing the Text Block Title and Subtitle

The title and subtitle of the text block are provided by the <h2> and <p> tags after the <div> tag that creates the text block container:

                              <div class="box box--blue header">
                              <h2>Headphones Wi-Fi</h2>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing. Aliquam turpis orci, luctus quis auctor ac, sollicitudin eu ligula. Mauris eunisi nec nibh lacinia malesuada. Morbi a accumsan urna.</p>
                         

Simply replace the content between these two tags with your own:

                              <div class="box box--blue header">
                              <h2>Title Text Here</h2>
                              <p>Subtitle Text Here</p>
                         

The Visit Our Store Section

This section provides a clear yet attractive showcase of your latest products:

THis section's HTML code is taken from the fifth subpage of the base Frontpage; the demo HTML code looks like this:

                         <header>
                         <h2>Visit our Store</h2>
                         <p>Peak performance with active noise cancelation. Sennheiser's new</p>
                         </header>
                         <div class="store__box box--store box--bigtitle category">
                         [recent_products per_page="4" columns="4"]
                         </div>
                    

HTML Breakdown

This section's HTML consists of two parts; standard HTML that creates the title and subtitle text for the section, and a shortcode that creates an instance of the WooCommerce Recent Products widget, that is used to display the latest products you have to offer. The HTML code with placeholder text replacing the demo content is:

                              <header>
                              <h2>Title Text</h2>
                              <p>Subtitle Text</p>
                              </header>
                              <div class="store__box box--store box--bigtitle category">
                              [Widget Shortcode and attributes]
                              </div>
                         

The content starts with a <header> tag that will separate the title and subtitle from the widget, then creates the title and subtitle in a standard <h2> and <p> tag:

                              <header>
                              <h2>Visit our Store</h2>
                              <p>Peak performance with active noise cancelation. Sennheiser's new</p>
                              </header>
                         

Following this is the shortcode section, which starts with a <div> tag that uses four classes; store__box, box--store, box--bigtitle and category to create the container and also to style the widget so that it fits the aesthetics of the theme rather than using the default layout:

                              <div class="store__box box--store box--bigtitle category">
                         

Then comes the shortcode itself, which is added in square brackets with two attributes:

                              [recent_products per_page="4" columns="4"]
                         

Finally, a closing <div> ends the section:

                              </div>
                         

How the Shortcode Works

The shortcode for the recent products widget has a very simple layout. The basic shortcode is:

                              [recent_products]
                         

Which creates the instance of the widget in the page content. However, this defaults to displaying all products, no matter how many you have. To limit the number of products displayed on the page, the per_page attribute is added:

                              [recent_products per_page="4"]
                         

Which limits the number of products displayed to the amount set in the attribute. Next, the columns attribute is used to limit the section to a certain number of columns. That is, if you were to set the per_page option to 4 and the columns option to 4, then you will have four previews in a row in the widget. If you were to change the columns widget to just 3, then there will be a maximum of three previews on a row, with the fourth being moved down to a new row. The default in the demo content sets both attributes to 4.

Changing the Title and Subtitle Text

The title and subtitle text are set in the <h2> and <p> tags contained in the <header> tag at the start of the HTML content:

                              <header>
                              <h2>Visit our Store</h2>
                              <p>Peak performance with active noise cancelation. Sennheiser's new</p>
                              </header>
                         

You can add your own title and subtitle by substituting the existing text with your own:

                              <header>
                              <h2>Title Text Here</h2>
                              <p>Subtitle Text Here</p>
                              </header>
                         

Changing the Number of Displayed Products

The shortcode used to create the recent products widget includes a per_page attribute which defines the number of product previews that appear on the page:

                              [recent_products per_page="number of displayed products" columns="4"]
                         

Just set this attribute to your chosen number of items and the widget will ensure the correct amount are displayed.

Adding a "Sale!" Badge

The sale badge is part of the standard WooCommerce functionality and is automatically added to the preview images when the product has been given a discount; that is, if you've set a sale price in the Sale Price field of the product's edit page.

Once done the sale badge will appear on this product's preview.

Removing the "Sale!" Badge

If you don't want the badge to appear on your sale products, then you will need to add some custom CSS to your site to remove it. One of the most basic ways to do this is to use the override.css file to add your own CSS code without touching the core files (our documentation includes a <a href=" ">Custom CSS Guide for this purpose), and add the following line:

 
                              .onsale {
                              display: none!important;
                              }  
                         

There are several other ways to remove the badge that avoid using the !important attribute, but this is the quickest and easiest way for beginners to get the same effect!

Changing the Number of Columns

To add additional columns beyond the default four, you will need to change the columns attribute in the shortcode to your required number of columns; the number in this attribute will set how many products can appear on each row:

                              [recent_products per_page="number of displayed products" columns="Enter Number of Columns"]
                         

The Footer Links

This section provides various links, a newsletter sign-up form, plus social media profile links for users:

Unlike the rest of the frontpage, this section is created using a Text Widget in the Bottom I widget area. The HTML used in this section looks like this:

               <div class="bottom__box">
               <ul class="bottom__links">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Center </a></li>
                    <li><a href="#">Legal Notice</a></li>
                    <li><a href="#">Privacy </a></li>
                    <li><a href="#">Location</a></li>
               </ul>
               <ul class="bottom__links">
                    <li><a href="#">Contact </a></li>
                    <li><a href="#">Center </a></li>
                    <li><a href="#">Legal Notice</a></li>
                    <li><a href="#">Privacy </a></li>
                    <li><a href="#">Location</a></li>
               </ul>
               <ul class="bottom__links">
                    <li><a href="#">Contact </a></li>
                    <li><a href="#">Center </a></li>
                    <li><a href="#">Legal Notice</a></li>
                    <li><a href="#">Privacy </a></li>
                    <li><a href="#">Location</a></li>
               </ul>
               <ul class="bottom__links">
                    <li><a href="#">Contact </a></li>
                    <li><a href="#">Center </a></li>
                    <li><a href="#">Legal Notice</a></li>
                    <li><a href="#">Privacy </a></li>
                    <li><a href="#">Location</a></li>
               </ul>
               <h3>Subscribe to BOX</h3>
               [wysija_form id="1"]
               </div>

               <div class="bottom__contact">
               <div class="bottom__contact-address">Wj 34 Hamilton Road, Phillipsburg, NJ 012345
               <br /> +1 12 345 1234 5678
               </div>
               <div class="bottom__contact-socials">
               <a href="#" class="gk-social-icon">
               <i class="gk-social-icon-twitter"></i>
               </a>
               <a href="#" class="gk-social-icon">
               <i class="gk-social-icon-fb"></i>
               </a>
               <a href="#" class="gk-social-icon">
               <i class="gk-social-icon-gplus"></i>
               </a>
               <a href="#" class="gk-social-icon">
               <i class="gk-social-icon-vimeo"></i>
               </a>
               <a href="#" class="gk-social-icon">
               <i class="gk-social-icon-linkedin"></i>
               </a>
               <a href="#" class="gk-social-icon">
               <i class="gk-social-icon-instagram"></i>
               </a>
               <a href="#" class="gk-social-icon">
               <i class="gk-social-icon-pinterest"></i>
               </a>

               </div>
               </div>
          

HTML Breakdown

There's a lot of HTML code in this section, but there's nothing to complex with the layout so you'll find it easy to understand. First, let's look at the content with demo text removed and replaced with placeholders:

                    <div class="bottom__box">
                    <ul class="bottom__links">
                         <li><a href="/First Column Link URL 1">Link 1 Label</a></li>
                         <li><a href="/First Column Link URL 2">Link 2 Label</a></li>
                         <li><a href="/First Column Link URL 3">Link 3 Label</a></li>
                         <li><a href="/First Column Link URL 4">Link 4 Label</a></li>
                         <li><a href="/First Column Link URL 5">Link 5 Label</a></li>
                    </ul>
                    <ul class="bottom__links">
                         <li><a href="/Second Column Link URL 1">Link 1 Label</a></li>
                         <li><a href="/Second Column Link URL 2">Link 2 Label</a></li>
                         <li><a href="/Second Column Link URL 3">Link 3 Label</a></li>
                         <li><a href="/Second Column Link URL 4">Link 4 Label</a></li>
                         <li><a href="/Second Column Link URL 5">Link 5 Label</a></li>
                    </ul>
                    <ul class="bottom__links">
                         <li><a href="/Third Column Link URL 1">Link 1 Label</a></li>
                         <li><a href="/Third Column Link URL 2">Link 2 Label</a></li>
                         <li><a href="/Third Column Link URL 3">Link 3 Label</a></li>
                         <li><a href="/Third Column Link URL 4">Link 4 Label </a></li>
                         <li><a href="/Third Column Link URL 5">Link 5 Label</a></li>
                    </ul>
                    <ul class="bottom__links">
                         <li><a href="/Fourth Column Link URL 1">Link 1 Label</a></li>
                         <li><a href="/Fourth Column Link URL 2">Link 2 Label</a></li>
                         <li><a href="/Fourth Column Link URL 3">Link 3 Label</a></li>
                         <li><a href="/Fourth Column Link URL 4">Link 4 Label</a></li>
                         <li><a href="/Fourth Column Link URL 5">Link 5 Label</a></li>
                    </ul>
                    <h3>Newsletter Subscription Message</h3>
                    [wysija_form id="1"]
                    </div>

                    <div class="bottom__contact">
                    <div class="bottom__contact-address">Contact Address
                    <br /> Contact Phone Number
                    </div>
                    <div class="bottom__contact-socials">
                    <a href="/Twitter Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-twitter"></i>
                    </a>
                    <a href="/Facebook Page URL" class="gk-social-icon">
                    <i class="gk-social-icon-fb"></i>
                    </a>
                    <a href="/G+ Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-gplus"></i>
                    </a>
                    <a href="/Vimeo Channel URL" class="gk-social-icon">
                    <i class="gk-social-icon-vimeo"></i>
                    </a>
                    <a href="/LinkedIn Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-linkedin"></i>
                    </a>
                    <a href="/Instagram Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-instagram"></i>
                    </a>
                    <a href="/Pinterest Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-pinterest"></i>
                    </a>

                    </div>
                    </div>
               

We can split the content in this widget into two parts, the first containing the list links and newsletter sign-up field, and the second containing the address, phone info and social media icons. The entire section opens with a <div> tag using the bottom__box class, which will wrap the top part of the section containing the links and newsletter form:

                    <div class="bottom__box">
               

Then the content begins; each column of links is created with a <ul> unordered list tag using the bottom__links class for styling. Then, each individual link is added using a <li> list item tag containing an <a> link tag:

                    <ul class="bottom__links">
                    <li><a href="#">Contact</a></li>
               

The text for the link is added between the opening and closing <a> tag, and the URL that the text should link to when clicked is added to the href attribute. A total of five list items are added to the column, before it is ended with a closing </ul> tag:

                    <ul class="bottom__links">
                         <li><a href="#">Contact</a></li>
                         <li><a href="#">Center </a></li>
                         <li><a href="#">Legal Notice</a></li>
                         <li><a href="#">Privacy </a></li>

                         <li><a href="#">Location</a></li>
                    </ul>
               

This format is repeated three more times to create a total of four columns of links:

                    <ul class="bottom__links">
                         <li><a href="#">Contact </a></li>
                         <li><a href="#">Center </a></li>
                         <li><a href="#">Legal Notice</a></li>
                         <li><a href="#">Privacy </a></li>
                         <li><a href="#">Location</a></li>
                    </ul>
                    <ul class="bottom__links">
                         <li><a href="#">Contact </a></li>
                         <li><a href="#">Center </a></li>
                         <li><a href="#">Legal Notice</a></li>
                         <li><a href="#">Privacy </a></li>
                         <li><a href="#">Location</a></li>
                    </ul>
                    <ul class="bottom__links">
                         <li><a href="#">Contact </a></li>
                         <li><a href="#">Center </a></li>
                         <li><a href="#">Legal Notice</a></li>
                         <li><a href="#">Privacy </a></li>
                         <li><a href="#">Location</a></li>
                    </ul>
               

Then comes the content for the newsletter section, starting with an <h3> tag to create the title:

                    <h3>Subscribe to BOX</h3>
               

Then, the form is added via a shortcode that will insert a MailPoet form into the content; details on how to create this form are included in the installation guide:

                    [wysija_form id="1"]
               

And then the top section ends with a closing </div>:

                    </div>
               

Now comes the lower block of content containing the address, phone number and social media icons, starting with another <div> tag with the bottom__contact class that creates the container, and another <div> with the bottom__contact-address class that will be used to align the address and phone number information. After this, the address information is added as plain text with a <br /> line break separating the address from the phone number, before a closing </div> tag finishes this part of the content:

                    <div class="bottom__contact">
                    <div class="bottom__contact-address">Contact Address
                    <br /> Contact Phone Number
                    </div>
               

The social media icons section follows this, with another <div> tag with the bottom__contact-socials class starting the section:

                    <div class="bottom__contact-socials">
               

Each social icon consists of two tags; an <a> link tag that provides the URL for the linked social media profile, and an empty <i> tag with a special class to create the icon:

                    <a href="#" class="gk-social-icon">
                    <i class="gk-social-icon-twitter"></i>
                    </a>
               

In the first icon above, the href attribute will be used to point to the site's Twitter profile, while the icon is provided by the gk-social-icon-twitter class that is attached to the <i> tag. This format is repeated for the other social networks:

                    <a href="/Facebook Page URL" class="gk-social-icon">
                    <i class="gk-social-icon-fb"></i>
                    </a>
                    <a href="/G+ Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-gplus"></i>
                    </a>
                    <a href="/Vimeo Channel URL" class="gk-social-icon">
                    <i class="gk-social-icon-vimeo"></i>
                    </a>
                    <a href="/LinkedIn Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-linkedin"></i>
                    </a>
                    <a href="/Instagram Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-instagram"></i>
                    </a>
                    <a href="/Pinterest Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-pinterest"></i>
                    </a>
               

Before the code is ended with two closing </div> tags:

                    </div>
                    </div>
               

Changing the Link Text and URL

The four columns of links are each created with a unordered list <ul> tag, with each link in a column contained in a <li> link item tag with an <a> tag providing the link URL and label:

                    <ul class="bottom__links">
                         <li><a href="#">Contact</a></li>
                         <li><a href="#">Center </a></li>
                         <li><a href="#">Legal Notice</a></li>
                         <li><a href="#">Privacy </a></li>
                         <li><a href="#">Location</a></li>
                    </ul>
               

To change a link's URL, replace the contents of the href attribute in the link you want to change with your own link URL. For the label, adjust the text between the opening and closing <a> tags:

                    <ul class="bottom__links">
                         <li><a href="/First Link URL">First Label</a></li>
                         <li><a href="/Second Link URL">Second Label</a></li>
                         <li><a href="/Third Link URL">Third Label</a></li>
                         <li><a href="/Fourth Link URL">Fourth Label</a></li>
                         <li><a href="/Fifth Link URL">Fifth Label</a></li>
                    </ul>
               

Adding a Link

To add a link to a particular column you need only duplicate the existing <li>/<a> layout, adding it before the closing </ul> tag of the column you wish to add the new content to:

                     <ul class="bottom__links">
                         <li><a href="/First Link URL">First Label</a></li>
                         <li><a href="/Second Link URL">Second Label</a></li>
                         <li><a href="/Third Link URL">Third Label</a></li>
                         <li><a href="/Fourth Link URL">Fourth Label</a></li>
                         <li><a href="/Fifth Link URL">Fifth Label</a></li>
                         <li><a href="/New Link URL">New Label</a></li>
                    </ul>
               

Changing the Newsletter Call-To-Action

The call-to-action that appears above the newsletter subscription field is contained in the <h3> tags that follow the end of the link list section:

                    <h3>Subscribe to BOX</h3>
                    [wysija_form id="1"]
               

To change this message, modify the text between the opening a closing tags:

                    <h3>Your Call-To-Action Here</h3>
                    [wysija_form id="1"]
               

Changing the Address Information

The address information, consisting of a street address and phone number, are provided by the <div> element with the bottom__contact-address class:

                    <div class="bottom__contact-address">Wj 34 Hamilton Road, Phillipsburg, NJ 012345
                    <br /> +1 12 345 1234 5678
                    </div>
               

Notice that a line break <br /> tag is used to move the phone number to a separate line. Add your own text between the <div> tags to modify it::

                    <div class="bottom__contact-address">Street Address Here
                    <br /> Phone Number Here
                    </div>
               

Connecting Social Media Links

The social icons as used in the demo are not linked to any profiles; to change this you will need to add the links to your profiles into the href attribute of each icon's <a> link tag. For example, the Twitter icon's HTML looks like this in the demo code:

                    <a href="#" class="gk-social-icon">
                    <i class="gk-social-icon-twitter"></i>
               

To link the icon to a Twitter profile we'll need to remove the placeholder hash (#) and replace it with the URL for our Twitter profile:

                    <a href="/Twitter Profile URL Here" class="gk-social-icon">
                    <i class="gk-social-icon-twitter"></i>
               

Removing Unused Social Media Icons

Should you only need to utilize some, not all, of the available social media icons included with Box, then you'll need to remove any unused ones to prevent users from trying to use a link that doesn't exist. To remove an icon, simply delete the entire <a> tag containing the link and icon tag for the network you wish to remove. For example, if we have all of the social network icons as in the demo:

                    <a href="/Twitter Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-twitter"></i>
                    </a>
                    <a href="/Facebook Page URL" class="gk-social-icon">
                    <i class="gk-social-icon-fb"></i>
                    </a>
                    <a href="/G+ Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-gplus"></i>
                    </a>
                    <a href="/Vimeo Channel URL" class="gk-social-icon">
                    <i class="gk-social-icon-vimeo"></i>
                    </a>
                    <a href="/LinkedIn Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-linkedin"></i>
                    </a>
                    <a href="/Instagram Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-instagram"></i>
                    </a>
                    <a href="/Pinterest Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-pinterest"></i>
                    </a>
               

And we wanted to remove the Pinterest icon from the bottom, then we'd delete the last link tag and everything in it, so the amended code looks like this:

                    <a href="/Twitter Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-twitter"></i>
                    </a>
                    <a href="/Facebook Page URL" class="gk-social-icon">
                    <i class="gk-social-icon-fb"></i>
                    </a>
                    <a href="/G+ Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-gplus"></i>
                    </a>
                    <a href="/Vimeo Channel URL" class="gk-social-icon">
                    <i class="gk-social-icon-vimeo"></i>
                    </a>
                    <a href="/LinkedIn Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-linkedin"></i>
                    </a>
                    <a href="/Instagram Profile URL" class="gk-social-icon">
                    <i class="gk-social-icon-instagram"></i>
                    </a>