How To Change The Link Color In Wordpress (Beginner'S Guide)

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

¿Quieres aprender a cambiar el color de los enlaces en WordPress? 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?

Contents

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, puede cambiar el color de sus enlaces para que coincida con la marca o el logotipo de su empresa. También puede aumentar el contraste de color para mejorar la accesibilidad web para lectores con discapacidad visual. Algunos temas te permiten cambiar el color del enlace directamente desde el panel de opciones de tu tema o desde el personalizador de temas de WordPress, así que asegúrate de revisar la documentación de tu tema antes de cambiar el color del enlace con CSS. Dicho esto, echemos un vistazo a algunas formas de cambiar el color de los enlaces 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 e ir a Apariencia »Personalizar luego haga clic en la opción de menú «CSS adicional».

Personalizador De Wordpress En 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 CSS de los ejemplos a continuación a esta sección de su editor.
Agregar Una Pantalla De Código Css Adicional
Primero, vamos a personalizar el color general del enlace. Este es el color que verán sus visitantes si nunca antes han hecho clic en el enlace. Puede utilizar el siguiente código CSS como ejemplo. un {color: # FFA500; } Esto cambiará el color del enlace predeterminado a naranja. Asegúrese de reemplazar el color # FFA500 con el color que desea usar.
Cambiar el color de desplazamiento del enlace 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; decoración de texto: subrayado; } El código anterior cambiará el color del enlace a rojo y subrayará el texto cuando los visitantes pasen el cursor sobre él. Asegúrese de reemplazar el color # FF0000 por el que prefiera. Usamos el efecto de desplazamiento del subrayado del enlace aquí en MundoCMS en nuestros enlaces.
Cambiar el color del enlace después de la visita 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 usar el código CSS a continuación para cambiar el color del enlace visitado. a: visitado {color: # 0000FF; } Asegúrese de reemplazar el color azul # 0000FF con el color de su elección. Así es como se verá todo el código CSS anterior en el personalizador de WordPress.
Código De Personalización De Wordpress
Una vez que haya realizado los cambios, haga clic en el botón «Publicar» para publicarlos. 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 código de muestra a continuación. .entry-content a {color: # FFA500; } .entry-content a: hover {color: # FF0000; decoración de texto: subrayado; } .entry-content a: visitado {color: # 0000FF; } Este código hace lo mismo que los ejemplos de código anteriores, pero .entry-content solo apunta 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.
Personalizar 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 complemento CSS para agregar código a su sitio web. De esta manera, sus cambios de CSS se aplicarán incluso si decide modificar su tema de WordPress. Lo primero que debe hacer es instalar y activar el complemento Simple Custom CSS y JS. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Al activarlo, 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.
Agregue Código Css Personalizado Con El Complemento
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. Cambie el color del enlace sin modificar el 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 modificar visualmente su sitio sin escribir ningún código. Le recomendamos que utilice el complemento CSS Hero. Es muy amigable para principiantes y le permite personalizar visualmente su sitio web de la misma manera que 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 necesita hacer es seguir las instrucciones en pantalla y será redirigido a su sitio web una vez 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.
Personalizar Con Css Hero
Esto abrirá su sitio web con CSS Hero ejecutándose en él. 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 una barra de herramientas le permitirá realizar personalizaciones. Luego haga clic en uno de los enlaces de su sitio web. Comenzaremos con uno de los enlaces a las publicaciones del blog.
Haga Clic En El Enlace Del Sitio
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.
Selecciona La Opción De Tipografía
Cambie el color de su menú de navegación de WordPress
Luego, 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ú.
Haga Clic En El Enlace Del Menú De Navegación
Luego seleccione la opción «Tipografía» y puede personalizar el color directamente debajo. Notará que cuando cambia el color del enlace del menú, los cambios aparecen inmediatamente en la vista previa.
Personaliza El Color Del Menú Css Hero
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 se activen. Esperamos que este artículo le haya ayudado a aprender a cambiar el color de los enlaces en WordPress. También puede consultar nuestra guía sobre cómo elegir el mejor software de diseño de sitios 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 puede encontrarnos en Twitter y Facebook.

Leave a Reply