Si desea darle a su WordPress un estilo único, CSS es la mejor herramienta. Muchos motivos y constructores de las páginas (como el editor del sitio web de WordPress o el tema Divi) admiten la mayoría de las estilizaciones para usted. Sin embargo, todavía hay casos en los que debe escribir su propio CSS no estándar. En este artículo, incluye varias formas de hacer esto de manera segura, tanto utilizando herramientas predeterminadas de WordPress como a través de soluciones mejoradas como Divi.
Tl; dr.
Agregue CSS no estándar a WordPress adaptando a «Apariencia> Ajustar> CSS» o instale un complemento como WPCode. El ajuste es el método más fácil para la mayoría de las cosas. Divi también ofrece excelentes formas de hacerlo.
¿Qué es CSS y por qué usarlo en WordPress?
CSS (estilos en cascada) determina cómo se ve su sitio: fuentes, colores, sistemas y muchos más. Por lo general, su tema o diseñador de páginas ofrece muchas configuraciones de estilo. Pero agregar CSS personalizado puede ser beneficioso cuando:
- Necesita una corrección que no sea parte de los elementos de control de diseño predeterminados.
- Desea un estilo único para varios elementos especializados.
- Usted tiene requisitos de estilo avanzado o a gran escala.
- Desea usar el marco CSS en su sitio web de WordPress.
Independientemente del tema o el diseñador, no necesita editar los archivos básicos del tema. A continuación se presentan cuatro formas confiables de agregar CSS no estándar sin el riesgo de estabilidad del sitio (y pérdida de cambios durante la actualización).
Los mejores métodos para agregar CSS personalizado en WordPress
Agregar CSS personalizado puede ser intimidación, pero no tiene que editar los archivos básicos del tema. En su lugar, use uno de estos métodos para agregar de forma segura estilos personalizados a su sitio de WordPress. Comenzaremos con las opciones más convenientes a través de las opciones de Divi, pero también mostraremos otras formas de esto.
1. Editor / adaptación del sitio web de WordPress (enfoque predeterminado)
En el caso de los motivos de bloque (por ejemplo, veinte y veintisiete), WordPress proporciona lo que llaman Editor de sitios web. Todavía tienes en el caso de los motivos clásicos Sastre. Ambos ofrecen un lugar dedicado para agregar su propio CSS, aquí vas a agregar el tuyo:
- Bloquear los motivos (Editor de sitios)
- Desde el tablero de WordPress, vaya al editor Look>.
- Abra el panel «Estilo» y busque la opción de agregar «CSS adicional».
- Pegar CSS no estándar y guardar.
- Temas clásicos (Ajuste)
- Ir a apariencia> personalizar.
- Busque CSS adicional.
- Agregue sus estilos allí y publique.
El uso del editor o personalización de sitio web predeterminado es un método fácil de todo el sitio. Debido a que su CSS personalizado se guarda en su base de datos, las actualizaciones de WordPress no lo reemplazarán. Tampoco tiene que configurar el tema del niño para los cambios básicos de CSS.
2. Complementos de implementación de código
Si prefiere un escritorio de navegación de código personalizado centralizado (que incluye CSS, JavaScript, fragmentos PHP, etc.), los complementos como WPCode o FLuteuteUnsnippsts son perfectos. La desventaja es que solo puede ver cómo se ve su CSS en la parte delantera del sitio (mientras que con Divi, el sastre del sitio web y el editor de WPS, los cambios de CSS se pueden ver en la trastienda donde lo coloca).
Instale y active el complemento seleccionado: el código WPP ha sido durante mucho tiempo y es confiable.
Vaya al escritorio de navegación y cree un nuevo fragmento. Agregue CSS no estándar, dale un nombre descriptivo y seleccione sus reglas de implementación (por ejemplo, solo en toda la página o solo en algunas páginas). Finalmente guarda tu fragmento.
Estos tipos de complementos almacenan CSS en un solo lugar y protegen sus cambios contra las actualizaciones del tema o WordPress. Son particularmente útiles si trabaja con JavaScript o PHP no estándar.
3. Motivo infantil (avanzado)
Si desea modificaciones extensas o prefiere organizar CSS en archivos separados, el motivo del niño es un enfoque recomendado. Esto evita la desaparición con actualizaciones de motivos de rutina. Esto se debe al hecho de que si edita el archivo de motivo, y estas actualizaciones de actualizaciones, la actualización reemplazará su archivo editado por la última versión de los programadores.
Para usar este método, debe crear un tema para niños. Puede hacerlo con un complemento o a mano agregando una carpeta (por ejemplo, Mytheme-Child) dentro de WP-Dontent/Temes/Custom-Child-Theme/Stylesheet.css.
Establezca StylleShead.css que se refiera al motivo principal dentro de esta carpeta. Muchos usuarios de motivos infantiles opcionalmente agregan archivo de función A.PHP si necesitan agregar PHP no estándar a su sitio, que no se reemplazará. Finalmente, debe activarlo en el tablero. Puede realizar cualquier cambio en el motivo del niño a través de FTP o en el área del archivo.
Hay muchos motivos preconstruidos de niños Divi que contienen todo tipo de estilos predefinidos y funciones adicionales. Por supuesto, también puedes crear el tuyo.
Nota: Si planifica solo cambios de CSS menores, el uso de un editor o complemento de sitios es más simple. Pero el motivo de su amigo es su amigo si tiene grandes modificaciones o si desea su propia estructura de archivos «style.css».
Aprenda sobre los motivos del niño
4. Muchas formas de usar Divi (sólido y principiante)
Finalmente, si desea una impresión más visual (y menos exigente) con la posibilidad de agregar CSS personalizado, Divi es la mejor opción. Combina controles de diseño avanzados, por lo que a menudo no necesitará CSS adicional, formas flexibles de integración de su propio código.
Escribe menos CSS de Divi
Antes de mostrarle cuatro formas rápidas de agregar CSS personalizados de Divi (esto realmente le da todo lo que necesita), quería mostrar cómo Divi reduce su dependencia de escribir CSS. En primer lugar, el editor sirve mucho para usted. Cada configuración del proyecto en Divi envía automáticamente CSS cargados dinámicamente por usted.
Ejemplo: las consultas de los medios a menudo son difíciles para la mayoría para el trabajo, pero Divi admite detalles para usted
Divi 5 también admite todos los CSS modernos (Clak (), Calc () y valores sin unidad), pasando el poder de las unidades CSS avanzadas al editor visual.
Divi ai puede incluso escribir para usted WordPress y Divi de acuerdo con Divi.
Por ejemplo, en el que desea agregar su propio CSS no estándar, Divi ofrece cuatro contextos diferentes para hacer esto (dependiendo de la necesidad exacta).
Opciones de motivo Divi para CSS de todo el Sitere
El primero es agregar estilos del sitio a través del panel de opciones de motivos Divi. Vaya al tablero de WordPress> Opciones de Divi> Motivos y agregue CSS en toda la página en el campo personalizado CSS.
Agregar CSS específico al sitio web de Divi
Al editar la página en Divi, abra la configuración de la página> pestaña avanzada y coloque reglas específicas para la página en el campo personalizado CSS.
Agregar CSS a nivel de módulo
Cada módulo Divi ha avanzado> CSS personalizado Pestaña, por lo que puede diseñar un elemento sin afectar el resto del sitio. Esto es bueno porque puede «adjuntar» directamente su CSS no estándar al elemento en el que hay estilo.
También puede adjuntar CSS personalizado en configuraciones preliminares y opciones preliminares preliminares para usar dinámicamente los mismos estilos cuando desee recordarlos.
Agregar un CSS construido usando un módulo de código
¿Necesita un HTML/CSS/JS completamente no estándar? El módulo de código DIVI admite un código integrado, ideal para elementos no estándar independientes.
Simplemente agregue el módulo de código en el constructor DIVI e inserte su HTML/JS junto con CSS en línea directamente en el campo del código del módulo.
Las mejores prácticas de CSS de Divi y WordPress
Tienes muchas opciones. Como herramienta de diseño, Divi, por supuesto, presta especial atención a las necesidades de los diseñadores y ofrece muchas formas de agregar CSS personalizados a su sitio. Use el método más fácil que se adapte a sus necesidades. Para ver rápidamente lo que podría ser lo mejor para ti, míralo:
La mayoría de estos métodos ayudan a evitar la edición directa de los archivos de motivos básicos y, por lo tanto, ayudan a evitar cambios de sobrescritura. Considere el motivo de los niños para adaptaciones extensas que puede usar de un sitio web a otro.
Permiten estilos receptivos y dinámicos directamente en los controles Divi construidos, lo que reduce significativamente situaciones en las que es necesario CSS no estándar. Recomiendo descubrir personas con opciones de configuración grupal para seguir rápidamente todo el sitio.
Construimos Divi para ser el mejor motivo de WordPress. Tiene tantas opciones de diseño integradas en el editor visual que escribe menos CSS. E incluso si lo necesita, siempre es fácil agregar estilos no estándar como es necesario.
Obtener Divi
