Elementor Page Builder: Visión General

por | diciembre 29, 2019

elementor destacada

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.

elementor-instalacion

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.

menu elementor

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ñadir pagina con elementor

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.

elementor escritorio

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.

elementor opciones generales

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.

elementor tipos de widgets

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

elementor-barra-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

elementor-ocultar-panel

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

elementor añadir widget

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».

elementor-navigator

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.

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 4.7)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *