1. PageUp Help
  2. Recruitment Marketing
  3. Careers Site & CMS
  4. Web pages

Theme page layouts

Updated

Recruitment Marketing Public

Sometimes you'll want full control over how a page's layout and underlying HTML are generated. Recruitment Marketing gives you this capability, however, it's important to be careful when editing a layout, as it can drastically alter the rendering of pages (including on mobile devices) if a bug is introduced in the layout templates.

Uses of custom page layouts

Some common examples are:

  • Creating custom headers and footers that are complex in nature and often match a company's other corporate websites.
  • Adding analytics scripts.
    • It's important to note that there is built-in support for Facebook & Google under the Third Party Analytics link of your theme.
  • Adding other third-party components.

Layouts are found within a theme in the Theme Editor. A theme can have multiple layouts, allowing for very dynamic and different pages from within the same theme.

Creating a page layout

  1. From the side menu, under Organisation, click Themes.
  2. Click the name of the relevant theme. Alternatively, click the Edit icon.
  3. Click the Layouts tab.
    recruitment-marketing-theme-layouts.png
  4. Click the New button.
  5. Enter a Name for the layout.
  6. Click the Save button.
  7. On the Layout screen, a default template will already be displayed. This default template is bug-free and is the minimum code required to render a page correctly. Click the Edit icon.recruitment-marketing-theme-new-layout.png
  8. Add your code changes as required. Often, scripts should be placed between the <head/> tags.
  9. On the right side are some Template Variables, which can be used within the template, as required.
  10. Click the Save button.

Using a page layout

  1. From the side menu, under Content, click Web Pages.
  2. Click the name of the relevant web campaign.
  3. Next to the relevant page, click the Actions (ellipses) icon, then click on Settings.
  4. On the Edit Page Settings pop-up, click the Appearance & Behaviour tab.
  5. From the Theme drop-down, select the relevant theme that will determine the layouts available.
  6. From the Page Layout drop-down, select the new page layout.
    recruitment-marketing-theme-page-settings.png
  7. Click the Save button to keep the settings.

Using Liquid

The Recruitment Marketing layout syntax uses the Liquid Templating engine. For more information, including advanced syntax, refer to shopify.github.io/liquid.

Template variables

Template variables are placed with double curly-brace pairs, for example:

<html lang="{{page.properties.locale}}">

As the page is being rendered, these variables are evaluated and HTML content is outputted.

page.content.head

This is placed within the <head> tag and will output meta tags, CSS scripts, and JavaScript calls. This template variable is mandatory.

<head>
<title>{{page.properties.title}}</title>
{{page.content.head}}

page.content.body

This is placed within the <body> tag, usually after the menu, and will output the HTML for the rows and blocks created in the page editor. This template variable is mandatory.

<body>
  <nav class="site-header sticky-top py-1">
    <!-- put menu here -->
  </nav>
  {{page.content.body}

page.content.footer

This is placed before the end of the closing </body> tag and will output HTML for modals, consent footers, and third-party integration JavaScript. This template variable is mandatory.

<footer>
  .....
</footer>
{{page.content.footer}}
</body>

page.properties.locale

This will output the code of the current locale, e.g., <html lang="en-US">. If a French translation of a page is being viewed, it would output <html lang="fr-FR">. This allows locale-specific CSS targeting.

For example, consider a single page that has a hero image of the Empire State Building for the English version, with a CSS class value of "en-visible". Underneath it, there is a hero image of the Eiffel Tower for the French version, with a CSS class value of "fr-visible". Here is how to hide and show the correct image, depending on the current locale.

Page layout:

<html lang="{{page.properties.locale}}">
<head>

Theme CSS:

.en-visible, .fr-visible{ /* by default hide these 2 blocks */
  display: none;
}

.editing .en-visible, /* show bot blocks in the editoer  */
.editing .fr-visible{
  display: block; 
}

[lang="en"] .en-visible{ /* if the current locale is English, only show the English block*/
  display: block;
}

[lang="fr-FR"] .fr-visible{ /* if the current locale is French, only show the French block*/
  display: block;
}

page.properties.uid

This will output the uid of the current page, which allows page specific CSS targeting.

page.properties.title

This will output the title of the current page. It is typically placed within the <title>.

<title>{{page.properties.title}}</title>

pages.<page-uid>.title

This will output the title of another page, e.g., {{pages.83eeb1b30236ba42c18f644d5440aeec.title}}.

candidate.is_known

This will output true or false, depending on whether the current candidate is a known candidate or not.

{%if candidate.is_known%}
  Hello {{candidate.first_name}}
{%endif%}

candidate.first_name

This will output the current candidate's first name.

candidate.last_name

This will output the current candidate's first name.

common.current_year

This will output the current year. It is useful for copyright statements, for example:

Copyright {{common.current_year}}

Hiding a menu item

There are times when you may want to remove a link from your website navigation temporarily without permanently deleting the code. You can achieve this by adding a small "hide" command to the HTML. To do this, you will need to use style="display: none;".

To find your menu code:

  1. From the side menu, under Organisation, click on Themes.
  2. Locate the relevant theme and click the Edit (pen) icon.
  3. Click on the Layouts tab.
  4. Against the relevant Layout Name, click the Edit (pen) icon.

How to use the "Display None" method:

The most effective way to hide an item is to add style="display: none;" to the list item <li> tag. This tells the browser to keep the code in the file but not to show it on the live website.

  1. Locate the line of code for the menu item you wish to hide.
  2. Inside the opening <li> tag, insert a space, and then copy and paste the following: 
    style="display: none;"
    After this, the opening code should look like <li style="display: none;">
  3. Save your changes.

Example comparison

For instance, if you wish to hide the "Candidate events" menu item in the navigation menu, you can edit the page layout to use the code below.

Original code:

<li id="menu-item-355" class="sub-menu-item">
    <a href="https://careers.example.co.uk/jobs/events/">Candidate events</a>
</li>

Updated code (hidden):

<li id="menu-item-355" class="sub-menu-item" style="display: none;">
    <a href="https://careers.example.co.uk/jobs/events/">Candidate events</a>
</li>

Comments

0 comments

Article is closed for comments.

Table of contents

Articles in this section

See more