Cómo agregar clases CSS personalizadas a WordPress (3 maneras fáciles)

Aquellos que conocen CSS saben que las clases de CSS son un gran tiempo de tiempo al diseñar un sitio completo. Pero si no codifica, es posible que nunca se haya dado cuenta de lo poderosos que pueden ser. Hoy cambiamos eso.

En esta publicación, le mostraré 3 formas fáciles de agregar clases CSS a WordPress, incluso si nunca ha escrito una sola línea de código. También aprenderá cómo hacerlo de la manera sin código utilizando el poderoso constructor de sitios web de WordPress, Divi.

¿Qué son las clases de CSS y cómo ayudan?

CSS ( hojas de estilo en cascada ) es el código que controla el diseño y la apariencia de elementos, como colores, espacios y fuentes, en un sitio web. Una clase CSS es una etiqueta reutilizable que asigna a múltiples elementos para que pueda diseñarlos todos a la vez en lugar de repetir el mismo proceso para cada elemento.

Sin clases de CSS, tendría que diseñar manualmente cada elemento, que requiere mucho tiempo, especialmente cuando se trabaja en sitios de WordPress más grandes con múltiples páginas. Pero como suele ser el caso, la mayoría de los sitios web incluyen repetir elementos y motivos, como los botones en una página de precios o cuadros de características en diferentes secciones.

Estos elementos parecen similares porque, en el backend, comparten el mismo grupo de clase. Entonces, cuando aplica CSS a un elemento de un grupo de clase común, cada elemento en él hereda automáticamente la misma configuración de estilo. En la parte delantera, esto les da una apariencia visualmente similar. Las clases de CSS ahorran tiempo, mantienen el diseño consistente y facilitan las ediciones futuras, ya que solo necesita actualizar la clase en lugar de cambiar cada elemento uno por uno.

Formas de agregar clases CSS a WordPress

Puede agregar clases de CSS a un sitio web de WordPress de múltiples maneras, dependiendo de su competencia en el uso de CSS. Te mostraré cómo hacerlo usando WordPress Customizer y un complemento como CSS personalizado simple, pero ambos métodos requieren que escribas CSS.

Pase al tercer método si está más interesado en el método sin código.

1. Uso de WordPress Customizer

Digamos que su página de WordPress tiene múltiples botones. Actualmente se ven simples, y quieres que se destaquen, por lo que planeas agregar un borde azul marino y un fondo azul cielo.

Agregar CSS a cada botón le llevará un tiempo considerable, ya que tendrá que repetir el proceso ocho veces. Pero con las clases de CSS, simplemente puede asignar la misma clase CSS a cada botón y escribir el CSS solo una vez. Nombremos nuestra clase CSS ' Custom-A' . En la ventana de su editor de páginas de WordPress, haga clic en cualquier botón> Configuración (icono de engranajes)> Alternar hacia abajo en la opción avanzada . Ahora, escriba el nombre de clase en clases CSS adicionales.

Repita el proceso para cada botón y guarde. Para agregar el código de estilo a estos botones, tendrá que navegar a WordPress Customizer> CSS adicional.

Para hacer que el borde azul marino y el fondo del cielo de fondo, pegarás tu CSS aquí.

Observe que el nombre de la clase CSS que elegimos viene antes de las reglas de estilo en el código. Esto asegura que el código se aplique a cada elemento que tenga este nombre de clase asignado.

Después de presionar publicar y obtener una vista previa de su página, los botones de estilo se verán así:

Eso es simple, si conoces CSS.

WordPress Customizer también es excelente para hacer cambios menores. Sin embargo, el problema es que el CSS agregado allí está vinculado al tema, lo que significa que puede perderse si cambia de temas. Entonces, si le gusta probar diferentes temas en su sitio web, tendrá que actualizar el código cada vez que cambie a un tema diferente, lo cual no es divertido. En ese caso, instalar un complemento para mantener seguros sus estilos de clase CSS es una opción mucho mejor.

2. Uso de un complemento como CSS personalizado simple

Una vez que instale el complemento CSS personalizado simple, la opción CSS personalizada se agregará a la sección de apariencia . Ahora solo necesita agregar su código CSS y actualizar CSS personalizado para reflejar los cambios. (Todavía necesita asignar nombres de clase a elementos que desea tener estilos comunes).

