Website Essentials

The website essentials are a collection of settings that affect the most basic parts of your website. Depending on the type of access you have, you can change many of the fundamental visual attributes of your website here.

Colour Palette

Here you may define up to 12 colours to be used with your website. If you change a colour, it will automatically be changed on the whole website. For example, where it says "ffffff", this is the so-called hex-code for the colour white. (You can read more about hex codes here. If you want to find hex colours, this website is quite useful), if you were to change this to another colour, all parts of the website using this white field, will change to the new colour you have assigned. (If you have two white fields in your colour palette, only the one specifically assigned to elements in the website builder changes.)

If you are interested in getting colour palettes, this site is a great resource.

Image of the colour palette within Essentials

Colour Templates

A colour template records a specific setting for various standard module colours, such as font, background and CTA (button) colours.

This can reduce a lot of the effort in creating websites with alternating colour styles, as you now only need to select the colour template, instead of setting all colours individually.

As soon as you have defined a colour template and saved the ‘Essentials' module, all modules will show the colour template options available.

Template Name

Before a colour template can be saved, it needs to be given a name. We tend to use this functionality for having different font and background colours, so templates are often called something like ‘Red background, white font' and then the reverse.

Colour Values

These colour values correspond to the same values in each module that has these values available. If a partial match is found, only those colours will be applied when selecting the template.

Favicon

Image of favicon within Essentials

The so-called ‘Favicon' is a small logo, which will show up in browser tabs, or on the home-screen of mobile devices (if someone was to add a shortcut to your website on their mobile phone, for example). Supported formats are .png, .jpeg / .jpg, .gif format. Technically, .ico, .svg and .bmp are supported by some browsers, but can't be guaranteed to work universally.

Example:

Image of favicon on a Mac tab

Text Options

Image of text options

Within the text options you may choose the font for your website. We offer 9 different fonts at the moment (and may offer more in the future). Fonts have very different levels of legibility, making it very important to ensure your website is easy to read. Often, unless needed specifically for artistic purposes, it is best to choose a simple, plain font (for example, Lato, Raleway, Montserrat, Roboto or Open Sans). There is an additional option called "Scale Multiplier", which allows you to make the font on your website bigger or smaller.

Tip

It’s best to experiment with the different fonts, which is easily done thanks to the realtime feedback our previews offer.

Buttons

All buttons on your website can be customised. Any setting here will affect all buttons at once, not individual buttons.

  • Corner Style: Buttons can be set to have sharp corners Image of a button with sharp corners, semi-rounded corners Image of a button with slightly rounded corners, or fully rounded corners Image of a button with fully rounded corners.
  • Fill Transparency: When set to transparent, the background colour of the module the button is on, will ‘shine through' the button. The button's text (or label) and border remain visible (and the colours, including the rollover remain customisable). All buttons in the bullet point above are transparent. An opaque button looks like this: Image of an opaque button
  • Chevron: All buttons can have a so-called chevron, which is a visual element to indicate that the button is a link leading somewhere else. Image of a button with chevron
  • Font Case: You can pick between all buttons being labelled with lowercase letters (as shown above) or uppercase letters, like this: Image of an all caps button

Search Engine Settings

  • Site Title:

Here you can define a site title, which will be used by search engines (like Google). This will be the name of your site, shown in browser tabs, throughout:

Image of site title

For any pages of your site, the page's name will be appended to the site title.

Image of page title

  • Meta Description:

This is a (short) bit of copy, which is used by Google and other search engines to show what your page is about in the search results. For our own website, it looks like this on Google (This bit of text will never be visible to visitors of your website, it is exclusively used by search engines.):

Image of meta description from the footer section within Essentials, on Google

Social Share Settings

Image of social share settings in website builder

Social Share Image

This is the image which is shown when someone shares your site on Facebook, Twitter, Telegram, etc. Here is an example of what this looks like on a few different platforms:

Image of a social share on Facebook

OG Title

This is the title to be shown as part of social shares:

Image of a social share on Facebook, showing title

OG Description

This is the description to be shown as part of social shares:

Image of a social share on Facebook, showing description

Image of the footer section within Essentials

The footer section looks as follows:

Image of the footer section within Essentials

The footer section allows you to edit:

  • Font colour: Controls the colour of the text within the footer.

Image of the footer section within Essentials, font colour

  • Rollover colour: Controls the rollover colour of the text within the footer.

Image of the footer section within Essentials, rollover colour

  • Company Details: In the UK, these are the typical three pieces of information, included on most companies' websites. E.g. the company name, which countries the company was incorporated in and what the company number is. If either of these fields does not contain any text, the website builder will remove that line and close the space it left automatically. The final result online looks like this: Image of the company details section, within the footer section within Essentials, but on the pink pigeon website

  • (Gold Users Only) PP Footer Credit: If you are a gold user, you can choose to remove the Pink Pigeon Site Builder note in your site's footer.

Image of the pp footer credit

  • Download Links 1-3: Here, using the up-arrow icon (Image of the up-arrow for file uploads) you may upload a .PDF (recommended) or .TXT file (you can upload other file types) up to 2MB big. For larger files you will have to contact us. The files will be shown using the description you enter into the left field. See here how "Special Thanks", "Privacy Policy" and "Cookie Policy" are displayed on our own website: Image of the download links section, within the footer section within Essentials, but on the pink pigeon website

Module Spacing

The modules on your website can have:

Large gaps:

Image of a large gaps example

Small gaps:

Image of a large gaps example

No gaps:

Image of a large gaps example

Fade In

When this option is enabled, your website's modules will fade in as visitors scroll down your site. Once a module has faded in, this will not repeat until the site has been refreshed.

This is not using lazy-loading, so your entire site is still loaded when first visited.