Vendora includes at least 21 Twig files grouped into three themes (Travel, Fashion, and Cosmetics) under the [HTML-Twig]/src/twig/[theme-name]/*.twig directory. These files are designed to be compiled into HTML pages in the project's root directory.

Typically, each page template is based on the resources/layouts/default.twig layout, and they are structured using various include-able sections. These sections can be customized according to specific parameters, offering flexibility in the design and layout of the pages.

Folder Structure

• HTML-Twig //HTML Twig source files
  • src
    • twig
      • travel //Source files for Travel theme
        • homepage.twig
        • //you can add a new page-name.twig here
      • fashion //Source files for Fashion theme
        • homepage.twig
        • //you can add a new page-name.twig here
      • cosmetics //Source files for Cosmetics theme
        • homepage.twig
        • //you can add a new page-name.twig here

Changing Page Title:

The page title, displayed in the browser's title bar or tab, is important for SEO.

Modify the page title by setting the headTitle variable at the start of each Twig file.

{# set required variables #}
{% set headTitle = 'Homepage' %}

Adding a New Section:

New sections are inserted between {# block mainContent #} and {# endblock #} in the Twig file.

More details about sections, variations, and parameters are under "SECTIONS & VARIATIONS".

Change Section Parameters:

Twig pages include sections with changeable parameters. To modify a parameter, locate it in the section file, and adjust it.

For example, in the page travel/homepage.twig includes a sections/header.twig section which has a 'title' parameter on line:19. You can change the 'title' parameter so that the gulp command will compile it into HTML page content.

{# travel/homepage.twig : Homepage twig file will be compiled into homepage.html #}

{# extends default layout #}
{% extends "../resources/layouts/default.twig" %}

{# set required variables  #}
{% set headTitle = 'Homepage' %}

{% set pageClasses = 'page-travel page-homepage' %}
{# end set required variables #}

{# block main content  #}
{% block mainContent %}
	
	{# include sections/header  #}
	{% include "../resources/sections/header.twig", with {

		'variation'		: 'header-homepage-1',

		'navbarClasses'		: 'navbar-transparent',
		'navbarVariation'	: 'navbar-variation-1',
		'navbarMenus'		: [
			['#Top Deals', 'Top Deals'],
			['#Package', 'Package'],
			['#Review', 'Review'],
			['#Blog', 'Blog'],
			['#Contact', 'Contact'],
		],

		'subtitle'		: 'Welcome to Vendora Adventures!',
		'title'			: 'Your gateway to unforgettable journeys',

		'backgroundImage'	: 'travel-homepage-header-bg.png',

		'ctaType'		: 'include',
		'cta'			: 'partials/form-booking-header.twig',

		'additionalSection'	: 'client.twig',
		'additionalSectionParams' : {
			'title'		: false,
			'variation'	: 'client-variation-1',
		 
			'images'		: [
				'client-image-96-1-white.svg',
				'client-image-96-2-white.svg',
				'client-image-96-3-white.svg',
				'client-image-96-4-white.svg',
				'client-image-96-5-white.svg',
				'client-image-96-6-white.svg',
			]
		}
	} %}
	
	{# other sections code here #}

{% endblock %}
{# end block main content  #}