Cómo crear una atractiva página Acerca de para el sitio web de su cartera con Divi

Producto(s) final(es) de hoy: dos variantes de diseño de página Acerca de/Contacto

Para mí, una página no necesita ser compleja, difícil de construir o llamativa para ser efectiva. De hecho, en la mayoría de los casos, esas cosas probablemente funcionarán en su contra. Es por eso que para nuestra página conjunta sobre/contacto quería mantener el diseño extremadamente simple y en línea con nuestra estética mínima.

Tenemos una propaganda sobre el artista y un formulario de contacto para consultas de reservas. Y eso es. La única diferencia entre las dos variantes es la ubicación de esos dos elementos. En la primera variante, deberá desplazarse hacia abajo para completar el formulario de contacto y enviarlo. En el segundo, todo está «en la mitad superior de la página» y se puede acceder a él tan pronto como ingresa a la página.

En las secciones a continuación, lo guiaré a través de cómo creé cada uno (y las diferencias sutiles entre ellos).

Cómo crear una atractiva página Acerca de para el sitio web de su cartera con Divi

Suscríbete a nuestro canal de Youtube

Acerca de/Diseño de página de contacto 1

Para crear la primera variante de diseño de nuestra página acerca de/contacto, vaya a la página que creó para ella en nuestro primer tutorial. Si ya tiene el pie de página global que creamos, se verá así.

Habilite el generador visual y agregue una nueva sección estándar con una fila y una columna.

Abre la configuración de la sección azul y elige una imagen de fondo. El mío mide 1920 px de ancho por 1300 px de alto.

Una vez que haya guardado eso, haga clic en el botón gris Agregar módulo en el medio de su fila. Agregue un módulo de texto, establezca el color del texto en claro y coloque su nombre en el área de contenido. Luego agregue un módulo divisor debajo de él. Establezca el color en blanco, la visibilidad en «mostrar divisor» y la altura en 2.

Ahora agregue otra fila, pero esta vez con dos columnas. Agregue un módulo de texto y coloque el primer bit de su texto sobre allí. Agregue un módulo de texto final en la segunda columna a la derecha y termine su texto sobre allí.

Ahora agregue una nueva fila con una sola columna y agregue el módulo de formulario de contacto. Ahora todos sus elementos de diseño están en la página. Es hora de volver y comenzar a diseñar las cosas.

Configuración del módulo de texto de nombre

Abra la configuración de diseño para el módulo de texto en el que se encuentra su nombre y realice los siguientes ajustes.

Configuración general:

• Color del texto: Claro
• Orientación del texto: Izquierda

Configuración de diseño:

• Fuente de texto: Luz Roboto; Todo en mayúsculas (TT).
• Tamaño de fuente de texto: 34

CSS personalizado:

Debajo del elemento principal más allá de la siguiente línea de css.

Guardar y Salir.

Configuración de la fila restante

En la fila del medio que contiene su «texto sobre», abra la configuración de la fila y establezca el valor de relleno personalizado superior en 20px. Establezca todos los demás valores de relleno personalizados en 0px. Guardar y cerrar.

En la configuración de fila para la fila inferior, establezca todos los valores de relleno personalizados en 0px. Guardar y cerrar.

Configuración del módulo de formulario de contacto

En la pestaña general, agregue dos elementos nuevos; ambos campos de entrada. Etiquete el primero como «Proyecto» y el segundo como «Presupuesto». Puede optar por convertirlos en campos obligatorios o no, según sus preferencias, pero para que coincidan con este diseño, deberá configurar el interruptor Hacer ancho completo en «No».

También en la pestaña general, cambie la opción Mostrar Captcha a «No». Y rellene los campos restantes según su preferencia. Me gustó la frase «Consultas de reserva» para el título, pero puedes elegir lo que quieras.

Pasando a la pestaña Diseño, realice los siguientes cambios:

• Fuente del título: Roboto Light; Todo en mayúsculas (TT).
• Tamaño de fuente de texto: 34
• Tamaño del texto del botón: 16
• Radio del borde del botón: 1px
• Fuente del botón: Open Sans; Negrita (B).
• Icono de botón: Cámara

Finalmente, en la pestaña css personalizado, pegue el siguiente css en el cuadro «Título de contacto»:

Guarde todo y salga del constructor visual. Su resultado final se verá así.

Acerca de/Diseño de página de contacto 2

Dado que todos nuestros elementos de diseño ya se han creado, vamos a reorganizar más o menos las cosas para esta variante de diseño. El primer paso es habilitar el editor visual y duplicar el primer diseño que acabamos de crear. El duplicado aparecerá debajo de él. Una vez que haya sucedido, deshabilite nuestro primer diseño haciendo clic derecho en la configuración de la sección y deshabilitándolo en todos los dispositivos.

Desplácese hasta la parte inferior del diseño existente y cree una nueva fila con dos columnas.

Arrastra el módulo del formulario de contacto a la columna de la derecha. Luego arrastre el módulo de texto del nombre, el divisor blanco y el módulo de texto del lado izquierdo a la columna izquierda de la nueva fila.

A continuación, elimine las dos filas superiores y abra la configuración del módulo del formulario de contacto. En la pestaña css, pegue este código ajustado en el cuadro «Título de contacto».

Guarde y salga de la configuración del módulo. El paso final es agregar una nueva fila inferior con una sola columna. Agregue un módulo divisor invisible con 350 px de altura. Guarde todo y salga del constructor visual. Su resultado final debe parecerse a la imagen de abajo.

Mañana: Comprobación de la eficacia de su cartera con el sistema de pruebas A/B de Divi Divi Leads

En el post de mañana te mostraré cómo realizar una serie de tests A/B que mejorarán el rendimiento de tu cartera mostrándote de forma concluyente qué funciona y qué no. Incluso si no ha seguido esta miniserie hasta ahora, la publicación de mañana le mostrará cómo pensar y configurar pruebas A/B para cualquier sitio en el que esté trabajando actualmente.

¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!