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

1. Photo Package

Included content:

  • Photo theme: photo-7.x-1.0.zip
  • Demo Profile for Photo: photo-profile-7.x-1.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.3 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

Home

Home

Gallery albums

Gallery albums

Gallery Flow

Gallery Flow

Gallery Masonry

Gallery Masonry

Gallery Ribbon

Gallery Ribbon

Gallery Pop-up

Gallery Pop-up

About us

About us

Services

Services

Our work involves

Our work involves

Meet out team

Meet out team

Clients

Clients

Blog

Blog

Blog Details

Blog Details

Contact

Contact

4. Module requirements

Core Modules

  • Block
  • PHP filter
  • Update manager

Third-party Modules

  1. Admin Menu
  2. Address Field
  3. Bean
  4. Better Exposed Filters
  5. Block Class
  6. Ckeditor
  7. Colorbox
  8. Conditional Styles
  9. Context
  10. Context Mobile Detect
  11. Cloud Zoom
  12. Countries
  13. Chaos tools
  14. Custom Breadcrumbs
  15. Entity
  16. Entity Reference
  17. Exclude Node Title
  18. FAQ
  19. Field Collection
  20. Field Collection Table
  21. Field Formatter Class
  22. Field Formatter Settings
  23. Field Group
  24. Flexslider
  25. Field Slideshow
  26. Fontawesome
  27. Gallery Formatter
  28. Icon
  29. Inline Entity Form
  30. Image Delta Formatter
  31. Image Link Formatter
  32. Jcarousel
  33. Jquery Update
  34. Juicebox
  35. Libraries
  36. Link
  37. Menu Token
  38. Megamenus
  39. Memcache
  40. Menu Attributes
  41. Menu Descriptions
  42. Module Filter
  43. Node Class
  44. Page Title
  45. Path Auto
  46. Quicktabs
  47. Rules
  48. Search Api
  49. Select Or Other
  50. Session Api
  51. Shortcode
  52. Simplenews
  53. Tagclouds
  54. Taxonomy Menu
  55. TB Megamenu
  56. Token
  57. Title
  58. Variable
  59. Views
  60. Views Bootstrap
  61. Views Fieldsets
  62. Views Bulk Operations
  63. Views Field View
  64. Views Datasource
  65. Views Slideshow
  66. Webform
  67. Weight

Required libraries by the modules

  • Cloud zoom
  • Colorbox
  • Flexslider
  • Fontawesome
  • Ddslick
  • Jquery Cycle
  • Jquery Jcarousel
  • Juicebox

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

Installation

Quick Installation Demo Profile

We created an installation profile with demo content for each of our theme, so that you can quickly download and reproduce the whole site content as presented on our live demo. This way you will get a quicker overview of the features. If it's convenient you may also use the given demo content as a starting point to build your custom sites.

Quick Installation

1. Photo package included:

  • Photo theme: photo-7.x-1.0.zip
  • Demo Profile for Photo: photo-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 Photo Full Demo.

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

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

Quick Installation

3. Access your MySQL database and create a new DB (e.g. Photo ) 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.

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, then locate the $database array and set proper credentials.

Quick Installation

                    $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 Photo Demo

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

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

1. Install Drupal

  1. Go to Drupal download page and download the latest version of Drupal 7.

    Download Drupal 7

  2. Extract and copy Drupal folder to your host and rename the directory.
  3. Follow this tutorial to install Drupal with the standard profile.

2. Install Photo Theme

  1. Extract Photo theme .ZIP file:
    • photo-7.x-1.0.zip
  2. Move this theme into your Drupal folder: sites/all/themes

    Download Drupal 7

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

    Download Drupal 7

3. Install Required Modules

Now that you've enabled Photo 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 photo-7.x-1.0.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 to create vocabularies as the following:

Vocabulary

Then, add terms for each vocabulary

Step 2:Terms of Gallery:

Vocabulary

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

Configuration People

Step 1:Navigate to Configuration > People > Account settings > Manage Field link and add following field:

People

