Your event website and mailings' design

Your event website and mailings' design

Under “Design”, you can customise your website and mailings’ design according to your requirements.

To change the design for your event, click on > Design on the left.

List view (only available with the PRO version)
  1. The default design will be automatically applied to the event website and all of the mailings.
  2. To edit a design, click on the design name in the list.
  3. To use a custom design for one or several mailings or one or several pages of your event website, you will first have to create it on this page.
  4. You can create a new design by clicking on "Design”, or by selecting "Duplicate" from the quick menu of an existing design.
  5. To view the elements in which a design is being used, click on the link in the "Used" column (e.g. "Ix").




Multiple designs for an event: If you would like to use multiple designs for an event, you can create multiple design configurations and assign them to the relevant element (event website or mailing). This will allow you to assign a custom design to every mailing and every page of your event website. To create additional design configurations, you can either duplicate an existing configuration or create a completely new one.

Creating and editing a design

  1. Name: This is the design’s internal name that will be shown in the backend options when editing the event website and mailings.
  2. If you upload a header image and logo in the required size, they will be automatically applied to the event website and mailings.
Header image size: 1,200 x 314 pixel (WxH)
Logo size: 1,080 x 60 pixel (WxH)
  1. If you are working with Design templates, you will be shown the option “Use account design template:”. If you selected a design template in this field, you will subsequently only be able to edit the header image and logo, while all of the other tabs will be deactivated.




  1. “Settings” tab:
    1. Background & contents: For selecting the background colours for the event website and mailings. You can select different colours for the page background (“Body”) and content area background. You can also add shadows to the content box border (only on the event website) or round the corners using the “Radius” setting.
    2. Colours: The main colour is the default colour for headings and buttons and can be edited under the “Text” and “Button” tabs. This is also where you can define the colour for the body text. You can also add more colours under the “Advanced” tab.
    3. Fonts: For selecting the fonts for your event website. Please note that mailings can only be created using the fonts provided in Invitario. You can select a default “Fallback” font in the “Fallback” field to the right of the “Font” field for display in mailings for every font you have selected for your website. You can also define more fonts under the “Advanced” tab.
Custom fonts: Please contact us if you cannot find a required font. Our support team will be happy to help you to add a custom font to the available fonts.

  1. Font size: For defining the font size for the body text displayed on desktops, tablets or in the mailings and on mobile devices. This will ensure that the font size will automatically adapt to the size of the screen on which the information is viewed (responsive design). All of the other text elements (such as headings and buttons) will automatically adapt their size based on an adjustable aspect ratio. The aspect ratio can be adjusted under the “Text” tab.
  1. Fonts and text alignment: For defining the default alignment for all of your text elements (left, centre, right) and assigning the selected fonts to the body text (“Default font” field) and headings (“Default font” field) text elements.




  1. “Advanced” tab:
    1. Additional colours: This is where you can define two more colours in addition to those you already selected.
    2. Additional fonts: This is where you can select up to two additional fonts as well as corresponding fallbacks for mailings.




  1. “Text” tab:
    This is where you can customise more detailed settings for the “Body text” fonts and the four heading fonts (“Heading 1 to 4”):
    1. Font: Refers to the fonts selected under the “Settings” and “Advanced” tabs.
    2. Style: For selecting whether to display text in upper or lower case letters (independent of how text was entered).
    3. Size: Size relative (%) to the body text font size (in px) defined under “Font size” under the “Settings” tab.
    4. Line height: Relative to the font size (%).
    5. Alignment: This option allows you to change the default alignment defined at the bottom of the “Settings” tab for each of the text elements (e.g. default alignment for the body text is left, but you want Heading 1 to be centre-aligned).
    6. Colour: For selecting one of the colours defined under the “Settings” and “Advanced” tabs.
    7. You can also define whether you would like to make this font bold, in italics or underlined by default.
    8. At the bottom of this page, you can also select the settings for displaying links (colour & stile).



  1. “Footer” tab:
    For selecting the settings for displaying the footer on the event website and in mailings:
    1. Font: Refers to the fonts selected under the “Settings” and “Advanced” tabs.
    2. Style: For selecting whether to display text in upper or lower case letters (independent of how text was entered).
    3. Size: Size relative (%) to the body text font size (in px) defined under “Font size” under the “Settings” tab.
    4. Line height: Relative to the font size (%).
    5. Alignment: This option allows you to change the default alignment defined at the bottom of the “Settings” tab for each of the text elements (e.g. default alignment for the body text is left, but you want the footer to be centre-aligned).
    6. Colour: For selecting one of the colours defined under the “Settings” and “Advanced” tabs.
    7. Background colour: For selecting the footer colours and a footer background colour from those defined under the “Settings” and “Advanced” tabs



  1. Font: For selecting the font for the button name from the fonts selected under the “Settings” and “Advanced” tabs.
  2. Style: For selecting whether to display the button name in upper or lower case letters only.
  3. Font size: Font size of the button name relative (%) to the body text font size (in px) defined under “Font size” under the “Settings” tab.
  4. Font colour: For selecting the font colour for the button name from one of the colours defined under the “Settings” and “Advanced” tabs.
  5. Style: You can also define whether you would like to make the button name appear in bold, in italics or underlined.
  6. Width: Width of the button in pixel.
When defining the button width, bear in mind that long button names will not be wrapped.
  1. Top/bottom margin: Margin between the button name and top/bottom edge of the button.
  2. Side margin: Margin between the button name and right/left edge of the button.
  3. Line height: Relative to the font size (%).
  4. Background colour: For selecting a button background colour from one of the colours defined under the “Settings” and “Advanced” tabs.
  5. Border colour: For selecting a button border colour from one of the colours defined under the “Settings” and “Advanced” tabs.
  6. Border width: For defining the width of the button’s border.
  7. Radius: For selecting whether you would like the button’s corners to be rounded and to what level.
 


  1. “CSS” tab:
    Depending on your version, you will also be able to further customise your event website and mailings using CSS.

If you are not being shown the “CSS” tab, please get in touch with our Invitario customer advise team.


    • Related Articles

    • Using a template to create a new event (event templates)

      Create a new event with Event Templates in minutes with your individual processes, contents, and designs. The invitation and registration processes, all mailings, and event website contents, as well as the event design set up in the Event Templates, ...

    • Available fonts for event website and mailings

      Through the Design Menu you can set the fonts for your event website and mailings. A wide range of fonts is available for this purpose. The following fonts are available (as of 01/2017): Serif Fonts: Bourbon Garamond Georgia* Guardian Egyptian Text: ...

    • Using header images and logos

      To design your event website and mailings, you can use a header image or logo that is displayed at the beginning of the website or mailing. You have the option to use a header image and/or logo "globally" for all subpages of your event website as ...

    • CSS customisations in website and e-mailings

      In addition to the extensive design settings, further adjustments can be made using CSS settings. Open the desired design in the > Design menu with the "Edit" icon and click on "Advanced Settings". In the footer area of the page, you will find the ...

    • Change the background color of error messages

      To change the appearance of system error messages like 'The registration has already ended.' the following CSS has to be added and edited in the design: .errorMessage { background-color: #ed1b2f; border-color: #ed1b2f; color: #fff; }