Drupal 8 - ZetraZ Theme Guide for Developers

Step 1: Navigate to Structure > Block layout

Step 2: Find Header > Site branding click Configure button and set following properites:

Step 4: Click Save block button.

Step 1: Navigate to Configuration > People > Account settings > Manage fields, click Add field, then create First Name and Last Name fields with following settings:

Step 2: Navigate to Structure > Views, click Add view, then create Page view with following settings:

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

Step 4: At ADVANCED > CONTEXTUAL FILTERS area, click Add button to add fields: Content: Has taxonomy term ID field with following settings:

Step 5: At ADVANCED > RELATIONSHIPS area, click Add button to add fields: author field with following settings:

Step 6: At FIELDS area, click Add button to add fields: User: Last Name field with following settings:

Step 7: At FIELDS area, click Add button to add fields: User: First Name field with following settings:

Step 8: At FIELDS area, click Add button to add fields: User: User ID field with following settings:

Step 9: At FIELDS area, click Add button to add fields: User: Name field with following settings:

Refer to following HTML code:

                            {{ field_first_name }} {{ field_la }} 
                        

Step 10: At FIELDS area, click Add button to add fields: Comment Statistics: Comment count field with following settings:

Step 11: At FIELDS area, click Add button to add fields: Content: Tags field with following settings:

Step 12: At FIELDS area, click Add button to add fields: Content: Image field with following settings:

Step 13: At FIELDS area, click Add button to add fields: Content: Video field with following settings:

Step 14: At FIELDS area, click Add button to add fields: Content: Authored on field with following settings:

Step 15: At FIELDS area, click Add button to add fields: Global: Custom text field with following settings:

Refer to following HTML code:

                            
{{ field_image }}
                            
{{ field_video }}
                            
{{ created }}
                        

Step 16: At FIELDS area, click Add button to add fields: Content: Body field with following settings:

Step 17: At FIELDS area, click Add button to add fields: Content: Link to Content field with following settings:

Step 17: At PAGER > Use pager area, click Mini pager, 3 items link to change configuration:

Step 18: Click Save button

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

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

Step 3: At ADVANCED > RELATIONSHIPS area, click Add button to add fields: author field with following settings:

Step 4: At FIELDS area, click Add button to add fields: User: Last Name field with following settings:

Step 5: At FIELDS area, click Add button to add fields: User: First Name field with following settings:

Step 6: At FIELDS area, click Add button to add fields: User: User ID field with following settings:

Step 7: At FIELDS area, click Add button to add fields: User: Name field with following settings:

Refer to following HTML code:

                            {{ field_first_name }} {{ field_la }} 
                        

Step 8: At FIELDS area, click Add button to add fields: Comment Statistics: Comment count field with following settings:

Step 9: At FIELDS area, click Add button to add fields: Content: Tags field with following settings:

Step 10: At FIELDS area, click Add button to add fields: Content: Image field with following settings:

Step 11: At FIELDS area, click Add button to add fields: Content: Video field with following settings:

Step 12: At FIELDS area, click Add button to add fields: Content: Authored on field with following settings:

Step 13: At FIELDS area, click Add button to add fields: Global: Custom text field with following settings:

Refer to following HTML code:

                            
{{ field_image }}
                            
{{ field_video }}
                            
{{ created }}
                        

Step 14: At FIELDS area, click Add button to add fields: Content: Body field with following settings:

Step 15: At FIELDS area, click Add button to add fields: Content: Link to Content field with following settings:

Step 16: At FILTER CRITERIA area, click Add button to add fields: Content: Content type field with following settings:

Step 17: At PAGER > Use pager area, click Mini pager, 3 items link to change configuration:

Step 18: Click Save button

1. Create Contact info custom block

Refer to following HTML code:

                            
abc 18, 1701 ABC

                            
+0123456789

                            
[email protected]
                        

2. Configure Contact info custom block

3. Create Contact forms: Send us a message

1. Fashion banner

1.1 Create Block types: Image Block

1.2 Create Image block: Fashion

Step 1: Navigate to Structure > Block layout > Custom block library click Add custom block button and click Image Block link to create Fashion custom block with following properties:

Step 7: Click Save button

Step 1: Navigate to Structure > Views

Step 2: Find Article block click Edit button

Step 3: Click Add link to create Health block and set following properites:

Step 4: At Display name and Title areas, change name Health

Step 5: At FIELDS areas, click add button to create Content: Image field and set following properites:

Step 6: At FIELDS areas, click Content: Video Title field and set following properites:

Step 7: At FIELDS areas, click add button to create Content: Body field and set following properites:

Refer to following HTML code:

                                

                                     

                                        {{ title }}
                                     
                                    

                                        {{ body }}
                                     
                                
	
                            

Step 8: At FILTER CRITERIA areas, click add button to create Content: Has taxonomy term field and set following properites:

Step 9: At SORT CRITERIA areas, click Content statistics: Views today link to remove this field

Step 10: At PAGER > Use pager area, click Display a specified number of items to change options this field

Step 11: At PAGER > Use pager area, click 1 items to change options this field

Step 12: At OTHER > Machine Name area, change machine name block_11

Step 13: At OTHER > Css class area, change Css class block-article-health

Step 14: Click Save button to save view

Step 1: Navigate to Structure > Views

Step 2: Find Article block click Edit button

Step 3: Click Add link to create Education 1 block and set following properites:

Step 4: At Display name and Title areas, change name Education 1

Step 5: At FIELDS areas, click add button to create Content: Image field and set following properites:

Step 6: At FIELDS areas, click Content: Video Title field and set following properites:

Step 7: At FIELDS areas, click add button to create Content: Body field and set following properites:

Refer to following HTML code:

                                    

                                    

                                    {{ title }}
                                    
                                    

                                    
{{ body }}
                                    
                                    
                            

Step 8: At FILTER CRITERIA areas, click add button to create Content: Has taxonomy term field and set following properites:

Step 9: At SORT CRITERIA areas, click Content statistics: Views today link to remove this field

Step 12: At OTHER > Machine Name area, change machine name block_13

Step 13: At OTHER > Css class area, change Css class block-article-education-1

Step 14: Click Save button to save view

Step 3: Click Add link to create Education 3 block and set following properites:

Step 4: At Display name and Title areas, change name Education 3

Step 5: At FIELDS areas, click add button to create Content: Image field and set following properites:

Step 6: At FIELDS areas, click Content: Video Title field and set following properites:

Step 7: At FIELDS areas, click add button to create Content: Body field and set following properites:

Refer to following HTML code:

                                    

                                

                                {{ title }}
                                
                                

                                
{{ body }}
                                
                                
                            

Step 8: At FILTER CRITERIA areas, click add button to create Content: Has taxonomy term field and set following properites:

Step 9: At SORT CRITERIA areas, click Content statistics: Views today link to remove this field

Step 10: At PAGER > Use pager area, click Display a specified number of items to change options this field

Step 11: At PAGER > Use pager area, click 1 items to change options this field

Step 12: At OTHER > Machine Name area, change machine name block_13

Step 13: At OTHER > Css class area, change Css class block-article-education-3

Step 14: Click Save button to save view

Step 1: Navigate to Structure > Block layout

Step 2: Find Featured click Place block button

Step 3: Find Article Block: Education 1 click Place block button and set following properites:

Step 4: Click Save block button.

Step 5: Find Featured click Place block button

Step 6: Find Article Block: Education 3 click Place block button and set following properites:

Step 7: Click Save block button.

Step 1: Navigate to Structure > Views

Step 2: Find Article block click Edit button

Step 3: Click Add link to create Hospital block and set following properites:

Step 4: At Display name and Title areas, change name Hospital

Step 5: At FIELDS areas, click add button to create Content: Image field and set following properites:

Step 6: At FIELDS areas, click Content: Video Title field and set following properites:

Step 7: At FIELDS areas, click add button to create Content: Body field and set following properites:

Refer to following HTML code:

                                

                                 

                                    {{ title }}
                                 
                                

                                    {{ body }}
                                 
                                
                            

Step 8: At FILTER CRITERIA areas, click add button to create Content: Has taxonomy term field and set following properites:

Step 9: At SORT CRITERIA areas, click Content statistics: Views today link to remove this field

Step 10: At PAGER > Use pager area, click Display a specified number of items to change options this field

Step 11: At PAGER > Use pager area, click 1 items to change options this field

Step 12: At OTHER > Machine Name area, change machine name block_15

Step 13: At OTHER > Css class area, change Css class block-article-health

Step 14: Click Save button to save view

Step 1: Navigate to Structure > Views

Step 2: Find Article block click Edit button

Step 3: Click Add link to create Sport Highlight 1 block and set following properites:

Step 4: At Display name and Title areas, change name Sport Highlight 1

Step 5: At FIELDS areas, click add button to create Content: Image field and set following properites:

Step 6: At FIELDS areas, click add button to create Content: Video field and set following properites:

Step 7: At FIELDS areas, click Content: Title field and set following properites:

Step 8: At FIELDS areas, click add button to create Content: Body field and set following properites:

Refer to following HTML code:

                                    

                                    

                                       

                                             
 {{ title }}
                                       
                                    

                                             
 {{ body }}
                                       
                                    
                                    
                            

Step 9: At FILTER CRITERIA areas, click add button to create Content: Has taxonomy term field and set following properites:

Step 10: At SORT CRITERIA areas, click Content statistics: Views today link to remove this field

Step 11: At OTHER > Machine Name area, change machine name block_13

Step 12: At OTHER > Css class area, change Css class recent-posts

Step 13: Click Save button to save view

Step 3: Click Add link to create Sport Highlight 3 block and set following properites:

Step 4: At Display name and Title areas, change name Sport Highlight 3

Step 5: At FIELDS areas, click add button to create Content: Image field and set following properites:

Step 5: At FIELDS areas, click add button to create Content: Video field and set following properites:

Step 6: At FIELDS areas, click Content: Title field and set following properites:

Step 7: At FIELDS areas, click add button to create Content: Body field and set following properites:

Refer to following HTML code:

                                

                                    

                                        

                                             
 {{ title }}
                                        
                                        

                                             
 {{ body }}
                                       
                                    
                                
                            

Step 8: At FILTER CRITERIA areas, click add button to create Content: Has taxonomy term field and set following properites:

Step 9: At SORT CRITERIA areas, click Content statistics: Views today link to remove this field

Step 10: At PAGER > Use pager area, click Display a specified number of items to change options this field

Step 11: At PAGER > Use pager area, click 1 items to change options this field

Step 12: At OTHER > Machine Name area, change machine name block_18

Step 13: At OTHER > Css class area, change Css class recent-posts

Step 14: Click Save button to save view

Step 1: Navigate to Structure > Block layout

Step 2: Find Highlighted click Place block button

Step 3: Find Article Block: Sport Highlight 1 click Place block button and set following properites:

Step 4: Click Save block button.

Step 5: Find Highlighted click Place block button

Step 6: Find Article Block: Sport Highlight 3 click Place block button and set following properites:

Step 7: Click Save block button.

Step 1: Navigate to Structure > Views

Step 2: Find Article block click Edit button

Step 3: Click Add link to create Travel block and set following properites:

Step 4: At Display name and Title areas, change name Travel

Step 5: At FIELDS areas, click add button to create Content: Image field and set following properites:

Step 6: At FIELDS areas, click Content: Video Title field and set following properites:

Step 7: At FIELDS areas, click add button to create Content: Body field and set following properites:

Refer to following HTML code:

                            

                                 

                                    {{ title }}
                                 
                                

                                    {{ body }}
                                 
                            
                            

Step 8: At FILTER CRITERIA areas, click add button to create Content: Has taxonomy term field and set following properites:

Step 9: At SORT CRITERIA areas, click Content statistics: Views today link to remove this field

Step 10: At PAGER > Use pager area, click Display a specified number of items to change options this field

Step 11: At PAGER > Use pager area, click 1 items to change options this field

Step 12: At OTHER > Machine Name area, change machine name block_16

Step 13: At OTHER > Css class area, change Css class block-article-health

Step 14: Click Save button to save view