Step 2: Go to Manage Display link and set following fields:

People

Step 3: Click Save button

Modify Basic page type

Step 1: Navigate to Structure > Content Type > Basic page . In Basic page , go to Manage fields tab, add following fields:

Basic page types

Step 2:Set properties for Image field

Basic page types

Basic page types

Step 3:Go to Manage Display tab > Default, add and set following fields:

Basic page types

Step 4:Go to Manage Display tab > Teaser, add and set following fields:

Basic page types

Step 5: Click Save button

Modify Blog entry type

Step 1: Navigate to Structure > Content Type > Blog entry . In Blog entry , go to Manage fields tab, add following fields:

Blog entry types

Step 2:Set properties for Image field

Blog entry types

Step 3:Go to Manage Display tab > Default, add and set following fields:

Blog entry types

Step 4:Go to Manage Display tab > Teaser, add and set following fields:

Blog entry types

Step 5: Click Save button

Create Client type

Step 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Client

Step 2:Go to Manage Fields and add following fields:

Client settings

Step 3:Set properties for Image fields:

Client settings

Step 4: Click Save button

Create Involes type

Step 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Involes

Step 2:Go to Manage Fields and set following fields:

Involes settings

Step 3:Set properties for Image fields:

Involes settings

Step 4:Set properties for Percent fields:

Involes settings

Step 5: Click Save button

Create Gallery type

Step 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Gallery

Step 2:Go to Manage Fields and add following fields:

Gallery settings

Step 3:Set properties for Image fields:

Gallery settings

Step 4:Set properties for Slideshow fields:

Gallery settings

Step 5:Set properties for Gallery type fields:

Gallery settings

Step 6:Go to Manage Display tab > Default, add and set following fields:

Gallery types

Step 7:Go to Manage Display tab > Teaser, add and set following fields:

Gallery types

Step 8: Click Save button

Create Services type

Step 1: Navigate to Structure > Content Tpe. Click Add Content Type link to create content type Services

Step 2:Go to Manage Fields and add following fields:

Services settings

Step 3:Set properties for Image fields:

Services settings

Step 4: Click Save button

Create Homepage

Frontpage view

Front end Display

Frontpage

Edit Frontpage page view

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

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

Frontpage

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

Frontpage

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

Step 5: Set properties for Content: Slideshow

Frontpage

Step 6: Set properties for Global: Fieldset

Frontpage

Step 7: Set properties for Global: Fieldset

Frontpage

Step 8: Set properties for Global: Fieldset

Frontpage

Step 9: Set properties for Content: Title

Frontpage

Step 10: Set properties for Content: Body

Frontpage

Frontpage

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

Frontpage

Step 12: At FILTER CRITERIA area, click Add button to add fields: Content: Type, Content: Slideshow:fid field:

Step 13: Set properties for Content: Type

Frontpage

Step 14: Set properties for Content: Slideshow:fid

Frontpage

Step 15: At PAGER > User Pager area, click link and set properties

Frontpage

Frontpage

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

Frontpage

Step 17: Click Save to save view

Main menu

Front end Display

Main menu

Configure menu block

Step 1: Navigate to Structure > Blocks, find Main menu block, click configure link and set the following properties:

Main menu

Step 2: Click Save button

Copyright block

Front end Display

Copyright display

1. Create & configure Copyright block

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

Copyright display

Copyright display

Step 2: Click Save block button.

Refer to following HTML code:

						

design by weebpal

Social block

Front end Display

Social display

1. Create & configure Social block

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

Social display

Social display

Step 2: Click Save block button.

Refer to following HTML code:

						
					

Create Subpages

Gallery Page

Step 1: Navigate to Structure > View ,click Add new view link, then create Gallery view and set following properties:

Gallery

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

Gallery

Step 3:At Display name area, click and rename to view Gallery flow

Step 4: At FIELDS area, click Add button to add fields: Content: Image, Global: Fieldset, Content: Gallery Type, Content: Body.

Step 5: Set properties for Content: Image

Gallery

Step 6: Set properties for Global: Fieldset

Gallery

Step 7: Set properties for Content: Gallery Type

Gallery

Step 8: Set properties for Content: Body

Gallery

Gallery

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

Gallery

Step 10: At PAGE SETTINGS area, find Menu click and settings menu page

Gallery

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

Gallery

Step 12: Click Save to view button

Gallery Ribbon Page

Step 1: Navigate to Structure > View ,find Gallery view, then click clone Gallery flow link to create Gallery Ribbon view and set following properties:

Gallery Ribbon

Step 2: At Display name click and rename to Gallery ribbon

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

Gallery Ribbon

Step 4: At PAGER SETTINGS area, find Path click link and set following properties:

Gallery Ribbon

Step 5: At PAGE SETTINGS area, find Menu click and settings menu page

Gallery Ribbon

Step 6: At PAGER area, find User page click link and set following properties:

Gallery Ribbon

Step 7: At FIELDS area, click Add button to add fields: Content: Nid, Global: Custom next.

Step 8: Set properties for Content: Nid

Gallery Ribbon

Step 9: Set properties for Global: Custom next

Gallery Ribbon

Step 10: Set properties for Content: Image

Gallery Ribbon

Gallery Ribbon

Step 11: At FIELDS area, click Rearrange button, click Remove link to remove Content: Body field and set following arrange

Gallery Ribbon

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

Gallery

Step 13: Click Save to view button

Gallery Kenbums Page

Step 1: Navigate to Structure > View ,find Gallery view, then click clone Gallery flow link to create Gallery Kenbums view and set following properties:

Gallery Kenbums

Step 2: At Display name click and rename to Gallery Kenbums

Step 3: At FORMAT > Fomat area, click link and set following properties:

Gallery Kenbums

Step 4: At FORMAT > Fomat area, click Settings link and set following properties:

Gallery Kenbums

Step 5: At PAGER SETTINGS area, find Path click link and set following properties:

Gallery Kenbums

Step 6: At PAGE SETTINGS area, find Menu click and settings menu page

Gallery Kenbums

Step 7: At FIELDS area

Step 8: Set properties for Content: Body

Gallery Kenbums

Step 9: Set properties for Global: Fieldset

Gallery Kenbums

Step 10: Set properties for Content: Image

Gallery Kenbums

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

Gallery

Step 12: Click Save to view button

Gallery Masonry Page

Step 1: Navigate to Structure > View ,find Gallery view, then click clone Gallery ribbon link to create Gallery Masonry view and set following properties:

Gallery Masonry

Step 2: At Display name click and rename to Gallery Masonry

Step 3: At FORMAT > Fomat area, click link and set following properties:

Gallery Masonry

Step 4: At FORMAT > Fomat area, click Settings link and set following properties:

Gallery Masonry

Step 5: At PAGER SETTINGS area, find Path click link and set following properties:

Gallery Masonry

Step 6: At PAGE SETTINGS area, find Menu click and settings menu page

Gallery Masonry

Step 7: At FIELDS area, click Add button to add fields: Content: Body, Global: Fieldset.

Step 8: Set properties for Content: Body

Gallery Masonry

Gallery Masonry

Step 9: Set properties for Global: Fieldset

Gallery Masonry

Step 10: Set properties for Content: Image

Gallery Masonry

Gallery Masonry

Step 11: Set properties for Global: Fieldset

Gallery Masonry

Step 12: Set properties for Content: Gallery Type

Gallery Masonry

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

Gallery Masonry

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

Gallery

Step 15: Click Save to view button

Gallery Albums

Front end Display

Quick Tab Albums

1. Create and configure Gallery Block

Step 1: Navigate to Structure > View ,find Gallery view, then click Add Block button to create Gallery Block view and set following properties:

Gallery Block

Step 2: At Display name click and rename to Gallery Block

Step 3: At FORMAT > Fomat area, click link and set following properties:

Gallery Block

Step 4: At FORMAT > Fomat area, click Settings link and set following properties:

Gallery Block

Step 5: At Advanced > OTHER area, find Use aggregation click and set properties:

Gallery Block

Step 6: At CONTEXTUAL FILTERS area, click Add button to add Content: Has taxonomy term IDfield set following properties:

Gallery Block

Step 7: At FIELDS area, find Content : Image click Aggregation settings link and set properties:

Gallery Block

Step 8: At FIELDS area, click Add button to add fields: Content: Nid, Global: Fieldset, Content: Image, Global: Custom text, Content: Gallery Type.

Step 9: Set properties for Content: Image

Gallery Block

Gallery Block

Step 10: Set properties for Content: Title

Gallery Block

Step 11: Set properties for Content: Nid

Gallery Block

Step 12: Set properties for Global: Fieldset

Gallery Block

Step 13: Set properties for Content: Image

Gallery Block

Gallery Block

Gallery Block

Step 14: Set properties for Global: Custom text

Gallery Block

Step 15: Set properties for Content: Gallery Type

Gallery Block

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

Gallery Block

Step 17: At PAGER area, find User page click link and set following properties:

Gallery Block

Gallery Block

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

Gallery

Step 19: Click Save to view button

2. Create Quick Tab Albums block

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

Quick Tab Albums

Quick Tab Albums

Step 2: Click Save button.

3. Configure Quick Tab Albums block

Step 1: Navigate to Structure > Block, find Quick Tab Albums block, then click configure link and set following settings:

Quick Tab Albums

Quick Tab Albums

Step 2: Click Save button.

4. Create Content Gallery Albums

Step 1: Navigate to Content > Add content, find Basic Page link, then click and create Gallery Albums content

Gallery Albums

Gallery Albums

Step 2: Go to URL path settings click and set properties:

Gallery Albums

Step 3: Click Save button.

Gallery data json block

Create and configure Gallery data json

Step 1: Navigate to Structure > View ,find Gallery view, then click Add Block button to create Gallery data json view and set following properties:

Gallery data json

Step 2: At Display name click and rename to Gallery data json

Step 3: At FORMAT > Fomat area, click link and set following properties:

Gallery data json

Step 4: At FORMAT > Fomat area, click Settings link and set following properties:

Gallery data json

Step 5: At Advanced > OTHER area, find Use AJAX click and set properties:

Gallery data json

Step 6: At CONTEXTUAL FILTERS area, click Add button to add Content: Nid field set following properties:

Gallery data json

Step 7: At CONTEXTUAL FILTERS area, click Rearrange button then click Remove link to remove Content: Has taxonomy term ID field

Step 8: At FIELDS area, click Add button to add fields: Content: Galler Type, Content: Image

Step 9: Set properties for Content: Image

Gallery data json

Step 10: Set properties for Content: Gallery type

Gallery data json

Step 11: Set properties for Content: Image

Gallery data json

Step 12: At FIELDS area, click Rearrange button athen click Remove link to remove Content: Nid field

Step 13: At PAGER area, find User page click link and set following properties:

Gallery data json

Step 14: Click Save to view button

About Us page

Create Content About Us

Step 1: Navigate to Content > Add content, find Basic Page link, then click and create About Us content

About Us

About Us

Step 2: Go to URL path settings click and set properties:

About Us

Step 4: Go to Node Class settings click and set properties:

About Us

Step 5: Click Save button.

Services Page

Step 1: Navigate to Structure > View ,click Add new view link, then create Services view and set following properties:

Services

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

Services

Step 3: At FIELDS area, click Add button to add fields: Content: Image, Global: Fieldset, Global: Fieldset, Global: Fieldset, Global: Custom text, Content: Nid

Step 4: Set properties for Content: Image

Services

Services

Step 5: Set properties for Global: Fieldset

Services

Step 6: Set properties for Global: Fieldset

Services

Step 7: Set properties for Global: Fieldset

Services

Step 8: Set properties for Global: Custom text

Services

Step 9: Set properties for Content: Nid

Services

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

Services

Step 11: At PAGE SETIINGS area, find Menu, click link and set following arrange

Services

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

Services

Step 13: Click Save to view button

Our Workm Involves Page

Step 1: Navigate to Structure > View ,click Add new view link, then create Our Workm Involves view and set following properties:

Our Workm Involves

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

Our Workm Involves

Step 3: At FIELDS area, click Add button to add fields: Content: Image, Global: Fieldset, Content: Percent.

Step 4: Set properties for Content: Image

Our Workm Involves

Our Workm Involves

Step 5: Set properties for Global: Fieldset

Our Workm Involves

Step 6: Set properties for Content: Percent

Our Workm Involves

Step 7: Set properties for Content: Title

Our Workm Involves

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

Our Workm Involves

Step 9: At PAGE SETIINGS area, find Menu, click link and set following arrange

Our Workm Involves

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

Our Workm Involves

Step 11: Click Save to view button

Meet out team Page

Step 1: Navigate to Structure > View ,click Add new view link, then create Meet out team view and set following properties:

Meet out team

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

Meet out team

Step 3: At FIELDS area, click Add button to add fields: Global: Fieldset, User: Picture, User: Job, User: Bio.

Step 4: Set properties for User: Picture

Meet out team

Step 5: Set properties for Global: Fieldset

Meet out team

Step 6: Set properties for User: Name

Meet out team

Step 7: Set properties for User: Job

Meet out team

Step 8: Set properties for User: Bio

Meet out team

Meet out team

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

Meet out team

Step 10: At PAGE SETIINGS area, find Menu, click link and set following arrange

Meet out team

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

Meet out team

Step 12: Click Save to view button

Clients Page

Step 1: Navigate to Structure > View ,click Add new view link, then create Clients view and set following properties:

Clients

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

Clients

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

Step 4: Set properties for Content: Website

Clients

Step 5: Set properties for Content: Image

Clients

Clients

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

Step 7: At FILTER CRITERIA area, click Add button to add fields: Content: Image:fid and set properties for

Clients

Step 8: At PAGE SETIINGS area, find Menu, click link and set following arrange

Clients

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

Clients

Step 10: Click Save to view button

Second menu block

Front end Display

Second menu

1. Create Second menu

Step 1: Navigate to Structure > Menu, find Add menu link, then click and create Second menu menu with link following :

Second menu

Step 2: Click Save button

2. Configure Second menu block

Step 2: Navigate to Structure > Blocks, find Second menu block, click configure link and set the following properties:

Second menu

Second menu

Step 3: Click Save button

Blog Page

Step 1: Navigate to Structure > View ,click Add new view link, then create Blog view and set following properties:

Blog

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

Blog

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

Blog

Step 4: At FIELDS area, click Add button to add fields: Content: Image, Global: Fieldset, Content: Post date, Content: Tags, Content: Body, Content: Link and set properties for

Step 5: Set properties for Content: Image

Blog

Step 6: Set properties for Global: Fieldset

Blog

Step 7: Set properties for Content: Post date

Blog

Step 8: Set properties for Content: Tags

Blog

Step 9: Set properties for Content: Body

Blog

Blog

Step 10: Set properties for Content: Link

Blog

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

Blog

Step 12: At PAGE SETIINGS area, find Menu, click link and set following arrange

Blog

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

Blog

Step 14: Click Save to view button

Contact page

1. Add and configure content Contact webform

Step 1: Navigate to Content > Add Content click Webform, add Contact webform and configure with following properties:

Contact

Step 2: Click URL path settings link, set the following properties:

Contact

Step 3: Click Save button.

2. Add fields Webform tab

Step 1: Navigate to Webform tab and Add fields:

Contact

Step 2: Set Placeholder tab for Your name field:

Contact

Step 3: Set Placeholder tab for Your email field:

Contact

Step 4: Set Placeholder tab for Subject field:

Contact

Step 5: Set Placeholder tab for Comment field:

Contact

Step 6: Click Save button

3. Contact Info block

Step 1: Navigate to Structure > Blocks, find Add block click and create Contact Info block with following properties:

Contact

Contact

Step 2: Click Save button

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: Site information

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.