Modifying a Page

Entrada features at least 12 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
      • // 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'			: 'Drive Growth with our Scalable SaaS Applications',
		'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',

		'checkList'		: [
			'Free invitations to unlimited freelancers and clients',
			'All-in-one tool replaces a minimum of 3x current tools',
		]
	} %}
	
	{# other sections code here #}

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