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 to look exactly like the demo site.

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

Home

About us page

About us

Services Page

Services

Porfolio Page

Porfolio

Porfolio 4 colum page

Porfolio

Porfolio Masonry page

Porfolio

Blog page

Blog

Blog Default page

Blog

Contact page

Blog

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, please take a reference to System requirements on 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
  2. Block Tabs
  3. Colorbox
  4. Ctools
  5. Devel
  6. Libraries
  7. Memcache
  8. Menu Link Attributes
  9. Node Class
  10. Pathauto
  11. Share This
  12. Taxonomy Menu
  13. Simplenews
  14. Token
  15. Video Embed Field

Download Drupal core files, and extend your site with modules at here.

Installation

How to install a WeebPal demo package

1. Download one theme package of your choice (e.g: Luxestate D8)

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 for the theme easily.

Package

The below steps will give you the installation guide so that you can build your website to look exactly like the Luxestate D8 Demo

  • 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

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

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

Quick Installation

Import this file into new database.

Quick Installation

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

Quick Installation

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

                    $databases['default']['default'] = array (
                      'database' => 'databasename',
                      'username' => 'username',
                      'password' => 'password',
                      'prefix' => '',
                      'host' => 'localhost',
                      'port' => '3306',
                      'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
                      'driver' => 'mysql',
                       );
                   $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

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

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

Download Drupal 8

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 and download the latest version of Drupal 8

Download Drupal 8

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

4. Open browser and navigate to your website.

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

Install Drupal 8

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

Install Drupal 8

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

Install Drupal 8

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

Install Drupal 8

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

You can refer the guide from 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

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

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 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 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

Step 1: Navigate to Structure > Taxonomy find Vocabulary Tags and click List terms button

Vocabulary

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

Vocabulary

Then, add terms

Step 3: Add term Company:

Taxonomy

Step 4: Add term CSS:

Taxonomy

Step 5: Add term Drupal:

Taxonomy

Step 6: Add term Service:

Taxonomy

Step 7: Add term Software:

Taxonomy

Step 8: Add term Transportation:

Taxonomy

Note: See this guide 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

Set following properites for each image style by sequence

Step 1: Add image style

Image Styles

Step 2: Set effect for image style

Image Styles

Image Styles

Step 3: Update style for image style

Image Styles

Web services configuration

Configuration ShareThis

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

Module

Step 2: Set followinng properites ShareThis field

Module

Content Type Configurations

Modify Article type

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

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

Step 3: Set properties for Banner field

Step 4: Set properties for Summary field

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

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

Step 7: Click Save button

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

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:

Step 2: Set properties for Icon class field

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

Step 4: Click Save button

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

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

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

Banner type

Step 4: Set properties for Banner field

Banner type

Banner type

Step 5: Set properties for Banner title field

Banner type

Banner type

Step 6: Set properties for Body field

Banner type

Step 7: Set properties for Type field

Banner type

Banner type

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

Refer to following HTML code:

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

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

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

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

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

Blog

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

Blog

Step 4: Set properties for Image field

Blog

Blog

Step 5: Set properties for Comments field

Blog

Step 6: Set properties for Slideshow field

Blog

Blog

Step 7: Set properties for Tags field

Blog

Blog

Step 8: Set properties for Video field

Blog

Blog

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

Blog

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

Blog

Step 11: Click Save button

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

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

Our mission

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

Our mission

Step 4: Set properties for Image field

Our mission

Our mission

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

Our mission

Step 6: Click Save button

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

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

Blog page

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

Blog page

Step 4: Set properties for Percent field

Blog page

Blog page

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

Blog page

Step 6: Click Save button

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

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

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

Step 4: Set properties for Partners field

Step 5: Set properties for Links field

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

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

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

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

Step 4: Set properties for Gallery field

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

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

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

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

Step 4: Set properties for Why us type field

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

Refer to following HTML code:

						1|About us
						2|Services
					

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

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

Step 2:Set properites for Banner pattern

Patterns

Step 3:Set properites for Blog pattern

Patterns

Step 4:Set properites for Our mission pattern

Patterns

Step 5:Set properites for Our services pattern

Patterns

Step 6:Set properites for Partners pattern

Patterns

Step 7:Set properites for Portfolio pattern

Patterns

Step 8:Set properites for Vocabulary tags pattern

Patterns

Step 9:Set properites for Why us pattern

Patterns

Step 10: Click Save button

Create Homepage

Slideshow block

Front end Display

Slideshow

1. Create Slideshow view

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

Slideshow

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

Slideshow

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

Step 4: Set properties for Content: Slideshow

Slideshow

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

Slideshow

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

Slideshow

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

Slideshow

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

Step 4: Click Save block button.

Frontpage

Front end Display

Frontpage

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

Frontpage

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

Frontpage

Frontpage

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

Frontpage

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

Step 6: Set properties for Content: Body

Frontpage

Step 7: Set properties for Content: Link to Content

Frontpage

Step 8: Set properties for Global: Custom text

Frontpage

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

Frontpage

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

Step 12: Set properties for Content: Title

Frontpage

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

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

Frontpage

Frontpage

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

Frontpage

Step 16: Click Save to save view

Welcome to Luxestate block

Front end Display

About us

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

Step 3: Click Save block button.

Refer to following HTML code of Summary:


 

“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 point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English (injected humour and the like).

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

AMANDA CLARKE

Creative Director

Refer to following HTML code of Body:


 

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. 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. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

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

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

About us

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

About us

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

Step 6: Set properties for Content: Path

About us

Step 7: Set properties for Content: Banner

About us

Step 8: Set properties for Global: Custom text

About us

Refer to following HTML code:


 

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

About us

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

Note: ID of content is taken by

 

Navigate to Configuration > Search and metadata > URL aliases find /about-us path.

Patterns

Step 12: Set properties for Content: Translation language

About us

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

About us

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

Step 4: Click Save block button.

Portfolio block

Front end Display

Portfolio

1. Create Portfolio block view

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

Portfolio

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

Portfolio

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

Portfolio

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

Portfolio

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

Step 6: Set properties for Content: Gallery

Portfolio

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

Portfolio

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

Portfolio

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

Portfolio

Refer to following HTML code:

						“There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden.”

										   -- Lorem Ipsum --
					

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

Portfolio

Refer to following HTML code:

						“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.”

						-- H. Rackham --
					

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

Step 4: Click Save block button.

Latest news block

Front end Display

Blog page

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

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

Blog page

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

Blog page

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

Portfolio

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

Step 7: Set properties for Content: Image

Blog page

Step 8: Set properties for Content: Authored by

Blog page

Refer to following HTML code:

						by {{ uid }} 
					

Step 9: Set properties for Content: Authored on

Blog page

Step 10: Set properties for Content: Tags

Blog page

Refer to following HTML code:

						in {{ field_tags }}
					

Step 11: Set properties for Content: Body

Blog page

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

Blog page

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

Blog page

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

Blog page

Refer to following HTML code:

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

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

Blog page

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

Step 4: Click Save block button.

Our partners block

Front end Display

Our Partners

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

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

Our Partners

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

Our Partners

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

Step 5: Set properties for Content: Link

Our Partners

Step 6: Set properties for Content: Partners

Our Partners

Step 7: Set properties for Content: Title

Our Partners

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

Our Partners

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

Step 4: Click Save block button.

Footer first column block

Front end Display

Quick links

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

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

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

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

Step 4: Click Save block button.

Footer second column block

Front end Display

Blog page

1. Add Latest news block view

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

Blog page

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

Blog page

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

Blog page

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

Portfolio

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

Blog page

Refer to following HTML code:


 
{{ field_image }}
{{ title }}
{{ body }}
{{ created }}

Step 7: Set properties for Content: Image

Blog page

Step 8: Set properties for Content: Authored on

Blog page

Step 9: Set properties for Content: Body

Blog page

Step 10: Set properties for Content: Title

Blog page

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

Blog page

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

Blog page

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

Blog page

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

Blog page

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

Step 4: Click Save block button.

Newsletter block

Front end Display

Newsletter

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

Step 4: Click Save block button.

Contact us block

Front end Display

Contact us

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

Contact us

Step 2: Click Save button

Refer to following HTML code:


 

The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

1-800-123-HELLO [email protected]

Copyright block

Front end Display

Copyright

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

Copyright

Step 2: Click Save button

Refer to following HTML code:


 

© copy 2016 Luxestate is proudly powered by Drupal | Designed by WeebPal

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

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

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

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

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

Step 3: Add Contact item menu with following properites:

Main navigation

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

Main navigation

Step 5: Click Save block button.

Sidebar first: Search form block

Front end Display

Search form

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

Step 4: Click Save block button.

Sidebar first: Recent Posts block

Front end Display

