Вы находитесь на странице: 1из 82

 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 - LUXESTATE THEME GUIDE FOR


 DEVELOPERS


Doc Navigation

The Basic - Before You Start

Installation

Taxonomy configuration

Media Configurations

Web services configuration



Content Type Configurations

URL aliases configuration

Create Homepage

Create Subpages

More Configurations

Overview
Do you own a car business, a showroom, or whatever products that you want to showcase to your online visitors? Do you need a simultaneously
professional & beautiful website that your customers love, and that would make a good first impression on your business. Luxestate D8 will not let your
expectation down.

Dig down the demo to find out more about the theme design. Along with Drupal 8 built out of the box, Luxestate D8 for a Drupal website is a choice you will
not gonna miss.

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, find this guide in
handy. This guide will give you the detailed step by step installation guide to help you start building the content for Luxestate D8
(https://www.weebpal.com/drupal-themes/luxestate-interior-business-drupal-8-theme) to look exactly like the demo site
(http://demo.weebpal.com/drupal8/luxestate/).

1. Luxestate D8 Package
Luxestate D8, as the name has implied, is a theme wholly dedicated for shopping only. The template can serve well as a B2B, or B2C ecommerce website. It
comes with a clean simple design with fully responsive layout, easy to use template which is conforming to Drupal best practice & standard.

Drupal can build a strong Luxestate D8 website, and this theme proves the point.

Included content:

README.txt

Luxestate D8 theme: luxestate_d8-8.1.8.zip

Demo Profile for Luxestate D8: luxestate_d8-demo-8.1.8.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. Screenshots
Let's glance through the theme's design & some features:

Homepage



(/sites/default/files/guide_static/guides_d8/luxestate/subpages/homepage.png)

About us page




(/sites/default/files/guide_static/guides_d8/luxestate/subpages/about-us-page.png)

Services Page



(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-page.png)

Porfolio Page



(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page.png)

Porfolio 4 colum page



(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-4-page.png)

Porfolio Masonry page



(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-page.png)

Blog page



(/sites/default/files/guide_static/guides_d8/luxestate/subpages/blog-page.png)

Blog Default page



(/sites/default/files/guide_static/guides_d8/luxestate/subpages/blog-default-page.png)

Contact page

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/contact-page.png)

4. System Configuration
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,

SQLite 3.6.8 or higher

PHP

PHP 5.5.9 or higher
PHP 5GD library installed

Disabled error_reporting flag 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).

5. Module requirements

Core Modules

Action

Aggregator

Automated Cron

Ban

Basic Auth

Big Pipe

Block

Block Content

Book

Breakpoint

Locale

Update manager

Third-party Modules

