09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

Your cart (0)

Drupal 8 (/drupal-8-themes) FAQ (/faq) Downloads (/downloads) Payment Guide (/guides/weebpal-standard-payment-process-guideline)
Support (http://support.weebpal.com) Contact us (/contact) Register (/user/register) Login (/user/login)

(/)

DRUPAL 8 - ZIRCON THEME GUIDE FOR

DEVELOPERS

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 1/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

Doc Navigation

The Basic - Before You Start

Installation

Taxonomy Congurations

Media Congurations

Content Type Congurations

Create Homepage

Create Subpages

More Congurations

Overview
Starting with a new theme, it sometimes takes a lot of time for rst time users to really understand how it works. You may want to know how
to customize layouts, typography, block styles and make it look the way you want.

In most cases you won't need to know PHP or database queries, but basic knowledge would be very helpful to get great results.

If you're an experienced Drupal developer or if you want to build the theme from zero with only the basic appearance of your theme, nd this
guide in handy. This guide will give you the detailed step by step installation guide to help you start building the content for Zircon D8
(http://www.weebpal.com/drupal-themes/zircon-d8) to look exactly like the demo site (http://demo.weebpal.com/drupal8/zircon/).

1. Zircon D8 Package
This is our rst project for Drupal 8 themes. Based on the Zircon theme, the most popular Drupal theme of WeebPal in the Drupal community,
our team has published the latest version of Zircon in Drupal 8.

Weve taken advantage of all of the up to date web technologies, and designs for the theme. We believe this will be a good place to start your
business or personal website in Drupal 8.

Included content:

README.txt

Zircon D8 theme: zircon_d8-8.0.0.zip

Demo Prole for Zircon D8: zircon_d8-demo-8.0.0.zip

2. Features
Documentation included.

Browser compatibility

Web Technology (Html5/Css3, Twitter Bootstrap 3.1.1, Font Awesome 4.0.3,)

Fully responsive.

Color variations.

Easy customization.

High usability

Support both Left to Right and Right to Left Languages

3. System Requirements
Database

MySQL 5.5.3/MariaDB 5.5.20/Percona Server 5.5.8 or higher with PDO and an InnoDB-compatible primary storage engine,
PostgreSQL 9.1.2 or higher with PDO,

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 2/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

SQLite 3.6.8 or higher

PHP

PHP 5.5.9 or higher

PHP 5GD library installed

Disabled error_reporting ag on production server

Enabled mod_rewrite in Apache for clean URLs

Memory limit set up at least 128MB

If you are new to Drupal (http://www.drupal.org/), please take a reference to System requirements (http://drupal.org/requirements) on
drupal.org (http://www.drupal.org).

4. Screenshots
Let's glance through the theme's design & some features:

Home

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 3/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 4/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/homepage.png)

About Us page

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 5/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/about-us.png)

Articles page

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 6/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 7/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/articles.png)

Business page

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 8/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 9/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/business-page.png)

Finance page

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 10/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 11/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/nance.png)

Health Care page

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 12/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 13/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/health-care.png)

Idea page

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 14/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 15/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/idea.png)

Investment page

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 16/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 17/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/investment.png)

Forum page

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/forums.png)

Help

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 18/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/help.png)

Contact

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 19/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/screenshot/contact.png)

5. Module requirements
Core Modules

forum

color

Two Modules
https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 20/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal
Two Modules

1. admin_toolbar (https://www.drupal.org/project/admin_toolbar)

2. memcache (https://www.drupal.org/project/memcache)

Download Drupal core les, and extend your site with modules at here (https://www.drupal.org/download).

Installation
How to install a WeebPal demo package
1. Download one theme package of your choice (e.g: Zircon D8 (http://www.weebpal.com/drupal-themes/zircon-d8))

Files included:

README.txt

Zircon D8 theme package: zircon_d8-8.0.0.zip

Zircon D8 demo package: zircon_d8-demo-8.0.0.zip.

This demo package includes all source codes and content, including sample images. This package will be used to build a site like our
demo (http://demo.weebpal.com/zircon_ii) for the theme easily.

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/package.png)

The below steps will give you the installation guide so that you can build your website to look exactly like the Zircon D8 Demo
(http://demo.weebpal.com/zircon_ii)

zircon_d8-demo-8.0.0.zip

2. Extract zircon_d8-demo-8.0.0.zip above and copy it into your host, and rename the directory to zircon

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 21/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/quick_install_demo_package.png)

3. Access your MySQL database and create a new database (e.g: zircon-d8) and user account. Don't forget to add correct permissions to new
user to access the database

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/database-create.png)

4. In the demo directory database/ , you can nd database dump named sample_data.sql.

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 22/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/quick_install_database.png)

Import this le into new database.

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/database-import.png)

5. Now, you need to modify sites/default/default.settings.php le. Clone default.settings.php le, then rename it "settings.php"

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/quick_install_settings.png)

6. Open settings.php, locate the $database array and set proper credentials. Then move the $database code to the bottom of the le.

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/quick_install_settings_database.png)

1 $databases['default']['default']=array(
https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 23/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal
1 $databases['default']['default']=array(
2 'database'=>'databasename',
3 'username'=>'username',
4 'password'=>'password',
5 'prefix'=>'',
6 'host'=>'localhost',
7 'port'=>'3306',
8 'namespace'=>'Drupal\\Core\\Database\\Driver\\mysql',
9 'driver'=>'mysql',
10 );
11 $settings['install_profile']='standard';

When using this installation, you are installing everything from our preview server. So don't forget to set proper values to access to your
database: db name, db admin username, db admin password, host, etc.

7. Open the browser and visit your website with the prepopulated content & layout exactly like our zircon_d8 Demo
(http://demo.weebpal.com/drupal8/zircon/)

Now, you can visit administrator site with the admin account admin/admin to delete the unnecessary contents and add the new ones.

How to install a WeebPal theme for Drupal developers

If you're an experienced Drupal user or if you want to build the theme from zero with only the basic appearance of zircon_d8 Theme, nd this
guide in handy.

1. Install Drupal

1. Go to Drupal download page (http://drupal.org/project/drupal) and download the latest version of Drupal 8.

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/preparation-download-drupal8.png)

2. Extract and copy Drupal folder to your host and rename the directory (e.g: zircon-d8)

Follow steps below to install a Drupal site only:

3. Access to database and create a new database with a name such as zircon-d8.

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 24/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/database-create.png)

4. Open browser and navigate to your website.

5. Choose language => click Save and continue button.

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/intall-drupal-step1.png)

6. Choose Standard => click Save and continue button.

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 25/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/intall-drupal-step2.png)

7. Choose continue anyway => click link.

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/intall-drupal-step3.png)

8. Enter Database conguration => click Save and continue button.

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 26/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/intall-drupal-step4.png)

9. Click existing site and you will have a new site.

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/existing-site.png)

You can refer the guide (https://www.drupal.org/documentation/install) from drupal.org (http://drupal.org/) to delve more details about
drupal installation.

2. Install Zircon D8 Theme

1. Extract Zircon D8 theme .ZIP le:

zircon_d8-8.0.0.zip

2. Move this theme into your Drupal folder: zircon_d8/themes

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 27/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/preparation-extract.png)

3. Navigate to Appearance > Choose Install and set default Zircon-D8 theme

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/preparation-set-default.png)

3. Install Required Modules

Now that you've enabled Zircon II theme, you will install and enable the required modules (listed in the Module Requirements section) to
customize and use them.

If you don't know how to install the contributed modules, this tutorial (http://drupal.org/documentation/install/modules-themes/modules-8) is
an essential guide.

Cheat to install modules & theme:

1. Extract zircon_d8-demo-8.0.0

2. Open extracted folder, go to sites/all and copy all folders inside (modules, themes, libraries)

3. Paste them to your host, folder sites/all

Note: See this guide (http://www.weebpal.com/guide/how-install-weebpal-theme-drupal-developers) to get more details about installation

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 28/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

Taxonomy conguration
Quick Information
Taxonomy: Taxonomy can be simply understood as category management using organizational keywords known in other systems as
categories, tags or metadata. It allows you to connect, relate and classify your website's content. In Drupal, these terms are gathered
within "vocabularies". The Taxonomy module allows you to create, manage and apply those vocabularies.

Vocabulary: for example product category, tag, provider name, ...

Term: the items in each vocabulary. For example: vocabulary product category has some terms: laptop, pc, mobile, tablet, camera,
headphone, ...

For more information about taxonomy, please see: Organizing content with taxonomies
(http://drupal.org/documentation/modules/taxonomy)

STEP 1: Navigate to Structure > Taxonomy to create vocabularies as the following:

Vocabulary

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/taxonomy.png)

Then, add terms for each vocabulary

STEP 2 : Terms of: Forums.

Navigate to Structure -> Forums to create add forum and add container as the following:

Taxonomy

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/taxonamy-add-term-forums.png)

STEP 3: Terms of: Categories

Taxonomy

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/taxonamy-add-term- Categories.png)

Note: See this guide (http://www.weebpal.com/guide/how-know-main-features-drupal-quickly#tutorial-section-3-5) to get more details about

taxonomy conguration

Media conguration
Image Style Conguration
Image styles are the presets of image settings. Image styles are used to dene how the images are shown.

Navigate to Conguration -> MEDIA area -> Image styles, then create image styles as the following:

Image Styles

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/image-style.png)

