Drupal 7 - Flatize Theme Guide for Developers

Using demo content

Now that you've downloaded Flatize package. You will use flatize-demo-7.x-1.0.zip in the folder demo. This ZIP file contains the demo installation with all source codes and content, including sample images.

The below steps will give you the installation guide so that you can build your website to look exactly like the Flatize Full Demo Theme.

1. Flatize package included:

• Flatize theme: flatize-7.x-1.0.zip
• Demo Profile for Flatize: flatize-profile-7.x-1.0.zip

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

• flatize-profile-7.x-1.0.zip

2. Extract flatize-profile-7.x-1.0.zip above and copy it into your host, and rename the directory

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

4. In the demo directory database/ (latest version of package) or profiles/weebpal/ (old version), you can find database dump named sample_data.sql. Import this file into new database.

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

6. Open settings.php, then locate the $database array and set proper credentials.

                                $databases['default']['default'] = array( 'driver' => 'mysql', 'database' => 'databasename', 'username' => 'username', 'password' => 'password', 'host' => 'localhost', 'prefix' => '', );
                    

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

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

After installing many modules of Drupal Ubercart, you will see the Store menu in administrator menu bar. Now you can manipulate store through it.

Navigate to Store > CONFIGURATION > Catalog and set the following properties:

Navigate to Store > CONFIGURATION > Products

Set properties for Products setting tab

Set properties for Attributes setting tab

Step 1: Navigate to Structure > Content Type

Step 2: In Article row, go to Manage fields tab, then add following fields

Step 3: Set properties for Image

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

Step 5: Modify Teaser tab, set the following properties:

Step 6: Click Save button

Step 1: Navigate to Structure > Content Type

Step 2: In Blog entry row, go to Manage fields tab, then add following fields:

Step 3: Set properties for Image

Step 4: Set properties for Slideshow

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

Step 6: Modify Teaser tab, set the following properties:

Step 7: Click Save button

Step 1: Navigate to Structure > Content Type

Step 2: In Product row, go to Manage fields tab, then add following fields:

Step 4: Set properties for Image

Step 5: Set properties for Catalog

Step 6: Set properties for Slideshow

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

Step 8: Modify Teaser tab, set the following properties:

Step 9: Click Save button

Step 1: Navigate to Structure > Content Type

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

Step 3: Click Save content type button. These are fields of Testimonials type.

Step 4: Click Save button

Step 1: Navigate to Structure > Content Type

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

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

Step 4: Set properties for Image

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

Step 6: Modify Teaser tab, set the following properties:

Step 7: Click Save button

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Collection type

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

Step 4: Set properties for Image

Step 5: Set properties for Slideshow

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

Step 7: Modify Teaser tab, set the following properties:

Step 8: Click Save button

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Company type

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

Step 4: Set properties for Image

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

Step 6: Modify Teaser tab, set the following properties:

Step 7: Click Save button

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create FAQ type

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

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

Step 5 Modify Teaser tab, set the following properties:

Step 7: Click Save button

Navigate to Configuration > People section > Account settings > Manage Fields to view fields

Navigate to Configuration > Search and metadata > URL Aliases, switch to PATTERNS and set the following properties:

You can read this article to understand more about URL Aliases.

Step 1: Navigate to Structure > Blocks, click Add block link, Create Headline block with following properties:

Step 2: Click Save block button.

Step 1: Navigate to Configuration > Regional and language > Language, click Add language link and add these following languages:

Step 2: Click Save configuration button.

Step 3: Navigate to DETECTION AND SELECTION tab, set the following properties:

Step 4: Navigate to Structure > Blocks, Find block Language switcher dropdown (User interface text) , Click Configure link and set following properties:

Step 5: Click Save block button.

Step 1: Navigate to Structure > Blocks, Find block Shopping Cart, Click Configure link and set following properties:

Step 2: Click Save block button.

Step 1: Navigate to Structure > Blocks, click Add block link, create Cart Status block with following properties:

Step 2: Click Save block button.

Refer to the following HTML code:

                        type) && $item->type == 'product') $count++;
                        ?>
                         
                    

Step 1: Navigate to Structure > Blocks, Find blockTB Mega Menu: User menu , Click Configure link and set following properties:

Step 2: Click Save block button.

Step 1: Navigate to Structure > Blocks

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

Step 3: Click Save block button.

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

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

