Primeros pasos con la maquetación en Elementor y WPBakery

En lecciones anteriores, comenzamos a trabajar con la maquetación de nuestro sitio web usando Elementor y WPBakery, los dos maquetadores visuales más populares en WordPress. En esta lección, vamos a adentrarnos en el uso de imágenes de fondo, edición de texto y alineación, con el fin de igualar un diseño de referencia y, al mismo tiempo, aprender cómo estos maquetadores nos permiten ajustar cada elemento visualmente.

TIP: Recordad siempre revisar los elementos utilizando el inspector de elementos de vuestro navegador. Es una herramienta invaluable para entender cómo se organiza el código en el front-end y ajustar detalles específicos.

Añadiendo imágenes de fondo

El primer paso es configurar una imagen de fondo en ambas plataformas. Lo que haremos será descargar la imagen de fondo y subirla tanto en Elementor como en WPBakery.

• En Elementor: Navegamos a Estilos > Seleccionar imagen. Subimos la imagen, seleccionamos tamaño completo, la alineamos a la izquierda, marcamos no repetir y ajustamos el tamaño en contener. Esto dará como resultado una imagen de fondo bien posicionada y alineada.
• En WPBakery: Seleccionamos Simple Background Image, subimos la imagen, ajustamos no repeat, contain, y center left en alineación. Actualizamos y previsualizamos para ver la imagen correctamente posicionada.

Ajuste de textos y estilos

Una vez configurado el fondo, nos centramos en los textos. Los maquetadores visuales nos permiten modificar fácilmente el contenido, aplicando estilos personalizados como colores, tipografía y alineaciones.

Aplicando etiquetas y estilos personalizados en Elementor

En Elementor, añadimos etiquetas span para estilizar partes del texto, por ejemplo, en áreas destacadas como títulos o subtítulos. Así, en Estilos, podemos seleccionar la tipografía, color y tamaño específicos. Utilizando el inspector de elementos, identificamos propiedades CSS adicionales, como el tamaño (50px) y el alto de línea (62px) para replicar los valores en Elementor.

Configurando estilos en WPBakery

En WPBakery, seguimos un proceso similar. Aquí, añadimos un Heading y configuramos el color en blanco. Utilizamos opciones avanzadas para añadir etiquetas span y personalizar las sublíneas. Para aplicar un efecto de subrayado en textos específicos, creamos una clase personalizada en CSS para lograr el estilo deseado.

Creando clases personalizadas

En ambas plataformas, a veces es útil crear una clase CSS que permita reutilizar estilos en varios elementos. Por ejemplo, podemos definir una clase para aplicar un color específico a cualquier texto destacado. Solo necesitamos añadir la clase a los elementos correspondientes para que compartan el mismo estilo.

TIP: Para evitar que los cambios de estilo afecten a otras partes de la web, utilizad clases específicas y probad siempre en vista previa antes de publicar los cambios.

Gestionando errores comunes

En el diseño web, es común encontrar problemas técnicos o incompatibilidades entre plataformas. Como hemos visto, a veces los estilos no se aplican correctamente o se eliminan en ciertas versiones de WPBakery. Es importante no desanimarse y revisar el código con el inspector de elementos para identificar cualquier problema.

En este curso, no editamos los errores; los dejamos visibles para que podáis aprender a abordarlos en tiempo real. Esto permite entender cómo resolver incidencias al momento, algo esencial en el trabajo diario de un diseñador web.

Conclusión y siguiente paso

Hemos cubierto los conceptos básicos para trabajar con imágenes de fondo, textos y clases personalizadas en Elementor y WPBakery. En las próximas lecciones, avanzaremos en la maquetación y seguiremos resolviendo los problemas que puedan surgir, logrando replicar el diseño de referencia con precisión.