Cómo optimizar el color de los enlaces utilizando las funciones integradas de WordPress: una guía para mejorar su marca y la experiencia del usuario

Cómo cambiar los colores de los enlaces de WordPress

WordPress proporciona un formato predeterminado para los hipervínculos. El esquema de colores de los enlaces individuales o de todo el sitio puede modificarse mediante varias opciones: el personalizador de temas, el editor de bloques predeterminado de WordPress o la implementación de CSS personalizado.

Método 1: Utilizar el personalizador de temas de WordPress

Tenga en cuenta que la interfaz del personalizador puede variar ligeramente en función del tema utilizado. No obstante, a continuación se ofrece una descripción general de los pasos:

1. Inicie sesión en el panel de administración de WordPress y vaya a la secciónestado exterior > personalizacióno visiteApariencia>Temassobre el tema seleccionadopersonalización.
2. Una vez en el Personalizador de temas, desplácese por la barra de navegación de la izquierda y haga clic en "color".

3. Accede a los colores del tema de WordPress desde el personalizador.
4. Desplázate de nuevo hacia abajo hasta encontrar la opción de color del enlace y cámbialo al tono que desees.
5. Cambia los colores de los enlaces desde el personalizador de temas.

Los resultados se muestran a continuación:

Utilice el personalizador de temas para cambiar el antes y el después de los colores de los enlaces.

Tenga en cuenta que este método es el más adecuado para cambiar los colores de los enlaces en todo el sitio web. No hay flexibilidad para añadir personalizaciones a los hipervínculos.

Método 2: Utilizar el editor de bloques predeterminado de WordPress

Gutenberg es el editor basado en bloques predeterminado de WordPress. Utiliza bloques individuales de contenido para crear diseños y otros ajustes personalizados para tu sitio. Esto facilita añadir, mover y eliminar contenido sin tener que preocuparse por HTML o CSS.

También es posible cambiar el color de enlaces individuales en un sitio web - el método es el siguiente:

1. Desde el panel de administración de WordPress, vaya a "escritos">"Todos los artículos"y, a continuación, haga clic debajo de la entrada cuyo color de enlace desea personalizar en "compilador".

2. Busque el bloque que desea modificar y haga clic en él para que aparezcan las opciones de edición a la derecha.

3. En la sección Colores, haga clic en el texto y seleccione el color deseado o introduzca su código.

4. Una vez que haya completado los cambios, haga clic en la esquina superior derecha de la ventana "actualización"Botón

Método 3: Usar CSS personalizado

Si su tema de WordPress no ofrece opciones integradas de personalización del color de los enlaces, puede añadir CSS personalizado para definir los estilos de los enlaces. Esto se hace de la siguiente manera:

1. En el panel de administración de WordPress, vaya aestado exterior > personalizaciónDesplácese hasta la opción CSS adicional y haga clic en ella para abrir el editor CSS y añadir su código personalizado.
2. Añade CSS adicional al personalizador de temas.

Para cambiar los colores de los enlaces en todo el sitio, es necesario utilizar etiquetas en lugar de clases o ID específicos. por ejemplo:

a {
    color: #5246F1;
    text-decoration: underline;
}
a:hover {
    color: #B4AFFF; text-decoration: none; } a:hover { color: #B4AFFF; }
    text-decoration: none; }
}

Este código CSS especifica que, por defecto, todos los enlaces del sitio estarán subrayados y serán de color #5246F1, que es azul. Cuando el ratón pase por encima de un enlace, éste cambiará a un color más claro (#B4AFFF) y se eliminará el subrayado.

Resultaste como debía ser:

Si desea cambiar el color de un enlace concreto, utilice la herramienta Inspeccionar de su navegador para comprobar la categoría o ID del enlace que desea cambiar. haga clic con el botón derecho del ratón en el enlace y seleccione Inspeccionar.

Añada código CSS personalizado utilizando el nombre de identificación único del enlace, como se muestra a continuación:

a.customise-unpreviewable {
    color: #5246F1;
    text-decoration: underline;
}
a.customize-unpreviewable:hover {
    color: #B4AFFF; text-decoration: none; }
    text-decoration: none; }
}

Aunque añadir código CSS personalizado es eficaz, requiere un esfuerzo considerable y una serie de pasos. No elijas esta opción si careces de los conocimientos necesarios para arruinar accidentalmente la estética o la funcionalidad de tu sitio web.

Resumen:

Con estos métodos, es posible ajustar los colores de los enlaces de tu sitio web WordPress para adaptarlos a tus necesidades de marca y experiencia de usuario. Ya sea a través de un personalizador de temas, un editor de bloques o CSS personalizado, asegurarse de que los colores de los enlaces son coherentes con el diseño general y la marca de tu sitio web es un paso importante para mejorar la experiencia del usuario.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres