No importa qué tema elija para su sitio web de WordPress, habrá otros sitios que utilicen ese mismo diseño. E incluso con las amplias opciones de personalización que ofrecen muchos temas en la actualidad, es posible que desee que su sitio se destaque aún más.
Para que su sitio realmente se vea bien, debe ir más allá de la personalización estándar que se ofrece a través de las opciones o configuraciones de un tema. La personalización de su CSS de WordPress le permitirá modificar su diseño para que sea completamente único para su sitio.
Este artículo analizará varias formas en que puede personalizar su CSS de WordPress, incluido el uso de temas avanzados como Divi , la creación y personalización de temas secundarios, el uso del Personalizador de WordPress incorporado y los complementos de CSS de WordPress.
Lo primero es lo primero: CSS significa Hojas de estilo en cascada , que puede que no tenga más sentido para usted que el acrónimo. Entonces, vamos a desglosarlo.
Una hoja de estilo es un documento que describe los estilos (como fuente, colores, etc.) que se utilizarán para la presentación de otro documento. En nuestro caso, estamos diseñando páginas web. La parte «en cascada» del nombre es donde se vuelve realmente poderosa. Las páginas web se pueden diseñar con varias hojas de estilo, como una cascada en cascada, con la hoja inferior agregando o reemplazando los estilos de una superior. Esto es importante, porque es cómo podrá agregar sus propios estilos sin editar los originales provistos por su tema; lo abordaremos en breve.
CSS le permite separar la estructura de una página web de su apariencia. Toda la información de estilo está contenida en archivos CSS separados, escritos como reglas que el navegador web lee y aplica a la página. Las reglas describen el elemento HTML (llamado selector ) y los estilos a aplicar (llamados declaraciones ) como se muestra en la siguiente imagen:
Estructura de reglas CSS (de W3Schools )
Tan simple como parece, CSS se puede usar para modificar casi cualquier aspecto de la apariencia de una página web, incluido el diseño, los colores, las fuentes e incluso las animaciones. Para obtener más detalles, puede comenzar con este tutorial de CSS de W3Schools , que analiza la sintaxis.
La mayoría de los temas de WordPress incluirán el CSS utilizado para presentar su sitio en un archivo llamado style.css . Si abre ese archivo, verá una lista completa de reglas de estilo para su tema. Hagas lo que hagas, ¡no hagas ningún cambio en este archivo! La próxima vez que instale una actualización de su tema, esos cambios se sobrescribirán y los estilos de su tema volverán a ser los originales del diseñador.
Hay varias formas de agregar CSS personalizado a su tema de WordPress para que sus cambios sobrevivan a una actualización del tema. ¡Vamos a sumergirnos!
Cómo personalizar tu CSS de WordPress
Ahora que comprende mejor qué es CSS y cómo lo usan los temas de WordPress, echemos un vistazo a sus opciones para personalizar CSS (sin ningún orden en particular) y discutamos las ventajas y desventajas de cada método. Cuando hayamos terminado, no será exactamente un mago de CSS, pero podrá encontrar el mejor método para realizar los tipos de cambios que desea en su tema.
Opción n.° 1: personalizar CSS con un tema secundario
Si usa un tema secundario para personalizar su CSS, las actualizaciones de tema que mencionamos antes no serán un problema. Una actualización de tema afectará al tema ‘principal’, dejando intactos los cambios en el tema de su hijo. Muchos desarrolladores de temas incluyen un tema secundario para usted en estos días, que puede modificar según sea necesario.
Crear un tema secundario es bastante simple: implica crear una carpeta en su proveedor de alojamiento web que incluya un archivo style.css que enumere el tema principal como plantilla e importe el archivo style.css del tema principal (recuerde la ‘cascada’ de hojas de estilo ?). Tenemos un tutorial completo sobre cómo crear un tema secundario que puede consultar, que lo guiará a través del proceso.
Una vez que haya creado su tema hijo correctamente y lo haya activado, puede comenzar a personalizar su tema. La forma más rápida será editar su archivo style.css , al que se puede acceder de dos maneras.
La primera forma es usar el editor incluido en el panel de administración de WordPress, haciendo clic en Apariencia > Editor . La página Editor mostrará una lista de archivos verticalmente en el lado derecho de la página. Su archivo style.css estará hacia el final de la lista, y al hacer clic en la opción Hoja de estilo se cargará y mostrará su archivo style.css . Puede agregar sus cambios al CSS y hacer clic en el botón Actualizar para guardarlos.
El editor de WordPress se puede usar para agregar estilos al archivo style.css de su tema secundario .
La otra forma de acceder a su archivo style.css (que recomendamos) es navegar a través de los archivos en su proveedor de alojamiento mediante FTP o un administrador de archivos. La carpeta del tema secundario que creó estará en wp-content > themes . Puede usar cualquier editor de texto para editar el archivo style.css .
Para asegurarse de que se muestren sus cambios, debe asegurarse de que está utilizando los mismos ‘ selectores ‘ que el tema principal. Puede usar el archivo style.css del tema principal como referencia, o usar su navegador para inspeccionar elementos individuales para determinar los selectores que se usan.
La mayor desventaja de usar un tema hijo es la necesidad de sentirse algo cómodo con el manejo de archivos en su servidor. En el lado positivo, el uso de un tema secundario le brinda un control total sobre la apariencia de su sitio web. Nuestra guía para la personalización de temas de WordPress le mostrará algunos otros trucos que puede usar con un tema secundario.
Si bien podemos guiarlo a través del proceso de creación de un tema secundario, para algunas personas parece ser un gran problema solo hacer algunos cambios de estilo. Afortunadamente para usted, hay formas de agregar CSS personalizado sin crear un tema secundario; con eso en mente, echemos un vistazo a nuestra próxima opción.
Opción n.º 2: personalizar CSS con el personalizador
Ya en WordPress 3.4, los desarrolladores de temas han podido aprovechar el Personalizador de WordPress . El Personalizador permite que el propietario o administrador de un sitio ajuste la configuración de un tema y obtenga una vista previa antes de aplicarlo al sitio web. Muchos temas ahora utilizan el Personalizador para brindarle acceso a opciones y configuraciones.
Lo que nos interesa hoy es la capacidad de agregar CSS personalizado y, afortunadamente, muchos temas lo permiten como una opción en el Personalizador. Puede consultar la documentación de su tema para verificar si está disponible.
Los desarrolladores de temas de WordPress pueden habilitar su tema para ofrecer personalización de CSS en el Personalizador de WordPress.
Primero, vaya al Personalizador en su panel de administración de WordPress visitando Apariencia > Personalizar . El Personalizador tendrá un menú en el lado izquierdo. Si su tema ha habilitado CSS personalizado, en algún lugar cerca de la parte inferior del menú generalmente habrá una opción Personalizada , y al hacer clic en eso, aparecerá un cuadro de texto donde puede agregar estilos personalizados. La vista previa de la derecha se actualizará para mostrarle el efecto de sus cambios, y puede hacer clic en el botón Guardar y publicar cuando haya terminado.
La ventaja de usar el Personalizador es su simplicidad, y no tienes que instalar nada una vez que tu tema haya habilitado su uso. También puede obtener una vista previa de todos sus cambios antes de publicarlos. La desventaja de usar el Personalizador es que aún necesita sentirse cómodo agregando reglas CSS, y no todos los temas lo tienen habilitado de esta manera. Si decide cambiar de tema, es posible que tenga que buscar otra forma de personalizar su CSS.
Algunas de las opciones de complemento disponibles para CSS personalizado hacen que este proceso de edición de CSS sea aún más fácil, ¡así que echemos un vistazo!
Opción n.º 3: personalizar CSS mediante complementos de CSS
La ventaja de usar un complemento para la personalización de CSS es que mantiene el complemento y su CSS incluso si cambia su tema. Sin embargo, eso tiene sus ventajas y desventajas, ya que los estilos CSS agregados a un tema pueden no ser adecuados para otro.
Dicho esto, ¡veamos las opciones de complementos!
CSS personalizado en Jetpack (Gratis)
El complemento Jetpack gratuito está instalado en más de un millón de sitios web de WordPress, que bien pueden incluir el suyo. Trae características de la plataforma alojada de WordPress.com a sitios web autohospedados, y para la discusión de hoy, eso incluye un módulo CSS personalizado . Una vez que el módulo está activado en el panel de control de Jetpack, está disponible un editor de CSS personalizado, lo que le permite personalizar su tema sin crear un tema secundario.
Accedes al editor yendo a Apariencia > Editar CSS . La ventana de edición tiene un mensaje de marcador de posición, que puede eliminar o agregar sus cambios después. Hay otras opciones disponibles para usted, como el uso de un preprocesador (como Less o Sass ) para un uso más avanzado de CSS, reemplazar el CSS del tema con el suyo en lugar de simplemente agregarlo y aplicar su CSS al tema móvil. Jetpack también tiene un botón de vista previa, que le permite ver sus cambios en acción antes de guardar. Además, puede volver a una versión anterior de su CSS personalizado.
El módulo CSS personalizado es una opción simple si ya tiene Jetpack instalado, pero si no está utilizando otras funciones de Jetpack, puede ser demasiado para instalar Jetpack solo para este módulo.
CSS personalizado simple (gratis)
Si, en cambio, desea una opción independiente, Simple Custom CSS es una buena opción. Este complemento gratuito, utilizado en más de 200 000 sitios web con una calificación de 4,9 estrellas, definitivamente lo ayudará a realizar el trabajo para personalizar su CSS de WordPress.
Este complemento no requiere configuración, solo instálelo y actívelo. Para editar su CSS, vaya a Apariencia > CSS personalizado en el panel de administración de WordPress. Agregue su CSS personalizado al editor en esa pantalla y haga clic en el botón Actualizar CSS personalizado para guardar sus cambios.
Usar este complemento es similar a editar el archivo style.css en el sentido de que no hay vista previa. Tienes que guardar tus cambios para ver el efecto en tu sitio. A diferencia de Jetpack, no hay reversión a versiones anteriores.
CSS Hero (Desde $14 por año)
La última opción de complemento que estamos viendo hoy es un complemento premium llamado CSS Hero . A partir de $ 14 por año para un solo sitio, este complemento le permite personalizar su tema utilizando una interfaz de apuntar y hacer clic fácil de usar.
Diseñado para funcionar mejor con docenas de temas compatibles (como nuestro propio tema de la revista Extra ), CSS Hero le brinda control total sobre todos los elementos de su tema. Para los temas que no están en su lista, puede usar el modo Rocket para habilitar la personalización de CSS Hero.
CSS Hero elimina la necesidad de comprender la sintaxis de CSS al convertir el diseño en un proceso visual de apuntar y hacer clic, incluso para efectos más complejos, como transiciones. También puede obtener una vista previa de sus cambios en vivo y volver a una revisión anterior.
Si desea modificar su CSS de WordPress por completo pero no tiene conocimiento de CSS, CSS Hero es una excelente opción con todas las funciones para personalizar su sitio, especialmente si está utilizando uno de sus temas recomendados.
Opción #4: personalizar CSS usando el tema Divi
Hay temas de WordPress que tienen como objetivo brindarle un control completo sobre todo el CSS de su sitio web, brindando un control avanzado para permitir que tanto los novatos de CSS como los diseñadores avanzados personalicen el aspecto de su sitio con facilidad. Nuestro tema Divi es uno de los más avanzados del mercado y es nuestra primera elección (¡naturalmente!) si desea poder personalizar su CSS de WordPress.
Divi le brinda toneladas de opciones de personalización para todos los elementos de su sitio web, pero si realmente necesita agregar CSS personalizado, hay dos formas de hacerlo. Puede aplicar CSS a todo el sitio utilizando el poderoso ePanel, que tiene una opción de CSS personalizado . Alternativamente, si desea aplicar cambios solo a un módulo específico en una página, puede usar Configuración de diseño avanzada , que tiene una pestaña CSS personalizada .
El ePanel de Divi proporciona un campo CSS personalizado para cambios CSS globales.
Para usar el ePanel, dentro del panel de administración de WordPress, vaya a Divi > Opciones de tema . En la pestaña Configuración general , desplácese hasta la parte inferior, donde encontrará un campo CSS personalizado . Ingrese su CSS personalizado y haga clic en Guardar . Listo, cambio-o! Su CSS ahora se reflejará en su sitio, al igual que editar un archivo style.css . También le proporcionamos algunos ejemplos adicionales de personalizaciones de CSS que puede probar en el ePanel .
Si bien cada módulo Divi tendrá su propia configuración general y avanzada , lo que le permitirá personalizar casi todo, todos también tienen una pestaña de CSS personalizado para que ingrese su propio CSS. Para encontrar esa pestaña, edite un módulo, una fila o una sección para ver la ventana emergente de configuración. En la pestaña CSS personalizado , verá campos separados para cada elemento estructural del módulo, para que pueda aplicar sus cambios individualmente.
Las ventajas de usar el ePanel de Divi y las pestañas CSS personalizadas son evitar la necesidad de crear un tema secundario y orientar CSS fácilmente a módulos individuales en páginas específicas. Un tema avanzado como Divi le brinda un control superior sobre su CSS de WordPress con pocas molestias.
Conclusión
Si bien sabe que su contenido es excelente, desea asegurarse de que el diseño de su sitio se destaque entre la multitud, incluso si está utilizando un tema popular. Con CSS, puede personalizar el diseño de su sitio para que se vea completamente diferente, incluso cuando se compara con otros que usan el mismo tema.
Parte del poder de WordPress es tener acceso a múltiples formas de resolver cualquier problema. Hay varias formas de personalizar el CSS de WordPress:
- Usa un tema hijo.
- Usa el Personalizador.
- Utilice un complemento CSS.
- Usa un tema avanzado, como Divi.
¿Qué experiencia has tenido en la personalización del CSS de WordPress? Nos encantaría escuchar sus consejos y trucos favoritos. ¡Suscríbase a la sección de comentarios a continuación y háganoslo saber!
Imagen en miniatura del artículo de Max Griboedov, ProStockStudio / shutterstock.com