Congure for each image style:

1. Medium(200x200):

Vocabulary

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/image-style-medium.png)

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 29/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

2. Slideshow(1170x390)

Vocabulary

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/image-style-slideshow.png)

Content type conguration
Modify Article type

STEP 1: Navigate to Structure > Content Type nd Article to click link

STEP 2: In Article row, click "manage elds" --> add "Slideshow" eld with following settings:

Article

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-article-img.png)

STEP 3: Click Save and continue button, then click Save eld settings button > Set following properties:

Article

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-article-img-setting.png)

STEP 4: Click Save setting button.

STEP 5: Go to Manage form display tab, set following properties:

Article

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-article-form-display.png)

STEP 6: Go to Manage display tab set following properties:

Article

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-article-default.png)

STEP 7: Go to Manage display tab --> Teaser set following properties:

Article

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-article-teaser.png)

STEP 8: Click Save button

Create Ads type

STEP 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Ads with following properties:

Gallery

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-ads.png)

STEP 2: Click Save and add elds button, then Add "Images" eld with following settings:

Gallery

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-ads-eld.png)

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 30/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

STEP 3: Set properties for Image eld

Gallery

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-gallery-img-1.png)

STEP 4: Click Save setting button.

Create Book type

STEP 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Book with following properties:

Our Partners

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-book.png)

STEP 2: Go to Manage Fields and add following elds:

Our Partners

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-book-eld.png)

STEP 3: Go to Manage form display tab > Default set following properties:

Our Partners

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-manage-display-form.png)

STEP 4: Click Save button.

Create Forum type

STEP 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Forum with following properties:

forum

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-forum.png)

STEP 2: Go to Manage Fields and add Comments elds:

forum

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-add-eld.png)

STEP 3: Go to manage display to add elds:

Our Product

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-manage-eld-forum.png)

STEP 4: . Go to Manage display tab > Default set following properties:

Our Product

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-forum-manage-display.png)

STEP 5: Go to Manage display tab > Teaser set following properties:

Our Product

(/sites/default/les/guide_static/guides_d8/zircon_d8/structure/ctt-forum-teaser.png)

STEP 6: Click Save button

Create Homepage
https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 31/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

Create Homepage
Search form block
Front end Display

Search form

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/search-form.png)

STEP 1: Navigate to Structure > Blocks, nd Search form block, click congure link and set the following properties:

Search form

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/search-form-block.png)

STEP 2: Click Save button

Site branding block

Front end Display

Search form

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/branding-form.png)

STEP 1: Navigate to Structure > Blocks, nd Search form block, click congure link and set the following properties:

Search form

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/branding-form-block.png)

STEP 2: Click Save button

Main menu
Front end Display

Main menu

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/tb-menu-block.png)

Congure Main menu block

STEP 1: Navigate to Structure > Blocks, nd Main menu block. Click Congure link and set following properties:

Main menu

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/tb-menu.png)

STEP 2: Click Save block button.

Slideshow block
Front end Display

Slideshow

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/slideshow.png)

1. Create Slideshow view

STEP 1: Navigate to Structure > Views, click Add new view link, Create Slideshow view with following properties:

Slideshow

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/slideshow-create.png)

STEP 2: Click Continue & edit button and set following properties:

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 32/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

Slideshow

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/slideshow-view.png)

STEP 3: At FIELDS area, click Add button to add elds: Content: Publishing status (Yes), Content: Type(= Article), Content:

Slideshow:target_id ( not empty ).

STEP 4: Set properties for Content: Publishing status (Yes)

Slideshow

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/publish-img.png)

STEP 5: Set properties for Content: Type(= Article)

Slideshow

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/article-img.png)

STEP 6: Set properties for Content: Slideshow:target_id ( not empty )

Slideshow

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/slideshow-img.png)

STEP 7: Set properties for Content: Title

Slideshow

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/slideshow-title.png)

STEP 8: At FIELDS area, click Rearrange button and set following arrange

Slideshow

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/slideshow-rearr.png)

STEP 8: Click Apply the button.

2. Congure View: Slideshow block

STEP 1: Navigate to Structure > Blocks

STEP 2: Find View: Slideshow block, click Place block link, set following properties

Slideshow

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/slideshow-block-1.png)

Slideshow

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/slideshow-block-2.png)

STEP 3: Click Save block button.

Feature block
Front end Display

Feature

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/feature.png)

1. Create Feature view

STEP 1: Navigate to Structure > Views, click Add views link, create Feature view with following properties:

Service

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/feature-create.png)

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 33/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

STEP 2: Click Continue & edit button and set following properties:

Service

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/feature-view.png)

STEP 3: At FIELDS area, click Add button to add elds: Content: Image, Content: Body, Content: Link to content

STEP 4: Set properties for Content: Image

Service

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/feature-img.png)

STEP 5: Set properties for Content: Body

Service

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/feature-body.png)

STEP 6: Set properties for Content: Link to content

Service

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/feature-link.png)

STEP 7: Set properties for Content: Title

Service

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/feature-title.png)

STEP 8: At FILTER CRITERIA area, click Add button and add le Content: Publishing status (Yes),Content: Type (= Article)

STEP 9: Set properties for Content: Publishing status (Yes)

Service

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/publish-type.png)

STEP 10: Set properties for Content: Type (= Article)

Service

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/feature-article.png)

STEP 11: Click Save block button.

2. Congure View: Feature block

STEP 1: Navigate to Structure > Blocks

STEP 2: Find View: Feature block, click place block link, set following properties

Service

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/view-feature.png)

STEP 3: Click Save block button.

Sidebar second: Quote block

Front end Display

Quote

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/quote.png)

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 34/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

STEP 1: Navigate to Structure > Blocks, click Add blocks link to create Quote block with following properties:

Quote

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/quote-block-1.png)

Quote

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/quote-block-2.png)

Quote

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/quote-block-3.png)

STEP 2: Click Save block button.

Sidebar second: Our Products block

Front end Display

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/our-product.png)

1. Create Our Products view

STEP 1: Navigate to Structure > Views, click Add views link, create Our Products view with following properties:

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/our-product-create.png)

STEP 2: Click Continue & edit button and set following properties:

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/our-product-view.png)

STEP 3: At FIELDS area, click Add button to add elds: Content: Image

STEP 4: Set properties for Content: Image

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/our-product-img.png)

STEP 5: Set properties for Content: Title

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/our-product-title.png)

STEP 6: At FIELDS area, click Arrange button and set following arrange

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/our-product-rearr.png)

STEP 7: At FILTER CRITERIA area, click Add button and add le Content: Type (= Article)

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/product-type.png)

STEP 8: At Advanced > OTHER area, add CSS class

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/our-product-css.png)

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 35/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

STEP 9: At Advanced > OTHER area, add Catching

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/catching-product.png)

STEP 10: Click Save block button.

2. Congure View: Our Products block

STEP 1: Navigate to Structure > Blocks

STEP 2: Find View: Our Products block, click congure link, set following properties

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/our-product-block-1.png)

Our Products

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/our-product-block-2.png)

STEP 3: Click Save block button.

Sidebar second: Recent Content block

Front end Display

Latest Articles

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-content.png)

1. Create Recent Content view

STEP 1: Navigate to Structure > Views, click Add views link, Create Latest Articles view with following properties:

Latest Articles

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-view.png)

STEP 2: Click Continue & edit button and set following properties:

Latest Articles

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-view-1.png)

STEP 3: At FIELDS area, click Add button to add elds: Content: Image, Content: Title, Content: Body.

STEP 4: Set properties for Content: Image

Recent content

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-content-img.png)

STEP 5: Set properties for Content: Title

Latest Articles

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-content-title.png)

STEP 6: Set properties for Content: Body

Latest Articles

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-content-body.png)

STEP 7: At FIELDS area, click Rearrange button and set following arrange

Latest Articles

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 36/37
09/05/2017 Drupal8ZirconThemeGuideforDevelopers|WeebPal

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-content-arr.png)

STEP 8: At Advanced > OTHER area, add CSS class

Latest Articles

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-css.png)

STEP 9: At Advanced > OTHER area, add Catching

Latest Articles

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-catching.png)

STEP 10: Click Save block button.

2. Congure View: Recent content block

STEP 1: Navigate to Structure > Blocks

STEP 2: Find View: Recent content block, click congure link, set following properties

Latest Articles

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-content-block.png)

Latest Articles

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/recent-content-block-1.png)

STEP 3: Click Save block button.

Sidebar First: User menu block

Front end Display

Custom Sreach 1

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/user-menu.png)

Congure User menu block

STEP 1: Navigate to Structure > Blocks,nd User menu.Click congure link and block with following properties:

User menu

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/user-menu-block-1.png)

User menu

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/user-menu-block-2.png)

STEP 2: Click Save block button.

Sidebar rst: Main Menu

Front end Display

Main Menu

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/main-menu.png)

STEP 1: Navigate to Structure > Blocks

STEP 2: Find Main Menu block, click congure link, set following properties

Main Menu

(/sites/default/les/guide_static/guides_d8/zircon_d8/homepage/main-menu-block-1.png)

https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 37/37