RG -2- Página de registro basada en una imagen de fondo (Background image)

Summary:
This article details a "technique" to easily build a Registration Page when you have little experience. It is based on uploading a Background image for the whole page, placing the Registration form on top of it and finally using margins to place the registration form in the desired place.

Los pasos a realizar son:

1. - Prepara una imagen de fondo

Recomendamos un ancho de imagen de fondo de 1920px. La altura de la imagen depende de ti. Normalmente comenzamos diseños con una imagen de fondo de al menos 1920px de altura. El motivo de una imagen de 1920 px de ancho es mantener la mejor calidad en pantallas Retina y 4K.

Puedes descargar la imagen a continuación como una imagen de encabezado de muestra para tu prueba (haz clic derecho sobre la imagen y clic en "Guardar imagen como").

2. - Accede al generador de la página de registro de un nuevo enlace de acceso utilizando la plantilla "Classic":

Entra em Event management > Access Links 

• Haz clic enpara añadir un nevo Access Link  
• Haz clic en la pestaña Page Builder 
• Elige la plantilla "classic" y haz clic en  el botón Edit in Page builder

3. Oculta todas las secciones excepto el bloque de contenido del Centro

Como creamos la página basada en una imagen de fondo y un formulario, debemos eliminar cualquier otra sección visible.

Selecciona la pestaña Design (Diseño), despliega una sección que desees ocultar y desmarca la casilla de verificación "Visible". Repite este paso para las secciones: Header (Encabezado), Title (Título), Subtitle (Subtítulo), Bottom content block (Bloque de contenido inferior), Footer (Pie de página) y Below Footer (debajo del pie de página).
(No hagas esto para la sección Center content block (bloque de contenido central) necesitamos que esta sección esté visible para garantizar que el formulario esté alineado a ambos lados de la página. En el siguiente paso, eliminaremos el texto de muestra)

Selecciona la pestaña Texts (Textos), despliega la sección Center content block  (center content block) y elimina el contenido de muestra "Lorem ipsum...".

4. Sube el Fondo en la sección de Página y ajusta la altura mínima

4.1  Carga tu imagen de fondo en la sección background image (Imágen de fondo).

Selecciona la pestaña Images (Imágenes), despliega la sección Page (Página) y arrastra tu imagen de fondo al contenedor del Wrapper Background (envoltorio de fondo).

4.2 Ajusta la Page Height (altura de la página) para que la imagen de fondo sea completamente visible y no se corte

Una forma práctica de hacer esto:

• Selecciona la pestaña Design (Diseño), despliega la sección Page (Página)
• En el área del Main container (Contenedor principal), establece un Background color (Color de fondo) (p. ej., azul intenso) que te ayudará a comprobar cómo se ajusta el valor de la altura mínima a tu imagen de fondo.
• Asegurate de que la Background image sizing strategy (estrategia de tamaño de la imagen de fondo) este configurada como contain (contener)

Observa, tal y como muestra nuestra imagen, debe estar completamente contenida en la página, ha cambiado de tamaño, haciendo que nuestro fondo azul intenso sea visible en el lado derecho de la página. Estableciendo un valor de Min height (Altura mínima) lo forzará a cambiar de tamaño.. 

Pon un valor Min height (Altura mínima) de 1000px y observa lo que sucede (desplázate hacia abajo hasta la parte inferior de la página)

A medida que nos desplazamos hacia abajo en la página, veremos un color de fondo azul intenso visible en la parte inferior de la página. Esto significa que el valor Min height (altura mínima) de 1000 px es demasiado grande

Repite varias veces, verificando donde aparece el color de fondo azul intenso cada vez más estrecho, ya sea en el lado derecho o en la parte inferior hasta que ya no sea visible. Nuestro valor objetivo resulta ser 921 px para la imagen de muestra.

De esta manera, ya no vemos ningún azul intenso en la parte inferior de la página o en el lado derecho.

5. 5. - Reposiciona y reformatea el formulario

Selecciona la pestaña Design (Diseño) y despliega la sección Center form block  (Bloque de formulario central) para ajustar la apariencia del formulario.

(en este ejemplo solo mostraremos algunos ajustes para reposicionar y reformatear el formulario))

• El formulario tiene un Top margin (margen superior) predeterminado de 16 px. Intenta aumentar este valor para mover el formulario al lugar que desees..
• Si el formulario es demasiado ancho o demasiado angosto, intenta aumentar o disminuir el valor Form style width  (ancho del formulario).
• Es posible que queramos que el formulario sea total o parcialmente transparente. Juega con el Form Style background colour (color de fondo del formulario) para lograr el resultado deseado.

Así es como debería verse página de registro acabada:

Acerca del generador de páginas de registro (Page builder interface):
Generalmente, bajo el tabulador Design (Diseño), se pueden habilitar o deshabilitar secciones completas, elementos dentro de una sección, and configurar colores y margenes.
Bajo el tabulador Texts (Textos), puedes escribir y dar formatos básicos a tus textos
Bajo el tabulador Images (Imágenes), puedes cargar imágenes de fondo y logos en las secciones que lo permiten