Si eres como yo, tienes muchas ideas para tu sitio web que quieres que cobren vida. 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, cubriremos cómo agregar 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 formas de agregar CSS personalizado en Elementor. Echemos un vistazo a nuestras 3 formas principales de hacerlo.
- Utilice el personalizador de WordPress
- Utilice un complemento CSS
- Usando el widget HTML
Utilice el personalizador de WordPress.
Para agregar código CSS personalizado en Elementor, siga estos pasos:
- Vaya a Apariencia > Personalizar
- En el personalizador de WordPress, haga clic en CSS adicional.
- Se abrirá la sección CSS adicional. Puede agregar código aquí pegándolo en el cuadro de texto o haciendo clic en el botón Agregar CSS personalizado para buscar su archivo desde su 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 comenzar, vaya a CSS y JS personalizados > Agregar CSS personalizado y haga clic en Agregar código CSS.
Aparecerá un editor CSS básico a la izquierda. Puede optar por cargar el código CSS internamente o en una hoja de estilo externa usando las opciones de configuración a la derecha. Además, puedes elegir si el código va en el encabezado o en el pie de página:
Una vez que haya terminado de editar el código CSS, presione el botón Publicar
Nota: Cambie a una vista frontal para ver el código en acción.
Usando el widget HTML
Puede utilizar un widget HTML para agregar CSS personalizado a Elementor. Todo lo que necesitas hacer para esta opción es arrastrar y soltar el widget HTML y agregar tu código CSS dentro de una etiqueta de estilo.
CSS personalizado es una forma de agregar código personalizado a su sitio web. Se puede utilizar para muchas cosas, desde cambiar la apariencia de su sitio web hasta agregar 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 icono '+' en la parte superior izquierda
- Haga clic en 'Código personalizado' y luego pegue este fragmento de código: `.elementor-custom-css{display:none;}`. Puede encontrarlo en Configuración > CSS personalizado o Apariencia > Opciones de tema > CSS personalizado (dependiendo de la versión de WordPress que tenga).
Conclusión
Ahora que sabes cómo agregar CSS personalizado, puedes aprovechar la flexibilidad de Elementor. La próxima vez que algo no se comporte como se esperaba, intente agregar código CSS en lugar de arreglarlo con un complemento o un cambio de tema, ¡intente agregar código CSS!
