Una de las mayores ventajas de utilizar constructores de páginas como Elementor es que tienes acceso a elementos de página pre-construidos, o «widgets». Los widgets de Elementor incluyen muchas opciones de personalización y estilo. Sin embargo, a veces la única manera de aplicar un estilo concreto es con Hojas de Estilo en Cascada (CSS).
El CSS te proporciona un grado de control asombroso sobre todos los componentes de tu sitio web. Añadirlo a WordPress es sencillo si estás familiarizado con el lenguaje. Elementor también ofrece varias opciones para añadir CSS personalizado.
En este artículo, hablaremos de lo que es el CSS y de cómo puedes añadir estilos personalizados a Elementor. Por último, hablaremos de algunas de las mejores prácticas para utilizar CSS en WordPress. ¡Empecemos!
¿Qué es el CSS?
CSS es lo que llamamos un lenguaje de «hojas de estilo». Puedes utilizar las hojas de estilo CSS para añadir un estilo personalizado a los documentos HTML o XML. Utilizando CSS, puedes transformar una página HTML básica en una página con un diseño de aspecto moderno.
Piensa en CSS como un lenguaje que describe cómo deben aparecer los elementos en un navegador. Funciona en todos los navegadores y es uno de los lenguajes fundamentales de Internet.
Por ejemplo, este es el código CSS que utilizarías para asignar un color de fondo al cuerpo de un documento HTML:
body {
background-color: red;
}Puedes utilizar CSS para aplicar estilos a componentes, clases e identificadores específicos en HTML. Por ejemplo, el siguiente fragmento aplicaría un color de texto y una alineación específicos a todos los H2 de una página:
h2 {
color: black;
text-align: left;
}Normalmente, cuando cargas una página HTML, también se carga una hoja de estilos independiente que incluye todo el código CSS. Esto significa que puedes reutilizar las hojas de estilo en varias páginas.
Eres libre de aplicar el código CSS directamente a cualquier página HTML. También puedes utilizarlo «inline». Este es un término que se refiere al código CSS que se aplica a un solo elemento HTML y reside dentro de ese archivo.
Aquí tienes un ejemplo de CSS inline para una cabecera H2 específica:
<h2 style="color:black;text-align:center;">Aquí es donde va el texto del encabezado</h1>Se considera una buena práctica añadir el CSS a una hoja de estilos separada. Sin embargo, una de las muchas ventajas de utilizar WordPress y Elementor es que puedes añadir CSS sin tener que editar los archivos manualmente. Veamos con más detalle cómo funciona.
Opciones CSS Personalizadas en Elementor
Si estás familiarizado con Elementor, sabrás que el constructor utiliza secciones, columnas y widgets para ayudarte a crear páginas. Las secciones contienen una o varias columnas, y cada columna puede tener varios módulos:
Una de las mejores partes de usar Elementor es que puedes añadir código CSS por separado a nivel de sección, columna y widget. Cuando pasas el ratón por encima de una sección, puedes seleccionar el icono de seis puntos para abrir el menú Editar Sección en la parte izquierda de la pantalla:
Si te desplazas a la pestaña Avanzado dentro del menú Editar Sección , verás una sección de CSS personalizado . Dentro, encontrarás un campo que te permite añadir código para esa sección específica:
Cuando edites columnas y widgets, verás que tienes acceso a las mismas tres pestañas en sus respectivos menús de configuración. Tanto las secciones como las columnas y los widgets incluyen ajustes de diseño, estilo y avanzados.
Para añadir CSS personalizado a una columna, pasa el ratón por encima de ella y selecciona el icono de dos columnas en la esquina superior derecha del elemento. A continuación, ve a la opción Avanzado y abre la sección CSS personalizado :
Puedes seguir el mismo proceso para añadir CSS personalizado a un widget de Elementor. Simplemente selecciona el widget que quieras personalizar y ve directamente a la pestaña Avanzado > CSS personalizado:
Añadir CSS personalizado a elementos específicos dentro del constructor de páginas de Elementor es muy sencillo. Sin embargo, ten en cuenta que el estilo sólo se aplicará a esos elementos. Si quieres añadir CSS personalizado que afecte a todo tu sitio, tendrás que utilizar un enfoque diferente.
Cómo Añadir CSS Personalizado con Elementor (5 Métodos)
En esta sección, exploraremos otras formas de añadir CSS personalizado en Elementor. Analizaremos los métodos que aplican el CSS a todo tu sitio web, a páginas específicas y a los widgets de Elementor.
Método 1: Usar el Widget HTML de Elementor
Elementor te permite añadir CSS personalizado a cualquiera de sus widgets. Sin embargo, en algunos casos, es posible que quieras añadir elementos manualmente utilizando HTML y CSS. En esos casos, tendrás que utilizar el widget HTML :
El widget HTML puede analizar HTML, CSS y JavaScript. Puedes añadir el código que quieras dentro del campo Código HTML y, si es válido, Elementor lo mostrará como un widget:
El widget HTML admite tanto el CSS inline como el independiente. Cualquier código que añadas utilizando el widget sólo afectará a ese único elemento.
Método 2: Utiliza el Menú de Configuración del Sitio de Elementor
Elementor incluye una colección de ajustes generales que se parecen a las opciones que puedes encontrar en el Personalizador de WordPress. Para acceder al menú de Ajustes del Sitio de Elementor, abre el editor y haz clic en el menú hamburguesa de la esquina superior izquierda de la pantalla:
En la siguiente página, selecciona la opción Configuración del Sitio :
En su interior verás una colección de ajustes que te permiten personalizar el estilo de tu sitio. Cualquier cambio que realices en este menú se aplicará a todo tu sitio, aunque técnicamente estés editando una sola página.
Puedes leer cómo utilizar el menú de Configuración del Sitio para personalizar tu página en el sitio oficial de Elementor. Por ahora, el único apartado que nos interesa es la pestaña de CSS personalizado . Ábrela y verás un campo que se parece a las opciones de CSS personalizado para secciones, widgets y columnas:
Cualquier CSS personalizado que añadas aquí afectará a todo tu sitio web. Si sólo pretendes personalizar elementos específicos, te recomendamos que utilices un enfoque más específico (como añadir CSS directamente a un widget).
Método 3: Usar el Personalizador de WordPress
El Personalizador de WordPress también te permite añadir CSS personalizado en todo el sitio. Para ello, ve a Apariencia > Personalizar y selecciona la opción CSS adicional en el menú de la izquierda:
Sin embargo, cabe destacar que los campos de código de Elementor son más fáciles de usar que los disponibles en el Personalizador. Si ya estás utilizando Elementor para la creación de sitios, no hay razón para añadir CSS personalizado a través del Personalizador.
Método 4: Poner en Cola los Archivos CSS Personalizados
Si te sientes cómodo editando archivos de WordPress y accediendo a tu sitio web a través de un cliente de Protocolo de Transferencia de Archivos (FTP), puedes poner en cola una hoja de estilos CSS para cargarla con Elementor. Este método requiere que añadas código al archivo functions. php de WordPress.
Para acceder al archivo functions. php , conéctate a tu sitio web mediante FTP y ve a la carpeta root de WordPress. Abre la carpeta, busca el archivo functions.php y edítalo.
Aquí hay un ejemplo del código que se quiere añadir al archivo:
add_action( 'elementor/frontend/before_enqueue_scripts', function() {
wp_enqueue_script(
'custom-stylesheet',
get_stylesheet_uri()
);
} );Ese código utiliza el hook before_enqueue_scripts para cargar una hoja de estilos llamada custom-stylesheet. También utilizamos la función get_stylesheet_urifunction para señalar la ubicación de la hoja de estilos en el servidor.
Lo ideal es que añadas la hoja de estilos personalizada dentro del directorio de tu tema hijo o en la propia carpeta Themes. La hoja de estilos puede contener cualquier código CSS de Elementor que desees. El fragmento que has añadido a functions.php garantiza que el código sólo se cargue cuando Elementor esté activo en tu sitio web.
Método 5: Utilizar un Plugin CSS
Hay varios plugins que te permiten añadir CSS personalizado a tu sitio web sin usar el Personalizador o los constructores de páginas. Una de nuestras herramientas favoritas para este trabajo se llama Simple Custom CSS and JS:
Con el plugin Simple Custom CSS and JS, tienes la opción de añadir código directamente a los elementos de la cabecera y el pie de página de tu tema. Para empezar, ve a CSS y JS personalizados > Añadir CSS personalizado y haz clic en Añadir código CSS.
A la izquierda aparecerá un editor de CSS básico. A la derecha, puedes configurar si quieres cargar el código CSS en una hoja de estilos externa o internamente. También puedes decidir si el código debe ir en la cabecera o en el pie de página:
Cuando hayas terminado de editar el código CSS, pulsa el botón Publicar . Es posible que tengas que cambiar a una vista frontal para ver el código en acción.
Mejores Prácticas para Crear CSS Personalizado con Elementor
Siempre que estés trabajando con CSS personalizado o añadiendo cualquier tipo de código a tu sitio web, te conviene tener en cuenta las siguientes prácticas recomendadas. Comencemos con el uso de un tema hijo.
Utiliza un Tema Hijo de WordPress
Si quieres cambiar cualquier parte del estilo de tu tema utilizando CSS, te recomendamos que utilices un tema hijo. Un tema «hijo» es una plantilla que hereda todos los estilos de un tema concreto.
De este modo, si haces algún cambio en el tema original, no afectará a las personalizaciones que añadas al tema hijo. Además, cuando actualices el tema, conservará estos cambios.
Utiliza un Preprocesador de Código para Facilitar la Escritura
Uno de los mayores retos de añadir código dentro de WordPress o utilizando Elementor es que no tienes acceso a toda la funcionalidad que ofrecen los editores de código modernos. En lugar de pelearte con el código utilizando editores básicos in situ, te recomendamos que utilices tu preprocesador favorito. Luego, simplemente puedes copiar y pegar tu código en WordPress.
Considera Utilizar un Sitio Staging
Siempre que planees hacer grandes cambios en WordPress, te recomendamos que utilices un sitio staging. Los sitios staging te permiten probar los cambios de estilo y funcionalidad sin el riesgo de romper nada en tu sitio real.
Algunos alojamientos web te proporcionan acceso a la funcionalidad de staging desde su panel de control. Si utilizas Kinsta, puedes seleccionar tu sitio web mediante el panel de control de MyKinsta y alternar entre los entornos en producción y de staging:
Si tu alojamiento web no ofrece la función de Staging, puedes utilizar un entorno de desarrollo local de WordPress, como DevKinsta, para realizar pruebas. También puedes considerar la posibilidad de cambiar de proveedor de alojamiento.
Resumen
Añadir CSS personalizado en Elementor es más fácil de lo que imaginas. El constructor de páginas ofrece varios métodos para añadir código a secciones, columnas, widgets y para todo tu sitio web.
Para recapitular, aquí tienes las cinco principales formas de añadir CSS personalizado a Elementor (o a tu sitio web en general):
- Utiliza el Widget HTML de Elementor.
- Utiliza el menú de configuración del sitio de Elementor.
- Utiliza el personalizador de WordPress.
- Pon en cola los archivos CSS personalizados.
- Utiliza un plugin de CSS.
En Kinsta, nuestros planes están diseñados para ayudarte a construir el sitio de tus sueños con constructores de páginas como Elementor. Echa un vistazo a nuestros planes o habla con ventas para encontrar el plan más adecuado para ti.
Deja una respuesta