Construye tus páginas en WordPress con Elementor Page Builder

Si has pasado horas y horas rebanándote los sesos para recrear en tu web ese diseño tan de moda últimamente que haz ojeado en otras webs (sólo para inspiración, claro está 😉 ), pero no encuentras las herramientas en WordPress para hacerlo, te presento a: Elementor Page Builder.

Con este plugin podrás diseñar y personalizar tus páginas en WordPress saliéndote del diseño general de tu tema sin que tengas que escribir una sola línea de código.

No te pierdas este artículo, donde te muestro los fundamentos de este plugin. La imaginación será tu límite.

¿Para qué quiero a Elementor Page Builder?

Es muy posible que te preguntes: ¿Para qué quiero yo hacer páginas personalizadas?, ¡Para eso no pasé horas seleccionando un tema en WordPress!, la respuesta es sencilla: aunque tengas un diseño general que se establece en el tema de WordPress, es casi seguro que quieras hacer páginas que se salgan de ese esquema.

Un ejemplo de esto es mi web. Todas las entradas de mi blog (donde estas ahora ), son consistentes en el diseño, lo cual le da homogeneidad cuando lo lees, pero si te fijas en mi página principal, observarás que tiene un diseño muy distinto, donde los bloques y el uso del ancho de la pantalla predominan.

Esto se hace por múltiples razones, en mi caso porque quiero ofrecer mis servicios en la entrada de mi web y ese diseño en particular denominada Pagina de aterrizaje o por su palabra más común: Landing Page, favorece esa actividad. Se olvida de elementos distractores y se enfoca en lo que quiero ofrecer.

Igual pasa con la página Sobre mí.

Con este ultimo serian son tres diseños diferentes en un solo sitio web. Pueden existir cuantos quieras en tu estrategia de posicionamiento y ventas.

Para hacerlas sin este plugin necesitarías tener templates específicos, echar mano de código CSS, HTML, Javascript; por poner algunos poco ejemplos.

Para hacer más sencilla esta tarea se creó Elementor Page Builder. Es un plugin que cuenta con herramientas de diseño web para hacer las páginas personalizadas según tus deseos, y sin necesidad de una sola línea de código. ¡Ha!, se me olvidaba: es gratuito 😎 .

Por supuesto que no es el único Page Builder que existe en la actualidad. Por citar algunos de ellos: Page Builder by SiteOrigin, Thrive Content Builder, Beaver Builder, Live Composer.

Ventajas de Elementor

1. Es gratuito: la versión básica que cuenta con la mayoría de las funcionalidades no te costara nada. Tiene una versión de pago que agrega opciones adicionales. Tú decides.
   La mayoría de los mejores editores son de pago; por fin conseguí tener lo mejor sin tener que desembolsar nada.

2. Rápido: su código en muy limpio, con lo que consigues tiempos de carga cortos en tus paginas personalizadas.
3. Arrastras y sueltas: cuenta con una interfaz simple donde solo tomas los elementos que desees, los arrastras al editor y listo.
4. Muchos widgets: los elementos fundamentales que se usan en el diseño web actual están presentes: botones, iconos, divisores, bloques, testimonios, vídeos, etc.
5. Editor en tiempo real: sin necesidad de esperar para ver cómo vas avanzando en tus creaciones; todos los cambios los observas sobre la marcha.
6. Multidiomas: está traducido a más de 10 idiomas. Por supuesto, está en español.

[clickToTweet tweet=”Elementor Page Builder tiene pocos meses en WordPress, pero ya tiene más de 40.000 instalaciones activas” quote=”Elementor Page Builder tiene pocos meses en WordPress, pero ya tiene más de 40.000 instalaciones activas”]

Ajuste de Elementor

Puedes descargar Elementor Page Builder desde este ➡ enlace e instarlo en Wordpres. También puedes hacerlo directamente en el backend desde el menú izquierdo: Plugins > Anadir nuevo, introduciendo “Elementor” desde el buscador de la herramienta.

No olvides activarlo al finalizar la instalación.

Para ajustar el plugin en sus opciones básicas vamos a: Elementor > Ajustes, en el menú izquierdo.

Encontrarás varias opciones disponibles, las cuales seleccionarás según tus necesidades.

Te recomiendo selecciones la casilla Páginas en los Tipos de entradas, ya que la opción Entradas corresponde a las páginas del blog, el cual por lo general es cronológico y cuyo diseño debe ser homogéneo.

Puedes restringir quien hace uso de este plugin, de acuerdo a los usuarios que tengas habilitados en tu WordPress en Roles excluidos.

Si vas a delimitar el ancho de la página en Elementor, coloca el valor en pixeles en el campo Ancho del contenido. Déjalo en blanco para que use todo el espacio disponible.

Este valor depende mucho de cómo este configurado el tema que uses en WordPress en cuanto al ancho de página. Es recomendable tener una plantilla full width como esta (si es que tu tema no cuenta con una) para cuando quieras un lienzo en blanco sobre el que trabajar.

Creando tus páginas personalizadas

El plugin trabaja directamente en el editor de WordPress. Basta con que crees una nueva página o entrada (de acuerdo a tus ajustes) y hagas clic al botón Editar con Elementor.

Esto nos llevará al editor de Elementor, donde encontraremos todas las herramientas para construir nuestras páginas.

Interfaz

Elementor cuenta con una interfaz bastante simple: los widgets de diseño a la izquierda junto con los ajustes, la vista de cambios en la página en tiempo real se ubica a la derecha.

1. Widgets: aquí están ubicados los diferentes agregados de diseño con que cuenta el plugin, tanto los nativos de WordPress como de Elementor. En WordPress.org encontrarás adicionales, como este.
2. Vista de página: muestra los cambios en tiempo real que realices al diseño web de acuerdo a los widgets que vallas colocando. Si haces clic al botón Agregar nueva sección tendrás acceso a definir las secciones que a su vez contienen columnas. Con Añadir plantilla, podrás escoger entre una variedad de páginas preconfiguradas.
3. Ajustes globales: todo lo que afecta la configuración global de Elementor lo tienes disponible en este apartado: colores, fuentes, ajustes varios.
4. Salir: tendrás una vista previa de cómo irá quedando tu diseño en el botón Ver Página, así como salir del plugin y volver al editor de WordPress con el botón Ir al escritorio.
5. Modo adaptable: si quieres observar como quedaría la página en distintos dispositivos como el celular o tableta, en esta opción podrás hacerlo.
6. Plantillas: otra manera de acceder a las plantillas preconfiguradas del Elementor, así como guardar el diseño actual en la biblioteca.
7. Guardar: como su nombre lo dice, no pierdas tus cambios, guárdalos con este botón 😆 .

Arrastrar y soltar

Para comenzar a crear, solo arrastra desde el menú de widgets a la izquierda dentro de las secciones que hayas creado.

En la esquina superior derecha, tendrás la edición de cada widget, así como duplicarlo y quitarlo. Cuando lo edites, las opciones disponibles son visibles en la pantalla de la izquierda. Haz clic en cualquier espacio fuera de la sección para tener acceso nuevamente a todos los widgets.

Las secciones ocupan todo el espacio disponible por defecto, mientras que las columnas son las divisiones dentro de las secciones. Las secciones se apilan una debajo de la otra.

Puedes ajustar el tamaño de las columnas con el ratón. Es un proceso intuitivo y muy sencillo.

Ojea las opciones disponibles dentro de cada widget, así como las pestañas de Estilo y Avanzado para ajustes como el color, tipografía, bordes, márgenes, entre muchas otras. Las opciones de personalización son variadas.

Para finalizar

Elementor Page Builder es una de los plugin estrella de WordPress en la actualidad en el segmento de creadores de páginas. Les ha pasado por encima a antigüas vacas sagradas como el Page Builder by SiteOrigin 😀 . Se nota que está muy bien hecho y la dedicación que le han puesto sus creadores. No debería faltar en tu WordPress.

Bueno hasta aquí nos trajo la corriente, espero sea de ayuda este artículo y a comentar se ha dicho.