Para usar elementor en tu WordPress es muy fácil, sólo tienes que crear o editar la página que quieras y hacer clic en el botón «Editar con elementor», una vez dentro ya tienes a mano todas las opciones del editor.

Elementor page builder para WordPress cuenta con plantillas ya creadas, también puedes guardar tus diseños y aprovecharlos para otras zonas u otros sitios web mediante shortcodes o usando la opción del panel de control «mi biblioteca»

El funcionamiento es muy fácil si has trabajado con otros maquetadores, simplemente arrastra y suelta los elementos que te encuentras a la parte izquierda de forma rápida y sencilla.

En la parte central tienes el botón de agregar nueva sección donde poder insertar los widgets dentro de las columnas que elijas o usar el botón de añadir plantilla predefinidas con las que podrás crear tus diseños con una base ya creada.

Para jugar con los elementos de la izquierda, sólo tienes que arrastrar hacía esa zona central y despues manejar todas sus opciones desde el lateral.

Elementor tiene dos menús: #

Menú A: #

La parte izquierda (icono de tres lineas) muestra un menú general en el que tendrás opciones a paletas de colores, cambiar las tipografía definidas por defecto en la plantilla, ajustes de página, historial de revisiones con el que volver para atrás si te equivocas y ajustes generales.

Menú B: #

La parte de la derecha (widgets) clasifica el panel de control de Elementor con el que podrás editar cada página.

Vamos a ver esta parte (Menú B) una por una:

