‘¿Cómo hago que mis enlaces destaquen?’ Esa es una pregunta que escuchamos regularmente de nuestros lectores de WPBeginner.
Si bien puede parecer un detalle menor, los colores de los enlaces juegan un papel importante en la usabilidad y las tasas de conversión de su sitio web. Es por eso que usamos el color naranja para los enlaces en WPBeginner.
La buena noticia es que cambiar los colores de los enlaces en WordPress se ha vuelto mucho más fácil de lo que solía ser. No necesita ser un experto en CSS ni contratar a un desarrollador; ahora existen soluciones sencillas que cualquiera puede usar, independientemente de sus habilidades técnicas.
En esta guía, le mostraremos los pasos exactos para cambiar los colores de sus enlaces en WordPress.
¿Por qué cambiar el color del enlace en WordPress?
Cuando agrega un enlace en WordPress, su tema determinará automáticamente el color de ese enlace. A veces, los colores predeterminados de su tema de WordPress serán exactamente lo que desea, pero es posible que necesite más control sobre cómo se ven los enlaces.
Por ejemplo, es posible que desee cambiar el color del enlace para que coincida con su marca o logotipo personalizado. O puede que desee aumentar el contraste de color para hacer que su sitio sea más accesible para lectores con visión limitada.
Dicho esto, veamos cómo cambiar el color del enlace en su sitio web de WordPress, sin importar el tema que esté utilizando. Simplemente use los enlaces rápidos a continuación para saltar directamente al método que desea usar:
- Cómo cambiar el color del enlace en temas clásicos de WordPress
- Cómo cambiar el color del enlace en temas de bloques de WordPress
- Cómo cambiar los colores de enlaces individuales en el editor de bloques
- Cómo cambiar el color de los enlaces en WordPress con código (todos los temas)
- Tutorial en video
Cómo cambiar el color del enlace en temas clásicos de WordPress
Algunos temas clásicos tienen opciones integradas para cambiar los colores de los enlaces, pero primero deberás revisar la configuración específica de tu tema.
Para ver si tu tema tiene esta opción, ve a Apariencia » Personalizador. Luego busca una configuración que diga 'Colores' o algo similar. En el tema Sydney, está etiquetado simplemente como 'Colores'.
Nota: Si te falta el personalizador de temas de WordPress, lo más probable es que estés usando un tema de bloques y necesites ir a la siguiente sección.
A continuación, busca una configuración que te permita cambiar los colores de los enlaces.
Sydney lo hace sencillo con opciones de 'Color de enlace' tanto para los estados predeterminado como para el de pasar el ratón por encima.
El color del enlace al pasar el ratón por encima es el que aparece cuando un visitante coloca el cursor del ratón sobre un enlace, por lo que es una excelente manera de captar su atención y mejorar tu tasa de clics.
Luego puedes hacer clic en 'Publicar' para guardar tus cambios.
Ten en cuenta que algunos temas, como Neve, no tienen configuraciones directas para el color de los enlaces. En su lugar, el color del enlace podría estar vinculado globalmente a los colores primarios o secundarios de tu tema.
Si tu tema no ofrece personalización directa del color de los enlaces, ¡no te preocupes! Puedes ir al cuarto método, donde te mostraremos cómo cambiar el color de tu enlace usando código.
Cómo cambiar el color del enlace en temas de bloques de WordPress
Si usas un tema de bloques, entonces necesitarás usar el editor de sitio completo para personalizar los colores de tus enlaces.
Ve a Apariencia » Editor en tu panel de WordPress.
Verás todos los menús para personalizar la apariencia de tu sitio.
Aquí, haz clic en ‘Estilos’.
Verás los estilos predeterminados de tu tema mostrados.
Busca y haz clic en el botón de lápiz 'Editar' para comenzar a personalizar.
El editor de sitio completo se abrirá con una barra lateral para editar los estilos de tu tema.
Haz clic en 'Colores' en esta barra lateral para acceder a las opciones de personalización de color.
Encuentra la opción Enlace y haz clic en ella para revelar la configuración de color para los estados predeterminado y de pasar el cursor. Asegúrate de que tus selecciones de color coincidan con el diseño de tu sitio web.
Una vez que estés satisfecho con tus cambios, simplemente haz clic en ‘Guardar’ para que se apliquen en tu sitio.
Cómo cambiar los colores de enlaces individuales en el editor de bloques
A veces, es posible que desees cambiar el color de enlaces individuales. Por ejemplo, podrías querer llamar la atención del visitante hacia el llamado a la acción en una página de destino.
Para hacer esto, simplemente resalta el enlace que deseas personalizar. Luego, haz clic en el ícono de flecha en la mini barra de herramientas y selecciona ‘Resaltar’.
Ahora puedes seleccionar ‘Fondo’ o ‘Texto’ dependiendo del cambio que desees realizar.
Hecho esto, procede a seleccionar el color que deseas usar.
Para personalizar más enlaces, simplemente repite estos pasos.
Cuando estés satisfecho con la apariencia de los enlaces, haz clic en ‘Guardar’ para que tus cambios se apliquen.
Cómo cambiar el color de los enlaces en WordPress con código (todos los temas)
Si tu tema no ofrece la opción para cambiar el color de tus enlaces, la forma más fácil es agregar CSS personalizado a tu sitio de WordPress.
A menudo, encontrarás fragmentos de código en tutoriales de WordPress con instrucciones para agregarlos al archivo functions.php de tu tema.
El mayor problema es que incluso un pequeño error en el fragmento de código personalizado puede dañar tu sitio de WordPress y hacerlo inaccesible. También perderás todas tus personalizaciones la próxima vez que actualices tu tema de WordPress.
Ahí es donde entra WPCode.
Después de pruebas exhaustivas, hemos concluido que es la forma más segura y fácil de agregar código personalizado a tu sitio web. Para más detalles, consulta nuestra reseña de WPCode.
Lo primero que necesitas hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: WPCode también tiene una versión premium que recomendamos usar si deseas desbloquear lógica condicional inteligente, biblioteca en la nube de fragmentos de código, función de fragmento de bloque y más.
Tras la activación, dirígete a Snippets de código » Añadir Snippet.
Aquí, simplemente pasa el cursor del mouse sobre ‘Agregar tu código personalizado (Nuevo fragmento)’.
Luego, haz clic en el botón ‘+ Agregar fragmento personalizado’ cuando aparezca.
A continuación, debes seleccionar ‘Fragmento de CSS’ como el tipo de código de la lista de opciones que se muestran en la pantalla.
Después de eso, escribe un título para el fragmento de código personalizado. Puede ser cualquier cosa que te ayude a identificar el fragmento en el panel de WordPress.
Ahora puedes continuar y agregar un fragmento de CSS personalizado a la caja de código. Veamos algunos de los diferentes fragmentos que puedes usar.
Cambiar el color de los enlaces en todo tu sitio web de WordPress
Para empezar, es posible que desees personalizar el color general de los enlaces. Este es el color que verán los visitantes antes de hacer clic en un enlace.
Para hacer esto, simplemente agrega el siguiente fragmento en la caja de código de WPCode:
a {
color: #FFA500;
}
En el ejemplo anterior, el código hexadecimal # cambiará el color del enlace a naranja, por lo que deberás cambiar#FFA500 al color que deseas usar.
Si no estás seguro de qué código hexadecimal usar, puedes explorar diferentes colores y obtener sus códigos en el sitio web de Códigos de color HTML.
Cuando estés contento con cómo se ve tu código, haz clic en el interruptor ‘Inactivo’ para que muestre ‘Activo’ en su lugar. Finalmente, haz clic en ‘Guardar fragmento’ para que el fragmento CSS se publique.
Ahora, si visitas tu sitio web de WordPress, verás el nuevo color del enlace en acción.
Cambiar el color al pasar el cursor sobre el enlace en WordPress
Para cambiar el color al pasar el cursor sobre el enlace, simplemente pega el siguiente fragmento en el editor de WPCode:
a:hover {
color: #FF0000;
text-decoration: underline;
}
El código anterior cambiará el color del enlace a rojo y subrayará el texto cuando los visitantes pasen el cursor sobre él. Como antes, puedes cambiar el código hexadecimal #FF0000 por el color que desees usar.
Cuando estés listo para publicarlo, puedes publicar el fragmento de código siguiendo el mismo proceso descrito anteriormente.
Cambiar el color del enlace después de visitarlo en WordPress
A continuación, es posible que desees cambiar el color del enlace después de que un usuario haga clic en él. Esto puede ayudar a los visitantes a orientarse en tu blog de WordPress al mostrar qué enlaces ya han hecho clic.
Puedes usar el siguiente código CSS para cambiar el color del enlace visitado:
a:visited {
color: #0000FF;
}
Como siempre, asegúrate de cambiar el código hexadecimal azul #0000FF por el color que deseas usar en tus enlaces.
Con eso hecho, haz clic en el interruptor 'Inactivo' para que cambie a 'Activo'. Luego, simplemente haz clic en 'Guardar fragmento' para que el código esté activo en tu sitio, blog o tienda en línea.
Tutorial en video
Si no le gusta seguir instrucciones escritas, puede ver nuestro tutorial en video en su lugar:
Esperamos que este artículo te haya ayudado a aprender cómo cambiar el color del enlace en WordPress. También puedes consultar nuestra guía sobre cómo cambiar el color del texto en WordPress o nuestra guía definitiva sobre los elementos de diseño más efectivos de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Stuart Duncan
solo me pregunto si el código de WP cambia el color de todos los enlaces en el sitio web o si tienes que hacerlo para cada enlace?
Soporte de WPBeginner
Debería actualizar el color de todos los enlaces a menos que tu tema específico tenga CSS que dificulte el cambio de color.
Administrador
kzain
He querido ajustar la apariencia de mis enlaces y esta publicación lo hizo súper fácil. La opción de personalizador fue perfecta para mis necesidades básicas,
pero definitivamente tendré en cuenta el método CSS para cambios más avanzados.
Dayo Olobayo
He estado luchando por semanas para cambiar el color de los enlaces en mi sitio de WordPress. Tu guía paso a paso hizo que fuera fácil de entender e implementar. Usé la etiqueta a en el CSS personalizado y funcionó perfectamente. Ahora mi sitio web se ve más moderno y visualmente atractivo. Gracias por la ayuda.
Soporte de WPBeginner
¡De nada!
Administrador
Chris
El código pudo cambiar los colores de los enlaces en la barra lateral, pero no los enlaces en el artículo. ¿Cómo cambio el color del enlace en el artículo?
Soporte de WPBeginner
El código es para todos los enlaces, si solo cambia el color del enlace para ti en un lugar, significa que tu tema específico tiene reglas CSS más específicas que el código, entonces anularía nuestro CSS. Para encontrar el CSS que afecta tu contenido, ¡te recomendamos usar Inspeccionar Elemento siguiendo nuestra guía a continuación!
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Abdul Rehman Asad
Gracias por compartir esto.
Soporte de WPBeginner
¡De nada!
Administrador
Shaun Mendonsa
Artículo muy útil y justo lo que necesitaba.
Soporte de WPBeginner
¡Nos alegra que nuestro artículo haya sido útil!
Administrador
Chloe
¡Gracias, esto es de gran ayuda! ¿Hay alguna forma de que puedas compartir cómo agregar enlaces en negrita en CSS? Me gustaría poner todos mis enlaces en negrita.
Soporte de WPBeginner
Deberías poder agregar negrita en el editor de publicaciones para tus enlaces de la misma manera que lo harías para otro texto en tus párrafos sin necesidad de editar tu CSS.
Administrador
Tom Maglienti
¡Gran artículo! Al usar CSS Hero para cambiar los colores de los enlaces, por ejemplo, si cambio el color de un enlace de una publicación de blog, ¿cambia todos los enlaces del sitio de la misma manera que lo hace al insertar el código CSS directamente?
¡Gracias!