Alineando Diseños entre Elementor y WPBakery
En esta lección vamos a continuar donde lo dejamos ayer, ajustando nuestros diseños en Elementor y WPBakery para que ambos se parezcan al ejemplo que estamos siguiendo. Este proceso nos permitirá conocer en profundidad las herramientas y capacidades de cada maquetador, igualando el aspecto de un sitio web a través de ambos.
Configuración de la página de inicio y enlaces permanentes
Lo primero que haremos es configurar la página que estamos maquetando como página de inicio. Para ello:
- Ve a Ajustes > Lectura y selecciona la página de inicio que estamos desarrollando como la principal del sitio web.
- Dirígete a Ajustes > Enlaces permanentes y selecciona la opción de nombre de entrada, la cual es óptima para el SEO. Si no contamos con un estudio SEO específico, esta suele ser la configuración más adecuada.
Añadiendo Elementos Visuales
Una vez configurada la página, pasaremos a revisar el contenido y elementos que hemos añadido. En ambos maquetadores hemos incorporado botones, enlaces de texto y cajas superpuestas al diseño. A continuación, te explico cómo hemos logrado esto en cada uno:
Elementos en WPBakery
- Para el botón principal, hemos elegido un estilo clásico redondeado y lo hemos alineado en línea, lo que permite mantenerlo en el mismo nivel que otros elementos.
- Le hemos añadido la clase negrita para que el texto del botón esté en negrita. Esta clase transforma cualquier texto al que se le aplique en bold.
- El fondo del botón se ha configurado como transparente, y mediante la clase personalizada transparente, el fondo del botón permanece sin color y el texto se muestra en blanco, con un font-weight en negrita.
- Para el botón de reproducción (play), hemos usado HTML y copiado el código del ejemplo que estamos emulando, añadiendo las clases CSS necesarias para lograr un aspecto idéntico.
Elementos en Elementor
En Elementor, hemos utilizado un grid en tres columnas para replicar la disposición de los elementos. Este grid nos permite:
- Configurar la primera columna como el doble de tamaño de las otras dos, para ubicar en ella el botón principal.
- Aplicar un fondo degradado en el botón principal, logrando un aspecto visual similar al del sitio base.
- Al igual que en WPBakery, hemos añadido márgenes negativos para superponer la fila de tres columnas con la fila principal, creando ese efecto visual en el diseño.
Clonación de Elementos para Agilizar el Trabajo
Una técnica que agiliza mucho el trabajo en ambos maquetadores es la clonación de elementos. Esto nos permite crear una primera caja o columna con los valores, estilo y color adecuados, y luego duplicarla, trasladando esta copia al lugar deseado. Una vez ubicada, solo hay que cambiar los textos de cada una para que sean únicos, sin necesidad de rehacer cada ajuste desde cero.
Añadiendo Estilos CSS Personalizados
Finalmente, hemos utilizado márgenes negativos para generar el efecto de superposición de elementos. Este ajuste de margen superior negativo permite que una fila o contenedor se posicione encima de otra fila anterior, aportando dinamismo visual al diseño.
Resumen
Con estos ajustes, hemos logrado alinear bastante el diseño en Elementor y WPBakery, consiguiendo un resultado similar sin tener que clonar los elementos de forma idéntica. Esto nos permite explorar las posibilidades de ambos maquetadores y mejorar nuestras habilidades en diseño web.
En la próxima lección, vamos a trabajar en la cabecera del sitio. Esta cabecera no forma parte de ninguna plantilla y ha sido desarrollada con CSS, por lo que en esa lección veremos cómo crear y aplicar estilos CSS personalizados para cualquier elemento. ¡Nos vemos en la siguiente lección!