Drupal 8 - Business Theme Guide for Developers

Overview

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

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

If you're an experienced Drupal developer or if you want to build the theme from zero with only the basic appearance of your theme, 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 Business D8 to look exactly like the demo site.

1. Package

Business D8 is the Drupal 8 version of Business.

If you need a simple professional website for your company to showcase your products, services, business, portolios, and so on, Business will not let you down.

Included content:

  • Business D8 theme: business_d8-8.0.0.zip
  • Demo Profile for Business D8: business_d8-demo-8.0.0.zip

2. System Requirements

Database

  • MySQL 5.0.15 or higher with PDO
  • PostgreSQL 8.3 or higher with PDO
  • SQLite 3.3.7 or higher

PHP

  • PHP 5.2.5 or higher (5.4 or higher recommended)
  • PHP5 GD 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.

3. Screenshots

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

Home

Home

Home

About us page

Members page

Partners page

Services page

Articles page

Portfolio page

Blogs page

Forums page

Contact page

Responsive layout

4. Module requirements

Core Modules

  • Forum

Five Modules

  1. Admin Toolbar
  2. Memcache
  3. Poll
  4. Simplenews
  5. Taxonomy Menu

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: Business D8)

Files included:

  • Business D8 theme: business_d8-8.0.0.zip
  • Demo Profile for Business D8: business_d8-demo-8.0.0.zip
  • This demo package includes all source codes and content, including sample images. This package will be used to build a site like our demo 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 Business D8 Demo

  • business_d8-demo-8.0.0.zip

2. Extract business_d8-demo-8.0.0.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: business_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/ (or profile/weebpal), you can find database dump named sample_data.sql.

Quick Installation

Import this file into new database.

Quick Installation

When using this installation, you are installing everything from our preview server. So don't forget to set proper values for settings: email address, admin password, etc.

5. Open the browser and visit your website with the prepopulated content & layout exactly like our Business D8 Demo

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

How to install a WeebPal theme for Drupal developers

If you're an experienced Drupal user or if you want to build the theme from zero with only the basic appearance of business_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: business_d8)

Follow steps below to install a Drupal site only:

3. Access to database and create a new database with a name such as business_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. Choose continue anyway => click link.

Install Drupal 8

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

Install Drupal 8

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

Install Drupal 8

10. 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 business_d8 Theme

  1. Extract business_d8 theme .ZIP file:
    • business_d8-8.0.0.zip
  2. Move this theme into your Drupal folder: /themes

  3. Navigate to Appearance > Choose Install and set default business_d8 theme

3. Install Required Modules

Now that you've enabled business_d8 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 business_d8-demo-8.0.0.zip
  2. Open extracted folder, go to themes, modules and copy all folders inside (modules, themes)
  3. Paste them to your host, folder themes, modules

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 to create vocabularies as the following:

Vocabulary

Then, add terms for each vocabulary

Step 2 :Terms of: Forums

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

Taxonomy

Step 4:Terms of: Genders

Taxonomy

Step 5:Terms of: Positions

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


Content type configuration

Modify Article type

Step 1: Navigate to Structure > Content Type

Step 2: In Article row, click "manage fields" link, Add "Slideshow" field with following settings:

Article type

Step 3: Click Save and continue button, then click Save field settings button > Set following properties:

Article type

Step 4: Click Save Settings button

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

Article type

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

Article type

Step 7: Click Save button

Modify Newsletter Issue page type

Step 1: Navigate to Structure > Content Type

Step 2: In Newsletter Issue page row, click "manage display" tab, set following properties:

Newsletter Issue page type

Step 3: Click Save button

Create Ads type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Ads type with following properties:

Ads type

Step 3: Click Save and add fields button, then Add "Images" field with following settings:

Ads type

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

Ads type

Step 5: Click Save button

Create Blog type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Blog type with following properties:

Blog type

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

Blog type

Step 4: Set properties for Image

Blog type

Step 5: Set properties for Tags

Blog type

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

Blog type

Step 7: Go to Manage display tab, set following properties:

Blog type

Step 8: Click Save button

Create Branches type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Branches type with following properties:

Branches type

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

Branches type

Step 4: Set properties for Image

Branches type

Step 5: Set properties for Slideshow

Branches type

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

Branches type

Step 7: Click Save button

Create Partner type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Partner type with following properties:

Partners type

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

Partners type

Step 4: Set properties for Image

Partners type

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

Partners type

Step 6: Click Save button

Create Project type

Note Enable modules User reference

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Project type with following properties:

Project type

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

Project type

Step 4: Set properties for Galleries

Project type

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

Project type

Step 6: Click Save button

Create Service type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Service type with following properties:

Service type

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

Service type

Step 4: Set properties for Image

Service type

Step 5: Set properties for Slideshow

Service type

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

Service type

Step 7: Click Save button

Create Testimonial type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Testimonial type with following properties:

Testimonial type

Step 3: Go to Manage Fields tab, add following fields

Testimonial type

Step 4: Click Save button

Modify User type

Step 1: Navigate to Configuration > People > Account settings link

Step 2: In Account settings row, click "manage fields" link, add field with following settings:

User type

Step 3: Set properties for Gender

User type

Step 4: Set properties for Pinterest

User type

Step 5: Set properties for Position

User type

Step 6: Set properties for Twitter

User type

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

User type

Step 8: Go to Manage display tab, set following properties:

User type

Step 9: Click Save button

Create Homepage

Search form block

Search form

Step 1: Navigate to Structure > Blocks

Step 2: Find block Search form and set region "Header"

Search form

Step 3: Click Save block button.

Slideshow block

1. Create Slideshow view

Front end Display

Slideshow display

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

Slideshow configuration

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

Slideshow configuration

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

Step 4: Set properties for Content: Slideshow

Slideshow configuration

Step 5: Set properties for Content: Body

Slideshow configuration

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

Slideshow configuration

Step 7: At FILTER CRITERIA area, click Add button to add Content: Slideshow:target_id, Content: Type field with following properties:

Step 8: Set properties for Content: Type

Slideshow configuration

Step 9: Set properties for Content: Slideshow:target_id

Slideshow configuration

Step 10: In Advanced > OTHER area, add CSS class change following properties:

Slideshow configuration

Step 11: Click Save to save view

2. Configure Slideshow block

Step 1: Navigate to Structure > Block layout

Step 2: At Slideshow block, click Place block link.

Step 3: Find Slideshow click Place block link, set following properties

Configure Slideshow block

Step 4: Click Save block button.

Highlighted block

Front end Display

Featured Blocks display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Custom block library tab.

Step 2: Click Add block link. Create Highlighted Content block with following properties:

Highlighted Content block

Step 3: At Highlighted block, click Place block link.

Step 4: Find Highlighted Content click Place block link, set following properties

Highlighted Content block

Step 5: Click Save block button.

Refer to following HTML code:

						

W-Business is a Great Design idea for Website of Creative CoporrateClick here !

Panel blocks

Front end Display

Four Featured Blocks display

1. Our Branches block

1.1 Create Our Branches block view

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

Our Branches display

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

Our Branches display

Step 3: At FIELDS area, click Add button to add fields: Content: Image, Content: Body, Content: Link to Content

Step 4: Set properties for Content: Image

Our Branches display

Step 5: Set properties for Content: Body

Our Branches display

Step 6: Set properties for Content: Link to Content

Our Branches display

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

Our Branches display

Step 8: Click Save to save view

1.2 Configure Our Branches block view

Step 1: Navigate to Structure > Block layout

Step 2: At Panel second 1 block, click Place block link.

Step 3: Find Our Branches click Place block link, set following properties

Our Members display

Step 4: Click Save block button.

2. Featured Services block

Featured Blocks display

2.1 Add Featured Services block view

Stay open Featured Services view, click Add button add Block view new.

Featured Blocks display

Step 1: Next to steps below to set properties for the following fields:

Featured Blocks display

Step 2: At FORMAT Format: Unformatted list area, click Settings and set following properties:

Featured Blocks display

Step 3: At PAGER > Use pager area, click link

Featured Blocks display

Featured Blocks display

Step 4: Click Save to save view

2.2 Configure Featured Services block view

Step 1: Navigate to Structure > Block layout

Step 2: At Panel second 2 block, click Place block link.

Step 3: Find Featured Services click Place block link, set following properties

Featured Blocks display

Step 4: Click Save block button.

3. Company Profile block

Company Profile display

3.1 Create Company Profile bock view

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

Company Profile display

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

Company Profile display

Step 3: At FIELDS area, click Add button to add fields: User: Picture, User: Bio, User: Link

Step 4: Set properties for User: Picture

Company Profile display

Step 5: Set properties for User: Bio

Company Profile display

Step 6: Set properties for User: Link to User

Company Profile display

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

Company Profile display

Step 8: At FILTER CRITERIA area, Click Add button to add User: Picture (user_picture:target_id), User: Position (field_position) field with following properties:

Step 9: Set properties for User: Picture (user_picture:target_id)

Company Profile display

Step 10: Set properties for User: Position (field_position)

Company Profile display

Company Profile display

Step 11: Click Save to save view

3.2 Configure Company Profile block view

Step 1: Navigate to Structure > Block layout

Step 2: At Panel second 3 block, click Place block link.

Step 3: Find Company Profile click Place block link, set following properties

Company Profile display

Step 4: Click Save block button.

4. Featured Articles block

Featured Articles display

4.1 Add Featured Articles block view

Stay open Featured Articles view, click Add button add Block new.

Featured Articles display

Step 1: Next to steps below to set properties for the following fields:

Featured Articles display

Step 2: At Title area, set following properties:

Featured Articles display

Step 3: At FORMAT Show: Fields area, click Settings and set following properties:

Featured Articles display

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

Step 5: Set properties for Content: Image

Featured Articles display

Step 6: Set properties for Content: Body

Featured Articles display

Step 7: Set properties for Content: Link to Content

Featured Articles display

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

Featured Articles display

Step 9: At PAGER > Use pager area, click link

Featured Articles display

Featured Articles display

Step 10: Click Save to save view

4.2 Configure Featured Articles block view

Step 1: Navigate to Structure > Block layout

Step 2: At Panel second 4 block, click Place block link.

Step 3: Find Featured Articles click Place block link, set following properties

Featured Articles display

Step 4: Click Save block button.

Frontpage

Front end Display

Frontpage display

Step 1: Navigate to Structure > View ,find Frontpage view, click Enable button. Then click Edit button , find and click Page button and set following properties:

Frontpage display

Step 2: At FORMAT Showarea, click Settings and set following properties:

Frontpage display

Step 3: At FIELDS area, click Add button to add fields: Content: Image, Content: Authored on, Content: Body, Content: Link to Content

Step 4: Set properties for Content: Image

Frontpage display

Step 5: Set properties for Content: Authored on

Frontpage display

Step 6: Set properties for Content: Body

Frontpage display

Step 7: Set properties for Content: Link to Content

Frontpage display

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

Frontpage display

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

Frontpage display

Step 10: Click Save to save view

Sidebar second: Our Members block

1. Create Our Members block view

Stay open Our Members view, click Add button add Block new.

Our Members display

Step 1: Next to steps below to set properties for the following fields:

Our Members display

Step 2: At FORMAT format: Unformatted list area, click Settings and set following properties:

Our Members display

Step 3: At FIELDS area, click Add button to add fields: User: Picture, User: Position

Step 4: Set properties for User: Picture

Our Members display

Step 5: Set properties for User: Position

Our Members display

Step 6: At PAGER > Use pager area, click link

Our Members display

Our Members display

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

Our Members display

Step 8: Click Save to save view

2. Configure Our Members block

Step 1: Navigate to Structure > Block layout

Step 2: At Sidebar second block, click Place block link.

Step 3: Find Our Members click Place block link, set following properties

Our Members display

Step 4: Click Save block button.

Sidebar first: Services block

1. Create Services view

Front end Display

Services display

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

Services display

Step 2: Click Continue and edit button. Add fields with following properties:

Services display

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

Services display

Step 4: Click Save to save view

2. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Sidebar first block, click Place block link.

Step 3: Find Services click Place block link, set following properties

Services display

Step 4: Click Save block button.

Sidebar first: Ads block

1. Create Ads view

Front end Display

Ads display

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

Ads display

Step 2: Click Continue and edit button. Add fields with following properties:

Ads display

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

Step 4: Set properties for Content: Image

Ads display

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

Ads display

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

Ads display

Step 7: Click Save to save view

2. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Sidebar first block, click Place block link.

Step 3: Find Ads click Place block link, set following properties

Ads display

Step 4: Click Save block button.

Panel fourth 1: Testimonial block

Front end Display

Testimonial display

1. Create view

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

Testimonial display

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

Testimonial display

Step 3: Expand Advanced panel, at RELATIONSHIPS area, click Add to add relationship User referenced from field_user

Step 4: At FIELDS area, click Add button to add fields: User: Picture, User: Name, User: Position

Step 5: Set following properties for User: Picture

Testimonial display

Step 6: Set following properties for User: Position

Testimonial display

					
{{ user_picture }}
{{ name }}
{{ field_position }}

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

Testimonial display

Step 8: At FILTER CRITERIA area, Click Add button to add Picture (user_picture:target_id) field, then choose type is Testimonials

Testimonial display

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

Testimonial display

Step 10: Click Save button to save view.

2. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Panel fourth 1 block, click Place block link.

Step 3: Find Testimonial click Place block link, set following properties

Ads display

Step 4: Click Save block button.

Panel fourth 2: Contact block

Front end Display

Contact info display

1. Create and configure block

Step 1: Navigate to Structure > Blocks, go to Custom block library tab.

Step 2: Click Add custom block link, Create Contact block with following properties:

Contact info display

Step 3: Click Save block button.

Refer to following HTML code:

				

We provide original, quality, attractive and functional design.

WeebPal Co., Ltd
5651 W. Pine Shade Place, Salt Lake City, UT 84118 USA

Phone: (803) 900-8067
Fax: (803) 900-8067

2. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Panel fourth 2 block, click Place block link.

Step 3: Find Contact click Place block link, set following properties

Contact info display

Step 4: Click Save block button.

Panel fourth 3: Newsletter block

Front end Display

Newsletter display

Configure block

Note Enable Simplenewsmodule

Step 1: Go to Extend, find Simplenews module. Click Configure link

Step 2:Click Add newsletter category link. Then create Business , set following properties:

Newsletter display

Step 3: Navigate to Structure > Block layout

Step 4: At Panel fourth 3 block, click Place block link.

Step 5: Find Simplenews subscription click Place block link, set following properties

Newsletter display

Step 6: Click Save block button.

Footer first column: About Us block

Front end Display

About block configuration

1. Create and configure block

Step 1: Navigate to Structure > Blocks

Step 2: Click Custom block library tab. Go to Types tab.

About block configuration

Step 3: Click Add custom block type link. Create Image Block block with following properties:

About block configuration

Step 4: At line Image Block, click Manage fields button and set following properties Content: Image

About block configuration

Step 5: Navigate to Structure > Blocks, click Custom block library tab.

Step 6: Click Add custom block link.

About block configuration

Step 7: Click Image Block link. Create About Us block with following properties:

About block configuration

Step 8: Click Save block button.

Refer to following HTML code:

                

Phasellus tempus. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Sed a libero. Aliquam eu nunc. Praesent congue erat at massa. 

2. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Footer first column block, click Place block link.

Step 3: Find About Us click Place block link, set following properties

About block configuration

Step 4: Click Save block button.

Footer second column: Quick link block

Front end Display

Quick Links display

Configure block

Step 1: Navigate to Structure > Menus, click Add menu link. Create Quick Links menu with following properties:

Quick Links menu

Step 2: Click Add link Create a link with following properties:

Quick Links menu

Do the steps above to create other links for Quick Links menu

Quick Links menu

Step 3: Click Save configuration button.

Step 4: Navigate to Structure > Block layout

Step 5: At Footer second column block, click Place block link.

Step 6: Find Quick link click Place block link, set following properties

Quick Links menu

Step 7: Click Save block button.

Footer third column: Recent Comments block

Front end Display

Recent Comments display

Configure block

Step 1: Navigate to Structure > View , find Recent comments view. Then click Edit button , find and click Page button and set following properties:

Recent Comments display

Step 2: Click Save block button.

Step 3: Navigate to Structure > Block layout

Step 4: At Footer third column block, click Place block link.

Step 5: Find Recent Comments click Place block link, set following properties

Recent Comments display

Step 6: Click Save block button.

Footer fourth column: Portfolio block

Front end Display

Quick Links display

1. Create Portfolio block view

Stay open Portfolio view, click Add button add Block new.

Portfolio configuration

Step 1: Next to steps below to set properties for the following fields:

Portfolio configuration

Step 2: At Title area, set following properties:

Portfolio configuration

Step 3: At FORMAT format: Unformatted list area, click Settings and set following properties:

Portfolio configuration

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

Step 5: Set properties for Content: Galleries

Portfolio configuration

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

Portfolio configuration

Step 7: At PAGER > Use pager area, click link

Portfolio configuration

Portfolio configuration

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

Portfolio configuration

Step 9: Click Save to save view

2. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Footer fourth column block, click Place block link.

Step 3: Find Portfolio click Place block link, set following properties

Portfolio configuration

Step 4: Click Save block button.

Footer: Copyright block

Front end Display

Copyright display

Create and configure block

Step 1: Navigate to Structure > Blocks, go to Custom block library tab.

Step 2: Click Add custom block link, Create Contact block with following properties:

Copyright display

Step 3: Click Save block button.

Refer to following HTML code:

                

© 2015 W-Business is proudly powered by Drupal | Designed by WeebPal.com

Footer: Footer Menu block

Front end Display

Footer menu display

Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Footer block, click Place block link.

Step 3: Find Footer click Place block link, set following properties

Footer menu

Step 4: Click Save block button.

Main Menu: main-menu block or TB Mega Menu

Drupal Main Menu block

Support menu types: Default Menu, TB Megamenu

TB Mega Menu

Create Subpages

Sidebar First: Tags block

1. Create Tags block view

Front end Display

Tags block display

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

Tags block display

Step 2: Click Continue and edit button. Add following fields:

Tags block display

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

Tags block display

Step 4: Click Save to save view

2. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Sidebar first block, click Place block link.

Step 3: Find Tags click Place block link, set following properties

Tags block configuration

Step 4: Click Save block button.

About Us page

Front end Display

About Us display

Step 1: Navigate to Content > Add Content > Basic page link and set the following properties:

About Us display

Step 2: Click Save button

Refer to following HTML code:

					

The New Way to success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla non metus. pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut eu risus enim, ut pulvinar lectus. Sed hendrerit nibh.
 

Who We Are

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla non metus. pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut eu risus enim, ut pulvinar lectus. Sed hendrerit nibh.
 

 

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.

 

HTML5 / CSS3 / JS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

 

Lightbox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

 

Sliders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

 

Icons

Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.

 

Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

Services page

Front end Display

Featured Services display

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

Featured Services display

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

Featured Services display

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

Featured Services display

Step 4: Click Apply link, set following properties:

Featured Services display

Step 5: At FIELDS area, click Add button to add fields: Content: Image, Content: Body, Content: Link to Content

Step 6: Set properties for Content: Image

Featured Services display

Step 7: Set properties for Content: Body

Featured Services display

Step 8: Set properties for Content: Link to Content

Featured Services display

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

Featured Services display

Step 10: At PAGE SETTINGS > Path area, set the following properties:

Featured Services display

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

Featured Services display

Step 12: Click Save to save view

Partners page

Front end Display

Partners display

Create Partners view

Step 1: Navigate to Structure > View, click Add new view link. Create Partners view with following properties:

Partners configuration

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

Partners configuration

Step 3: At FORMAT area, click Grid , set following properties:

Partners configuration

Step 4: At FIELDS area, click Add button to add fields: Content: Website, Content: Image

Step 5: Set properties for Content: Website

Partners configuration

Step 6: Set properties for Content: Image

Partners configuration

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

Partners configuration

Step 8: At PAGE SETTINGS area, click Path link, then set path:

Partners configuration

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

Partners configuration

Step 10: Click Save button to save settings.

Articles page

Front end Display

Featured Articles display

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

Featured Articles display

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

Featured Articles display

Step 3: At Title area, set following properties:

Featured Articles display

Step 4: At PAGE SETTINGS > Path area, set the following properties:

Featured Articles display

Step 5: Click Save to save view

Blogs view

Front end Display

Blogs display

1. Create Blogs view

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

Blogs configuration

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

Blogs configuration

Step 3: Expand Advanced panel, at RELATIONSHIPS area, click Add to add relationship User

Step 4: At FIELDS area, click Add button to add fields: User: Name, Content revision: Authored on, Content: Image, Content: Body, Content: Link to Content

Step 5: Set properties for User: Name

Blogs configuration

Step 6: Set properties for Content revision: Authored on

Blogs configuration

Step 7: Set properties for Content: Image

Blogs configuration

Step 8: Set properties for Content: Body

Blogs configuration

Step 9: Set properties for Content: Link to Content

Blogs configuration

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

Blogs configuration

Step 11: At PAGER > Use pager area, click link

Blogs configuration

Step 12: At CSS Class area, set following properties:

Blogs configuration

Step 13: Click Save button to save settings.

2. Create Related Blogs block view

Stay open Blogs view, click Add button add Block new.

Related Blogs configuration

Step 1: Next to steps below to set properties for the following fields:

Related Blogs configuration

Step 2: At Display name area, set following properties:

Related Blogs configuration

Step 3: At Title area, set following properties:

Related Blogs configuration

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

Step 5: Set properties for Content: Image

Related Blogs configuration

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

Related Blogs configuration

Step 7: Click Save to save view

3. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Sidebar first block, click Place block link.

Step 3: Find Related Blogs click Place block link, set following properties

Related Blogs configuration

Step 4: Click Save block button.

Portfolio page

Front end Display

Portfolio configuration

1. Create Portfolio page view

Step 1: Navigate to Structure > View, click Add new view link. Create Portfolio view with following properties:

Portfolio configuration

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

Portfolio configuration

Step 3: At Title area, set following properties:

Portfolio configuration

Step 4: At FORMAT area, click Settings button, set properties for Grid field:

Portfolio configuration

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

Step 6: Set properties for Content: Galleries

Portfolio configuration

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

Portfolio configuration

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

Portfolio configuration

Step 9: Click Save to save view

2. Create Related Projects block view

Front end Display

Related Projects display

Stay open Portfolio view, click Add button add Block new.

Related Projects configuration

Step 1: Next to steps below to set properties for the following fields:

Related Projects configuration

Step 2: At Display name area, set following properties:

Related Projects display

Step 3: At FORMAT area, click Unformatted list, set following properties:

Related Projects configuration

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

Step 5: Set properties for Content: Galleries

Related Projects configuration

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

Related Projects configuration

Step 7: At PAGER area, click User page link, then set following properties:

Related Projects configuration

Related Projects configuration

Step 8: At CSS Class area, set following properties:

Related Projects configuration

Step 9: Click Save button to save settings.

3. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Sidebar first block, click Place block link.

Step 3: Find Related Projects click Place block link, set following properties

Related Projects configuration

Step 4: Click Save block button.

Our Members page

Front end Display

Our Members display

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

Our Members display

Step 2: Click Continue and edit button. Add following fields:

Our Members display

Step 3: At FORMAT Show: Fields area, click Settings and set following properties:

Our Members display

Step 4: At FIELDS area, click Add button to add fields: User: Picture, User: Position, User: Bio

Step 5: Set properties for User: Picture

Our Members display

Step 6: Set properties for User: Position

Our Members display

Step 7: Set properties for User: Bio

Our Members display

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

Our Members display

Step 9: At FILTER CRITERIA area, Click Add button to add User: Picture (user_picture:target_id) field with following properties:

Our Members display

Step 10: At PAGE SETTINGS > Path area, set the following properties:

Our Members display

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

Our Members display

Step 12: Click Save to save view

Contact page

Front end Display

Contact

1. Contact Info block

Step 1: Navigate to Structure > Blocks, click Custom block library tab.

Step 2: Click Add custom block link.

Tags block configuration

Step 3: Click Basic block link, Create Contact Info block with following properties:

Contact

Step 4: Click Save block button.

Refer to following HTML code:

					

Cursus Vivamus nunc porttitor pretium felis Sed et nunc sociis faucibus. Quis Praesent tortor id Donec Vestibulum et Curabitur convallis Duis eros. Ut sit ac venenatis Sed elit auctor interdum fringilla Integer magna. Eros sit ante tristique odio malesuada purus Vivamus id faucibus sit. Sodales pharetra consectetuer est urna adipiscing id pellentesque.

General Information

Quis Praesent tortor, Vivamus street
+ Tel: 342 654 987
+ Fax: 234 567 890

Human Information

Address brand: 90 Street London, United Kingdom.
+ Tel: 20 7345 667
+ Mail to: support@weebpal.com

2. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Content block, click Place block link.

Step 3: Find Contact Info click Place block link, set following properties

Contact

Step 4: Click Save block button.

3. Our Location block

Step 1: Navigate to Structure > Blocks, click Custom block library tab.

Step 2: Click Add custom block link.

Step 3: Click Basic block link, Create Our Location block with following properties:

Contact

Step 4: Click Save block button.

Refer to following HTML code:

					

Our Location


View Larger Map

4. Configure block

Step 1: Navigate to Structure > Block layout

Step 2: At Content block, click Place block link.

Step 3: Find Our Location click Place block link, set following properties

Contact

Step 4: Click Save block button.

News & Events

Max
Tuesday, 03 November 2015
Max
Saturday, 24 October 2015
admin
Sunday, 15 February 2015
admin
Thursday, 08 January 2015
admin
Wednesday, 17 December 2014

Subscribe to our mailing list

Get a 20% off coupon and be the first to receive exclusive offer, and important events from WeebPal.

Connect with us

We're on Social Networks. Follow us & get in touch.

▲ Top
Subscribe

Get a 20% off coupon and be the first to receive exclusive offer, and important events from WeebPal.