Cambiar el color de su enlace le brinda más control sobre el diseño de su sitio web y puede facilitar la navegación de sus visitantes.
En este artículo, le mostraremos cómo cambiar el color del enlace en WordPress, paso a paso.
¿Por qué cambiar el color del enlace en WordPress?
Cuando agrega un enlace en WordPress, su tema determinará automáticamente el color del enlace.
A veces, las opciones de color predeterminadas de su tema de WordPress serán exactamente las que desea, pero otras veces querrá tener más control sobre el aspecto de los enlaces.
Por ejemplo, es posible que desee cambiar el color de sus enlaces para que coincida con la marca o el logotipo de su empresa. O puede que desee aumentar el contraste de color para mejorar la accesibilidad web para lectores con visión limitada.
Algunos temas le permiten cambiar el color del enlace directamente desde el panel de opciones de su tema o el personalizador de temas de WordPress, así que asegúrese de revisar la documentación de su tema antes de cambiar el color del enlace con CSS.
Dicho esto, echemos un vistazo a algunas formas en las que puede cambiar el color del enlace en su sitio web de WordPress.
Método 1. Cambie el color del enlace en WordPress editando CSS
Una forma de cambiar el color del enlace en WordPress es agregando código CSS personalizado.
Lo primero que debe hacer es navegar a su panel de administración de WordPress e ir a Apariencia »Personalizar y luego haga clic en la opción de menú ‘CSS adicional’.
Esto lo llevará a una pantalla donde puede agregar su código CSS personalizado en el lado izquierdo de la página.
Agregará los fragmentos de código CSS de los ejemplos a continuación a esta sección de su editor.
Primero, vamos a personalizar el color general del enlace. Este es el color que verán sus visitantes si nunca antes hicieron clic en el enlace.
Puede utilizar el siguiente código CSS como ejemplo.
a {
color: #FFA500;
}
Esto cambiará el color del enlace predeterminado a naranja. Asegúrate de cambiar el #FFA500 color al color que desea utilizar.
Cambiar el color de desplazamiento del enlace en WordPress
Lo siguiente que vamos a cambiar es el color de desplazamiento del enlace. De esa manera, cuando un usuario pasa el cursor sobre un enlace, este cambiará de color para llamar su atención.
Puede utilizar el siguiente código CSS como ejemplo.
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 mouse sobre él. Asegúrese de cambiar el #FF0000 color al que prefieras.
Usamos el efecto de desplazamiento del subrayado del enlace aquí en en nuestros enlaces.
Cambiar el color del enlace después de la visita en WordPress
Otra cosa que puede querer cambiar es el color del enlace después de que un usuario hace clic en un enlace. Esto puede ayudar a los visitantes a navegar fácilmente por su blog de WordPress y ver en qué enlaces ya han hecho clic.
Puede utilizar el código CSS a continuación para cambiar el color del enlace visitado.
a:visited {
color: #0000FF;
}
Asegúrate de cambiar el azul #0000FF color al color que elijas.
Así es como se verá todo el código CSS anterior dentro del personalizador de WordPress.
Una vez que haya realizado los cambios, haga clic en el botón «Publicar» para que se publiquen.
El código CSS anterior cambiará el color de todos los enlaces de su sitio.
Si solo desea personalizar los enlaces que se encuentran en sus publicaciones y páginas, puede usar el ejemplo de código a continuación.
.entry-content a {
color: #FFA500;
}
.entry-content a:hover {
color: #FF0000;
text-decoration: underline;
}
.entry-content a:visited {
color: #0000FF;
}
Este código hace lo mismo que los ejemplos de código anteriores, pero .entry-content solo se orienta a enlaces dentro de su contenido.
Cambie el color de sus enlaces de navegación en WordPress
Un estilo de enlace final que también puede personalizar son los enlaces del menú de navegación.
Para obtener más detalles, consulte nuestra guía sobre cómo diseñar los menús de navegación de WordPress.
Si no desea agregar código directamente a su tema de WordPress, puede usar un CSS plugin para agregar código a su sitio web.
De esa manera, sus cambios de CSS se aplicarán incluso si decide cambiar su tema de WordPress.
Lo primero que debe hacer es instalar y activar el CSS y JS personalizados sencillos plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.
Tras la activación, simplemente vaya a CSS y JS personalizados »Agregar CSS personalizado en su panel de administración de WordPress.
Aquí puede agregar el mismo código CSS que el anterior.
Una vez que haya terminado de agregar el código, asegúrese de hacer clic en el botón ‘Publicar’ o ‘Actualizar’.
Método 2. Cambiar el color del enlace sin editar CSS
Si no se siente cómodo editando archivos CSS, este método es para usted.
En lugar de agregar código CSS directamente a su sitio web, puede usar un estilo CSS plugin para editar visualmente su sitio sin escribir ningún código.
Recomendamos usar CSS Hero plugin. Es muy amigable para principiantes y le permite personalizar visualmente su sitio web de manera similar a un creador de páginas de arrastrar y soltar.
Una vez el plugin está instalado, debe hacer clic en el botón ‘Continuar con la activación del producto’ sobre la lista de plugins para activarlo y conectar su cuenta.
Esto lo llevará a una pantalla donde puede ingresar su nombre de usuario y contraseña.
Todo lo que tiene que hacer es seguir las instrucciones en pantalla y volverá a su sitio web después de que se verifique su cuenta.
A continuación, haga clic en el botón ‘Personalizar con CSS Hero’ en la parte superior de la barra de herramientas de administración de WordPress.
Esto abrirá su sitio web con CSS Hero ejecutándose encima. CSS Hero usa lo que se llama un editor Lo que ves es lo que obtienes (WYSIWYG).
Simplemente haga clic en cualquier elemento de la página y aparecerá una barra de herramientas que le permitirá realizar personalizaciones.
Luego, haga clic en uno de los enlaces de su sitio web. Comenzaremos con uno de los enlaces de la publicación del blog.
Después de eso, seleccione el elemento del menú ‘Tipografía’ y puede elegir un nuevo color para su enlace.
Puede elegir un nuevo color de la lista o agregar su propio código de color.
Cambie el color de su menú de navegación de WordPress
A continuación, puede cambiar el color de los enlaces del menú de navegación de WordPress.
Simplemente coloque el cursor sobre su menú de navegación y haga clic en uno de los elementos del menú.
Luego, seleccione la opción ‘Tipografía’ y puede personalizar el color directamente debajo.
Notarás que cuando cambias el color del enlace del menú, los cambios se muestran inmediatamente en la vista previa.
Una vez que haya terminado de cambiar los colores de los enlaces, debe hacer clic en el botón «Guardar y publicar» para que los cambios estén activos.
Esperamos que este artículo le haya ayudado a aprender a cambiar el color del enlace en WordPress. Es posible que también desee ver nuestra guía sobre cómo elegir el mejor software de diseño web, o nuestra lista de WordPress imprescindibles. plugins.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.
Cómo cambiar el color del enlace en WordPress (Guía para principiantes) .
Fuente: wpbeginner