Si eres como yo, seguramente tienes muchas ideas para tu sitio web que quieres ver hechas realidad. Y aunque Elementor facilita la creación de diseños únicos con funciones de arrastrar y soltar y elementos prediseñados, a veces nada puede reemplazar el poder del CSS puro. En este artículo, te explicaremos cómo añadir CSS personalizado en Elementor para que puedas llevar el diseño de tu sitio web aún más lejos
3 formas populares de agregar CSS personalizado en Elementor
Hay varias maneras de añadir CSS personalizado en Elementor. Veamos las tres mejores.
- Utilice el personalizador de WordPress
- Utilice un complemento CSS
- Uso del widget HTML
Utilice el personalizador de WordPress.
Para agregar código CSS personalizado en Elementor, siga estos pasos:
- Ve a Apariencia > Personalizar
- En el personalizador de WordPress, haga clic en CSS adicional.
- Se abrirá la sección CSS adicional. Puedes agregar código aquí pegándolo en el cuadro de texto o haciendo clic en el botón "Añadir CSS personalizado" para buscar el archivo desde tu computadora.
Utilice un complemento CSS
Hay varios complementos disponibles en el mercado, como Simple CSS, Custom CSS Pro y CSS Hero, que le permiten agregar CSS personalizado a Elementor.
Para empezar, ve a CSS y JS personalizados > Agregar CSS personalizado y haz clic en Agregar código CSS.
Aparecerá un editor CSS básico a la izquierda. Puedes elegir cargar el código CSS internamente o en una hoja de estilos externa usando las opciones de configuración a la derecha. Además, puedes elegir si el código debe ir en el encabezado o en el pie de página:
Una vez que hayas terminado de editar el código CSS, pulsa el Publicar .
Nota: Cambie a una vista frontal para ver el código en acción.
Uso del widget HTML
Puedes usar un widget HTML para añadir CSS personalizado a Elementor. Solo tienes que arrastrar y soltar el widget HTML y añadir tu código CSS dentro de una etiqueta de estilo.
El CSS personalizado es una forma de añadir código personalizado a tu sitio web. Se puede usar para muchas cosas, desde cambiar la apariencia de tu sitio web hasta añadir funcionalidad adicional.
Ahora que sabes cómo agregar CSS personalizado, puedes usarlo en tus sitios web siguiendo estos pasos:
- Abra la ventana del editor de Elementor y haga clic en el ícono '+' superior izquierdo
- Haz clic en "Código personalizado" y pega este fragmento de código: `.elementor-custom-css{display:none;}`. Puedes encontrarlo en Configuración > CSS personalizado o Apariencia > Opciones de tema > CSS personalizado (según tu versión de WordPress).
Conclusión
Ahora que sabes cómo añadir CSS personalizado, puedes aprovechar la flexibilidad de Elementor. La próxima vez que algo no funcione como se espera, prueba a añadir código CSS. En lugar de corregirlo con un plugin o un cambio de tema, ¡prueba a añadir código CSS!
Contenido relevante
- ¿Qué es CSS Framework?
- ¿Cómo eliminar CSS no utilizado en WordPress?