Step 3: At FIELDS area, click Add button to add fields: Content: Slideshow, Global: Fieldset, Field: Category, Product: Buy it now button

Step 4: Set properties for Content: Slideshow

Step 5: Set properties for Global: Fieldset

Step 6: Set properties for Field: Category

Step 7: Set properties for Product: Buy it now button

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

Step 9: At FILTER CRITERIA area, Click Add button to add fields: Slideshow(field_slideshow:fid)

Step 10: Set properties for Content: Slideshow (field_slideshow:fid)

Step 11: At Advanced > CSS Class area, set following properties:

Step 12: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Bootstrap Slideshow click configure link, set following properties

Step 3: Click Save block button.

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

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

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

Step 4: At FIELDS area, click Add button to add fields: Content: Slideshow, Global: Fieldset

Step 5: Set properties for Content: Slideshow

Step 6: Set properties for Global: Fieldset

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

Step 8: At FILTER CRITERIA area, Click Add button to add fields: Content: Slideshow, Content: Type

Step 9: Set properties for Content: Type

Step 10: Set properties for Content: Slideshow

Step 11: At Advanced > CSS Class area, set following properties:

Step 12: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Slideshow click configure link, set following properties

Step 3: Click Save block button.

Step 1: Navigate to Structure > Views

Step 2: Enable to Frontpage view, then Edit front page view with following fields:

Step 3: At FORMAT Format area, set the following properties:

Step 4: At FORMAT Show area, set the following properties:

Step 5: At FIELDS area, click Add button to add fields: Global: Fieldset (Image), Content: Image, Content: Link, Field: Status, Product: Sell price, Global: Fieldset (Info), Product: Add to cart form, Content: Title, Content: Catalog

Step 6: Set properties for Content: Image

Step 7: Set properties for Content: Link

Step 8: Set properties for Field: Status

Step 9: Set properties for Product: Sell Price

Step 10: Set properties for Global: Fieldset (Image)

Step 11: Set properties for Global: Fieldset (Info)

Step 12: Set properties for Product: Add to cart form

Step 13: Set properties for Content: Catalog

Step 14: Set properties for Content: Title

Step 15: At FIELDS area, click Rearrange button and set the following arrangements

Step 16: At FILTER CRITERIA area, Click Add button to add field Content: Type with following properties:

Step 17: Click Save to save view

Go to Configuration > System > Site information

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

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

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

Step 4: At FIELDS area, click Add button to add field: Taxonomy term: Image

Step 5: At FIELDS area, click Rearrange, remove field Taxonomy term: Name

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

Step 7: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Catalog, click configure link, set following properties

Step 3: Click Save block button.

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

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

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

Step 4: At FIELDS area, click Add button to add fields: Global: Fieldset (Image), Content: Image, Content: Link, Field: Status, Product: Sell price, Global: Fieldset (Info), Product: Add to cart form, Content: Catalog

Step 5: Set properties for Content: Image

Step 6: Set properties for Content: Link

Step 7: Set properties for Field: Status

Step 8: Set properties for Product: Sell Price

Step 9: Set properties for Global: Fieldset (Image)

Step 10: Set properties for Global: Fieldset (Info)

Step 11: Set properties for Product: Add to cart form

Step 12: Set properties for Content: Catalog

Step 13: At FIELDS area, click Rearrange button and set the following arrangements

Step 14: At FILTER CRITERIA area, Click Add button to add field Content: Type with following properties:

Step 15: At Advanced > CSS Class, set following properties:

Step 16: Click Save to save view

Step 1: Stay open Product collection view, click Clone page.

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

Step 2: Change Display name

Step 3: Change TITLE Title

Step 4: At SORT CRITERIA area, Click Add button to add fields Global: Random (asc)

Step 5: Set properties for Global: Random (asc)

Step 6: At SORT CRITERIA area, Click Rearrange button and delete Content: Sticky (asc)

Step 7: At Advanced > CSS Class, set following properties:

Step 8: Click Save to save view

Step 1: Stay open Product collection view, click Clone block.

Step 2: Change Display name and Title

Step 3: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Top Selling click configure link, set following properties

Step 3: Click Save block button.

Step 4: Find View: Top Selling: Related Products click configure link, set following properties

Step 5: Click Save block button.

Step 6: Find View: Top Selling: Latest Products click configure link, set following properties

Step 7: Click Save block button.

Step 1: Navigate to Structure > Blocks, click Add block link, Create LookBook Women block with following properties:

Step 2: Click Save block button.

Step 3: Navigate to Structure > Blocks, Find LookBook Women click configure link, set following properties

Step 4: Click Save block button.

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

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

Step 3: At FIELDS area, click Add button to add fields: Content: Nid, Global: View

Step 4: Set properties for Content: Nid

Step 5: Set properties for Global: View

Step 6: At FIELDS area, click Rearrange, remove Content: Title, then set the following arrangements:

Step 7: At Advanced > CONTEXTUAL FILTERS, click Add button to add fields: Content: Has taxonomy term ID with following properties:

Step 8: Navigate to Structure > Quicktabs, click Add Quicktabs Instance, create New Products quicktabs with following settings:

Step 9: Click Save block button.

Step 1: Navigate to Structure > Blocks, Find New Products block click configure link, set following properties

Step 2: Click Save button.

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

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

Step 3: At FIELDS area, click Add button to add fields: Content: Body and set properties:

Step 4: At FILTER CRITERIA area, Click Add button to add fields: Content: Type

Step 5: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Testimonials, click configure link, set following properties

Step 3: Click Save block button.

Step 1: Navigate to Structure > Views, click Add new view, then create Latest from the blog view with following settings:

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

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

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

Step 5: Set properties for Field: Image

Step 6: Set properties for Content: Post date

Step 7: At FIELDS area, click Rearrange set the following arrangements:

Step 8: At FILTER CRITERIA area, Click Add button to add field: Content: Type, Field: Image:fid

Step 9: Set properties for Field: Image

Step 10: Set properties for Content: Type

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

Step 12: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Catalog, click configure link, set following properties

Step 3: Click Save block button.

Step 1: Navigate to Structure > Blocks, click Add block link, Create Contact Detail block with following properties:

Refer to following HTML code:

Step 2: Click Save block button.

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

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

You can refer to URL Aliases list to get correct paths, by navigating toConfiguration > Search and metadata > URL Aliases > LIST

Step 3: Navigate to Structure > Blocks, find Useful Links block, click configure link and set the following properties:

Step 4: Click Save block button.

Step 5: Navigate to Structures > Content type, at Basic page row, click edit link.

Step 6: At Menu setting > Available menus section, check Useful Links menu

Step 7: Click Save content type button.

Step 8: Navigate to Content > Add Content , choose Basic page and create a page with the following properties:

Do the steps above to create links of Useful Links menu.

Step 1: Navigate to Structure > Blocks

Step 2: Find block Tags in tags , click Configure link and set following properties:

Step 3: Click Save block button.

Step 1: Go to Module, find Newsletter module. Click Permission link

Step 2: Find Newsletter section, set following properties:

Step 3: Go to Module, find Newsletter module. Click Configure link

Step 4: Find SUBSCRIBE FORM section, set following properties:

Step 5: Click on Configure link, set following properties

Step 6: Go to Structure > Blocks, find Newsletter block. Click Configure link and set following properties:

Step 7: Click Save block button.

Step 1: Navigate to Structure > Blocks, click Add block link, Create Copyright block with following properties:

Refer to following HTML code:

                                    Powered by Drupal | Designed by PixelGeekLab | Developed by WeebPal All Rights Reserved.
                                

Step 2: Click Save block button.

Step 1: Navigate to Structure > Blocks, click Add block link, Create Social Menu block with following properties:

Refer to following HTML code:

• Facebook
• Twitter
• Google+
• Pinterest
• RSS

Step 2: Click Save block button.

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

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

Step 3: At FORMAT > format area, click Settings button, set properties:

Step 4: At FORMAT > Show area, click Settings, set properties:

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

Step 6: Set properties for Field: Image

Step 7: Set properties for Content: Body

Step 8: Set properties for Content: Link

Step 9: At FILTER CRITERIA area, Click Add button to add field Content: Type, Content: Slideshow:fid

Step 10: Set properties for Content: Type

Step 11: Set properties for Content: Slideshow:fid

Step 12: At PAGE SETTINGS Menu, set the following properties:

Step 13: At Advanced > CSS Class, set the following properties:

Step 14: Click Save to save view

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

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

Step 3: At FORMAT > format area, click Settings button, set properties:

Step 4: At FORMAT > Show area, click Settings, set properties:

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

Step 6: Set properties for Field: Image

Step 7: Set properties for Global: Fieldset

Step 8: At FILTER CRITERIA area, Click Add button to add field Content: Type, Content: Slideshow:fid

Step 9: Set properties for Content: Type

Step 10: Set properties for Content: Slideshow:fid

Step 11: At PAGE SETTINGS Menu, set the following properties:

Step 12: Click Save to save view

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

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

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

Step 4: At FIELDS area, click Add button to add fields: Content: Slideshow, Global: Fieldset, Content: Link, Content: Link2 (Content: Link & Content Link2 appear in: node:collection)

Step 5: Set properties for Content: Slideshow

Step 6: Set properties for Global: Fieldset

Step 7: Set properties for Content: Link

Step 8: Set properties for Content: Link2

Step 9: Set properties for Content: Title

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

Step 11: At FILTER CRITERIA area, Click Add button to add fields: Content: Slideshow and set properties

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

Step 13: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Slideshow2 click configure link, set following properties

Step 3: Click Save block button.

Step 1: Navigate to Structure > Blocks, click Add block link, Create Ads block with following properties:

Refer to following HTML code:

• Delivery worldwideSee all conditions
• 30 days returnsFor a smooth shopping
• 0123 456 789Contact Customer
• 30 days returnsFor a smooth shopping
• Shopping GuideContact Customer

Step 2: Click Save block button.

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

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

Step 3: At FIELDS area, click Add button to add field: Content: Image, Global: Fieldset, Content: Rate, Product: Sell price

Step 4: Set properties for Content: Image

Step 5: Set properties for Global: Fieldset

Step 6: Set properties for Content: Rate

Step 7: Set properties for Product: Sell price

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

Step 9: At FILTER CRITERIA area, Click Add button to add field Content: Type with the following properties:

Step 10: At Advanced > CSS Class, set following properties:

Step 11: Click Save to save view

Step 12: Navigate to Structure > Blocks, find View: Featuredclick configure and set following properties:

Step 1: Stay open Featured view, click clone Block.

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

Step 2: Change Display name

Step 3: Change TITLE Title

Step 4: At FIELDS area, click Add button to add field: Field: Category with the following properties:

Step 5: At FIELDS area, click Rearrange button, remove Content: Rate and set following arrangements

Step 6: At SORT CRITERIA area, Click Add button to add fields Global: Random

Step 7: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: View: Featured: Featured 2 click configure link, set following properties

Step 3: Click Save block button.

Step 1: Stay open Best Sellers view, click clone Best Sellers.

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

Step 2: Change Display name

Step 3: Change TITLE Title

Step 4: At SORT CRITERIA area, Click Rearrange and remove field Global: Random

Step 5: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: View: Featured: Best Seller click configure link, set following properties

Step 3: Click Save block button.

Step 1: Stay open Featured 2 view, click clone Featured 2.

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

Step 2: Change Display name

Step 3: Change TITLE Title

Step 4: At FILTER CRITERIA area, Click Add button to add fields: Field: Status, Content: Published

Step 5: Set properties Field: Status

Step 6: Set properties Content: Published

Step 7: At SORT CRITERIA area, Click Rearrange and set following properties:

Step 8: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Featured: Trends click configure link, set following properties

Step 3: Click Save block button.

Step 1: Navigate to Structure > Blocks, click Add block link, Create About Flatize block with following properties:

Refer to following HTML code:

Step 2: Click Save block button.

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

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

Step 3: At FIELDS area, click Add button to add fields: Field : Imageand set propeties:

Step 4: At FIELDS area, click Rearrange button. Click Remove button to remove Content: Title

Step 5: At Advanced > CSS Class area, set following properties:

Step 6: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Company click configure link, set following properties

Step 3: Click Save block button.

Make sure all necessary search & search toolkit modules were installed.

1. Create a Search API Server

The first step required for our search page, is to create a Search API server. This will let Search API know how and where the index will be stored.

Step 1: Navigate to Configuration > Search API, click Add server link, Create DB Indexing server with following properties:

Step 2: Click Save button

2. Create a Search API Index

Now, we need to create a Search API index and define which fields should be stored in the index.

Step 1: Navigate to Configuration > Search API, at Default node index row, click Edit link, then set the following properties:

Step 2: Click Save settings

Step 3: Click Enable to enable this index.

3. Define Index fields

On the Fields page, we have to define which fields will be indexed.

Step 1: Navigate to Configuration > Search API, at Default node index index row, click Edit

Step 2: Navigate to Fields tab, choose whatever fields you want index for searching by checking on them

Step 3: In Facets tab, choose whatever facets you want to use to search

Note: What is facet? It is block content which is help you customize the searching

After Search API Index configuration steps, we have many facets blocks. Move them to Sidebar first region and order them as you want.

Step 1: Navigate to Structure > Blocks, find facets blocks, and set Sidebar first region

Step 2: Click Save blocks button.

Step 3: Each block, click configure link, set following properties

Set CSS class(es) for only block Facet API: Search service: Default node index : Sell price (Filter by Price).

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

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

Step 3: At FIELDS area, click Add button to add fields: Field: Image and set the following properties:

Step 4: At FIELDS area, click Rearrange button, then click Remove link to remove Content: Title field

Step 5: At Advanced > CSS Class, set the following properties:

Step 6: Click Save to save view

Step 4: Navigate to Structure > Blocks, find View: Ads and configure:

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

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

Step 3: At FIELDS area, click Add button to add fields: Content: Video and set the following properties:

Step 4: At FIELDS area, click Rearrange button, then click Remove link to remove Content: Title field

Step 5: At FILTER CRITERIA area, click Add button to add field Content: Video and following properties:

Step 6: At TITLE Title area, set properties:

Step 7: Click Save to save view

Step 1: Navigate to Structure > Blocks, find View: Blog Video and configure:

Step 2: Click Save button

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

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

Step 3: At Display name area, set properties:

Step 4: At Title area, set properties:

Step 5: At FIELDS area, click Add button to add field: Field: Image, Content: Video, Global: View result counter

Step 6: Set properties for Field: Image

Step 7: Set properties for Global: View result counter

Step 8: Set properties for Content: Video

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

Step 10: Click Save to save view

Step 1: Navigate to Structure > Views, find Blog tab

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

Step 3: At Display name area, set properties:

Step 4: At Title area, set properties:

Step 5: Click Save to save view

Step 1: Navigate to Structure > Quicktabs, click Add Quicktabs Instance, create Quicktab with following settings:

Step 2: Click Save button.

4. Configure Quicktab block

Step 1: Navigate to Structure > Blocks, find Flickr: User photos optionally tagged as term from node block and configure:

Step 2: Click Save button

Step 1: Navigate to Content > Add Block > Simple Block, click Add new view, then create Free Shipping block with the following settings:

Step 2: Navigate to Structure > Blocks, find Free Shipping block, click configure then set the following properties:

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

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

Step 4: At FIELDS area, click Add button to add fields: Content: Image, Global: Fieldset, Content: Link, Product: Add to cart form, Field: Status, Product: Sell price, Field: Category

Step 5: Set properties for Content: Image

Step 6: Set properties for Content: Link

Step 7: Set properties for Field: Status

Step 8: Set properties for Product: Sell Price

Step 9: Set properties for Global: Fieldset (Image)

Step 10: Set properties for Global: Fieldset (Info)

Step 11: At FIELDS area, click Rearrange button and set the following arrangements

Step 12: At FILTER CRITERIA area, Click Add button to add field Content: Type with the following properties:

Step 11: At SORT CRITERIA area, Click Add button to add fields Field: Category, Product: Sell Price

Step 13: Set properties for Content: Post date

Step 14: Set properties for Field: Category

Step 15: Set properties for Product: Sell Price

Step 16: At Advanced > CSS Class, set the following properties:

Step 17: Click Save to save view

Make sure Contact module was installed.

Step 1: Navigate to Structure > Blocks, click Add block, then create Get In Touch block with the following settings:

Refer to the following HTML code:

Step 2: Click Save block button.

Step 1: Navigate to Structure > Blocks, click Add block, then create Gmap block with the following settings:

Refer to the following HTML code:

Step 2: Click Save block button.

Step 1: Navigate to Content > Add content > Webform

Refer to the following HTML code:

Step 2: Click Save button.

Step 3: At WEBFORM > Form components add fields:

Step 4: Click Save button.

Step 1: Navigate to Content > Add content > Webform

Refer to the following HTML code:

Step 2: Click Save block button.

Step 3: At WEBFORM > Form components add fields:

Step 4: Click Save button.

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

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

Step 3: At TITLE area, set page title "Shop - Side Bar"

Step 4: At FORMAT > format area, click Settings button, set properties:

Step 5: At FORMAT > Show area, click Settings, set properties:

Step 6: At FIELDS area, click Add button to add fields: Indexed Node: Node ID, Global: View

Step 7: Set properties for Global: View

Step 8: At FILTER CRITERIA area, Click Add button to add field Indexed Node: Content type, Search: Fulltext search with the following properties:

Step 9: Set properties for Indexed Node: Content type

Step 9: Set properties for Search: Fulltext search

Step 10: At SORT CRITERIA area, Click Add button to add fields Indexed Node: Date changed, Indexed Node: Sell price

Step 11: Set properties for Indexed Node: Date changed

Step 12: Set properties for Indexed Node: Sell price

Step 13: At Advanced > CSS Class, set the following properties:

Step 14: Click Save to save view

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Featured : Featured click configure link, set following properties

Step 3: Click Save block button.

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

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

Step 3: At Display name area, click block link, set the following properties:

Step 4: Expand Advanced panel, at RELATIONSHIPS area, click Add to add relationship Content: Author

Step 5: At FIELDS area, click Add button to add fields: Global: Fieldset, Content: Link, Content: Body, Content: Video, Content: Update date, Content: Comment Count, Field: Image, User: Name

Step 6: Set properties for Global: Fieldset

Step 7: Set properties for Content: Link

Step 8: Set properties for Content: Body

Step 9: Set properties for Content: Video

Step 10: Set properties for Content: Update date

Step 11: Set properties for Field: Image

Step 12: Set properties for User: Name

Step 13: At FIELDS area, click Rearrange button and set the following arrangements

Step 14: At FILTER CRITERIA area, Click Add button to add field Content: Type with the following properties:

Step 15: At CONTEXTUAL FILTER area, Click Add button to add field Field: Blog tags with the following properties:

Step 16: Click Save button to save settings.

Step 1: Navigate to Structure > Views, find Blog View click clone Block.

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

Step 2: Change Display name

Step 3: Change TITLE Title

Step 4: At FORMAT show area, set the following properties:

Step 6: At PAGE SETTINGS area, click Path link, set the following properties:

Step 7: At CONTEXTUAL FILTERS area, click Rearrange link, click remove Field: Blog tagsfield

Step 8: Click Save button to save settings.

Step 1: Navigate to Structure > Views, find Blog View click clone Block.

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

Step 2: Change Display name

Step 3: Change TITLE Title

Step 4: At FIELDS area, click Add button to add fields: Global: Fieldset

Step 4: Set properties Global: Fieldset field

Step 5: Set properties Field : Image field

Step 6: Set properties Content: Video fields

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

Step 8: At PAGE SETTINGS area, click Path link, set the following properties:

Step 9: At Advanced > CSS Class, set the following properties:

Step 10: Click Save button to save settings.

Step 1: Navigate to Structure > Views, find Blog View click clone Block.

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

Step 2: Change Display name

Step 3: AT TITLE area, change Title

Step 4: At FIELDS area

Step 5: Set properties Field : Image field

Step 6: Set properties Content: Video fields

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

Step 8: At PAGE SETTINGS area, click Path link, set the following properties:

Step 9: At Advanced > CSS Class, set the following properties:

Step 10: At FILTER CRITERIA area, click Content: Type, set the following properties:

Step 11: At SORT CRITERIA area, Click Add and add field Content: Updated date

Step 12: Click Save button to save settings.

Step 1: Navigate to Content > Add content find Basic page, then create content Tooltip and set following properties:

Step 2: Click Save button

Refer to the following HTML code:

[tooltip class="my-tooltip" placement="left" title="left"]This is my quote[/tooltip]

Step 1: Navigate to Content > Add content find Basic page, then create content Collapse and set following properties:

Step 2: Click Save button

Refer to the following HTML code:

                             [collapse] [accordion title="Accordion Item #1"] Praesent vestibulum dapibus nibh. Phasellus viverra nulla ut metus varius laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse feugiat. Nunc nulla. Praesent egestas neque eu enim. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Fusce neque. In hac habitasse platea dictumst. In hac habitasse platea dictumst. [/accordion] [accordion title="Accordion Item #2"] Quisque id odio. Nunc interdum lacus sit amet orci. Nulla sit amet est. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. [/accordion] [/collapse]
                             

Step 1: Navigate to Content > Add content find Basic page, then create content Video and set following properties:

Step 2: Click Save button

Refer to the following HTML code:

[video]https://www.youtube.com/watch?v=Q-GLuydiMe4[/video]