Lo primero que vamos a ver son las opciones que ofrece una Sección cuando la agregas (en ella luego irán incluyéndose el resto de opciones del menú B con sus respectivas opciones particulares.

3 Opciones básicas que incluye Elementor, estos widgets que vas a ver son los que vienen por defecto:

#

〉〉 Sección #

Sección es la parte principal encargada del diseño en Elementor ya que son los apartados donde se irán insertando el resto de widgets.

Cada sección la podrás duplicar, añadir una nueva o guardar como plantilla y usarla en otra parte de la web

Para ver sus opciones una vez creada sólo tienes que hacer clic en las tres lineas de la parte superior.

Se desplegarán las diferentes opciones en la parte izquierda en la que podrás:

Disposición: #

• Establecer el ancho del contenido: caja o ancho completo. Establecer espacios entre columnas
• Delimitar el alto de las mismas donde con un desplazador podrás marcar la altura deseada Posición del contenido: alto medio o bajo
• Html: opción donde podrás escoger que etiquetas quieres para una determina sección creada y establecer una estructura lógica de la web.
• Estructuras: Donde podrás elegir más redimensiones de columnas preestablecidas

Estilo: #

• Fondo: En él podras establécer una imagen, insertat un color… Capa de fondo: donde generar una opacidad para la imagen
• Borde: Eeige tipo de borde, ancho del mismo, que muestre un sombreado con distintos grosores.
• Forma del divisor: Esta opción da un efecto visual a nivel de dibujo en la columna creada (efecto olas, piramides…)
• Tipografía: podrás cambiar la tipografía independiente de las que tengas marcadas por defecto en tu plantilla. Elemento cuenta con más de 800 fuente tipos de letra de google fonts

Avanzado: #

• Margenes y rellenos: ajusta la sección a tu antojo usando los padding y ajustando los px como quieras. Puedes reajustar en automático todas a la vez o según quieras más a la derecha, izquierda etc…
• Z-index(opción que acaban de incorporar en la cual puedes establecer elementos superpuestos, es útil para destacar una caja de precios por ejemplo.
• Animaciones: Puedes establecer todo tipo de efectos en movimiento para cada sección. Id CSS: Podrás establecer un identificador par asociar a una clase CSS.
• Clases CSS: Cada sección podrá ir modificada con código css si quieres. Aunque no hace falta porque elementor te permite personalizar todo, siempre puedes acudir a el si quieres algo concreto.
• Apartado Responsive: Una de los puntos fuertes de Elementor page builder en el que podrás mejorar la versión móvil cambiando el orden, tamaños de la secciones o directamente evitando que se muestre lo que no quieres.

Custom CSS te permite ver las modificaciones que hagas en CSS sin modificar nada con intención de ver como queda o implementar los cambios que realices, además cuenta con una interesante función de autocompletado que te da diferente alternativas (está muy bien)

La manera de manejar las secciones es muy comoda y si bien en las primeras actualizaciones era algo tosco y no permitía insertarlas in situ, ahora es muy manejable pudiendo usarlas en cada campo rápidamente.

Las últimas actualizaciones del 2018, Elementor permite realizar distintas opciones con el botón derecho del ratón como copiar, duplicar, reestablecer estilos o borrar elementor, sin duda una mejora que agilizará el tiempo de diseño de nuestra web

〉〉 Columnas #

Cada apartado que vas a ir viendo tienen las mismo campos que hemos estudiado en el apartado «Sección» (disposición, estilo y avanzado) Algunos son comunes y otros modificaciones especificas; vamos a explicar cada widget en modo general para no extenderme demasiado y no repetir lo mismo.

El campo columnas es muy personalizable, vas a crear todo a tu gusto.

Cómo puedes ver en el gif de arriba, Elementor no solo te permite jugar con el ancho de las mismas(en otros web builder esto no se pude) sino que además, puedes con un clic desplazar el ancho según tu necesidad ganando en rapidez al no tener que acudir al panel para ajustar los paddings o incluir tantas columnas quieras.

Independientemente de hacerlo manual, también puedes modificar: Los espaciados desde el apartado disposición.

Dar estilos con bordes y tipografías como ya vimos para la secciones. Usar el modo avanzado para establecer margenes animaciones o css.

〉〉 Encabezado de texto #

Los encabezados son muy útiles para crear (títulos h1,h2,h3…). La principales características que ofrece son:

Poner un enlace a cada encacezado (en la última actualización han insertado la opción muy útil de poner ese enlace como nofollow)

Permite independientemente del tamaño asignado por la plantilla ajustar otro tamañ distinto a cada encabezado(h) ajustar otro tamaño distinto.

Da posibilidades de ajustar estilos con colores, o tipografías(puedes asignar sombras y efectos a las letras)

Modo avanzado: mismas opciones que ya hemos visto antes.

〉〉 Imagen #

Tan simple como arrastrar una imagen a una sección o columna y asignar unas medidas. Intenta que las medidas que escojas no superen las preestablecidas en tu worpress

Opciones:

• Enlace en imagen: inserta un enlace de tal forma que un usuario al hacer clic en la imagen vaya una página de destino o se muestre la imagen en lightbox.
• Leyenda: escribe una nota descriptiva que aparecerá al pie de la foto.
• Estilos: asigna un tamaño mediante la barra de ajustes y una opacidad.
• Animación: al pasar el ratón por encima se genera un efecto muy visual Asigna bordes, sombras y ajusta el ratio para redondear las fotografias.
• Modo avanzado: con las mismas características que ya hemos visto

〉〉 Editor de Texto #

Se trata de un editor con las mismas características y funciones que tiene el de WordPress. Es necesario cuando quieres generar textos más largos.

Podrás asignar colores y usar el modo avanzado para personalizarlo todavía un poco más con fondos, CSS, modo responsive etc…

〉〉 Vídeos #

Opción muy interesante ya que da la posibilidad de insertar la url de vídeos de Vimeo o Youtube y estarán funcionando en la columna o sección que elijas.

Características de los videos en elementor: Elección de formato: (16:9, 3:2, 4:3)

• Auto-reproducir el vídeo.
• Mostrar vídeos sugeridos al finalizar la reproducción o no Mostrar u ocultar los controles del reproductor.
• Indicar que muestre u oculte el título y acciones del reproductor. Elige el tamaño del botón de play.
• Puedes elegir una imagen de portada para el video: una opción muy útil, rápida y sencilla ya que sólo tienes que subir la imagen.
• Retoca margenes o CSS si quieres a través de la opción avanzada.

Un punto fuerte de Elementor que también incluía Forge pero nada que ver con Elementor porque este te permite mil opciones de configuración.

〉〉 Botones #

Los botones son otro punto fuerte de Elementor page builder ya que permite:

• Elegir entre varios colores según sea síntoma de información, éxito, advertencia o peligro(••••)
• Establecer un texto dentro de él.
• Asignar enlace (nueva ventana o nofollow)
• Asignar un tamaño o un icono de fontawesome.
• Jugar con los estilos en botones es muy atrativo ya que podrás elegir colores de fondo con marco, efecto hover, ratios, sombras, tipografías…
• Modo avanzado: En el que muestra las opciones de siempre, con ajustes de paddings, css, o animaciones

〉〉 Separador #

Simplemente arrastrando este widget a la zona deseada marca un separador para evitar que esté todo junto estableciendo una linea separatoria que podrás estrechar, agrandar, cambiar de color, subir o bajar a tu gusto sirviendo también para usar como subrayado de un encabezado.

〉〉 Espaciador #

Establece un espaciado con este widgets de forma rápida y comoda ya que establece un alto de padding directamente solo con un clic.

Es una opción muy simple que tiene pocas alternativas más salvo usar un efecto de movimiento.

〉〉 Google Maps #

Otros maquetadores no te dan esta opción tan sencilla, te obligan a insertar el iframe o incluso darse de alta con un Api

Con elementor sólo tienes que insertar la dirección y ya tendrás tu mapa geolocalizado.

Introduces una dirección, indicas el zoom que quieres que se muestre, el alto del mapa y si quieres que el usuario pueda hacer scroll o no y listo.

Configúralo como quieras fácilmente y tendrás tu google maps en la parte de la web que quieras.

〉〉 Icono #

Puedes elegir entre más de 400 iconos de FontAwesome. Puedes personalizarlo con:

• Formas: circular o cuadrada
• Establecer un enlace cuando se hace clic en él Alineación
• Color, tamaño o rotación Rellenos
• Efecto hover
• Fondo marco, si deben enlazar a alguna url, la alineación, el tamaño, rótalos, o aplícales una animación cuando pases el ratón por encima.

Todas las opciones del modo avanzado puedes usarlos para los iconos para conseguir el diseño que desees.