Blog

1. Add Recent Posts block view

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

Blog

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

Blog

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

Blog page

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

Blog

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

Blog

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

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

Blog page

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

Blog page

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

Blog page

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

Blog page

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

Step 4: Click Save block button.

Sidebar first: Tags block

Front end Display

Tags in Tags

1. Create Tags view

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

Tags in Tags

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

Tags in Tags

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

Tags in Tags

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

Tags in Tags

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

Tags in Tags

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

Tags in Tags

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

Tags in Tags

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

Step 4: Click Save block button.

About Us page

Front end Display

About us

1. Banner block

About us

1.1 About us content

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

About us

Step 2: Click Save button

Refer to following HTML code:


 

“It is a long established fact that a reader will be distracted by the readable content of a page when looking”

1.2 Create Banner view

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

About us

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

About us

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

About us

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

Step 6: Set properties for Content: Body

About us

Step 7: Set properties for Content: Banner Title

About us

Step 8: Set properties for Content: Image

About us

Step 9: Set properties for Global: Custom text

About us

Refer to following HTML code:


 
{{ field_banner_title }}
{{ body }}

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

About us

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

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

About us

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

Step 4: Click Save block button.

2. Our mission block

Our

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

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

Our mission

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

Our mission

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

Step 6: Set properties for Content: Image

Our mission

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

Our mission

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

Our mission

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

Step 4: Click Save block button.

3. Our Service block

Our Service

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

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

Our Service

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

Step 5: Set properties for Content: Percent

Our Service

Step 6: Set properties for Content: Percent

Our Service

Step 7: Set properties for Global: Custom text

Our Service

Refer to following HTML code:


 
{{ field_percent }} Complete

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

Our Service

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

Step 4: Click Save block button.

4. Why choose us block

Why us

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

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

Why us

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

Step 5: Set properties for Global: View result counter

Why us

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

Why us

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

Step 9: At Advanced > OTHER area, add CSS class:

Why us

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

Step 4: Click Save block button.

Services page

Front end Display

Services

1. Banner block

Services

1.1 Services content

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

Services

Step 2: Click Save button

Refer to following HTML code:


 

“It is a long established fact that a reader will be distracted by the readable content of a page when looking”

1.2 Add Banner: Services page block view

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

Services

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

Services

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

Services

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

Services

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

Services

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

Services

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

Step 4: Click Save block button.

2. Services content

Services

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

Services

Step 2: Click Save button

Refer to following HTML code of Summary:


 

“It is a long established fact that a reader will be distracted by the readable content of a page when looking”

Refer to following HTML code of Body:


 

WHY DRUPAL?

Drupal is well-known for its flexibility, extend ability, and security. Whenever you think about customizing, having some specific functions, or doing any innovative things with your website, Drupal is the first and foremost CMS that enters our mind.

OUR DRUPAL DEVELOPMENT SERVICES INCLUDE:

  • 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:

3. Our amazing features block

Why us

3.1 Add Our amazing features block view

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

Services

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

Services

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

Services

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

Services

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

Services

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

Step 4: Click Save block button.

Porfolio page

Front end Display

Porfolio

1. Banner block

Porfolio

1.1 Porfolio page content

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

Porfolio

Step 2: Click Save button

Refer to following HTML code:


 

“It is a long established fact that a reader will be distracted by the readable content of a page when looking”

1.2 Add Banner: Porfolio Banner block view

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

Porfolio

Step 2: Click Add > Block button to create Porfolio Banner block view and set properties for following fields:

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Step 4: Click Save block button.

2. Porfolio page view

Why us

Add Page view

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

Porfolio

Step 11: Click Save to save view

Porfolio 4 col page

Front end Display

Porfolio

Add Porfolio 4 column page view

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

Porfolio

Step 11: Click Save to save view

Porfolio Masonry page

Front end Display

Porfolio

Add Porfolio Masonry page view

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

Refer to following HTML code:


 

Masonery

“There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden.”

-- Lorem Ipsum --

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

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

Porfolio

Step 12: Click Save to save view

Blog page

Front end Display

Blog

1. Banner block

Blog

1.1 Blog page content

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

Blog

Step 2: Click Save button

Refer to following HTML code:


 

“It is a long established fact that a reader will be distracted by the readable content of a page when looking”

1.2 Add Banner: Blog page banner block view

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

Blog

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

Blog

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

Blog

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

Blog

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

Blog

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

Blog

Step 7: Click Save to save view