Plugs como este mantienen intacto su CSS personalizado, incluso si cambia su tema más adelante. También es un poco más organizado que WordPress Customizer. Sin embargo, ambos métodos no son escalables, ya que pueden desordenarse fácilmente cuando guarda CSS personalizados para múltiples grupos de elementos de todo su sitio web.

Es por eso que, para el estilo de todo el sitio, el enfoque recomendado es crear un tema infantil y actualizar su hoja de estilo. De esta manera, todos sus cambios se mantienen seguros en el tema de su hijo, incluso después de las actualizaciones del tema.

Aunque efectivo (y recomendado por los codificadores), este método puede volverse técnico rápidamente, ya que aún requiere un trabajo manual: tendrá que diseñar cada elemento (o múltiples elementos que usan clases CSS), que requiere mucho tiempo y no es amigable para el principiante. También tendrá que realizar un seguimiento de los nombres de clases, simplemente imagine que desea editar una clase de botón en particular y se desplaza a través de sin fin.

Entonces, ¿qué pasaría si pudiera escalar el estilo sin escribir una sola línea de código? Ahí es donde entran los constructores modernos de la página de arrastrar y soltar como Divi.

3. Uso de un constructor de sitios web sin código como Divi

La belleza de usar un creador de sitios web sin código moderno como Divi es que no necesita escribir CSS (o ningún código) para aplicar estilos consistentes en su sitio. Con una interfaz visual, puede asignar estilos a secciones, filas, columnas y módulos solo seleccionando y personalizando la configuración de diseño.

En Divi, creas presets en lugar de clases CSS. Durante años, Divi ofreció preajustes basados ​​en módulos que le permiten guardar y reutilizar estilos para módulos como botones, borrones e imágenes. Pero hemos lanzado algo aún más sorprendente: preestablecidos grupos de opción que le permiten ir aún más allá.

Antes de los preajustes del grupo de opciones, solo se le permitió aplicar presets en todos los módulos. Por ejemplo, una propaganda preestablecia solo se puede usar en otra propaganda. Ahora, incluso puede compartir configuraciones en todos los módulos.

En lugar de personalizar un elemento a la vez, los preajustes del grupo de opciones le permiten guardar estilos para configuraciones compartidas, como fondos, bordes o estilos de texto, y aplicarlos a múltiples elementos diferentes a la vez. Por ejemplo, si una sección y una columna usan un color de fondo, puede guardar esa configuración de estilo como preajuste y aplicarla en todos los elementos relevantes para crear un diseño cohesivo.

Divi simplifica la construcción y el ahorro de estilos como preajustes a través de características de arrastrar y soltar sin ninguna codificación, lo que hace que los cambios de diseño en todo el sitio sean más rápidos y accesibles, especialmente para los no codificadores.

Descargar divi 5

Veamos lo que quiero decir con más detalle a continuación

Los preajustes del grupo de opciones de Divi facilitan la adición de clases CSS

Los preajustes del grupo de opciones de Divi toman el concepto de clases de CSS y simplifican para los no codificadores. En lugar de escribir y asignar clases manualmente, ahora puede usar el Visual Builder de Divi para aplicar estilos de diseño compartidos en diferentes elementos con solo unos pocos clics.

Estos preestablecidos funcionan en el nivel de opción, lo que significa que se dirigen a configuraciones de diseño específicas como colores de fondo, bordes o espacios que se comparten en múltiples tipos de elementos. Entonces, por ejemplo, la configuración de fondo de una sección se puede aplicar a una columna, fila e incluso elemento de texto.

Es una forma más rápida, más fácil e intuitiva de mantener el diseño de su sitio web consistente. Aquí está como:

• Estilos reutilizables en los elementos: no necesita personalizar cada elemento manualmente. Guarde los estilos del grupo de opciones como preajustes y aplíquelos a cualquier elemento.
• Actualizaciones globales con una sola edición: modifique un preajuste una vez, y todos los elementos que usan ese preajuste se actualizarán automáticamente. Esto hace que los ajustes de diseño sean rápidos y eficientes en todo su sitio web.
• Combine múltiples presets: capa y mezcle diferentes presets (por ejemplo, bordes, sombras, estilos de texto) en cualquier elemento para una combinación de diseño flexible y creativa sin comenzar desde cero.
• Personalice los preajustes predeterminados para los estilos base: guarde los presets como predeterminado para aplicarlos automáticamente a todos los elementos relevantes.

Obtenga más información sobre los preajustes del grupo de opciones

Cómo usar Divi para agregar clases CSS a WordPress sin codificar

Ahora que sabes cuáles son los preajustes del grupo de opciones de Divi y que no necesitas saber que la codificación funcione con ellos, quería mostrarte cómo funciona exactamente dentro del Divi Builder. Lo que debe hacer para crear, guardar y aplicar preajustes de grupos a cualquier configuración de opción como fondo, borde, sombra de casillas, etc. Para nuestro ejemplo, personalizemos una página de precios.

Cambiar el fondo del botón

Supongamos que quiero cambiar el fondo del botón a Purple para que coincida con el color de la página. Por lo tanto, personalizaré el botón de la primera columna y guardaré la configuración como un botón de luz primario preestablecido. (El color negro en la configuración de la interfaz de usuario muestra que está editando una configuración preestablecida. Si ha seleccionado el modo oscuro, será lo contrario).

Ahora, para aplicar la misma configuración a los otros dos botones, simplemente cambiaré el botón preestablecido a luz primaria.

Cambiar la sombra de una columna

Agregamos una sombra de caja a todas las columnas. Agregaré una sombra de cuadro a la primera columna y la guardaré como el preajuste de sombras de la caja de sombra .

Para aplicar la misma sombra en las otras dos columnas, simplemente cambiaré el preajuste de la sombra de la caja a la sombra .

Modificando los preajustes de texto

También puede modificar estilos para elementos de texto, como H1 y H2S. Así es como funciona la actualización de las columnas H3 Preset:

Después de guardar, así es como se verá la página de precios:

Aunque he hecho cambios menores para mostrarle cómo funciona, puedes imaginar las posibilidades. Con los preajustes del grupo de opciones de Divi, editar estilos personalizados de grupos es tan simple como un clic de un botón. Pero esa es solo la punta del iceberg. También puedes:

• Establezca preajustes predeterminados para grupos de opciones para que los elementos base como encabezados o botones hereden su estilo automáticamente en el sitio. Una vez que comprenda cómo funcionan los presets predeterminados, nunca volverá a usar métodos antiguos.
• Grupo de opción de capa Presets en la parte superior de los preajustes de elementos para agregar énfasis adicional, como aplicar un fondo compartido y luego apilar una sombra o un estilo de borde para hacer que ciertos elementos se destaquen.

Hemos escrito una guía completa sobre todo lo que debe saber sobre los preajustes del grupo de opciones de Divi. Lea el artículo completo para obtener ideas de diseño y consejos sobre cómo simplificar el diseño web basado en clases con Divi.

Obtenga más información sobre los preajustes del grupo de opciones

Divi es un cambio de juego para el sistema de diseño basado en clases

Los preajustes del grupo de opciones de Divi aportan el poder de las clases de CSS a todos. Ya sea que esté diseñando solo o colaborando con un equipo, los preajustes aceleran su flujo de trabajo, escala maravillosamente a medida que su sitio crece y hace que un estilo constante sin esfuerzo. Son más rápidos, más eficientes y mucho más intuitivos que los flujos de trabajo CSS tradicionales.

Comience con Divi 5 hoy

Divi 5 está en modo de actualización completa. Estamos lanzando nuevas funciones cada semana, al igual que los preajustes del grupo de opciones, es una buena idea saber sobre unidades avanzadas, variables de diseño CSS y muchos más que cambian cómo se acerca al diseño de cualquier sitio web.

Obtenga más información sobre Divi 5

Divi 5 es un poderoso marco de diseño con herramientas potentes como Divi Dash, Sitios rápidos de Divi y Divi AI, construido para ayudarlo a crear sitios web personalizados y profesionales sin tocar una sola línea de código. ¿No hay nada que lo limite, listo para tomar una prueba de manejo en el futuro del diseño del sitio web?

Descargar divi 5