RG -1- Registration Gate basada en Secciones

Resumen:
Este artículo detalla una "técnica" para crear fácilmente una página de registro cuando tienes poca experiencia o simplemente quieres una técnica rápida. Se basa en configurar una imagen de Cabecera que abarque de izquierda a derecha la página (ancho fijo), agregar textos a las diferentes secciones proporcionadas y jugar con los márgenes para colocar los elementos como desees..

Los pasos a realizar son:

1. Prepara una imagen de cabecera (Header image)

Para esta técnica, recomendamos un ancho de imagen de encabezado de 1920px. La altura de la imagen depende de ti. 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 (Header image) (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":

• Accede a Event management > Access Links 
• Haz clic entpara añadir un nuevo link de acceso (Access Link)  
• Haz clic sobre la pestaña Page Builder 
• Elige la plantilla "Classic" y haz clic en el botén Edit in Page Builder

Una vez que estés dentro, verás una página predeterminada sin formato.

A tu lado izquierdo, encontrarás el generador de estructura de página organizado en 3 categorías; Design (diseño), Texts (textos) y Images (Imágenes). Cada uno de ellos se despliega en secciones de página..

3. Prepara la sección de encabezado (Header) 

La sección de encabezado (Header), se puede preparar de diferentes maneras. Te permitirá cargar varios logotipos, texto y una imagen de fondo... Pero sigamos con la forma más sencilla, como prometimos.

3.1 Carga la imagen de fondo del encabezado (Header Background)

Selecciona la pestaña Images (Imágenes), despliega la sección Header (Cabecera) y arrastra tu imagen de encabezado al contenedor Background  (Imágen de fondo)

3.2 Ajusta la altura de la sección del encabezado (Header section height)  para que la imagen de fondo sea completamente visible:

Selecciona la pestaña Design (Diseño), despliega la sección Header (Encabezado) y establece la Heather Height (Altura del encabezado)  en un valor que se ajuste a la altura de la imagen. Puedes iterar varias veces hasta que encuentres el valor correcto.

(Si tu imagen de encabezado tiene 1920 píxeles de ancho, divide la altura de la imagen entre 2 para saber la altura exacta que debes rellenar).

3.3 Oculta los elementos no utilizados:

Selecciona la pestaña Design (Diseño), despliega la sección Header (Encabezado) y desmarca todas las secciones no utilizadas, Logo left, Logo right y Header text (logotipo a la izquierda, logotipo a la derecha y texto de cabecera)

4. - Redacta y formatea las secciones basadas en texto

4.1 Oculta cualquier sección que no planees usar:

Por ejemplo, selecciona la pestaña Design (Diseño), despliega la sección Subtitle (Subtítulo) y desmarca toda la sección. Repite esto último para cualquier sección que no vayas a usar.

4.2 Selecciona las secciones que deseas utilizar y escribe, formateando a tu gusto los textos correspondientes.

Selecciona la pestaña Texts (Textos), despliega la sección Title (Título), pega el contenido que desees allí y centra el texto.

despliega la sección Center content block (Bloque de contenido central) y redacta o pega tu contenido..

5.- ¡Ajusta los márgenes y otras configuraciones de diseño para que se vea bien!

Por último, puedes ajustar los márgenes, los valores del formulario y, por ejemplo, el color de fondo de cada sección para que se vea mejor.

5.1 Ajusta los márgenes del título

Ajusta el Top Margin (margen superior) de la sección del Center content block (bloque de contenido central) a 24 px.

5.2 Ajusta algunos valores de formulario

En nuestro ejemplo, eliminamos el Background color (color de fondo)del formulario y establecemos un color del Field caption (Título del campo) diferente y tambien diferentes colores de fondo en el area de Button Style (Estilo de botón).

5.3 Agrega un color de fondo al fondo, a la sección Title (Título) y un color diferente a la sección central de la página:

Selecciona la pestaña Design (Diseño), despliega cada una de las secciones y elige un color de fondo para ellas.

Así es como debería verse página de registro una vez 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.
Baho 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