1.3 Configure Banner: Blog page block

Step 1: Navigate to Structure > Block layout

Step 2: Find Banner click Place block button

Step 3: Find Banner: Blog page banner click Place block button and set following properites:

Blog

Step 4: Click Save block button.

2. Blog page view

Blog

Add Page view

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

Blog

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

Blog

Step 3: At TITLE area, find Title field and set following properites:

Blog

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

Blog

Step 5: At FIELDS area, click Add button to add fields: Content: Link to Content, Content: Authored on, Global: Custom text

Step 6: Set properties for Content: Image

Blog

Step 7: Set properties for Content: Title

Blog

Step 8: Set properties for Content: Body

Blog

Step 9: Set properties for Content: Link to Content

Blog

Step 10: Set properties for Content: Authored on

Blog

Step 11: Set properties for Content: Authored on

Blog

Step 12: Set properties for Global: Custom text

Blog

Refer to following HTML code:


 
{{ field_image }}
{{ created }}
{{ created_1 }}
{{ title }}
{{ body }}

Step 13: At FIELDS area, click Rearrange button. Set For This page (override), then click Remove link Content: Tags, Content: Authored by field and set following properites:

Blog

Step 14: At HEADER area, click Rearrange button. Set For This page (override), then click Remove link Global: Text area field

Blog

Step 15: At PAGE SETTINGS area, find and click Path link and set following properites:

Blog

Step 16: At PAGE SETTINGS area, find and click Menu link and set following properites:

Blog

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

Blog

Blog

Step 18: At Advanced > OTHER area, add CSS class:

Blog

Step 19: Click Save to save view

Blog default page

Front end Display

Blog

Add Page view

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

Blog

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

Blog

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

Blog

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

Blog

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

Blog

Step 6: At FIELDS area, click Add button to add fields: Content: Link to Content, Global: Custom text

Step 7: Set properties for Content: Image

Blog

Step 8: Set properties for Content: Body

Blog

Step 9: Set properties for Content: Link to Content

Blog

Step 10: Set properties for Content: Authored on

Blog

Step 11: Set properties for Global: Custom text

Blog

Refer to following HTML code:


 

Step 12: At FIELDS area, click Rearrange button. Set For This page (override), then click Remove link Content: Tags, Content: Authored by field and set following properites:

Blog

Step 13: At HEADER area, click Rearrange button. Set For This page(override), then click Remove link Global: Text area field

Blog

Step 14: At PAGE SETTINGS area, find and click Path link and set following properites:

Blog

Step 15: At PAGE SETTINGS area, find and click Menu link and set following properites:

Blog

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

Blog

Blog

Step 17: At Advanced > OTHER area, add CSS class:

Blog

Step 18: Click Save to save view

Contact page

Front end Display

Blog

1. Banner block

Blog

1.1 Contact us content

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

Blog

Step 2: Click Save button

Refer to following HTML code:


 

“It is a long established fact that a reader will be distracted by the readable content of a page when looking”

1.2 Add Banner: Contact page banner block view

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

Blog

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

Blog

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

Blog

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

Blog

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

Blog

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

Blog

Step 7: Click Save to save view

1.3 Configure Banner: Contact page block

Step 1: Navigate to Structure > Block layout

Step 2: Find Banner click Place block button

Step 3: Find Banner: Contact page banner click Place block button and set following properites:

Blog

Step 4: Click Save block button.

2. Configure Contact forms

Contact forms

Step 1: Navigate to Structure > Contact forms find Website Feedback click and edit properties:

Contact forms

Step 2: Go to Manage form display tab , set following properties:

Contact forms

Step 3: Click Save button

3. Create Our location block

Contact block

Step 1: Navigate to Structure > Blocks click Add block, create Our location block and set with following properties:

Contact block

Contact block

Step 2: Click Save button

Refer to following HTML code:


 

More Configurations

Site Information

In this section, you can change basic settings, such as the site name, slogan, e-mail address.

1. Log in to Administration site page by administrator account

2. Navigate to the Site Information page Configuration > System: Basic site settings

Site Information

3. Change site details from the view:

  1. Site name
  2. Slogan
  3. E-mail address
  4. Set Default Front page

4. Click on Save configuration to finish editing.

Appearance Settings

Step 1: Log into website by administrator account.

Step 2: Go to Appearance > Settings find Luxestate tab click and set following properites:

Appearance Settings

Step 3: Click on Save configuration button.