El CSS personalizado te permite añadir código personalizado a tu sitio web para darle un aspecto único.
¿Qué es CSS?
CSS (Cascading Style Sheets) es un método para añadir estilos a las páginas web, como colores, fuentes, espaciado y posición. Una de las grandes ventajas del editor de Elementor es que permite añadir muchos de estos elementos de estilo sin necesidad de saber CSS. Sin embargo, Elementor Pro también permite a los creadores web con conocimientos de CSS añadir CSS personalizado para dar a sus páginas un aspecto único.
¿Dónde puedo añadir CSS personalizado con Elementor?
El editor de Elementor te permite añadir CSS personalizado en tres niveles diferentes:
- Nivel del sitio: ¡Añadir CSS personalizado aquí afectará a todo su sitio!
- Nivel de página: añadir CSS personalizado aquí sólo afectará a páginas específicas
- Nivel de elemento: añadir CSS personalizado aquí sólo afectará a elementos específicos
Ejemplos de CSS personalizado
| Dónde introducir el código | Inserte este código | El efecto que tendrá CSS |
| Configuración del sitiotabla de amasar | cuerpo { | Proporcionar un fondo rojo a todas las páginas del sitio web |
| Configurar páginatabla de amasar | cuerpo { | Fondo de página azul. tenga en cuentaEste CSS a nivel de página anula cualquier configuración CSS a nivel de sitio, por lo que incluso si utilizas el CSS de sitio anterior, esta página seguirá teniendo un fondo azul. |
| elementalFicha Avanzado | #my-element { | Se basa enCSS ID "mi-elemento" para el elemento específico al que se dirige y le proporciona un fondo verde. Atención:Este CSS anula cualquier CSS a nivel de sitio o a nivel de página para proporcionar un fondo verde a los elementos, por lo que incluso si utilizas el CSS de sitio y/o página anterior, esta página seguirá teniendo un fondo azul. |
Cómo añadir CSS personalizado
Añadir CSS personalizado a Elementor
1. Haciendo clic en o desde elnavegador (en la pantalla de un ordenador)para seleccionarla eligiendo un elemento en el
2. En el panel, haga clic en"Avanzado"Tab.
3. Desplácese hacia abajo y expanda CSS personalizado.
4. Introduzca el código CSS en el cuadro de texto abierto.
Añadir CSS personalizado a una página
1. Vaya al panel Configurar página.
2. Pulsealto nivelTab.
3. Introduzca el código CSS en el cuadro de texto abierto.
Añadir CSS personalizado a un sitio web
1. Vaya al panel Configuración del sitio.
2. Seleccione de la listaCSS personalizado.
3. Introduzca el código CSS en el cuadro de texto abierto.
Cómo añadir CSS personalizado con Elementor AI
Elementor AI no solo te ayuda a escribir el contenido del sitio web, sino que también permite a los usuarios Pro añadir estilos CSS personalizados a páginas y elementos. Los usuarios Pro también pueden añadir código personalizado a las páginas web. Todos los usuarios pueden utilizar Elementor AI para añadir código HTML a las páginas a través del widget HTML.
Cuando añadas CSS o código personalizado con Elementor AI, sigue estas recomendaciones:
- Asegúrese de guardar y hacer una copia de seguridad de su página antes de añadir CSS personalizado en caso de que cambie accidentalmente el diseño de la página.
- Cuando añadas CSS a un elemento concreto, asegúrate de utilizar un "selector" para que el código no afecte al resto de la página.
- Si utilizas Elementor AI para regenerar el código, el código anterior se sobrescribirá. Por lo tanto, es una buena idea hacer una copia de seguridad del código original en otro documento.
- Al insertar varios fragmentos de código, algunos códigos pueden entrar en conflicto entre sí.
- Estamos mejorando constantemente las capacidades de codificación de Elementor AI, pero el código generado puede requerir que lo ajustes manualmente para satisfacer necesidades específicas.
- Ten en cuenta que Elementor no proporciona soporte técnico oficial para el código CSS personalizado, los usuarios deben comprobar y depurar el código por sí mismos.
Añadir código personalizado a Elementor con Elementor AI
El siguiente ejemplo añade código CSS de personalización al título de esta página de inicio:
- Seleccionar widget de cabecera
- Desde el widget "Título"."Avanzado"y seleccione"CSS personalizado".
- opciónCodificación con IA.
Nota: Después de utilizar Elementor AI por primera vez, el archivoCon IAEl código del texto será reemplazado por el icono de Elementor AI.
- En el cuadro de texto escriba "Hacer que este título se vuelva rojo al pasar el ratón por encima".
- hacer clic (con un ratón u otro dispositivo señalador)Generar código.
Esto añadirá el siguiente código CSS de personalización:
Haga clic en Vista previa para ver cómo funciona el CSS personalizado.
Título de la animación
Ahora vamos a añadir algo de animación al título.
- Vuelva a Personalizar CSS y seleccioneCódigo con IA.
- En el cuadro de texto, escriba "En este título, el texto aparece al pasar el ratón por encima".
- hacer clic (con un ratón u otro dispositivo señalador)Generar código.
- hacer clic (con un ratón u otro dispositivo señalador)"Insertar".
Vaya a Vista previa y vea los resultados. Al pasar el ratón por encima del texto, éste debería aparecer y volverse rojo.
Hacer Elementor pegajoso
Una técnica común utilizada por un diseñador es hacer que ciertos elementos de una página sean visibles en todo momento, incluso cuando el visitante se desplaza por la página. Este efecto se denomina "Elementor pegajoso", que suele utilizarse en la cabecera de una página web. Su finalidad es que el visitante pueda acceder fácilmente al menú cuando navegue por cualquier parte de la página.
He aquí un ejemplo de cómo mantener fijo el título de una página web y asegurarse de que siempre aparezca en la parte superior de la pantalla:
- opciónEditar título.
- Seleccione el contenedor en la cabecera
- opciónCSS personalizado.
- opciónCodificación con IA.
- Escriba "Make this container sticky" en el cuadro de texto.
- hacer clic (con un ratón u otro dispositivo señalador)Generar código. El código generado tendrá el siguiente aspecto:
Elementor AI le proporciona el código generado y en el área debajo del cuadro de código le explicará lo que hace el código en inglés sencillo. - opciónInsertar código.
Utilice la vista previa para ver los resultados y el título permanecerá en la parte superior de la pantalla al desplazarse por la página.
Resumen:
El concepto básico de CSS (Cascading Style Sheets), una potente herramienta para añadir y ajustar el estilo de las páginas web, como colores, fuentes, espaciado y diseño. En particular, Elementor ofrece la posibilidad de añadir CSS personalizado a diferentes niveles (nivel de sitio, página y elemento), lo que permite a los usuarios ajustar con precisión para necesidades específicas.
El artículo también proporciona instrucciones específicas paso a paso sobre cómo añadir código CSS a diferentes partes de Elementor, incluida ayuda con la generación y gestión de código a través de la tecnología Elementor AI. Se destacan cuestiones a tener en cuenta al utilizar CSS personalizado, como las copias de seguridad de código, el uso de selectores y la gestión de conflictos de código, para garantizar que el diseño del sitio sea estéticamente agradable y potente.
