Vanguard features at least 13 Twig files within the src/twig/*.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 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

• src
  • twig
    • homepage-1.twig // Homepage Variation 1
    • homepage-2.twig // Homepage Variation 2
    • homepage-3.twig // Homepage Variation 3
    • homepage-4.twig // Homepage Variation 4
    • homepage-5.twig // Homepage Variation 5
    • // other twig pages here, you can add a new page-name.twig

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 homepage-1.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.

{# homepage-1.twig : Homepage Alt 1 twig file will be compiled into homepage-1.html #}

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

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

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

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

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

		'navbarClasses'		: 'navbar-light',

		'title'			: 'Powerful SaaS technology to help you achieve more',
		'description'		: 'Discover how our SaaS solution can streamline your daily operations, saving you time and resources.',

		'image'			: 'homepage-1-header-image.png',

		'ctaType'		: 'include',
		'cta'			: 'partials/form-get-started.twig',
		'ctaParams'		: {
			'btnClasses'	: 'btn-primary rounded-pill'
		},

		'checkList'		: [
			'Free trial 30 days',
			'No credit card',
		]
	} %}
	
	{# other sections code here #}

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