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