Modifying a Page

Chroma features at least 16 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
      • about-us.twig // About Us Page Variation 1
      • about-us-2.twig // About Us Page Variation 2
      • about-us-3.twig // About Us Page Variation 3
      • about-us-4.twig // About Us Page Variation 3
      • blog.twig // Blog Page
      • blog-details.twig // Blog Details
      • faq.twig // FAQ Page
      • contact-us.twig // Contact Us Page
      • pricing.twig // Pricing Page Variation 1
      • pricing-2.twig // Pricing Page Variation 2
      • pricing-3.twig // Pricing Page Variation 3
      • // 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 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',

		'title'		: 'Cloud-based brilliance at your fingertips',
		'description'	: 'Discover how our SaaS solution can streamline your daily operations, saving you time and resources.',

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

		'cta'		: '<a class="btn btn-primary btn-icon" href="#get-started">Get started <i class="ic ic-chevron-right"></i></a>
				<a class="btn btn-light" href="#get-demo">Get a demo</a>',
	} %}
	
	{# other sections code here #}

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