Cómo Cambiar el Color del Enlace en WordPress (Guía para Principiantes)

‘¿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?

Las principales razones para cambiar los colores de los enlaces en WordPress son para que coincidan con la identidad de tu marca y mejorar la legibilidad de tu contenido. Al personalizar estos colores, diriges la atención de tus visitantes a las partes más importantes de tu página.

Aquí tienes algunos beneficios específicos de personalizar los colores de tus enlaces:

• Mejor Accesibilidad: Aumentar el contraste de color entre el texto y el fondo hace que tu sitio sea más fácil de leer para personas con discapacidades visuales.
• Consistencia de marca: Puedes alinear tus enlaces con tu logo y esquema de color general para una apariencia profesional.
• Mayores tasas de clics: Usar un color distintivo para los enlaces (como botones o llamadas a la acción) anima a los visitantes a hacer clic, aumentando las conversiones.

Dicho esto, veamos cómo cambiar el color de los enlaces en tu sitio web de WordPress. Simplemente usa los enlaces rápidos a continuación para ir directamente al método que prefieras:

• 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
• How to Change Link Color in WordPress With Code (All Themes)
• Tutorial en video
• Preguntas frecuentes sobre cómo cambiar el color de los enlaces en WordPress

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'.

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 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.

Busca la opción Enlace y haz clic en ella para revelar la configuración de color tanto para los estados predeterminados como para los de pasar el cursor. Deberías elegir un color que coincida con el diseño de tu sitio web.

Sin embargo, también es importante asegurarte de que haya un alto contraste entre el fondo y el color del enlace. Esto garantiza que tu sitio sea accesible y fácil de leer para todos.

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 específico que deseas personalizar.

Luego, haz clic en el ícono de flecha en la barra de herramientas y selecciona 'Resaltar' en el menú desplegable.

A continuación, haz clic en la pestaña 'Texto'. Ahora puedes seleccionar el color para ese enlace específico.

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.

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;
}

Nota: Este código CSS cambia el color de los enlaces para todo tu sitio web. Esto incluye menús de navegación, botones y enlaces del pie de página.

En el ejemplo anterior, el código hexadecimal # cambiará el color del enlace a naranja, por lo que deberás cambiar #FFA500 por el color que desees 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:

Preguntas frecuentes sobre cómo cambiar el color de los enlaces en WordPress

Aquí hay algunas preguntas que nuestros lectores han hecho con frecuencia sobre cómo cambiar los colores de los enlaces en su sitio web:

¿Puedo cambiar el color de un hipervínculo?

Sí, la mayoría de los temas de WordPress te permiten cambiar los colores de los hipervínculos globalmente a través de la configuración de Apariencia o el Editor del Sitio. También puedes cambiar el color de enlaces individuales directamente dentro del editor de publicaciones resaltando el enlace y seleccionando un color de la barra de herramientas.

¿Cómo personalizo un enlace en WordPress?

Puedes personalizar un enlace seleccionándolo en el editor de bloques y usando las opciones de la barra de herramientas. Esto te permite cambiar la URL de destino, configurarlo para que se abra en una nueva pestaña o ajustar la configuración de color y estilo en la barra lateral derecha.

¿Cómo personalizo el enlace de mi URL?

Para cambiar el texto de la URL en sí (el slug), ve a la configuración de 'Publicación' en la barra lateral derecha y busca la sección 'URL'. Si deseas cambiar la apariencia visual del enlace, como la fuente o el color, utiliza la configuración de 'Estilo' en el editor de bloques.

Para más detalles, consulta nuestro tutorial sobre cómo cambiar las URL de tu sitio de WordPress.

¿Cómo se cambian los enlaces en WordPress?

Simplemente haz clic en el texto del enlace existente dentro del editor de contenido y selecciona el botón ‘Editar’ (icono de lápiz) en la barra de herramientas flotante. Desde allí, puedes pegar una nueva URL o modificar el texto que deseas mostrar a tus visitantes.

¿Cómo puedo cambiar el enlace de mi página?

Puedes cambiar el enlace de una página editando el slug de la URL permanente en la barra lateral de configuración de la página, en la sección ‘URL’. Si la página ya está publicada, te recomendamos configurar una redirección 301 para que los visitantes que usen el enlace antiguo sean enviados a la nueva página correcta.

¿Cómo cambiar el icono de enlace en WordPress?

WordPress no tiene una configuración predeterminada para agregar o cambiar iconos de enlace, por lo que generalmente necesitarás usar un plugin. Plugins como External Links pueden agregar automáticamente iconos a los enlaces salientes, o puedes agregar iconos manualmente usando FontAwesome y CSS personalizado.

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.