Cómo añadir y gestionar CSS personalizados en Elementor para mejorar la experiencia visual de su sitio web - Photonflux.com | Servicio profesional de reparación de WordPress, cobertura mundial, respuesta rápida

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 { color de fondo. rojo; }`	Proporcionar un fondo rojo a todas las páginas del sitio web
Configurar páginatabla de amasar	`cuerpo { color de fondo. azul; }`	Fondo de página azul. tome nota deEste 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 { color de fondo. verde; }`	Se basa enCSS ID "mi-elemento" es el elemento específico al que se dirige y está provisto de 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 específico, 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 la página de inicio:

Seleccionar widget de cabecera

Desde el widget "Cabecera"."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 en 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 aspectos 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 los diseños de sitios web sean tanto estéticos como potentes.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres