Primeros pasos con Elementor y WPBakery
Iniciar el diseño visual de una página web con Elementor o WPBakery es una tarea emocionante que nos permite materializar las ideas de forma rápida y sencilla. En esta lección, aprenderás cómo configurar cada maquetador para evitar interferencias con el editor de bloques predeterminado de WordPress (Gutenberg) y comenzar a diseñar con un flujo de trabajo limpio y sin interrupciones.
Configuración inicial: Desactivando Gutenberg
Al añadir una nueva página en WordPress, por defecto se abre el editor Gutenberg, lo cual puede ser molesto si queremos trabajar directamente con Elementor o WPBakery. Para evitar esto, podemos desactivar Gutenberg de dos formas, dependiendo del maquetador que estés utilizando.
OJO: Si desactivas Gutenberg, todas las nuevas páginas que crees se abrirán directamente con el maquetador visual que elijas, sin tener que realizar pasos adicionales. Esto mejora el flujo de trabajo y ahorra tiempo.
1. Configuración en WPBakery
WPBakery nos permite desactivar Gutenberg desde su propio panel de configuración:
Paso 1: Dirígete a la configuración general de WPBakery.
Paso 2: Marca la opción «Deshabilitar Gutenberg» y guarda los cambios.
Una vez completados estos pasos, al crear nuevas páginas, WPBakery será el editor predeterminado, sin necesidad de hacer cambios adicionales en el archivo de funciones de WordPress.
2. Configuración en Elementor
Para Elementor, el proceso es un poco diferente, ya que no incluye una opción para desactivar Gutenberg directamente desde el panel. En su lugar, añadiremos una función al archivo de funciones del tema (functions.php) para que WordPress utilice únicamente Elementor como editor visual en todas las nuevas páginas.
Paso a paso: Accede al archivo functions.php de tu tema hijo, y añade la siguiente función en la última línea:
add_filter(‘use_block_editor_for_post’, ‘__return_false’);
Este código desactiva el editor de bloques de WordPress en las páginas y publicaciones, permitiendo que Elementor se cargue automáticamente al crear una nueva página.
TIP: Es recomendable siempre trabajar con un Child Theme para evitar perder esta configuración al actualizar el tema principal. Puedes crear un tema hijo fácilmente, lo cual te permite realizar modificaciones sin riesgos.
Activando tu página con el maquetador visual
Ahora que tenemos Gutenberg desactivado, ya estamos listos para comenzar a trabajar con cada maquetador visual sin interrupciones. Tanto Elementor como WPBakery permiten una edición en tiempo real, donde podemos ver cada cambio reflejado de forma inmediata. Esto facilita el trabajo y ofrece una experiencia mucho más fluida.
1. Crear una estructura básica de página
Para empezar a maquetar en ambos editores, añade una página nueva en WordPress y selecciona el maquetador con el que deseas trabajar. Al abrir Elementor o WPBakery, selecciona una estructura base, como un contenedor de dos columnas, perfecto para añadir contenido visual equilibrado y atractivo.
«Dominar la estructura inicial de una página es clave para lograr un diseño claro y coherente desde el primer paso.» – Leonardo Reyes
2. Añadiendo contenido inicial
En la estructura de dos columnas que creaste, puedes añadir texto e imágenes. En Elementor, simplemente arrastra el bloque de «Texto» o «Imagen» a las columnas deseadas. En WPBakery, añade un «Bloque de texto» o «Imagen» seleccionando el icono “+” en cada columna. Ambas herramientas permiten añadir elementos visuales y textos de forma sencilla, con opciones de personalización completas para alineación, espaciado y estilo.
Con esta configuración inicial, estamos listos para crear páginas con el maquetador de nuestra preferencia de manera rápida y eficiente. Evitar el editor de bloques de WordPress y trabajar directamente con Elementor o WPBakery te permite agilizar tu flujo de trabajo y centrarte en la creatividad y el diseño, manteniendo un control completo sobre la estética del proyecto.
TIP: Recuerda experimentar con las opciones de estilo, colores y fuentes para personalizar la apariencia de cada sección y reflejar la identidad de tu cliente.
¡Listo! Ahora que has configurado todo, en la próxima lección nos adentraremos en los elementos específicos de diseño, profundizando en las opciones de cada maquetador para que saques el máximo provecho de cada herramienta.