Tarde o temprano, cada compilación de Elementor golpea una pared que los controles del panel no pueden escalar: un efecto flotante que la pestaña Estilo no ofrece, o una animación de fotograma clave que encontró en un tutorial. Elementor mantiene CSS personalizado por elemento detrás de una licencia Pro. El Css personalizado extensión en Complementos maestros para Elementor elimina esa pared: un editor CSS en cada sección, contenedor, columna y widget, en el editor gratuito.
Aquí está en el editor. El CSS aterriza en el cuadro y las tarjetas testimoniales comienzan a deslizarse por el lienzo en el mismo segundo:
Qué hace la extensión CSS personalizada #
Una vez habilitado, cada elemento del editor Elementor obtiene un Css personalizado sección bajo su Avanzado pestaña. En el interior se encuentra un editor de código con resaltado de sintaxis y números de línea. Todo lo que escribas allí se aplica únicamente a ese elemento, y el lienzo lo muestra en vivo, para que veas cómo la regla entra en vigor mientras escribes.
El editor apoya el selector palabra clave, que significa el envoltorio propio del elemento. Escribir selector { } y la regla apunta exactamente a esta sección o widget, sin buscar los nombres de clases generados por Elementor. Los selectores de niños también funcionan: selector .some-class llega al interior del elemento.
Antes de empezar #
- WordPress con Elementor instalado y activo. La versión gratuita es suficiente.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- CSS personalizado es una extensión gratuita, por lo que no se requiere licencia Pro.
- Algunos CSS. Incluso los fragmentos copiados y pegados funcionan, ya que la palabra clave del selector elimina la parte difícil.
Cómo habilitar la extensión CSS personalizada #
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. CSS personalizado se encuentra en el Widgets de utilidades grupo con insignia Popular, junto a Custom JS y Duplicador de publicaciones/páginas. Haga clic en su palanca para que se vuelva violeta y luego presione Guardar cambios y espere el aviso verde “Configuración guardada correctamente”.
Abra el editor CSS personalizado en un elemento #
Seleccione cualquier elemento en el editor Elementor, un contenedor completo en la demostración y abra Avanzado pestaña. Desplácese hasta el Css personalizado sección con la insignia MA violeta y expándala. Aparece un editor de código vacío, con una pista debajo: use la palabra clave “selector” para apuntar al elemento contenedor.
Escribe o pega el CSS #
La demostración convierte una fila estática de tarjetas testimoniales en una marquesina en movimiento con una animación de fotograma clave:
selector {
animation: testimonial 5s linear infinite alternate;
}
@keyframes testimonial {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(calc(-100% + 100vw));
}
}Péguelo y el lienzo obedecerá inmediatamente: las tarjetas comienzan a deslizarse de derecha a izquierda, se invierten al final y se repiten, exactamente como muestra el GIF en la parte superior de esta página. Primero no hay nada que guardar o actualizar. El selector keyword fija la animación a este contenedor, por lo que no se toca nada más en la página.
El resultado en la página #
Golpear Publicar y la parte frontal ejecuta la misma animación: la fila testimonial se desplaza a través de la ventana gráfica, pausa la dirección en cada extremo y sigue pedaleando por sí sola.
Un hábito que vale la pena mantener: el CSS vive en el elemento, no en una hoja de estilo global. Duplica la sección en otra página y la animación viaja con ella.
Donde ayuda el CSS personalizado por elemento #
- Animaciones de fotogramas clave. Marquesinas, botones pulsantes, insignias flotantes, cualquier cosa que los controles del panel no puedan expresar.
- Estados flotantes.
selector:hoverreglas para levantamientos, sombras y cambios de color en las cartas. - Correcciones de fragmentos. Esa respuesta de Stack Overflow que resuelve su error de diseño, se aplica exactamente donde vive el error.
- Ajustes responsivos. Una consulta de medios en una sección en lugar de una edición de hoja de estilo para todo el sitio.
- Experimentos de diseño. Pruebe una regla en vivo en el lienzo antes de promocionarla en el CSS de su tema.
Vídeotutorial #
Mire todo el flujo, desde habilitar la extensión hasta las tarjetas animadas que se ejecutan en la página publicada.
Preguntas frecuentes #
¿cómo agrego CSS personalizado en Elementor sin Pro?
Habilite la extensión CSS personalizada en la pestaña Extensiones de complementos maestros, seleccione cualquier elemento en el editor y abra CSS personalizado en la pestaña Avanzado. Escriba o pegue CSS en el editor de código y se aplica a ese elemento con una vista previa en vivo, no se necesita licencia Pro.
¿Qué hace la palabra clave del selector?
Significa el contenedor del elemento que estás editando. Una regla como selector {color: rojo; } apunta exactamente a esta sección o widget sin conocer los nombres de clase generados por Elementor, y el selector .child llega a los elementos que contiene.
¿el CSS se aplica a todo el sitio o solo a un elemento?
Sólo el elemento que lo lleva. Cada sección, columna o widget tiene su propio cuadro CSS personalizado, por lo que las reglas permanecen al alcance. Al duplicar el elemento, se copia su CSS junto con él, lo que mantiene los efectos portátiles entre páginas.
¿puedo ejecutar animaciones CSS con esta extensión?
Sí. El editor acepta CSS completo, incluidos @keyframes, consultas de medios y pseudoclases como flotar. La demostración de esta página ejecuta una animación de marquesina de fotogramas clave en una fila testimonial, vista previa en vivo en el editor antes de publicarla.
¿la extensión CSS personalizada es gratuita?
Sí. CSS personalizado se envía con la versión gratuita de Master Addons para Elementor, en el grupo Utilidades Widgets de la pestaña Extensiones. La página de precios cubre lo que agregan los planes Pro.
Envolviendo #
La extensión Custom CSS le brinda a Elementor la trampilla de escape que todo proyecto real eventualmente necesita: un editor CSS con alcance en cualquier elemento, con vista previa en vivo y una palabra clave de selección que le ahorra la arqueología del nombre de clase. Emparejarlo con el Extensión animada de fondo degradado (Pro) para movimiento sin escribir fotogramas clave y explore el conjunto completo de Widgets y extensiones de complementos maestros para el resto de la caja de herramientas.
