Aquellos que saben CSS saben que las clases de CSS son una gran cantidad de tiempo durante el estilo de toda la página. Pero si no le bacalaza, es posible que nunca se dé cuenta de lo poderosos que pueden ser. Hoy lo estamos cambiando.
En esta publicación 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 una manera sin código con un poderoso diseñador de sitios web de WordPress y Divi.
¿Qué son las clases de CSS y cómo ayudan?
CSS (Hojas en cascada) es un código que controla el diseño y la apariencia de elementos como colores, espacios y fuentes en el sitio web. Y Clase CSS Es una etiqueta de uso múltiple que asigna a muchos elementos, por lo que puede ponerlos todos al mismo tiempo en lugar de repetir el mismo proceso para cada elemento.
Sin clases de CSS, tendría que diseñar manualmente cualquier elemento que se convierta en mucho tiempo, especialmente cuando se trabaja en sitios de WordPress más grandes con muchos lados. Pero como suele suceder, la mayoría de las páginas incluyen elementos repetitivos y motivos, como botones en la página de precios o campos de funciones en diferentes secciones.
Estos elementos parecen similares porque en el backend dividen el mismo grupo de clase. Entonces, cuando usa CSS a un elemento de un grupo de clase común, cada elemento en él hereda automáticamente la misma configuración de estilo. Les da una mirada visualmente similar al frente. Las clases de CSS ahorran tiempo, mantienen la consistencia del proyecto y facilita las ediciones futuras, porque solo necesita actualizar la clase en lugar de cambiar cada elemento uno por uno.
Formas de agregar clases CSS a WordPress
Puede agregar la clase CSS a WordPress de muchas maneras, dependiendo de la competencia en el uso de CSS. Le mostraré cómo hacerlo con el personalizador y los complementos de WordPress, como un CSS simple no estándar, pero ambos métodos requieren la escritura CSS.
Ir a tercer método Si está más interesado en el método sin código.
1. Uso de WordPress Customizer
Digamos que su sitio web de WordPress tiene muchos botones. Actualmente, se ven simples y quieren que se destaquen, por lo que planea agregar un borde azul marino y un fondo azul.
Agregar CSS a cada botón llevará mucho tiempo porque tendrá que repetir el proceso ocho veces. Pero en las clases de CSS, simplemente puede asignar la misma clase CSS a cada botón y escribir CSS solo una vez. Llamemos a nuestra clase CSS ‘personalizado. En la ventana del editor de la página de WordPress, haga clic en cualquier botón> Ajustes (icono de transmisión)> Cambiar hacia abajo Avanzado opción. Ahora escriba el nombre de la clase en Clases CSS adicionales.
Repita el proceso de cada botón I Ahorrar. Para agregar el código de estilo a estos botones, debe ir a WordPress Customizer> CSS adicional.
Border borde de fondo azul y azul, pegará su CSS aquí.
Tenga en cuenta que el nombre de la clase CSS que hemos elegido aparece antes de las reglas de estilo en el código. Se asegura de que el código se use para cualquier elemento que tenga el nombre de clase asignado.
Después de golpear Publicar Y una vista previa de su sitio web, los botones elegantes se verán así:
Es simple, si conoces CSS.
WordPress Customizer también es perfecto para hacer cambios menores. Sin embargo, el problema es que el CSS agregado está relacionado con el motivo, lo que significa que se puede perder si cambia de temas. Entonces, si desea probar varios motivos en su sitio web, debe actualizar el código cada vez que cambia a un motivo diferente, lo cual no es divertido. En este caso, instalar el complemento para garantizar la seguridad de los estilos de clase CSS es una opción mucho mejor.
2. Con un complemento como un CSS no estándar simple
Después de la instalación CSS personalizado simple enchufar, . CSS personalizado La opción se agregará a Apariencia sección. Ahora solo necesita agregar el código CSS y Actualizar CSS no estándar Para reflejar los cambios. (Todavía debe asignar nombres de clase a los elementos que desea tener estilos comunes).
Dichos complementos mantienen un CSS no estándar, incluso si luego cambia el tema. También está un poco más organizado que el personalizador de WordPress. Sin embargo, ambos métodos no son escalables porque pueden desordenar fácilmente cuando guarda CSS personalizado para muchos grupos de elementos de todo el sitio.
Por lo tanto, para diseñar toda la página, el enfoque recomendado es crear el motivo de un niño y actualizar su hoja de estilo. De esta manera, todos sus cambios son seguros en el motivo del niño, incluso después de actualizar los motivos.
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 estilizar cualquier elemento (o muchos elementos utilizando clases CSS), que lleva mucho tiempo y no es amigable para el principiante. También tendrá que seguir los nombres de la clase: imagine que desea editar una clase específica de botones y desplazar a las cadenas de bacalao sin fin.
¿Qué pasa si puede escalar la estilización sin escribir una línea de código? Aquí es donde aparecen y caen constructores modernos de páginas arrastradas, como Divi.
3
La belleza de usar un diseñador moderno de sitios sin un código, como Divi, es que no tiene que escribir CSS (o ningún código) para aplicar estilos coherentes en su sitio. Usando la interfaz visual, puede asignar estilos a las secciones, poemas, columnas y módulos, simplemente eligiendo y ajustando la configuración de diseño.
En Divi, creas configuraciones preliminares en lugar de clases CSS. A lo largo de los años, Divi ha ofrecido configuraciones modulares preliminares que le permiten guardar y volver a usar estilos para módulos como botones, bardías e imágenes. Pero hemos lanzado algo aún más sorprendente: configuraciones grupales preliminares que le permiten ir aún más lejos.
La configuración preliminar del módulo se permitió aplicar antes de la configuración del grupo. Por ejemplo, la configuración de liberación solo se puede usar en otro tham. Ahora incluso puede compartir la configuración del módulo.
En lugar de ajustar un elemento a la vez, la configuración del grupo de opciones le permite guardar estilos para configuraciones compartidas, como antecedentes, límites o estilos de texto, y aplicarlos a muchos elementos diferentes al mismo tiempo. Por ejemplo, si la sección y la columna usan el color de fondo, puede guardar esta configuración de estilo como una configuración preliminar y aplicarla a todos los elementos apropiados para crear un diseño coherente.
Divi simplifica los estilos de construcción y guardado como configuraciones preliminares arrastrando y eliminando funciones sin codificar, haciendo un cambio en el diseño de todo el sitio más rápido y más accesible, especialmente para las personas que no son codificadores.
Descargar divi 5
Veamos lo que quiero decir con más detalle a continuación 👇
Grupos Divi Los preajustes facilitan la adición de clases de CSS
Las opciones preestablecidas del Grupo Divi adoptan el concepto de clases de CSS y simplificanlo para no codificadores. En lugar de escribir y asignar clases manuales, ahora puede usar un diseñador de divi visual para usar estilos de diseño conjunto en varios elementos con unos pocos clics.
Estas configuraciones preliminares funcionan en Nivel de opción, Esto significa que son administrados por configuraciones de construcción específicas, como colores de fondo, límites o espacios, que están disponibles en muchos tipos de elementos. Por ejemplo, la configuración de fondo de la sección se puede usar en una columna, una fila e incluso un elemento de texto.
https://www.youtube.com/watch?v=r8ksiglhxne
Es una forma más rápida, más fácil e intuitiva de mantener la consistencia del diseño del sitio. Aquí está como:
- Múltiples estilos de uso en elementos: No tienes que adaptar manualmente cada elemento. Guarde los grupos de la opción como preliminar y aplíquelos a cualquier elemento.
- Actualizaciones globales usando una edición: Modifique la configuración inicial una vez, y todos los elementos utilizando esta configuración de configuración actualizan automáticamente. Esto hace que las correcciones de diseño sean rápidas y eficientes en todo el sitio.
- Conecte muchas configuraciones: Capa y mezcle varias prejuicios (por ejemplo, bordes, sombras, estilos de texto) en cualquier elemento para una combinación flexible y creativa de diseño sin comenzar desde cero.
- Ajuste la configuración preliminar predeterminada para los estilos básicos: Guarde la configuración preliminar como predeterminada para aplicarlos automáticamente a todos los elementos relevantes.
Obtenga más información sobre la configuración del grupo de opciones
Cómo usar Divi para agregar clases CSS a WordPress sin codificar
Ahora, cuando sabes qué son la configuración del grupo Divi y que no tienes que saber la codificación para cooperar con ellos, quería mostrar cómo funciona exactamente en el Builder Divi. ¿Qué debe hacer para crear, guardar y aplicar la configuración del grupo a cualquier configuración de opción, como fondo, borde, sombra, etc. En nuestro ejemplo, ajuste la página de precios?
Cambio de fondo del botón
Supongamos que quiero cambiar el fondo del botón morado para que coincida con el color de la página. Entonces ajustaré el botón de la primera columna y guardaré la configuración como Luz primaria Botón preestablecido. (La configuración de la interfaz de usuario en negro muestra que edita configuración de configuración. Si ha elegido el modo oscuro, será lo contrario).
Ahora, para aplicar la misma configuración a los otros dos botones, solo cambio Botón inicialmente Luz primaria.
Cambiando la sombra de la columna
Agreguemos una sombra en el cuadro a todas las columnas. Agregaré una sombra a la primera columna y la guardaré como Sombra Caja preestablecida.
Para aplicar la misma sombra en las otras dos columnas, simplemente cambiaré el cuadro del cuadro Sombra.
Modificación de la configuración del texto
También puede modificar los estilos de elementos de texto como H1 y H2S. Así es como funciona la actualización de la columna Preset H3:
Después de ahorrar, así es como se verá la página de precios:
Aunque introduje pequeños cambios para mostrar cómo funciona, puedes imaginar las posibilidades. En el caso de la configuración del grupo Divi, la edición de los estilos de grupo personalizado es tan simple como hacer clic en el botón. Pero esta es solo la punta del iceberg. También puedes:
- Establezca la configuración preliminar predeterminada para grupos de opciones para que los elementos básicos, como encabezados o botones, hereden el estilo automáticamente en la página. Cuando comprenda cómo funciona la configuración preliminar predeterminada, nunca volverá a usar métodos antiguos.
- La capa de grupo de prefabricado en la parte superior de la configuración del elemento para agregar presión adicional, como el uso de un fondo común, y luego colocar una sombra o estilo de borde para distinguir ciertos elementos.
Escribimos toda la guía sobre todo lo que debe saber sobre la configuración del grupo de opciones Divi. Lea el artículo completo para obtener ideas para el proyecto y consejos sobre cómo simplificar el diseño del sitio web en la clase a través de Divi.
Obtenga más información sobre la configuración del grupo de opciones
Divi es un cambio de juego para el sistema de diseño de clases
Los preajustes del Grupo Divi traen clases de CSS a todos. Independientemente de si diseña solo o trabaja con el equipo, la configuración inicial acelera su flujo de trabajo, escala maravillosamente a medida que el sitio aumenta y se convierte en un estilo indispensable. Son más rápidos, más eficientes y mucho más intuitivos que los flujos CSS tradicionales.
Empiece hoy con Divi 5
Divi 5 está en modo de actualización completa. Lanzamos nuevas funciones cada semana, así como la configuración con grupos de opciones, es bueno saber sobre unidades avanzadas, variables de diseño CSS y muchas otras que cambian la forma en que el enfoque del diseño de cualquier sitio.
Obtenga más información sobre Divi 5
Divi 5 es una poderosa estructura de diseño con herramientas potentes como Divi Dash, Sitios rápidos de Divi y Divi AI, creada para ayudarlo a crear un sitio web personalizado y profesional sin tocar una línea de código. ¿Nada le limita, listo para realizar la búsqueda de una prueba de diseño del sitio web?
Descargar divi 5
