RG -2- Background-image-based Registration Page

Summary:
This article provides a "technique" for easily building a Registration Page for those with little experience. It involves uploading a background image for the entire page, placing the registration form on top of it, and using margins to position the form in the desired location.

Follow these steps:

1. Prepare a Background image

We recommend using a background image with a width of 1920px. The image's height is flexible. We typically use background images that are at least 1920px in height. Using a width of 1920px ensures the best quality on Retina and 4K displays.

You can download the image below as a sample header image for testing purposes by right-clicking on the image and selecting "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

3. Hide all sections except the Center content block

Since we're building the page using a background image and a form, it's necessary to hide any other visible sections.

In the Design tab, open a section you want to hide and uncheck the "Visible" checkbox. Repeat this step for the sections: Header, Title, Subtitle, Bottom content block, Footer and Below footer. (Do not hide the Center content block section, as it is necessary to align the form to the sides of the page. In the next step, we'll delete the sample text.)

Select the Texts tab, unfold the Center content block and delete the sampled "Lorem ipsum..." content.

4. Upload your Background to the Page section and adjust the minimum height

4.1 Upload your Background Background Image

To upload your background image, go to the Images tab, expand the Page section, and drag the background image to the Wrapper Background container.

4.2 Adjust the Page Height so that the background image is fully visible and not cut 

A practical way to do this:

• Select the Design tab, unfold the Page section
• Under the Main container area, set a Background colour (f.e. intense blue) that will help you check how the Min height value is adjusted to your background image.
• Make sure the Background image sizing strategy is set to contain

You may notice that as the image needs to be fully contained on the page, it may be resized, revealing an intense blue background on the right-hand side of the page. To prevent this, you can set a Min height value to force the image to resize.

Type a Min height value of 1000px and see what happens: (scroll down to the bottom of the page)

As we scroll down the page, we notice an intense blue background color visible at the bottom of the page. This indicates that the 1000px Min height value is too high.

To fix this, iterate a few times, checking where the increasingly narrow intense blue background color appears, either on the right-hand side or at the bottom, until it is no longer visible. After experimenting, we found that the optimal value for the sample image is 921px.

Now, we can't see any intense blue either at the page bottom or on the right-hand side.

5. Reposition and reformat the Form

Select the Design tab and unfold the Center form block section to tweak the Form's appearance.

(we will only show here a few adjustments to reposition and reformat the form)

• The Form has a default Top margin of 16px. Try increasing this value to move the form to the desired place.
• If the form is too wide or too narrow, try increasing or decreasing the Form Style Width value.
• We might want to make the Form fully or partially transparent. Play with the Form Style background colour to achieve your desired result.

And 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.