ElegantThemes

Cómo cambiar el color del enlace en WordPress (guía para principiantes)

¿Le gustaría aprender a cambiar el color de los enlaces en WordPress?

Cambiar el color del 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 paso a paso cómo cambiar el color del enlace en WordPress.

¿Por qué cambiar el color del enlace en WordPress?

Cuando agrega un enlace en WordPress, su tema determina automáticamente el color del enlace.

A veces, las opciones de color predeterminadas de su tema de WordPress son exactamente las que desea, pero a veces desea tener más control sobre el aspecto de los enlaces.

Por ejemplo, puede cambiar el color de sus enlaces para que coincidan con la marca o el logotipo de su empresa. O tal vez desee aumentar el contraste de color para mejorar la accesibilidad en Internet para los lectores con problemas de visión.

Para algunos temas, puede cambiar el color del enlace directamente desde el panel de opciones del tema o desde el personalizador de temas de WordPress, así que lea la documentación del tema antes de cambiar el color del enlace usando CSS.

Sin embargo, veamos 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 agregar código CSS personalizado.

Lo primero que debe hacer es navegar a su panel de administración de WordPress y. caminar Apariencia »Personalizar y luego haga clic en la opción de menú «CSS adicional».

Personalizador de WordPress para 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 siguientes ejemplos a esta sección de su editor.

Agregar una pantalla de código CSS adicional

Primero vamos a ajustar el color del enlace general. Este es el color que verán sus visitantes si nunca han hecho 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 eso #FFA500 Colorea al color que quieras usar.

Cambiar el color del enlace flotante en WordPress

Lo siguiente que vamos a cambiar es el color de desplazamiento del enlace. De esta manera, cuando un usuario coloca el cursor sobre un enlace, cambia 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 cambia el color del enlace a rojo y subraya el texto cuando los visitantes se colocan sobre él. Asegúrate de cambiar eso #FF0000 Color al que prefieras.

Aquí en WPBeginner utilizamos el efecto de desplazamiento subrayado del enlace en nuestros enlaces.

Cambiar el color del enlace después de visitar en WordPress

Otra cosa que quizás desee 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 siguiente código CSS para cambiar el color del enlace que está visitando.

a:visited {
     color: #0000FF;
}

Asegúrate de cambiar el azul #0000FF Colorea el color que prefieras.

Así es como se ve todo el código CSS anterior en el personalizador de WordPress.

Código de personalización de WordPress

Una vez que haya realizado sus cambios, haga clic en el botón Publicar para publicar sus cambios.

El código CSS anterior cambiará el color de todos los enlaces de su sitio web.

Si solo desea personalizar los enlaces en sus publicaciones y páginas, puede usar el siguiente ejemplo de código.

.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 en el menú de navegación.

Personalizar los enlaces del menú de navegación

Para obtener más información, consulte nuestra guía sobre el diseño de menús de navegación de WordPress.

Si no desea agregar código directamente a su tema de WordPress, puede usar un complemento CSS para agregar código a su sitio web.

De esta 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 complemento Simple Custom CSS y JS. Para obtener más información, consulte nuestra guía paso a paso para instalar un complemento de WordPress.

Después de la activación, 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.

Agregar código CSS personalizado con complemento

Cuando haya terminado de agregar el código, haga 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 complemento de estilo CSS para editar visualmente su sitio web sin escribir ningún código.

Recomendamos utilizar el complemento CSS Hero. Es muy amigable para principiantes y le permite personalizar visualmente su sitio web, como un creador de páginas de arrastrar y soltar.

Una vez que el complemento está instalado, debe hacer clic en el botón «Continuar con la activación del producto» sobre la lista de complementos para activarlo y conectar su cuenta.

Activar CSS Hero

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 será redirigido a su sitio web después de confirmar 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.

Personalizar con CSS Hero

Esto abrirá su sitio web con CSS Hero. CSS Hero utiliza un editor WYSIWYG (lo que ves es lo que obtienes).

Simplemente haga clic en cualquier elemento de la página y aparecerá una barra de herramientas para que realice ajustes.

Luego haga clic en uno de los enlaces de su sitio web. Comenzaremos con uno de los enlaces de la publicación del blog.

Haga clic en el enlace del sitio web

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

Seleccione la opción de tipografía Seleccione

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 mueva el puntero del mouse sobre su menú de navegación y haga clic en uno de los elementos del menú.

Haga clic en el enlace al menú de navegación

Luego seleccione la opción «Tipografía» y podrá personalizar el color justo debajo de ella.

Si cambia el color del enlace del menú, verá que los cambios se previsualizan instantáneamente.

Personalizar el color del menú CSS Hero

Una vez que haya cambiado los colores del enlace, deberá presionar el botón Guardar y publicar para que sus cambios estén activos.

Esperamos que este artículo le haya ayudado a cambiar el color del enlace en WordPress. También puede consultar nuestra guía sobre cómo elegir el mejor software de diseño web o nuestra lista de complementos de WordPress imprescindibles.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo y Facebook.

Cómo cambiar el color del enlace en WordPress (Guía para principiantes) apareció por primera vez en WPBeginner.

.

Artículo Recomendado:  WordPress 5.8 Beta 4

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.