Aprende los mejores hacks y trucos con Elementor

Segundo evento online de la comunidad de Elementor Madrid, celebrado el 30 de abril de 2020.

Llenazo absoluto: más de 300 personas inscritas, 100 participantes (¡se llenó la sala de Zoom en menos de 4 minutos!), 14 ponentes con trucos para Elementor, decenas de preguntas, networking…

Como comentaba Ángel Zinsel, organizador del meetup, un par de días después: ¿Habrá sido esta meetup una especie de mini Elementor Day?

La experiencia fue excelente. Y en este artículo queremos resumirte todo lo que podrás ver en el vídeo.

Trucos o hacks para Elementor

Hasta 14 charlas de miembros de diferentes comunidades de Elementor para compartir esos trucos que nos facilitan la vida con Elementor y no todo el mundo conoce:

• Jorge Bañón: secciones deslizantes
• Joan Ráez: menú sticky con Elementor.
• Aure Pons: menú avanzado (con popups).
• Ángel Julián Mena: consejos editoriales y tipográficos.
• Merche Salas: botón para subir arriba sin plugins.
• Alberto Perojo: consejos para duplicar contenido y cómo anidar secciones.
• Ángel Zinsel: Lottie files
• Tesa Iglesias: truco para membresías con elementor.
• Santiago Alonso: mostrar widgets según el paginado del blog.
• Rafa Gallego: añadir un buscador/filtro de taxonomías personalizadas.
• Ismael Ruiz: login de usuarios personalizado con Elementor
• Rafa Ramos: loops para categorías y etiquetas.
• Sebastián Echeverri: dashboard personalizado con Elementor.
• Chabi Angulo: optimización de base de datos para eliminar plugins

Vamos a verlos en detalle:

Secciones deslizantes

Por Jorge Bañón (Elementor Madrid)

Un efecto muy visual aplicando las propiedades de z-index y el efecto sticky que incorporan las secciones en Elementor.

El resultado es similar a un pase de diapositivas, donde cada sección se solapa con la anterior a medida que hacemos scroll, deslizándose hacia arriba.

Para evitar disgustos en la versión responsive, Jorge también se encargó de explicar cómo mejorar la visualización en móviles de este efecto tan chulo.

Podemos localizar a Jorge en Twitter (@jbanver) y en su web, jorgebañon.es

Menú sticky con Elementor

Por Joan Ráez (Elementor Marina Alta)

Uno de los problemas que nos encontramos a veces con Elementor PRO a la hora de gestionar las cabeceras es un poco de limitación con las cabeceras fijas, sus estilos, etc.

Joan, de la comunidad de Elementor en Marina Alta, nos enseñó un gran consejo para tener una cabecera transparente sobre la sección principal de nuestra web.

Y que, además, al hacer scroll se convierta en una cabecera con fondo sólido y sombreada que se mantiene fija en la parte superior de la pantalla.

Podemos localizar a Joan en su Twitter (@JoanRaez) y en su web joanraez.com

Menú avanzado con Popups

Por Aure Pons (Elementor Valencia)

Seguimos por el levante español y hablando de menús con Elementor. Aure Pons, de Elementor Valencia nos contó cómo darle una vuelta de tuerca a nuestros menús.

Hay que reconocer que el widget de navegación de Elementor es un poco limitado en cuanto a opciones de diseño.

Aure nos propone utilizar la potencia de los popups para crear menús personalizados y con toda la información que nos permiten el resto de widgets de Elementor.

También explica cómo activar este menú popup utilizando una acción dinámica en un widget de icono ??

A Aure la localizamos también en Twitter (@AurelyPons) y en la web www.bookmy.design

Consejos editoriales y tipográficos

Por Angel Julián Mena (Elementor Valencia y Facebook «Elementor en español»)

Muy interesantes los consejos de Ángel Julián Mena sobre temas editoriales y cómo maquetar textos en Elementor de manera más agradable.

Con solo unas líneas de CSS nos enseñó una maquetación en columnas 100% responsive, ajustable y cómoda de leer.

Además, nos explicó cómo gestionar correctamente la opción para capitulares que tiene el widget de texto en Elementor.

Ángel Julián lidera el grupo de Facebook de Elementor en español y también puedes localizarle en su página web angeljulian.com

Botón para subir arriba sin plugins.

Por Merche Salas (Elementor Zaragoza)

Saltamos a Elementor Zaragoza, donde Merche Salas explica cómo crear un botón para subir arriba 100% con Elementor.