1. Admin Toolbar (http://drupal.org/project/admin_toolbar)

2. Block Tabs (http://drupal.org/project/blocktabs)

3. Colorbox (http://drupal.org/project/colorbox)

4. Ctools (http://drupal.org/project/ctools)

5. Devel (https://www.drupal.org/project/devel)

6. Libraries (https://www.drupal.org/project/libraries)

7. Memcache (http://drupal.org/project/memcache)

8. Menu Link Attributes (http://drupal.org/project/menu_link_attributes)

9. Node Class (https://www.drupal.org/project/node_class)

10. Pathauto (http://drupal.org/project/pathauto)

11. Share This (http://drupal.org/project/sharethis)

12. Taxonomy Menu (http://drupal.org/project/taxonomy_menus)

13. Simplenews (http://drupal.org/project/simplenews)

14. Token (http://drupal.org/project/token)

15. Video Embed Field (http://drupal.org/project/video_embed_field)

Download Drupal core files, 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: Luxestate D8 (https://www.weebpal.com/drupal-themes/luxestate-interior-business-drupal-8-theme))

Files included:

README.txt

Luxestate D8 theme: luxestate_d8-8.1.8.zip



Demo Profile forLuxestate D8: luxestate_d8-demo-8.1.8.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/drupal8/luxestate/) for the theme easily.

Package

(/sites/default/files/guide_static/guides_d8/luxestate/structure/package.png)

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

luxestate_d8-demo-8.1.8.zip

2. Extract luxestate_d8-demo-8.1.8.zip above and copy it into your host, and rename the directory

Quick Installation

(/sites/default/files/guide_static/guides_d8/luxestate/structure/quick_install_demo_package.png)

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

Quick Installation

(/sites/default/files/guide_static/guides_d8/luxestate/structure/database-create.png)

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

Quick Installation

(/sites/default/files/guide_static/guides_d8/luxestate/structure/quick_install_database.png)

Import this file into new database.

Quick Installation

(/sites/default/files/guide_static/guides_d8/luxestate/structure/database-import.png)

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

Quick Installation

(/sites/default/files/guide_static/guides_d8/luxestate/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 file.

Quick Installation

(/sites/default/files/guide_static/guides_d8/luxestate/structure/quick_install_settings_database.png)


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 Luxestate D8 Demo
(http://demo.weebpal.com/drupal8/luxestate/)

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

8. In site, navigate to Configuration > Development click Performance

Download Drupal 8

(/sites/default/files/guide_static/guides_d8/luxestate/structure/dev-performance.png)

9. At Configuration Performance page, click Clear all cache button

Download Drupal 8

(/sites/default/files/guide_static/guides_d8/luxestate/structure/dev-clear-caches.png)

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 Luxestate D8 Theme, find this guide in
handy.

1. Install Drupal

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

Download Drupal 8

(/sites/default/files/guide_static/guides_d8/luxestate/structure/preparation-download-drupal8.png)

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

Follow steps below to install a Drupal site only:

3. Access to database and create a new database with a name such as Luxestate D8.

Install theme package

(/sites/default/files/guide_static/guides_d8/luxestate/structure/database-create.png)

4. Open browser and navigate to your website.

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

Install Drupal 8

(/sites/default/files/guide_static/guides_d8/luxestate/structure/install-drupal-step1.png)

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

Install Drupal 8

(/sites/default/files/guide_static/guides_d8/luxestate/structure/install-drupal-step2.png)

7. Enter database parameters => click Save and continue button. 


Install Drupal 8

(/sites/default/files/guide_static/guides_d8/luxestate/structure/install-drupal-step3.png)

8. Enter site information => click Save and continue button.

Install Drupal 8

(/sites/default/files/guide_static/guides_d8/luxestate/structure/install-drupal-step4.png)

9. Click Visit your new site and you will have a new site.

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

2. Install Luxestate D8 Theme

1. Extract Luxestate D8 theme .ZIP file:


luxestate_d8-8.1.8.zip

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

(/sites/default/files/guide_static/guides_d8/luxestate/structure/preparation-extract.png)

3. Navigate to Appearance > Choose Enable and set default Onepage theme

(/sites/default/files/guide_static/guides_d8/luxestate/structure/preparation-set-default.png)

3. Install Required Modules

Now that you've enabled Onepage 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 luxestate_d8-8.1.8.zip

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/guides/how-install-weebpal-theme-drupal-developers) to get more details about installation

Taxonomy configuration
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 find Vocabulary Tags and click List terms button

Vocabulary

(/sites/default/files/guide_static/guides_d8/luxestate/structure/taxonomy.png)

STEP 2: Click Add term button to foreach add term Company, CSS, Drupal, Service, Software, Transportation for taxonomy Tags

Vocabulary

(/sites/default/files/guide_static/guides_d8/luxestate/structure/taxonomy-list.png)


Then, add terms

STEP 3: Add term Company:

Taxonomy

(/sites/default/files/guide_static/guides_d8/luxestate/structure/taxonomy-term-1.png)

STEP 4: Add term CSS:

Taxonomy

(/sites/default/files/guide_static/guides_d8/luxestate/structure/taxonomy-term-2.png)

STEP 5: Add term Drupal:

Taxonomy

(/sites/default/files/guide_static/guides_d8/luxestate/structure/taxonomy-term-3.png)

STEP 6: Add term Service:

Taxonomy

(/sites/default/files/guide_static/guides_d8/luxestate/structure/taxonomy-term-4.png)

STEP 7: Add term Software:

Taxonomy

(/sites/default/files/guide_static/guides_d8/luxestate/structure/taxonomy-term-5.png)

STEP 8: Add term Transportation:

Taxonomy

(/sites/default/files/guide_static/guides_d8/luxestate/structure/taxonomy-term-6.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
configuration

Media configuration 
Image Style Configuration
Image styles are the presets of image settings. Image styles are used to define how the images are shown.

Navigate to Configuration, In MEDIA area, click Image styles, then create image styles as the following:

Image Styles

(/sites/default/files/guide_static/guides_d8/luxestate/structure/image-styles.png)

Set following properites for each image style by sequence



STEP 1: Add image style

Image Styles

(/sites/default/files/guide_static/guides_d8/luxestate/structure/image-styles-step1.png)

STEP 2: Set effect for image style

Image Styles

(/sites/default/files/guide_static/guides_d8/luxestate/structure/image-styles-step2.png)

Image Styles

(/sites/default/files/guide_static/guides_d8/luxestate/structure/image-styles-step3.png)

STEP 3: Update style for image style

Image Styles

(/sites/default/files/guide_static/guides_d8/luxestate/structure/image-styles-step4.png)

Web services configuration


Configuration ShareThis

STEP 1: Navigate to Configuration > Web services , find and click ShareThis line

Module

(/sites/default/files/guide_static/guides_d8/luxestate/structure/module-sharethis-find.png)

STEP 2: Set followinng properites ShareThis field

Module

(/sites/default/files/guide_static/guides_d8/luxestate/structure/module-sharethis.png)


Content Type Configurations
Modify Article type

STEP 1: Navigate to Structure > Content Type > Articleset properites:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-article-edit.png)

STEP 2: Go to Manage fields tab, add following fields:


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-article-field.png)

STEP 3: Set properties for Banner field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-article-banner-add.png)


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-article-banner-settings.png)

STEP 4: Set properties for Summary field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-article-summary-add.png)

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


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-article-form-display.png)

STEP 6: Go to Manage display tab > Default tab, set following properties:


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-article-display-default.png)

STEP 7: Click Save button

STEP 8: Navigate to Configuration > Regional and language . Click Content language and translation add setting following fields:



(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-article-regional.png)

STEP 9: Click Save configuration button

Modify Basic page type

STEP 1: Navigate to Structure > Content Type > Basic page. In Basic page, go to Manage display tab > Default tab, set following properties:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-basic-page-field.png)

STEP 2: Set properties for Icon class field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-basic-page-icon-add.png)

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

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-basic-page-form-display.png)

STEP 4: Click Save button

STEP 5: Navigate to Configuration > Regional and language . Click Content language and translation add setting following fields:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-basic-page-regional.png)

STEP 6: Click Save configuration button

Create Banner type

STEP 1: Navigate to Structure > Content Type

STEP 2: Click Add Content Type link to create Banner type

Banner type

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-create.png)

STEP 3: Click Save and manage fields button, then add following fields:

Banner type

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-field.png)

STEP 4: Set properties for Banner field

Banner type

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-banner-add.png)

Banner type

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-banner-settings.png)

STEP 5: Set properties for Banner title field

Banner type

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-title-add.png)

Banner type

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-title-settings.png)

STEP 6: Set properties for Body field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-body-settings.png)

STEP 7: Set properties for Type field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-type-add.png)


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-type-settings.png)

STEP 8: At Manage fields tab, find Type field line to click Storage settings link and settings following properites:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-type-storage.png)


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-type-storage-settings.png)

Refer to following HTML code:

1 1|Blog details
2 2|Blog page
3 3|Portfolio details
4 4|Portfolio page
5 5|About us
6 6|Service
7 7|Contact
8 8|Userlogin page
9

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


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-form-display.png)

STEP 10: Go to Manage display tab > Default tab, set following properties:


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-display-deafult.png)

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

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-banner-display-teaser.png)

STEP 12: Click Save button

Create Blog type



STEP 1: Navigate to Structure > Content Type
STEP 2: Click Add Content Type link to create Blog type

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-create.png)

STEP 3: Click Save and manage fields button, then add following fields:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-field.png) 
STEP 4: Set properties for Image field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-img-add.png)

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-img-settings.png)

STEP 5: Set properties for Comments field


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-cmt-add.png)

STEP 6: Set properties for Slideshow field

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-slideshow-add.png)

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-slideshow-settings.png)


STEP 7: Set properties for Tags field

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-tags-add.png)

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-tags-settings.png)

STEP 8: Set properties for Video field

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-video-add.png)

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-video-settings.png)

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

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-form-display.png)

STEP 10: Go to Manage display tab > Default tab, set following properties:

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-display-defautl.png)

STEP 11: Click Save button

STEP 12: Navigate to Configuration > Regional and language . Click Content language and translation add setting following fields:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-blog-regional.png)

STEP 13: Click Save configuration button

Create Our mission type

STEP 1: Navigate to Structure > Content Type

STEP 2: Click Add Content Type link to create Our mission type


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourmission-create.png)

