Add new design¶
To create different designs for different version of the website, you configure different sites based on the SiteAccess content.
This example shows how to prepare a site for a "Summer Sale" marketing campaign and provide it with a distinct design.
Configure a new SiteAccess¶
First, in the SiteAccess configuration, under the
ibexa.siteaccess configuration key,
1 2 3 4 5 6 7 8 9 10 11 12 13
campaign SiteAccess to
site_group enables you to add common configuration for both SiteAccesses at the same time.
For details about configuring different site roots and matching SiteAccesses, see Set up campaign SiteAccess.
Next, configure a new
summersale design for this theme, also named
1 2 3
Notice that the
standard theme will be automatically added at the end of the
summersale design's theme list.
Ensure that the
campaign site uses this design (while the default
site uses the default
1 2 3 4 5 6 7 8
Now, create templates for the two sites.
Templates for the main site should be placed in
and templates for the campaign site in
First, modify the built-in general page layout
by including a header and a footer section:
1 2 3 4 5 6 7 8 9 10
@ibexadesign in the template paths points to a template relevant for the current design.
In case of
site, the template used for the header is
Create both the header and the footer template, for example:
Now, create templates for content, for example for an article, that extend the page layout:
1 2 3 4
Configure the content view so that both sites, the main one and the campaign, use this template.
To do it, use the
site_group that both sites belong to:
1 2 3 4 5 6 7 8 9
Now, create an Article Content item and preview it on the front page. You should see the article with a header and footer that you defined for the main site.
Now, you need to override the header of the site to fit the campaign.
Create a separate
templates/themes/summersale/parts/header.html.twig file with different content, for example:
Preview the Article through the
You can see that the page uses the campaign header, while the rest of the layout, including the footer,
is the same as in the main site.
This is because you defined
standard design as fallback for this SiteAccess:
1 2 3
In this case, if the design engine cannot find a template for the current design,
it uses the template from the next configured design.
In the case above, the engine does not find the footer template for the
so it uses the one from
This way you do not need to provide all templates for a new design, but only those that you want to be different than the fallback one.