RG -1- Section based Registration Page

Summary:
This article provides a "technique" for easily building a Registration Page for those with little experience. It involves setting a header image that spans the width of the page (fixed width), adding text to various sections, and adjusting margins to position elements as desired.

Follow this steps:

1. Prepare a Header image

We recommend a Header image width of 1920px. The image's height is up to you. The reason for a 1920px width image is to keep the best quality in Retina and 4K displays.

Feel free to download the image below as a sample Header image (right-click over the image and click on "Save image as")

2. Access the Registration Page builder of a new Access Link using the "Classic" template:

• Enter Event management > Access Links 
• Click onto add a new Access Link  
• Click on the Page Builder tab
• Choose the "Classic" template and click on Edit in Page Builder

Once you're in, you will see an unformatted default page.

On your left side, you'll find the page-structure builder organised into 3 categories; Design, Texts and Images. Each one unfolds into page sections.

3. Prepare the Header section

The Header section can be prepared in different ways. It allows you to upload several logos, text, and a background image. But let's stick to the most straightforward way, as promised.

3.1 Upload your Header Background Image

Select the Images tab, unfold the Header section and drag your header image to the Background container

3.2 Adjust the Header Section Height so that the background image is fully visible

In the Design tab, expand the Header section and set the Header Height to a value that matches the image's height. You can adjust this value through trial and error until you find the right fit. (As a rule of thumb, if your header image is 1920 pixels in width, divide the image height by 2 to determine the appropriate height value to use.)

3.3 Hide non-used elements

Select the Design tab, unfold the Header section and uncheck all the unused sections (Logo left, Logo right and Header text)

4.- Write and format Text-based sections

4.1 Hide any section you do not plan to use

For instance, select the Design tab, unfold the SubTitle section and uncheck the whole section.

Repeat the latter for any section you're not going to use.

4.2 Select the sections you want to use and write and give some formatting to the corresponding texts

Select the Texts tab, unfold the Title section, paste the content you want there and centre the text.

Unfold the Center content block section and type or paste your contents.

5.- Adjust Margins and other Design settings to make it look great!

Lastly, you can adjust margins, form values and, for example, each section's background colour to make it look better

5.1 Adjust Title Margins

Adjust the Top margin of the Center content block section to 24px

5.2 Adjust some Form Values

In our example, we have removed the Background colour of the form and set a different Field Caption color and different Button styles Background colours.

5.3 Add a background colour to the Title section and a different colour to the centre section

Select the Design tab, unfold each of the sections and choose a Background colour

This is what the final page looks like:

About the Page builder interface:
The Design tab allows you to enable or disable sections, elements within sections, and configure colors, margins, and paddings.
The Texts tab enables you to write and format text.
The Images tab allows you to upload backgrounds and logos for each section.