How to Customise a Page Template: Step-by-Step Guide

Please note that Wireless One self-serve tools are currently in testing and not yet available to all users.

Step 1: Open the Login Journey Editor

Open the Login Journey editor and navigate to the Page node. This action will bring up the page design editor, providing you with various customization options.

Step 2: Choose Page Template

From the dropdown list, select ‘Standard Template’ Page Template.

Step 3: Description (Optional)

 If you have multiple page designs within a journey, use the 'Note' box to give your page a name or label (e.g Edinburgh venue only, Christmas promo box etc). This step is helpful for organisation and easy identification.

Step 4: Logo and Background

Logo: Choose or upload an image asset for the logo field. Recommended maximum 355px x 355px

Background Image: If desired, select or upload a static image for the background. Ensure it is a jpg or png, landscape-oriented. Recommended minimum width of 1200px and Max 999px.

Step 5: Background Video (Optional)

If you prefer a video background, choose or upload an MP4 video file in the 'Background Video' field. Recommended: The video is landscape, has a 16:10 aspect ratio, and is ideally 3mb or less in file size.

Step 6: Page Colour

Choose a block colour for the background if you are not using an image or video. Set this using RGB, HSL, or Hex. Use the eyedropper tool to match a colour from your screen.

Step 7: Call To Action Text

Set the text that appears above login methods in the 'Call To Action Text' field. Adjust its colour using RGB, HSL, Hex, or the eyedropper tool.

Step 8: Email Login Button Customization

Set the background colour and text colour of the email login button using RGB,HSL,Hex or the eyedropper tool.

Choose between rounded (default) or rectangular buttons, by toggling the slider

Step 9: Alignment

Choose the alignment of the call to action text and login options. By default, they adjust near the middle of the screen. Enabling 'Align Main Content to Bottom' moves these elements to the bottom.

Step 10: Form Customization

Set the background color and text color of the form. Preview by clicking the 'Use your email' button.

Step 11: Font Customization

Customize fonts for the Body and Headers. Choose from a list of fonts or upload custom fonts under Configure WiFi > Assets.

Step 12: Content Images (Optional)

Add content images above login methods, below the 'Use your email' button, and at the bottom of the page. Images should be around 400x400px, in jpg, png, or gif format.

Step 13: Preview the journey

Finally, preview the journey to ensure the page appears as intended. You can also send it to your colleagues for their review by clicking the ‘share preview’ button and copying the link provided.