Si estás utilizando Elementor en su versión gratuita y te has encontrado con la limitación de no poder añadir CSS personalizado, ¡no te preocupes! En este artículo te explicaré cómo puedes habilitar esta funcionalidad utilizando un plugin gratuito. Además, te mostraré cómo aplicar estilos específicos para escritorio, tablet y móvil, dándote un mayor control sobre el diseño de tu sitio web.
Elementor es una de las herramientas más populares para la creación de páginas web en WordPress. Sin embargo, la versión gratuita tiene ciertas limitaciones, como la falta de opciones para añadir CSS personalizado. Esta funcionalidad está reservada para la versión PRO, pero gracias a un plugin gratuito llamado Custom CSS for Elementor, puedes habilitar esta opción sin necesidad de pagar por la versión PRO.
En este artículo, te guiaré paso a paso para que puedas añadir CSS personalizado en Elementor, incluso si estás utilizando la versión gratuita.
Instalar el Plugin Custom CSS for Elementor
Lo primero que necesitas hacer es instalar el plugin Custom CSS for Elementor. Este plugin es gratuito y te permitirá añadir CSS personalizado en Elementor de forma sencilla.
- Accede al directorio de plugins en WordPress: Desde tu panel de administración de WordPress, ve a Plugins > Añadir Nuevo.
- Busca el plugin: En el campo de búsqueda, escribe Custom CSS for Elementor: https://wordpress.org/plugins/custom-css-for-elementor/
- Instala y activa el plugin: Una vez que lo encuentres, haz clic en Instalar Ahora y luego en Activar.
Ventajas de usar Custom CSS for Elementor
Después de instalar y activar el plugin, recarga el editor de Elementor. Verás que ahora aparece una nueva opción llamada Custom CSS for Elementor. Esta opción te permitirá añadir CSS personalizado a cualquier elemento de tu página.
Una de las ventajas de utilizar Custom CSS for Elementor es que puedes aplicar estilos específicos para escritorio, tablet y móvil. Esto te permite tener un mayor control sobre cómo se ve tu sitio en diferentes dispositivos.
Añadir CSS Personalizado en Elementor
Ahora que has habilitado la opción de CSS personalizado, puedes empezar a añadir tus propios estilos. Vamos a hacer una prueba sencilla para ver cómo funciona.
- Selecciona un elemento: En el editor de Elementor, selecciona el elemento al que deseas aplicar estilos. Por ejemplo, una sección.
- Accede a la opción de CSS personalizado: En la pestaña Avanzado del panel de configuración del elementor, verás la nueva opción Custom CSS for Elementor.
- Añade tu CSS: En el campo de texto, puedes añadir tu CSS personalizado. Por ejemplo, si quieres cambiar el color de fondo de una sección, puedes añadir el siguiente código.
- Aplica los estilos: Guarda los cambios y verás cómo se aplican los estilos que has añadido.
/* Estilos para la versión de Escritorio */
selector .elementor-widget-container {
background-color: red;
}
/* Estilos para la versión Móvil */
selector .elementor-widget-container {
background-color: blue;
}Además en la opción de CSS personalizado, verás tres iconos que representan escritorio, tablet y móvil. Haz clic en el icono del dispositivo para el que deseas aplicar estilos diferentes a cada uno.
En conclusión: añadir CSS personalizado en Elementor, incluso en su versión gratuita, es posible gracias al plugin Custom CSS for Elementor. Este plugin no solo te permite añadir estilos personalizados, sino que también te da la flexibilidad de aplicar estilos específicos para diferentes dispositivos.
Siguiendo los pasos que te he mostrado en este artículo, podrás tener un mayor control sobre el diseño de tu sitio web sin necesidad de pagar por la versión PRO de Elementor. ¡Espero que esta guía te haya sido de utilidad y que puedas aprovechar al máximo las funcionalidades que te ofrece este plugin!