STEP 3: Click Save and manage fields button, then add following fields:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourmission-field.png)

STEP 4: Set properties for Image field


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourmission-img-add.png)

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourmission-img-settings.png)

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


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourmission-form-display.png)

STEP 6: Click Save button

STEP 7: Navigate to Configuration > Regional and language . Click Content language and translation add setting following fields:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourmission-regional.png)

STEP 8: Click Save configuration button

Create Our services type

STEP 1: Navigate to Structure > Content Type

STEP 2: Click Add Content Type link to create Our services type


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourservice-create.png)

STEP 3: Click Save and manage fieldsbutton, then add following fields:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourservice-field.png)

STEP 4: Set properties for Percent field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourservice-percent-add.png)

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourservice-percent-settings.png)

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


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourservice-form-display.png)

STEP 6: Click Save button

STEP 7: Navigate to Configuration > Regional and language . Click Content language and translation add setting following fields:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-ourservice-regional.png)

STEP 8: Click Save configuration button

Create Partners type

STEP 1: Navigate to Structure > Content Type

STEP 2: Click Add Content Type link to create Partners type


(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-partners-create.png)

STEP 3: Click Save and manage fields button, then add following fields:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-partners-field.png)

STEP 4: Set properties for Partners field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-partners-img-add.png)

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-partners-img-setting.png) 
STEP 5: Set properties for Links field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-partners-link-add.png)

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

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-partners-form-display.png)

 STEP 7: Go to Manage display tab > Default tab. Set following properties:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-partners-display-default.png)

STEP 8: Click Save button

Create Portfolio type

STEP 1: Navigate to Structure > Content Type

STEP 2: Click Add Content Type link to create Portfolio type

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-portfolio-create.png)

STEP 3: Click Save and manage fields button, then add following fields:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-portfolio-field.png)

STEP 4: Set properties for Gallery field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-portfolio-gallery-add.png)

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-portfolio-gallery-settings.png)

STEP 5: At Manage fields tab, find Gallery field line to click Storage settings link and settings following properites:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-portfolio-gallery-storage.png)

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-portfolio-gallery-storage-settings.png)

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

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-portfolio-form-display.png)

STEP 7: Click Save button

Create Why us type

STEP 1: Navigate to Structure > Content Type



STEP 2: Click Add Content Type link to create Why us type

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-whyus-create.png)

STEP 3: Click Save and manage fields button, then add following fields:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-whyus-field.png)

 STEP 4: Set properties for Why us type field

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-whyus-type-add.png)

STEP 5: At Manage fields tab, find Why us type field line to click Storage settings link and settings following properites:

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-whyus-type-storage.png)

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-whyus-type-storage-settings.png)

Refer to following HTML code:

1 1|About us
2 2|Services
3

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

(/sites/default/files/guide_static/guides_d8/luxestate/structure/ctt-whyus-form-display.png)

STEP 7: Click Save button

URL aliases configuration


Add Patterns

STEP 1: Navigate to Configuration > Search and metadata > URL aliases click Patterns tabs then add Add Pathauto pattern following properties:

Patterns

(/sites/default/files/guide_static/guides_d8/luxestate/structure/url-patterns.png)

STEP 2: Set properites for Banner pattern

Patterns

(/sites/default/files/guide_static/guides_d8/luxestate/structure/url-banner.png)

STEP 3: Set properites for Blog pattern



Patterns

(/sites/default/files/guide_static/guides_d8/luxestate/structure/url-blog.png)

STEP 4: Set properites for Our mission pattern

Patterns

(/sites/default/files/guide_static/guides_d8/luxestate/structure/url-our-mission.png)

STEP 5: Set properites for Our services pattern


Patterns

(/sites/default/files/guide_static/guides_d8/luxestate/structure/url-our-service.png)

STEP 6: Set properites for Partners pattern

Patterns

(/sites/default/files/guide_static/guides_d8/luxestate/structure/url-partners.png)

STEP 7: Set properites for Portfolio pattern

Patterns

(/sites/default/files/guide_static/guides_d8/luxestate/structure/url-portfolio.png)

STEP 8: Set properites for Vocabulary tags pattern

Patterns

(/sites/default/files/guide_static/guides_d8/luxestate/structure/url-tags.png)

STEP 9: Set properites for Why us pattern

Patterns

(/sites/default/files/guide_static/guides_d8/luxestate/structure/url-why-us.png)

STEP 10: Click Save button

Create Homepage
Slideshow block
Front end Display

Slideshow

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/slideshow-block.png)

1. Create Slideshow view

STEP 1: Navigate to Structure > Views, click Add new view, then create Slideshow view with following settings:

Slideshow 
(/sites/default/files/guide_static/guides_d8/luxestate/homepage/slideshow-view-create.png)

STEP 2: Click Save and edit button. Next to steps below to set properties for following fields:

Slideshow

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/slideshow-view.png)

STEP 3: At FIELDS area, click Add button to add fields: Content: Slideshow

STEP 4: Set properties for Content: Slideshow



Slideshow

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/slideshow-view-slideshow.png)

STEP 5: At FIELDS area, click Rearrange button. Then remove Content: Title and set following arrange

Slideshow

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/slideshow-view-rearr.png)

STEP 6: At FILTER CRITERIA area, add Content: Slideshow:target_id field and set properties:

Slideshow

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/slideshow-view-slideshow-id.png)

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

Slideshow

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/slideshow-view-css.png)

STEP 8: Click Save to save view

2. Configure View: Slideshow block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Slideshow click Place block button

STEP 3: Find Slideshow click Place block button and set following properites:

Configure Slideshow block

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/slideshow-block-settings.png)

STEP 4: Click Save block button.

Frontpage
Front end Display

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-block.png)

STEP 1: Navigate to Structure > Views, find Frontpage view, then click Edit view with following settings:

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view.png)

STEP 2: At FORMAT area, find Format click link and set following properties:

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-format.png)

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-settings.png)

STEP 3: At FORMAT area, find Show click and link and set following properties:


Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-show.png)

STEP 4: At FIELDS area, click Add button to add fields: Content: Title, Content: Body, Content: Link to Content, Global: Custom text

STEP 5: Set properties for Content: Title

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-title.png)

STEP 6: Set properties for Content: Body

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-body.png)

STEP 7: Set properties for Content: Link to Content

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-link.png)

STEP 8: Set properties for Global: Custom text

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-global.png)

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

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-rearr.png)

STEP 10: At FILTER CRITERIA area, add Content: Content type, Content: Title field and set properties:

STEP 11: Set properties for Content: Content type

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-type.png)

STEP 12: Set properties for Content: Title

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-title-2.png)

STEP 13: At FILTER CRITERIA area, click Rearrange button to remove Content: Promoted to front page, Content: Translation language fields and set

following arrange 
Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-criteria-rearr.png)

STEP 14: At PAGER area, find and click Use pager link and set following properites:

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-pager-1.png)

Frontpage

 (/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-pager-2.png)

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

Frontpage

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/frontpage-view-css.png)

STEP 16: Click Save to save view

Welcome to Luxestate block


Front end Display

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-block.png)

1. Add Welcome to Luxestate content

STEP 1: Navigate to Content > Add content > Article

STEP 2: Create Welcome to Luxestate content with following properites:

About us content

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-content.png)

STEP 3: Click Save block button.

Refer to following HTML code of Summary:

1 <p>“It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The poin
2  
3 <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected hu
4  
5 <h4>AMANDA CLARKE</h4>
6  
7 <h5>Creative Director</h5>
8
9

Refer to following HTML code of Body:

1 <h1>What is Lorem Ipsum?</h1>
2  
3 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ev
4  
5 <h1>Where can I get some?</h1>
6  
7 <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected h
8  
9 <h1>Where does it come from?</h1>
10  
11 <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, 
12
13


2. Create About us view
STEP 1: Navigate to Structure > Views, click Add new view, then create About us view with following settings:

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-create.png)

STEP 2: Click Save and edit button. Next to steps below to set properties for following fields:

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view.png)


STEP 3: At Display name area, click and set properties:

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-name.png)

STEP 4: At FIELDS area, click Add button to add fields: Content: Path, Content: Banner, Content: Summary, Global: Custom text

STEP 5: Set properties for Content: Title

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-title.png)

STEP 6: Set properties for Content: Path

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-path.png)

STEP 7: Set properties for Content: Banner

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-banner.png)

STEP 8: Set properties for Global: Custom text

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-global.png)

Refer to following HTML code:

1 <div class="views‐field wp‐views‐field‐view‐node">
2         <a href="{{ path }}">Read more</a> 
3 </div>
4

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

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-rearr.png)

STEP 10: At FILTER CRITERIA area, click Add button to add Content: ID, Content: Translation language fields and set following properites:

STEP 11: Set properties for Content: ID

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-id.png)


Note: ID of content is taken by
Navigate to Configuration > Search and metadata > URL aliases find /about-us path.

Patterns

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-url-id.png)

STEP 12: Set properties for Content: Translation language

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-trans.png)


STEP 13: At LANGUAGE area, find and click Rendering Language link and set following properites:

About us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-language.png)

STEP 14: Click Save to save view

3. Configure View: About us block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Panel second click Place block button

STEP 3: Find About us: About us click Place block button and set following properites:

Configure About us block

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/about-us-view-bock-conf.png)

STEP 4: Click Save block button.

Portfolio block
Front end Display

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-block.png)

1. Create Portfolio block view

STEP 1: Navigate to Structure > Views, click Add new view, then create Portfolio view with following settings:

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-create.png)

STEP 2: Click Save and edit button. Next to steps below to set properties for following fields:

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view.png)

STEP 3: At Display name area, click and set properties:

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-name.png)

STEP 4: At FORMAT area, find Format click Settings link and set following properties:


Portfolio
(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-show-settings.png)

STEP 5: At FIELDS area, click Add button to add fields: Content: Gallery

STEP 6: Set properties for Content: Gallery

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-gallery.png)

STEP 7: At FIELDS area, click Rearrange to remove Content: Title button and set following arrange

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-rearr.png)

STEP 8: At FILTER CRITERIA area, add Content: Gallery:target_id field and set properties:

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-gallery-id.png)

STEP 9: At HEADER area, click Add button to add field Global: Text area with following properties:

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-header.png)

Refer to following HTML code:

1 “There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humo
2  
3                    ‐‐ Lorem Ipsum ‐‐
4

STEP 10: At FOOTER area, click Add button to add field Global: Text area with following properties:

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-footer.png)

Refer to following HTML code:

1 “If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.”
2  
3 ‐‐ H. Rackham ‐‐
4

STEP 11: Click Save to save view

2. Configure Portfolio: Porfolio front page block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Panel third click Place block button

STEP 3: Find Portfolio: Porfolio front page click Place block button and set following properites:

Configure Blocktabs block

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-block-conf.png)

STEP 4: Click Save block button.


Latest news block
Front end Display

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-block.png)

1. Create Blog page view

STEP 1: Navigate to Structure > Views, click Add new view, then create Blog page view with following settings:

Blog page

 (/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-create.png)

STEP 2: Click Save and edit button. Next to steps below to set properties for following fields:

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view.png)

STEP 3: At Display name area, click and set properties:

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-name.png)

STEP 4: At FORMAT area, find Format click Settings link and set following properties:

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/portfolio-view-show-settings.png)

STEP 5: At FILTER CRILERIA area, click Add button to add fields: Content: Path, Content: Image, Content: Authored by, Content: Authored on, Content:

Tags, Content: Body

STEP 6: Set properties for Content: Path

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-path.png)

STEP 7: Set properties for Content: Image

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-image.png)

STEP 8: Set properties for Content: Authored by

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-by.png)

Refer to following HTML code:

1 by {{ uid }}
2

STEP 9: Set properties for Content: Authored on

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-on.png)

STEP 10: Set properties for Content: Tags



Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-tags.png)

Refer to following HTML code:

1 in {{ field_tags }}
2

STEP 11: Set properties for Content: Body

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-body.png)

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

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-rearr.png)

STEP 13: At FILTER CRITERIA area, add Content: Translation language field and set properties:

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-trans.png)

STEP 14: At HEADER area, click Add button to add field Global: Text area with following properties:

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-global.png)

Refer to following HTML code:

1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2 Praesent facilisis massa nellyary eget magna semper,  dolor sit amet.
3

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

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-css.png)

STEP 16: Click Save to save view

2. Configure Blog page: Block news block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Panel fourth click Place block button

STEP 3: Find Blog page: Block news click Place block button and set following properites:

Configure Our Services block

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/blogpage-view-block-conf.png)

STEP 4: Click Save block button.

Our partners block


Front end Display

Our Partners
(/sites/default/files/guide_static/guides_d8/luxestate/homepage/our-partners-view-block.png)

1. Create Our partners view

STEP 1: Navigate to Structure > Views, click Add new view, then create Our partners view with following settings:

Our Partners

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/our-partners-view-create.png)

STEP 2: Click Save and edit button. Next to steps below to set properties for following fields:


Our Partners

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/our-partners-view.png)

STEP 3: At Display name area, click and set properties:

Our Partners

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/our-partners-view-name.png)

STEP 4: At FIELDS area, click Add button to add fields: Content: Link, Content: Partners

STEP 5: Set properties for Content: Link

Our Partners

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/our-partners-view-link.png)

STEP 6: Set properties for Content: Partners

Our Partners

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/our-partners-view-partners.png)

STEP 7: Set properties for Content: Title

Our Partners

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/our-partners-view-title.png)

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

Our Partners

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/our-partners-view-css.png)

STEP 9: Click Save to save view

2. Configure Our partners: Our partners block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Panel fifth click Place block button

STEP 3: Find Our partners: Our partners click Place block button and set following properites:

Our Partners

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/our-partners-view-block-conf.png)

STEP 4: Click Save block button.



Footer first column block
Front end Display

Quick links

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/footer-first-column-block.png)

1. Create and add link Quick links menu

STEP 1: Navigate to Structure > Menu, click Add menu link to create Quick links link with following properties:


Quick links

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/quick-link-menu.png)

STEP 2: Click Add link link to add link following: Drupal, Facebook, Google, Twitter, WeebPal, Wordpress menu items

STEP 3: Set properties foreach menu item is the same Drupal menu item

Quick links

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/quick-link-menu-conf.png)

STEP 4: Click Save button

2. Configure Quick links block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Footer first column click Place block button

STEP 3: Find Quick links click Place block button and set following properites:

Quick links

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/quick-link-menu-block-conf.png)

STEP 4: Click Save block button.

3. Configure Main navigation block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Footer first column click Place block button

STEP 3: Find Main navigation click Place block button and set following properites:

Quick links

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/main-menu-block-conf.png)

STEP 4: Click Save block button.

Footer second column block


Front end Display

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-block.png)

1. Add Latest news block view 


STEP 1: Navigate to Structure > Views find Blog page view, then click Edit button:

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-edit.png)

STEP 2: Click Add > Block button. Next to steps below to set properties for following fields:

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view.png)


STEP 3: At Display name area, click and set properties:

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-name.png)

STEP 4: At FORMAT area, find Format click Format link and set following properties:

Portfolio

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-format.png)

STEP 5: At FILTER CRILERIA area, click Add button to add fields: Global: Text area

STEP 6: Set properties for Global: Text area

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-global-add.png)

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-global.png)

Refer to following HTML code:

1 <div class="views‐field wp‐views‐field‐img">
2     {{ field_image }}  
3 </div>
4 <div class="views‐inner views‐fieldset">
5     <div class="views‐field wp‐views‐field‐title">
6         {{ title }}
7     </div>
8     <div class="views‐field wp‐views‐field‐body">
9         {{ body }} 
10     </div>
11     <div class="views‐field wp‐views‐field‐created">
12         {{ created }}      
13     </div>
14 </div>
15

STEP 7: Set properties for Content: Image

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-image.png)

STEP 8: Set properties for Content: Authored on

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-on.png)

STEP 9: Set properties for Content: Body

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-body.png)
STEP 10: Set properties for Content: Title

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-title.png)

STEP 11: At FIELDS area, click Rearrange button to remove Content: Path, Content: Authored by, Content: Tags and set following arrange

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-rearr.png)


STEP 12: At PAGER area, find Use pager click Display a specified number of items link and set following properites

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-pager-1.png)

STEP 13: At PAGER area, find Use pager click 3 items link and set following properites

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-pager-2.png)

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

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-css.png)

STEP 15: Click Save to save view

2. Configure Blog page: Latest news block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Footer second column click Place block button

STEP 3: Find Blog page: Latest news click Place block button and set following properites:

Blog page block

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/lastest-news-view-block-conf.png)

STEP 4: Click Save block button.

Newsletter block
Front end Display

Newsletter

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/newsletter-block.png)

Configure Newsletter block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Footer third column click Place block button

STEP 3: Find Simplenews subscription click Place block button and set following properites:

Newsletter 
(/sites/default/files/guide_static/guides_d8/luxestate/homepage/newsletter-block-conf.png)
STEP 4: Click Save block button.

Contact us block
Front end Display

Contact us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/contact-us-block.png)

Create and configure Contact us block



STEP 1: Navigate to Structure > Block layout find Add custom block link. Click and create Contact us block with following properties:

Contact us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/contact-us-add.png)

Contact us

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/contact-us-conf.png)

STEP 2: Click Save button

Refer to following HTML code:

1 <p>The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non‐characteristic words etc.</p>
2  
3 <address><span>1‐800‐123‐HELLO</span> <a href="mailto:help@travelo.com" title="help@travelo.com">help@travelo.com</a></address
4  
5 <div class="social‐wrap">
6 <ul class="list‐inline social‐list"><li><a href="#" title="Twitter"><span aria‐hidden="true" class="fa fa‐twitter">Twitter</
7     <li><a href="#" title="Google"><span aria‐hidden="true" class="fa fa‐google‐plus">Google</span></a></li>
8     <li><a href="#" title="Facebook"><span aria‐hidden="true" class="fa fa‐facebook">Facebook</span></a></li>
9     <li><a href="#" title="linkkedin"><span aria‐hidden="true" class="fa fa‐linkedin‐square">linkkedin</span></a></li>
10     <li><a href="#" title="vimeo"><span aria‐hidden="true" class="fa fa‐vimeo">vimeo</span></a></li>
11     <li><a href="#" title="dribble"><span aria‐hidden="true" class="fa fa‐dribbble">dribble</span></a></li>
12     <li><a href="#" title="flick"><span aria‐hidden="true" class="fa fa‐flickr">flick</span></a></li>
13 </ul></div>
14
15

Copyright block
Front end Display

Copyright

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/copyright-block.png)

Create and configure Copyright block

STEP 1: Navigate to Structure > Block layout find Add custom block link. Click and create Copyright block with following properties:

Copyright

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/copyright-add.png)

Copyright

(/sites/default/files/guide_static/guides_d8/luxestate/homepage/copyright-conf.png)

STEP 2: Click Save button

Refer to following HTML code:

1 <p>© copy 2016 Luxestate is proudly powered by <a href="http://drupal.org (http://drupal.org)" target="_blank">Drupal</a> | Designed by <
2
3

Create Subpages
Site branding block
Configure Site branding block

 STEP 1: Navigate to Structure > Block layout

STEP 2: Find Header click Place block button

STEP 3: Find Site branding click Place block button and set following properites:

Page Title

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/site-branding.png)

STEP 4: Click Save block button.

Page title block


