He estado trasteando con la versión gratuita de Elementor y aunque Thrive Architect sigue siendo mi maquetador favorito, reconozco que estamos frente a un plugin a tener muy en cuenta en cualquier instalación de WordPress. Veamos como utilizar Elementor.
Demos un repaso a los diferentes elementos que tenemos a nuestra disposición para maquetar nuestro contenido.
Secciones
Una vez que hacemos click en el botón "Editar con Elementor", se nos abre la ventana del maquetador, utilizando la plantilla que hayamos establecido para nuestra página o entrada.
Hacemos clic en "Agregar nueva sección" y podremos escojer entre una gran variedad de formatos tipo "Columna" para la misma
Por ejemplo, si seleccionamos 3 columnas, veremos aparecer la nueva sección. Si posicionamos el raton sobre la sección podemos modificar su aspecto, bien directamente (por ejemplo podemos modificar el ancho de las columnas arrastrando las líneas divisorias) o utilizando la barra lateral, para lo cual haremos click en el icono de edición (el primero de la barra azul).
Aunque podemos arrastrar los widgets,saltándonos este paso, en dicho caso Elementor creará una sección sin columnas. Para mí acostumbrado a la interfaz de Thrive Architect, este proceso resultó frustrante. Arrastré el widget de columnas directamente, pero no tenia la posibilidad de crear más de 2 columnas. Cosas que pasar por no leer la documentacion y guiarme solo por la intuición.
Una vez salvado este pequeño escollo, el resto resulta bastante sencillo. A partir de ese momento vamos arrastrando los widgets que queremos utilizar desde la barra lateral a la posición deseada, insertamos el contenido y ajustamos su apariencia.
Barra lateral
La barra lateral nos permite controlar eficazmente todos los aspectos de nuestra entrada o página.
Tenemos 2 pestañas "Elementos", que nos mostrará la lista de widgets disponibles y "Global". Esta es una opción premium, que nos permite utilizar widgets con una configuración global para todo el portal
Si hacemos clic en el icono de la izquierda, podemos configurar opciones globales para toda la web. Esta es una opción muy útil, ya que nos ahorra tiempo cuando de trata de dar un aspecto consistente al contenido.
Elementor nos permite utilizar la tipografía y paleta de colores de nuestro tema o establecer una propia, bien sea desde cero o eligiendo entre una gran variedad de variantes.
Las opciones globales cubren todos los aspectos visuales y elementos del contenido. Las mayoría de las opciones están perfectamente documentadas con una explicación detallada de sus funciones. Nos ahorraremos mucho tiempo al no necesitar consultar la extensa documentación disponible
Cuando hacemos clic en un widget, la barra lateral nos ofrecerá las opciones disponibles para modificarlo
Las 3 pestañas requieren poca explicación.
- Contenido - La utilizaremos para modificar el contenido (texto, imágenes, enlaces, etc). La imagen. Aquí vemos las disponibles para un encabezado. Si modifcamos el texto, veremos el editor de WordPress.
- Estilo - Modificaremos aspectos tales como alineación, colores, sombreado, tipografía y otros aspectos visuales, también dependiendo del widget
- Avanzado - Definiremos márgenes y rellenos, el fondo, los bordes y las animaciones. También podemos asignar ids y clases de css. En la versión "PRO", incluso podemos incluir css específico para ese widget. El apartado responsive, nos permitirá ocultar los elementos dependiendo del dispositivo que visualice nuestra web
Finalmente el pie de la barra lateral tiene opciones muy interesantes.
- Ajustes - Podremos cambiar el título del documento, su estado y su plantilla sin salir de Elementor
- Responsive - Simula la visualizacion en diferentes pantallas para que podamos adaptar el contenido
- Historial - Podemos desplazarnos a cualquier momento anterior del proceso de edición
- Publicar - Guarda los cambios y nos ofrece la opción de guardar como borrador o crear una platilla que tendremos disponible para no partir de cero en el futuro
Widgets disponibles
Tenemos a nuestra disposición un gran número de elementos para maquetar que comentaremos brevemente.
Columnas
Secciones, limitadas a 2 columnas, al menos en la versión gratuita.
Encabezado
Para los títulos, aunque echo de menos un mayor control sobre la tipografia como por ejemplo: resaltar palabras.
Imagen
Con un control total no solo del tamaño y la posición, sino que también incluye bordes, sombras y diferentes efectos animados al pasar el ratón sobre la imagen
Editor de texto
Pone el editor de WordPress a nuestra disposición, lo que nos permite añadir bloques de texto en cualquier sitio.
Video
Podemos incrustar un vídeos de Youtube o Vimeo, con un amplio control sobre todas las opciones de reproducción. Solo necesitamos indicar el enlace al vídeo
Botón
Podemos incorporar de una forma muy sencilla botones estilo Boostrap, permite añadir iconos al botón
Separador
Nos permite añadir una línea horizontal y adaptar su apariencia a nuestras necesidades
Google Maps
Una forma sencilla de incorporar un mapa de Google asociados a una dirección en nuestros contenidos
Espaciador
Nos permite separar nuestro contenido, sin necesidad de modificar los márgenes de los elementos
Icono
Con este elemento podemos incorporar cualquier icono de FontAwesome, controlando totalmente su visualización
Además de los elementos "simples", Elementor nos ofrece widgets combinándolos y que no solo nos ahorrarán trabajo, sino que pueden evitarnos instalar otros plugines.
Cuadro de imagen
Combina una imagen, un encabezado y un párrafo de texto. Es rápido y sencillo, pero no podemos cambiar el orden o los elementos del conjunto
Caja de icono
Es similar al cuadro de imagen, con sus mismas limitaciones.
Pestañas, acordeones, desplegables
Una forma sencilla de añadir este tipo de elementos, con numerosas opciones de personalización.
Iconos sociales
Similar al listado de iconos, permitiendo usar el color oficial de cada red o un color personalizado
Listado de iconos
Podremos hacer listas muy llamativas incorporando iconos de FontAwesome, controlando totalmente su visualización
Solo hecho de menos tener diferentes colores en los iconos
Barra lateral
Permite incorporar cualquiera de las barras laterales del tema en la posición deseada de la página
Caja de icono
Es similar al cuadro de imagen, con sus mismas limitaciones.
Ancla de menú
Permite crear una marca y genera un enlace nos llevará hasta la marca desde el menú, un botón u otro elemento
Iconos sociales
Similar al listado de iconos, permitiendo usar el color oficial de cada red o un color personalizado
Widgets de WordPress
Cualquier widget disponible en nuestra web puede ser utiizado por Elementor y ubicado en la posción que deseemos
Shortcodes y HTML
Similar a los widgets, podemos utilizar cualquier shortcode disponible o nuestro código HTML personalizado
Recomendación
Permite incorporar testimonios, con un párrafo, una imagen, el nombre y el trabajo de la persona que nos recomienda
Contador
Un contador numérico animado, totalmente personalizable
Galería y carrusel
Implementan la galería nativa de Wordpres y un carrousel con diferentes opciones de configuracion
Barra de progreso
Permite indicar el poncentaje, un texto y personalizar su visualización
Sound Cloud
Permite incluir audio desde SoundCloud, controlando las diferentes opciones de reproducción
Alertas
Permite incluir las cajas de alerta, mostrando u ocultando el botón de cierre
No he tenido ocasión de probar la versión "PRO", pero las posibilidades de la versión gratuita sin dudas son más que suficientes para lograr cualquier resultado deseado. Por otra parte están apareciendo cada vez más complementos como Elementor Esssential Addons, por tanto casi siempre el límite lo pondrá nuestra capacidad y no las funcionalidades disponibles herramienta.
Finalmente, al se un plugin gratuito la mejor opción para familiarizarse con él es utilizarlo. Nos llevará poco tiempo aprender y sin duda disfrutaremos con el proceso
Conclusión
La principal carencia de Elementor, en mi opinión, es no disponer de la opción de editar enlinea todos los textos, como hace su competidor Thrive Architect. También el funcionamiento de la barra lateral es algo engorroso para mi gusto. Y un poco más de arrastrar y soltar vendría de perlas.
Sin duda estamos ante un plugin casi indispensable y que se complementa a la perfección con el tema OceanWP. Ambos son ejemplos de software gratuito con prestaciones profesionales que nos permitirán llevar nuestra web al siguiente nivel sin que se resienta nuestro presupuesto.
