Crea columnas anidadas dentro de una sección.
Para aclararlo, esto es el “Web Content” y por ende, permite:
- Agregar o eliminar columnas haciendo clic con el botón derecho en el icono del controlador de cada una.
- Se puede ajustar directamente desde la previsualización.
- Es la manera para generar construcciones dentro de la section, más complejas.
- Dentro de cada columna, se pueden incorporar los widgets dinámicos.
- Precisamente, serán las columnas las que determinen el tamaño de lo que contenga.
- Se puede variar el ancho de las columnas en función del breakpoint.
- Existen clases para hacer visibles o no, alguna de estas columnas: .elementor-hidden-phone y .elementor-hidden-tablet. Aunque con esto no desaparecen del código HTML simplemente no se ven.
- Se recomienda llamar en el HTML, ‘SVG’ en vez de los iconos, si se busca un posicionamiento diferente a top/bottom.
- La opción 3D puede dar fallos en algún navegador (edge y safari). Se puede desactivar sin problema.
- Se pueden incorporar elementos dinámicos (título de post, fechas, autor, etc…)a través de global widgets.
Permite generar contenido en general y con mínimo de estilos para dar formato. Permite escribir en HTML.
Con la escritura en modo “Texto” (HTML), se podrán incorporar en su marcado -sin el uso de otros widgets-, los siguientes componentes:
- Texto enriquecido.
- Global Widgets (Ginys).
- Imágenes.
- Cargar archivos PDF.
- Videos / MP3 / MP4 u otros formatos.
Se ajusta perfectamente, funciona como un elemento de “caja”.
Muchas veces se hace necesaria la edición vía vista de texto o html (p.ej. añadir clases en el texto). Hemos detectado que en ciertas ocasiones si marchas del módulo de edición con la vista de texto, cambia el estilo del bloque con el que siempre tenemos que salir del bloque dejando la vista WYSIWYG activada.
Es esencial, para llamar correctamente a las plantillas globales personalizadas, en la página de trabajo. Si se llaman de esto modo quedará el elemento bloqueado y si lo editamos lo estamos editando en todas sus instancias.
Permitirá que se vinculen los cambios cuando los cambios en la plantilla global se generen.
La llamada a las plantillas globales, se realiza mediante un desplegable sin visualización previa con lo que la nomenclatura es clave.
Cajas que combinan una imagen, un texto y un botón. Utiliza animaciones y efectos CSS para crear interacciones de usuario (hover).
Su función es generar encabezados, con un formato destacado, pero completamente editable. Ya viene con formatos predeterminados.
- Permite incorporar enlaces directamente al encabezado.
- Se pueden manipular los tamaños de pequeño a XXL, independientemente del marcado HTML del heading.
- Permite efectos de capa, incluyendo: Normal, Multiplicar, Pantalla, Superposición, etc.
Hay que ir con cuidado por el tamaño asignado. Al no poder asignarse medidas en ‘rem’ sino absolutas, puede desbordarse. Para ello, se puede corregir en la visual móvil.
Realmente es un widget que en muchas ocasiones no es conveniente utilizar, debido a que ya muchos widgets viene incorporado en muchos otros, y también se podrán manipular asignando una tag HTML.
Permite destacar una palabra o frase dentro de la caja del headline (h1 – h6, p, div).
- Puede ser un marcado de rotulador, en diferentes formas como animación preestablecida.
- Se puede cambiar la forma de animación para destacar la palabra o frase, con diferentes transiciones.
Botón customizable, sin mayores estilos.
Se puede manejar desde la pestaña de edición, con todos los recursos que se quieran (hover, transiciones de aparición, incoporación de íconos, entre otros).
Los botones también se pueden generar con un marcado en HTML haciendo uso del “Editor de Texto” (WISIWYG).
Incrusta los videos en la web.
- Adecuación según el repositorio que se utilice: Youtube, Vimeo, DailyMotion o incluso si se tiene en un reposatorio propio.
- Manejo de los controles del reproductor de una forma más sencilla desde la barra de herramientas del componente.
Aunque se adapta de manera fluida lo hace a nivel de tamaño de caja pero no de los controles del player. Este comportamiento es asunto interno de cada plataforma de videos.
Cargar imágenes.
- Fácil adaptación de tamaño y alineación de la imagen.
- Permite establecer vínculo a una URL, un archivo multimedia desde la pestaña de estilo.
SVGs. Al insertarlos como imagen de contenido, desaparecen al salir de la caja contenedora donde se han destinado si no se es administrador, sino usuario en wordpress.
Se recomienda por ello, el uso de PNG, y que la exportación sea a 2x si la img se usará como ícono para evitar se vean borrosas dependiendo del dispositivo.
Imagen con incorporación de texto en su misma caja.
SVGs. Al insertarlos como imagen de contenido, desaparecen al salir de la caja contenedora donde se han destinado.
Se recomienda por ello, el uso de PNG por encima de SVG.
Permite agregar galerías fácilmente.
- Se pueden generar hasta 10 columnas de imágenes.
- Se crea la galería mediante una selección masiva de imágenes de la biblioteca multimedia.
- El orden facilmente se puede cambiar.
- Permite agregar una leyenda.
- Testimoniales.
- Contacto.
- Servicios.
- Paquetes de precios y promociones.
- FAQ.
- Clientes.
- Portfolio.
Muestra el texto de una manera colapsada y condensada. Los visitantes pueden escanear los títulos de los elementos y elegir expandir un elemento solo si es de su interés.
- Edicion de títulos y contenido para cada item.
- Se puede editar el icono para modo “estático” y “activo”.
- Se puede establecer la etiqueta HTML requerida entre H1-H6 o DIV.
- Se pueden duplicar los estilos dados en un item con la opción ‘Agregar elemento’.
Perfecta integración para:
- FAQ.
- Catálogos de servicios.
- Listados con información adicional.
- Se expande y contrae, sin mayor inconveniente.
- No tiene problema de carga en ningún dispositivo.
- Cuando se carga una página, el primer elemento del widget de Acordeón se expande, mientras que todos los demás elementos permanecen contraídos*.
- Solo se puede expandir un elemento del ‘Acordeón’ a la vez.
- Puede contener en el interior de sus secciones otros elementos de Elementor
*Existe un widget que se llama ‘Toggle’, que permite un acordeón que se carga cerrado en la página, pero pertenece al apartado “Element Pack”.
Parecido al Acordeón, pero:
- Se carga en la página con todas las cajas contraídas.
- Se pueden abrir las cajas y mantenerlas abiertas simultáneamente.
Los elementos se pueden mover hacia arriba o hacia abajo en la lista simplemente usando el método de arrastrar y soltar.
Cajas animadas que se voltean hacia el otro lado, una vez que el visitante se posiciona sobre ellas. También funcionan como cajas HOVER
- Movimientos de transición de la cara A a la B, de diferentes maneras y velocidad.
- Tiene la opción 3D para los elementos dentro de su caja, que se aprecian cuando hace la transición.
- Incoporación de iconos e imágenes directamente desde su tablero de funcionalidades.
- Completamente costumizable en cuanto a backgrounds, color de fuentes, tamaños, de forma individual cada cara.
- Call to action.
- Testimoniales.
- Tablas dinámicas.
- Contacto.
- Servicios.
- Paquetes de precios y promociones.
- FAQ.
Funciona sin problema, ajustándose a su contenedor.
- Se recomienda llamar en el HTML, ‘SVG’ en vez de los iconos, si se busca un posicionamiento diferente a top/bottom.
- La opción 3D puede dar fallos en algún navegador (edge y safari). Se puede desactivar sin problema.
- Se pueden incorporar elementos dinámicos a través de global widgets.
Embed google maps en la section.
- Páginas de contacto
- Footer
Se adapta de manera fluida.
Caja para íconos que se pueden elegir de la biblioteca que nos ofrece Elementor.
Se pueden manipular fácilmente y especialmente, cambiar de posición dentro del contenedor en el que se haga servir.
Indicado especialmente para listados que ofrezcan productos o servicios.
La biblioteca es un poco limitada, sin embargo, existe la opción de agregar otra bibliotecas como Font Awesome, para ampliar las opciones.
Simepre podemos hacer uso de iconos externos pero ya con la metodología de CSS
Íconos con incorporación de texto en su misma caja.
La biblioteca es un poco limitada, sin embargo, existe la opción de agregar otra bibliotecas como “font awesome”, para ampliar las opciones.
Para crear sliders sencillos con completo margen de edición (tamaños, velacidad, textos, bullets, arrows).
Esta deberá ser la primera opción por encima de los “Slider’s Revolution”. Tiene un peso inferior y no comprometerá tanto el rendimiento final.
Sliders sólo de imágenes (no se puede agregar texto).
- Los bullets o arrows, pueden ser editables sin mayor problema.
- La configuración del tamaño y del número de imágenes que se quieran mostrar.
- Las construcciones del slider es tan sencillo como seleccionar cuantas imágenes se quieran de la biblioteca multimedia.
Permite hacer uso de vídeos y de imágenes por igual. Las transiciones son más avanzadas al hacer hovers, o incluso al deslizar.
Fácil adaptación de inicio y fin, velocidad.
Se añaden tantos como números haya que indicar generando así columnas.
Para cuentas atrás. Permite programar en base a calendario natural en su editor.
Barras con animación editable.
Permite la incorporación del porcentaje como información interna durante toda la animación.
Si se incorpora mucho ‘copy’ como definición de la barra, la sintetiza con ‘…’ y obliga al usuario a picar para leer más sobre la barra.
Se sugiere dejar copys, fuera de la barra para los diseños.
Genera una caja con el texto, la imagen y leyenda.
Si se incorpora mucho ‘copy’ como definición de la barra, la sintetiza con ‘…’ y obliga al usuario a picar para leer más sobre la barra.
Si la idea es que sea slider, se deberá construir directamente desde el widget “Diapositivas”. Pero ver mejor el siguiente ítem “PRO”.
Diferentes visuales para este tipo de sliders. Completamente customizable.
Esta sería la opción correcta. Evitar maquetar en el widget de diapositivas.
Aquí vídeo:
Inserta citas destacadas como caja.
Se puede configurar la “quote” como ‘Click To Tweet’, permitiendo a los usuarios compartirlos fácilmente en Twitter.
Divide el contenido en pestañas, ya sea horizontal o verticalmente.
Los elementos se pueden mover hacia arriba o hacia abajo en la lista simplemente usando el método de arrastrar y soltar.
Permite insertar otro elementos de Elementor dentro de las pestañas.
Permite vincular las redes sociales que se requieran.
Muy fácil de customizar.
Agrega botones de compartir a cualquier página o publicación de WordPress.
Para destacar una advertencia o información específica al usuario.
- Tiene 4 estados preconfigurados para mostrarse según requerimiento de la alerta.
- Permite dar opción de cierre al usuario como un pop-up.
Para agregar códigos más complejos como ‘formularios’, slider revolutions, otras inserciones de código más complejas.
Puedes ver cómo se ve el shortcode sin pasar al modo de vista previa. Se procesa automáticamente.
Aunque se puede agregar al ‘Editor de Textos’ (WYSIWYG), códigos cortos, realmente este widget debería ser la herramienta para ello por temas de rendimiento y lectura de los browsers.
Si ya tienes hecho un texto marcado en HTML5, mejor arrojar aquí que en el WYSIWYG.
Permite arrojar algunos scripts JS sobre tu hoja de trabajo. en todo caso consultar siempre con los responsables técnicos estos usos de carácter más avanzado.
El uso correcto será con un marcado de código limpio. Especial atención a los
a los <br/><span> y a las etiquetas sin cerrar.
Anclaje a las section, muy sencillo y que permite un scroll suave.
La caja generada en la section no deja ningún margen ni espacio cuando está publicada la página.
Al usar este widget se habilitan las entradas que se hayan publicado desde el escritorio de wordpress, en el apartado ‘entradas’.
- Se puede mostrar u ocultar, lo que se requiera: autor, fechas de publicación, subtítulos.
- También se puede cambiar las entradas de artículos, a productos servicios, todo en su herramienta de edición.
- Permite categorizar las publicaciones.
- Blog.
- Portfolio.
- News.
El tutorial es un poco más extenso porque muestra las muchas opciones que este widget puede aportar en la construcción de los diseños.
Permite mostrar publicaciones, páginas y tipos de publicaciones personalizadas en una cuadrícula que permite filtrar.
- Servicios.
- Catálogo de productos.
Las imágenes destacadas se deben cargar en las publicaciones para que cualquier imagen se muestre en el widget.
Se puede cambiar el ícono en base a la biblioteca elementor.
Orientado para catálogos de productos.
A diferencia del listado, genera su caja y es más personalizable.
A día de hoy, esta es la forma en la que se están presentando los productos como “pack”, de cara a generar una diferenciación comercial.