Configure Page title block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Content click Place block button

STEP 3: Find Page title click Place block button and set following properites:

Page Title

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/page-title-block-conf.png)

STEP 4: Click Save block button.

STEP 5: Scroll to the bottom of the page and click Save blocks button.

Main navigation menu block


Front end Display

Main navigation

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/main-menu-block.png)

1. Configure Main navigation block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Primary menu click Place block button

STEP 3: Find Main navigation click Place block button and set following properites:

Main navigation

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/main-menu-conf.png)


STEP 4: Click Save block button.
2. Add menu items

STEP 1: Navigate to Structure > Menu > Main navigation

STEP 2: Find and click Add link button

Main navigation

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/main-menu-add-link.png)

STEP 3: Add Contact item menu with following properites:



Main navigation

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/main-menu-add-contact.png)

STEP 4: Add More Theme item menu with following properites:

Main navigation

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/main-menu-add-moretheme.png)

STEP 5: Click Save block button.

Sidebar first: Search form block


Front end Display

Search form

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/search-block.png)

Configure Search form block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Sidebar first click Place block button

STEP 3: Find Search form click Place block button and set following properites:

Search form

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/search-block-conf.png)

STEP 4: Click Save block button.

Sidebar first: Recent Posts block


Front end Display

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-block.png)

1. Add Recent Posts block view

STEP 1: Navigate to Structure > Views, find Blog page view click Edit button:

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/blog-page-edit.png)

STEP 2: Click Add > Block button to create Recent Posts block view and set properties for following fields:

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-view.png)

STEP 3: At Display name area, click and set properties:

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-view-name.png)

STEP 4: At TITLE area, find Title field and set following properites:


Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-view-title.png)

STEP 5: At FORMAT area, find Format click link and set following properties:

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-view-format.png)

STEP 6: At FIELDS area, click Rearrange button. Set For This block (override), then click Remove to remove Content: Path, Content: Image, Content:

Authored by, Content: Authored on, Content: Tags, Content: Body field and set following properites:

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-view-rearr.png)

STEP 7: At HEADER area, set for This block (override), then click Remove field Global: Text area with following properties:

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-view-header.png)

STEP 8: At PAGER area, find Use pager click Display a specified number of items link and set following properites

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-view-pager-1.png)

STEP 9: At PAGER area, find Use pager click 3 items link and set following properites

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-view-pager-2.png)

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

Blog page

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-view-css.png)

STEP 11: Click Save to save view

2. Configure Blog page: Recent Posts block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Sidebar first click Place block button

STEP 3: Find Blog page: Recent Posts click Place block button and set following properites:

Configure Blog page 


(/sites/default/files/guide_static/guides_d8/luxestate/subpages/recent-post-view-block-conf.png)
STEP 4: Click Save block button.

Sidebar first: Tags block


Front end Display

Tags in Tags

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/tags-block.png)

1. Create Tags view



STEP 1: Navigate to Structure > Views, click Add new view then create Tags view with following settings:

Tags in Tags

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/tags-view-create.png)

STEP 2: Click Save and edit button. Next to steps below to set properties for following fields:

Tags in Tags

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/tags-view.png)

STEP 3: At Advanced > OTHER area, click Use aggregation and set following properites:

Tags in Tags

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/tags-view-aggregate.png)

STEP 4: At Advanced > RELATIONSHIP area, click Add button to add field Representative node and set following properites:

Tags in Tags

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/tags-view-node.png)

STEP 5: At FIELDS area, click Add button to add fields: Taxonomy Term: Name

STEP 6: Set properties for Taxonomy Term: Name

Tags in Tags

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/tags-view-count.png)

Tags in Tags

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/tags-view-name.png)

STEP 7: At FILTER CRITERIA area, click Add button to add Taxonomy Term: Translation language fields and set following properites:

Tags in Tags

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/tags-view-trans.png)

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

Tags in Tags

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/tags-view-css.png)

STEP 9: Click Save to save view

2. Configure Tags block

STEP 1: Navigate to Structure > Block layout



STEP 2: Find Sidebar first click Place block button

STEP 3: Find Tags click Place block button and set following properites:

Tags in Tags

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/tags-block-conf.png)

STEP 4: Click Save block button.

 About Us page
Front end Display

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/about-us-page.png)

1. Banner block

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-block.png)

1.1 About us content

STEP 1: Navigate to Content > Add content click Banner, create About us content with following properties:

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-about-content.png)

STEP 2: Click Save button

Refer to following HTML code:

1 <p>“It is a long established fact that a reader will be distracted by the readable content of a page when looking”</p>
2

1.2 Create Banner view

STEP 1: Navigate to Structure > Views, click Add new view, then create Banner view with following settings:

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-create.png)

STEP 2: Click Save and edit button. Next to steps below to set properties for following fields:

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab.png)

STEP 3: At Display name area, click and set properties:

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-name.png)

STEP 4: At FIELDS area, click Add button to add fields: Content: Banner Title, Content: Body, Content: Image, Global: Custom text

STEP 5: Set properties for Content: Title

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-title.png)
STEP 6: Set properties for Content: Body

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-body.png)

STEP 7: Set properties for Content: Banner Title

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-banner-title.png)


STEP 8: Set properties for Content: Image

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-img.png)

STEP 9: Set properties for Global: Custom text

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-global.png)

Refer to following HTML code:

1 <div class="views‐inner">
2     <div class="views‐field wp‐views‐field‐banner‐title">
3     <span>
4         {{ field_banner_title }}
5     <span>
6     </span></span></div>
7     <div class="views‐field wp‐views‐field‐body">
8         {{ body }} 
9     </div> 
10 </div>
11
12

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

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-rearr.png)

STEP 11: At FILTER CRITERIA area, click Add button to add Content: Type fields and set following properites:

STEP 12: Set properties for Content: Type

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-type.png)

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

About us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-css.png)

STEP 14: Click Save to save view

1.3 Configure Banner: About us page block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Banner click Place block button


STEP 3: Find Banner: About us page Banner click Place block button and set following properites:
Configure About us block

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-ab-block-conf.png)

STEP 4: Click Save block button.

2. Our mission block

Our

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-mission-block.png)

 2.1 Create Our mission view

STEP 1: Navigate to Structure > Views, click Add new view, then create Our mission view with following settings:

Our mission

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-mission-view-create.png)

STEP 2: Click Save and edit button. Next to steps below to set properties for following fields:

Our mission

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-mission-view.png)

STEP 3: At FORMAT area, find Format click Settings link and set following properties:

Our mission

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-mission-view-settings.png)