Muy interesante la aplicación de los efectos de scroll de Elementor, para jugar con el momento en que aparece el botón de subir y que no esté «molestando» al principio de la página.

Puedes localizar a Merche en Twitter (@mskreacionweb) y en su página web www.msalaskreacion.es

Consejos para duplicar contenido y cómo anidar secciones

Por Alberto Perojo (Elementor Barcelona)

Un macro-truco fue lo que nos trajo Alberto. En 5 minutos nos explica varios consejos para duplicar contenido entre páginas de nuestra web con Elementor de manera muy sencilla, utilizando las opciones de «copiar todo el contenido» que muchos usuarios no conocen.

Además, nos contó cómo salvar la limitación de Elementor para anidar secciones interiores.

Sí, Elementor solo nos permite añadir un widget de sección interior dentro de una sección.

Pero con el truco de Alberto podremos anidar secciones infinitas. ¡Cuidado! Como bien comenta, esto puede suponer un problema a nivel de SEO, ya que le estamos complicando la vida a Google para leer nuestro código. Úsalo con moderación 😉

Podemos localizar a Alberto en su página web albertoperojo.com y en la comunidad de Elemenpros.com

Animaciones con Lottie

Por Ángel Zinsel (Elementor Madrid)

Ángel, líder de la comunidad de Elementor Madrid (y uno de los mendas de Elemendas), es un enamorado de las animaciones de Lottie.

Por si no las conoces, Lottie es una librería para hacer animaciones con gráficos vectoriales y transformar animaciones de after effects en pequeños y ligeros ficheros JSON para incluirlas en tu página web.

El equipo de desarrollo de AirBnb es el responsable de esta genialidad que en los últimos meses aterrizó también en Elementor.

Primero, a través de algún plugin de los que tratamos en Elemendas. Y dentro de poco, también como parte del núcleo de Elementor.

Ángel nos explica qué son estas animaciones, la potencia que tienen, cómo descargar animaciones e iconos animados gratis y, además, cómo utilizarlas en Elementor.

Podemos localizar a Ángel por Twitter (@AngelZinsel) o en su web angelzinsel.com

Truco para membresías con elementor.

Por Tesa Iglesias (Elementor Madrid)

Seguimos por Madrid con el truco de Tesa Iglesias.

Tesa nos cuenta cómo resolvió una necesidad avanzada que tenía en uno de sus últimos proyectos sin necesitar una línea de código, gracias a la potencia de Elementor.

En concreto, para una membresía necesitaba un formulario de contacto sencillo en el que vinieran rellenos los campos de empresa y nombre del usuario.

Sin que el usuario pudiera cambiarlos, claro.

Para conseguirlo, utilizó la opción de contenido dinámico en el valor por defecto de los campos de un formulario de Elementor PRO.

A través de los shortcodes que el plugin de membresía le permitía pudo rellenar el valor de los campos. Y, después, cambió el tipo de campo de texto a oculto.

Así, los campos venían correctamente rellenos pero el usuario no los veía ni podía cambiarlos. Solución limpia y elegante para el problema.

Localizamos a Tesa en Twitter (@TesaIglesias) y en su página web tesaiglesias.com

Mostrar widgets según el paginado del blog

Por Santiago Alonso (Elementor Madrid)

Segundo menda que contó su truco de Elementor. Santiago, también coorganizador de la Meetup de Madrid, explicó cómo controlar la visualización de los widgets de Elementor según la página del blog en la que estás.

Ya sabes que cuando acumulamos muchos artículos en un blog, WordPress hace un paginado que va cambiando la URL con /page/2, /page/3, etc.

Si, por ejemplo, queremos meter un encabezado en el blog explicando de qué se habla allí, tenemos que arrastrar ese widget en todas las subpáginas. Un fastidio en usabilidad y un problema para dispositivos móviles.

La solución que propone Santiago es condicionar la visualización de esos widgets según la página en la que estemos, utilizando el plugin Dynamic Conditions que comentamos en nuestra newsletter (y en nuestro videocast semanal).

Tiene un artículo en su blog donde lo explica en profundidad: cómo mostrar widgets de Elementor solo en la portada de tu blog.

Podemos localizar a Santiago por Twitter (@salonsoweb) a todas horas. Y en su web que enlazamos arriba.

Añadir un buscador / filtro de taxonomías personalizadas

Por Rafa Gallego (Elementor Sevilla)

Otro caso 100% real que nos contó Rafa Gallego desde Elementor Sevilla.

En esta ocasión necesitaba resolver un problema para una tienda de juguetes en WooCommerce: el cliente quería tener un filtrador de productos para taxonomías personalizadas, en formato desplegable encima del listado de productos.

Para conseguirlo, Rafa utiliza el plugin Taxonomy Dropdown Widget (gratuito en el repositorio de WordPress) que nos permite añadir un nuevo widget a cualquiera de nuestras secciones en Elementor.

Excelente solución la que nos cuenta Rafa para solucionar esos filtros sencillos que muchas veces necesitamos.

Podemos localizar a Rafa por Twitter en @RafaGallegoT

Login de usuarios personalizado con Elementor

Por Ismael Ruiz (Elementor Madrid)

Volvemos a la comunidad de Elementor Madrid.

En este caso, Ismael Ruiz trae un truco práctico para resolver algunos problemas de usabilidad del widget de login y mostrar mensajes personalizados cuando el usuario introduce mal su usuario o contraseña.

Para conseguirlo se apoya en algunas funciones PHP y en el plugin de Dynamic Conditions que comentábamos antes.

Es un caso real de uno de los últimos proyectos en los que ha estado trabajando, montando la intranet de formación de un cliente muy importante. ¡Cómo mola ver Elementor en sitios de ese nivel!

Si quieres el código que comenta durante el truco, puedes descargarlo aquí.

Podemos localizar a Ismael en Twitter (@Irbstudio) y en sus páginas web agenciawp.es y preguntaswp.com

Loops para categorías y etiquetas

Por Rafa Ramos (Elementor Sevilla)

¿Alguna vez te has vuelto loco intentando editar la página de tienda o de una categoría de productos en WooCommerce?

No desesperes: el truco de Rafa Ramos te va a salvar la vida.

Rafa también es compañero de Rafa Gallego en la meetup de Sevilla y nos enseñó a personalizar las páginas de archivo de categorías de producto con Elementor para mejorar el estilo y, sobre todo, para no tener que ver el mensaje de error que muestra Elementor cuando intentamos editar esas páginas directamente.

Para conseguirlo, Rafa utiliza la potencia del Theme Builder de Elementor PRO para crear páginas de archivo personalizadas para las taxonomías de WooCommerce. Oro puro.

Por cierto: si estás en Sevilla y no te llamas Rafa también te admiten en la meetup, no sufras.

Podemos localizar a Rafa Ramos en Twitter (@SoyRafaRamos) y en su página web soyrafaramos.com

Dashboard personalizado con Elementor

Por Sebastián Echeverri (Elementor Madrid)

Otro tutorial genial el que se marcó Sebastián: cómo crear dashboards personalizados para nuestros clientes desde el backend de WordPress y con toda la potencia de Elementor.

Para ello, Sebastián utilizó 4 plugins, todos gratuitos y disponibles desde el repositorio de WordPress:

• WPS Hide Login
• User role editor
• Adminimize
• Dashboard Welcome for Elementor

Además, digno de admirar la templanza con la que gestionó tener que improvisarlo en directo mientras sus hijos le comentaban cosas y unas 100 personas le mirábamos fijamente… ¡un crack!

Si quieres, puedes ver el vídeo de Sebas en su canal de YouTube.

También podemos localizarle en Twitter (@sebasweb) y en su proyecto mipaginaenwordpress.com

Optimización de base de datos para eliminar plugins

Por Chabi Angulo (Elementor Zaragoza)

Después de todo lo que habíamos liado con plugins, pruebas y experimentos… ¡tocaba hacer limpieza!

Chabi Angulo, colíder de Elementor Zaragoza, es un fanático de la optimización de velocidad (WPO) y defensor a ultranza de Elementor.

Así que nos cuenta cómo ponernos serios con la limpieza de nuestras bases de datos en WordPress, que muchas veces acumulan basura de plugins que no utilizamos ya y hacen que nuestra web se vuelva leeeeenta y pesada.

Buenísimos los consejos que nos dio. Recuerda: siempre que manipules la base de datos deberías hacer una copia de seguridad para evitar desastres 😉

Podemos localizar a Chabi por Twitter (@ChabiAngulo) y en su página web chabiangulo.com

Networking y cierre

¡Wow! Fue intenso el meetup, ¿verdad?

Tenemos que confesarte que nosotros lo pasamos genial. Y el momento final haciendo networking en salas más pequeñas es un puntazo.

Te recomiendo que te apuntes a los grupos de Meetup de Elementor para enterarte de los próximos eventos.

O a nuestra newsletter de Elemendas, que también contamos cada semana noticias sobre la Comunidad de Elementor en español.

¡Hasta el próximo!