Si te sientes frustado a la hora de crear tus páginas personalizadas en WordPress, debes probar Elementor Page Builder. Con este plugin, podemos decir literalmente, que la maquetación de una página web se ha convertido en un juego de niños.
Recuerdo los tiempos, en los que teníamos que crear los sitios web desde cero, sin ayuda de ningún Gestor de Contenidos, todo a pelo, picando y picando código HTML. Luego llegaron los CMS, como WordPress, Joomla, Drupal, etc., que nos hacían la vida mucho más fácil.
Después, en el caso de WordPress, vinieron los plugins para diseñar visualmente las páginas. El problema que tenían, es que la forma de trabajar era un poco engorrosa. Tenías que guardar la página en el backend, para después actualizarla en el frontend, es decir, no se trabajaba en tiempo real, con la consiguiente pérdida de tiempo.
Ahora con Elementor todo ha cambiado radicalmente. Diseñar páginas con componentes llamativos visualmente es tremendamente sencillo y rápido, porque se trabaja en tiempo real.
Otra cuestión a tener muy en cuenta, es que existen otros plugins que complementan a Elementor. No sólo tenemos disponibles los controles de la versión gratuita (o la versión Premium), sino que existen otras empresas que están desarrollando extensiones para éste fantástico plugin, con los que podemos hacer cualquier cosa que se nos pueda ocurrir.
Instalación
Como siempre, y siguiendo la rutina habitual, nos dirigimos a «Plugins > Añadir nuevo» y colocamos el texto «Elementor». Aquí tenemos la vista previa del plugin.
Podéis observar la cantidad de instalaciones activas que tiene a la hora de hacer la captura de la imagen, es una pasada. Una vez activado, instala todas las opciones de configuración en el menú principal de WordPress.
Como Diseñar Páginas con Elementor Page Builder
Para crear páginas profesionales con Elementor, lo más importante es aprender cual es el proceso para diseñarlas con este plugin. Lo primero que haremos será crear una página. Nos vamos a «Páginas > Añadir nueva» y le pondremos como nombre «Elementor«, o el nombre que tu prefieras.
A continuación, vamos a acceder al editor haciendo clic en el botón «Editar con Elementor». Después de unos segundos, aparecerá el editor como se muestra a continuación.
Vamos a ver las partes de las que se compone el editor visual de Elementor Page Builder.
Panel de Herramientas
En la parte izquierda del editor, tenemos el componente más importante de Elementor. En este panel de herramientas, están disponibles la mayor parte de las acciones que vamos a poder realizar.
Configuración General
En la parte superior, y representado por el icono de «tres líneas», podremos acceder a las configuraciones globales o generales de Elementor.
En estas opciones, se puede establecer la configuración de fuentes, colores, ajustes de escritorio, preferencias, etc.
Cuadro de Widgets
A la derecha de la barra de Elementor, está el icono que nos muestra los componentes que tenemos disponibles para insertar en las páginas. Si hacemos clic en él, veremos clasificados por tipos los widgets que se pueden utilizar. Como son bastantes, en la parte superior disponemos de una caja de texto en la que podemos filtrar cualquier componente introduciendo parte de su nombre.
Dependiendo de si tenemos la versión gratuita o premium, o si hemos instalado algunos componentes adicionales, nos aparecerán más o menos tipos de controles. En este caso, en la imagen podemos ver los tipos de widgets que hay en la versión gratuita, sin ningún tipo de extensión adicional.
Barra de Herramientas Inferior
En la parte inferior, nos encontramos con un grupo de opciones que nos permiten hacer lo siguiente:
- Ajustes. Sirve para configurar cualquier aspecto de la página.
- Navigator. Nos muestra una ventana con el árbol jerárquico de componentes que vayamos colocando en la página.
- Historial. Lista de todos los cambios o revisiones que hemos realizado.
- Modo adaptable. Permite visualizar el aspecto que tendrá la página en diferentes dispositivos (ordenador, tabletas o móviles).
- Previsualizar cambios. Se abre una nueva ventana con la vista previa de la página en cuestión.
- Publicar. Pues eso, publica la página.
- Guardar como borrador. Más de lo mismo.
- Guardar como plantilla. Esta opción es muy útil, ya que la página la podemos guardar con un nombre, para reutilizarla posteriormente en otro diseño.
Ocultar Panel / Vista Previa Rápida
Esta opción es muy simple pero muy importante. En lugar de estar actualizando la página y previsualizándola para ver el resultado, haciendo clic en este botón, tenemos lista al instante como quedaría con los últimos cambios que hemos realizado, con el consiguiente ahorro en el tiempo de desarrollo.
Diseño de Página
En la parte derecha es donde vamos a realizar todo el trabajo de diseño. Aquí colocaremos los componentes que tenga nuestra página. Simplemente hay que elegir cualquier control y arrastrarlo al interior del recuadro.
Proceso de Diseño con Elementor Page Builder
Lo más importante a la hora de crear páginas con Elementor, es entender cual es la estructura de una página. La estructura que sigue elementor es tremendamente simple, pero muy efectiva. Una página se divide en secciones. Cada sección ocupa el ancho de la página. Dentro de cada sección podemos insertar columnas y también secciones interiores.
En el interior de las columnas es donde colocaremos los componentes que deseemos. Y ya está, así de simple. Luego, dependiendo del valor de algunas propiedades, los componentes se ajustarán de diferentes formas, pero la manera de maquetar una página es así de sencilla, «Secciones > Columnas > Componentes».
Conclusión
Como habéis visto, Elementor Page Builder, es un plugin imprescindible hoy en dia, si quieres maquetar tus páginas en WordPress de una forma profesional. No hemos entrado en detalles de configuración, sino simplemente el artículo pretende que te hagas una idea general de todo lo que puedes conseguir con este plugin.
Investiga, práctica y comete errores, es la mejor forma de aprender.