STEP 4: At FIELDS area, click Add button to add fields: Content: ShareThis Link, Content: Body, Content: Image

STEP 5: Set properties for Content: Title

Our mission

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-mission-view-title.png)

STEP 6: Set properties for Content: Image

Our mission

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-mission-view-img.png)

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

Our mission

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-mission-view-rearr.png)

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

Our mission

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-mission-view-css.png)

STEP 9: Click Save to save view

2.2. Configure Our mission block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Content bottom click Place block button 


STEP 3: Find Our mission click Place block button and set following properites:

Configure About us block

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-mission-block-conf.png)

STEP 4: Click Save block button.

3. Our Service block

Our Service

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-service-block.png)

3.1 Create Our Service view

STEP 1: Navigate to Structure > Views, click Add new view, then create Our Service view with following settings:

Our Service

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-service-create.png)

STEP 2: Click Save and edit button. Next to steps below to set properties for following fields:

Our Service

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-service-view.png)

STEP 3: At FIELDS area, click Add button to add fields: Content: Percent, Content: Percent, Global: Custom text

STEP 4: Set properties for Content: Title

Our Service

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-service-title.png)

STEP 5: Set properties for Content: Percent

Our Service

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-service-percent-2.png)

STEP 6: Set properties for Content: Percent

Our Service

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-service-percent.png)

STEP 7: Set properties for Global: Custom text

Our Service

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-service-global.png)

Refer to following HTML code:

1 <div class="progress">
2      <div class="progress‐bar" role="progressbar" aria‐valuenow="{{ field_percent }}" aria‐valuemin="0" aria‐valuemax="100" style
3        <span class="sr‐only">{{ field_percent }}  Complete</span>
4      </div>
5    </div>
6

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


Our Service
(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-service-rearr.png)

STEP 9: Click Save to save view

3.2 Configure Our Service block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Panel third click Place block button

STEP 3: Find Our Service click Place block button and set following properites:

Configure Our Service block

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/our-service-block-conf.png)

STEP 4: Click Save block button.

4. Why choose us block

Why us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/why-us-block.png)

4.1 Create Why us view

STEP 1: Navigate to Structure > Views, click Add new view, then create Why choose us view with following settings:

Why us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/why-us-view-create.png)

STEP 2: Click Save and edit button. Next to steps below to set properties for following fields:

Why us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/why-us-view.png)

STEP 3: At FIELDS area, click Add button to add fields: Content: Body, Global: View result counter

STEP 4: Set properties for Content: Title

Why us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/why-us-view-title.png)

STEP 5: Set properties for Global: View result counter

Why us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/why-us-view-global.png)

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

Why us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/why-us-view-rearr.png)

STEP 7: At FILTER CRITERIA area, click Add button to add Content: Why us type fields and set following properites:

STEP 8: Set properties for Content: Why us type

Why us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/why-us-view-type.png)
STEP 9: At Advanced > OTHER area, add CSS class:

Why us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/why-us-view-css.png)

STEP 10: Click Save to save view

4.2 Configure Why choose us block

STEP 1: Navigate to Structure > Block layout



STEP 2: Find Panel third click Place block button

STEP 3: Find Why choose us click Place block button and set following properites:

Why us block

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/why-us-block-conf.png)

STEP 4: Click Save block button.

Services page
Front end Display

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-page.png)

1. Banner block

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-banner-block.png)

1.1 Services content

STEP 1: Navigate to Content > Add content click Banner, create Services content with following properties:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-banner-content.png)

STEP 2: Click Save button

Refer to following HTML code:

1 <p>“It is a long established fact that a reader will be distracted by the readable content of a page when looking”</p>
2

1.2 Add Banner: Services page block view

STEP 1: Navigate to Structure > Views, find Banner view click Edit button:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-edit.png)

STEP 2: Click Add > Block button to create Services page Banner block view and set properties for following fields:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-banner-view.png)

STEP 3: At Display name area, click and set properties:
Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-banner-view-name.png)

STEP 4: At TITLE area, click and set properties:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-banner-view-title.png)

STEP 5: At FILTER CRITERIA area, click Content: Type field and set following properites:


Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-banner-view-type.png)

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

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-banner-view-css.png)

STEP 7: Click Save to save view

1.3 Configure Banner: Services page block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Banner click Place block button

STEP 3: Find Banner: Services page Banner click Place block button and set following properites:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-banner-block-conf.png)

STEP 4: Click Save block button.

2. Services content

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-content-block.png)

STEP 1: Navigate to Content > Add content click Article to create Services content with following properties:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-content.png)

STEP 2: Click Save button

Refer to following HTML code of Summary:

1 <p>“It is a long established fact that a reader will be distracted by the readable content of a page when looking”</p>
2

Refer to following HTML code of Body:

1 <p><strong>WHY DRUPAL?</strong></p>
2  
3 <p>Drupal is well‐known for its flexibility, extend ability, and security. Whenever you think about customizing, having some specific fun
4  
5 <p><strong>OUR DRUPAL DEVELOPMENT SERVICES INCLUDE:</strong></p>
6
7

Drupal Website Development

Have a website to build? We can help create a full function website starting from an idea. Based on our project management process, we'll analyze and
discuss with you to bring the best solution. This is followed by designing, developing, testing, and deploying your Drupal site.

Drupal CMS Customization

We are happy to do any changes to your existing features, or extending your CMS’ functionality to a higher level that suits your purpose.

Drupal Theming (Design Development)

 Drupal Theming has been our strength. We have years of in-depth experience with theme design development. If you need a brand-new template that
embraces the attractiv design feel and integrates up-to-date technologies, leave it for our team of experienced designers, front-ends, and back-ends

Drupal Module Development

We help you develop or customize an existing module that fits your website's direction..

Drupal SEO assistance

Having a website SEO friendly to be able to get to the top of search engines is the goal of most website administrators. We help get your website well
optimized, and fix SEO issues that affects your website ranking.

Drupal Maintenance Support

Maintenance should never been neglected. We help you with this job, checking all the important matters to make sure you Drupal projects up to best status.

Drupal Migration Upgrades

We have experience upgrading your Drupal to the newer version, or move from another CMS to Drupal

WHAT DRUPAL WEBSITES WE CAN DO:

Corporate Websites or Blogs

Ecommerce Websites

Social Networking sites

Multi-media Audio Video Portals

Magazine News site

Personal Blog Websites

3. Our amazing features block

Why us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-whyus-block.png)

3.1 Add Our amazing features block view

STEP 1: Navigate to Structure > Views, find Why us view click Edit button:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-edit.png)

STEP 2: Click Add > Block button to create Our amazing features block view and set properties for following fields:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-whyus-view.png)

STEP 3: At Display name area, click and set properties:


Services
(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-whyus-view-name.png)

STEP 4: At TITLE area, click and set properties:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-whyus-view-title.png)

STEP 5: At FILTER CRITERIA area, click Content: Type field and set following properites:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-whyus-view-type.png)

STEP 6: Click Save to save view

3.2 Configure Why choose us: Our amazing features block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Panel third click Place block button

STEP 3: Find Why choose us: Our amazing features click Place block button and set following properites:

Services

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/service-whyus-block-conf.png)

STEP 4: Click Save block button.

Porfolio page
Front end Display

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page.png)

1. Banner block

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-banner-block.png)

1.1 Porfolio page content

STEP 1: Navigate to Content > Add content click Banner, create Porfolio page content with following properties:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-banner-content.png)

STEP 2: Click Save button

Refer to following HTML code:

1 <p>“It is a long established fact that a reader will be distracted by the readable content of a page when looking”</p>
2

1.2 Add Banner: Porfolio Banner block view

STEP 1: Navigate to Structure > Views, find Banner view click Edit button:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-edit.png)
STEP 2: Click Add > Block button to create Porfolio Banner block view and set properties for following fields:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-banner-view.png)

STEP 3: At Display name area, click and set properties:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-banner-view-name.png)


STEP 4: At TITLE area, click and set properties:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-banner-view-title.png)

STEP 5: At FILTER CRITERIA area, click Content: Type field and set following properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-banner-view-type.png)

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

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-banner-view-css.png)

STEP 7: Click Save to save view

1.3 Configure Banner: Porfolio page block

STEP 1: Navigate to Structure > Block layout

STEP 2: Find Banner click Place block button

STEP 3: Find Banner: Porfolio page click Place block button and set following properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-banner-block-conf.png)

STEP 4: Click Save block button.

2. Porfolio page view

Why us

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-block.png)

Add Page view

STEP 1: Navigate to Structure > Views, find Portfolio view click Edit button:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-edit.png)

STEP 2: Click Add > Page button to create Page view and set properties for following fields:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view.png)

STEP 3: At FORMAT area, find Format click link and set following properties:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-format.png)

STEP 4: At FORMAT area, find Format click Settings link and set following properties:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-format-settings.png)


STEP 5: At FIELDS area, click Content: Gallery field and set properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-gallery.png)

STEP 6: At HEADER area, click Rearrange button. Set For This block (override), then click Remove link Global: Text area field

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-header.png)

STEP 7: At FOOTER area, click Rearrange button. Set For This block (override), then click Remove link Global: Text area field

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-footer.png)

STEP 8: At PAGE SETTINGS area, find and click Path link and set following properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-path.png)

STEP 9: At PAGE SETTINGS area, find and click Menu link and set following properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-menu.png)

STEP 10: At PAGER area, find Use pager and click Display a specified number of items link and set following properites

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-pager-1.png)

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-pager-2.png)

STEP 11: Click Save to save view

Porfolio 4 col page


Front end Display

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-4-page.png)

Add Porfolio 4 column page view

STEP 1: Navigate to Structure > Views, find Portfolio view click Edit button: 
Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-edit.png)

STEP 2: Click Add > Page button to create Porfolio 4 column view and set properties for following fields:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-4-view.png)

STEP 3: At Display name area, click and set properties:


Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-4-view-name.png)

STEP 4: At FORMAT area, find Format click link and set following properties:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-4-view-format.png)

STEP 5: At FIELDS area, click Content: Gallery field and set properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-4-view-gallery.png)

STEP 6: At HEADER area, click Rearrange button. Set For This block (override), then click Remove link Global: Text area field

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-header.png)

STEP 7: At FOOTER area, click Rearrange button. Set For This block (override), then click Remove link Global: Text area field

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-footer.png)

STEP 8: At PAGE SETTINGS area, find and click Path link and set following properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-4-view-path.png)

STEP 9: At PAGE SETTINGS area, find and click Menu link and set following properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-4-view-menu.png)

STEP 10: At PAGER area, find Use pager and click Display a specified number of items link and set following properites

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-4-view-pager-1.png)

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-4-view-pager-2.png)

STEP 11: Click Save to save view

Porfolio Masonry page 


Front end Display

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-page.png)

Add Porfolio Masonry page view

STEP 1: Navigate to Structure > Views, find Portfolio view click Edit button:

Porfolio

 (/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-edit.png)

STEP 2: Click Add > Page button to create Porfolio Masonry view and set properties for following fields:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-view.png)

STEP 3: At Display name area, click and set properties:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-view-name.png)

STEP 4: At FIELDS area, click Content: Gallery field and set properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-view-gallery.png)

STEP 5: At HEADER area, click Global: Text area field and set following properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-view-header.png)

Refer to following HTML code:

1 <h2>Masonery</h2>
2 <p>“There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected h
3 <p> ‐‐ Lorem Ipsum ‐‐</p>
4

STEP 6: At FOOTER area, click Rearrange button. Set For This block (override), then click Remove link Global: Text area field

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-page-view-footer.png)

STEP 7: At PAGE SETTINGS area, find and click Path link and set following properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-view-path.png)

STEP 8: At PAGE SETTINGS area, find and click Menu link and set following properites:

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-view-menu.png)

STEP 9: At PAGER area, find Use pager and click Display a specified number of items link and set following properites


Porfolio
(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-view-pager-1.png)

STEP 10: At PAGER area, find Use pager and click 10 items link and set following properites

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-view-pager-2.png)

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

Porfolio

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/porfolio-masonry-view-css.png)

STEP 12: Click Save to save view

Blog page
Front end Display

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/blog-page.png)

1. Banner block

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/blog-banner-block.png)

1.1 Blog page content

STEP 1: Navigate to Content > Add content click Banner, create Blog page content with following properties:

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/blog-banner-content.png)

STEP 2: Click Save button

Refer to following HTML code:

1 <p>“It is a long established fact that a reader will be distracted by the readable content of a page when looking”</p>
2

1.2 Add Banner: Blog page banner block view

STEP 1: Navigate to Structure > Views, find Banner view click Edit button:

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/banner-view-edit.png)

STEP 2: Click Add > Block button to create Blog page banner block view and set properties for following fields:

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/blog-banner-view.png)

STEP 3: At Display name area, click and set properties:

Blog

(/sites/default/files/guide_static/guides_d8/luxestate/subpages/blog-banner-view-name.png)

STEP 4: At TITLE area, click and set properties:


Оценить