Cómo insertar enlaces y botones en Gutenberg: una guía práctica de cómo hacerlo en WordPress

Editor Gutenbergpedir a algn. que haga algoWordPressLa creación de páginas es más fácil. Se pueden añadir fácilmente enlaces de texto, de imagen y botones interactivos para crear una página web más profesional. En este artículo se explican estos útiles consejos.

Imagen [1] - Cómo insertar enlaces y botones en Gutenberg: guía práctica para WordPress

I. Insertar enlaces de texto

1. Añadirenlace (en una página web)enfoque básico

  • En el bloque de párrafos, seleccione el texto al que desea añadir un enlace;
  • Haga clic en el icono "Enlaces" (🔗) de la barra de herramientas;
  • Escriba o pegue la URL de destino y podrá elegir si desea abrirla en una pestaña nueva o no;
  • Introduzca o haga clic en el botón "Aplicar" para finalizar.
Imagen [2] - Cómo insertar enlaces y botones en Gutenberg: guía práctica para WordPress

2. Configurar las opciones avanzadas

  • Después de hacer clic en un enlace añadido, vuelva a hacer clic en el "icono del lápiz" para editar el enlace;
  • Haga clic en el icono "Más opciones" (tres puntos) para añadir un enlace a la ficha nofollow (para enlaces salientes o anuncios);
Imagen [3] - Cómo insertar enlaces y botones en Gutenberg: guía práctica para WordPress

3. Inserción de enlaces de anclaje (salto dentro de las páginas)

  • Añade "Ancla HTML" al párrafo de destino con la ruta:
    • Seleccione el título o cualquier bloque y haga clic en la opción "Avanzado" de la barra de configuración de la derecha;
    • Introduzca un nombre de anclaje de combinación inglés/número (p. ej:sobre nosotros);
Imagen [4] - Cómo insertar enlaces y botones en Gutenberg: guía práctica para WordPress
  • Vuelve al texto al que hay que saltar e inserta la dirección del enlace como 1TP5Sobre nosotros.;
  • Después de hacer clic en Guardar, haga clic en el enlace para saltar a la ubicación especificada en la misma página.

En segundo lugar, añade un enlace a la imagen

  • Después de insertar el bloque "Imagen", haga clic en la imagen seleccionada;
  • Haga clic en el icono "Enlaces" de la barra de herramientas;
  • Se puede ajustar Saltar a:
    • Enlace a un archivo de imagen;
    • Enlace a la página de anexos;
    • Haga clic para ampliar;
Imagen [5] - Cómo insertar enlaces y botones en Gutenberg: guía práctica para WordPress
  • Marque "Abrir en una nueva pestaña" para mejorar la experiencia del usuario.
Imagen [6] - Cómo insertar enlaces y botones en Gutenberg: guía práctica de WordPress

III. Añadir botones y establecer enlaces

Los botones tienen un gran atractivo visual en la página y suelen utilizarse para guiar al usuario a hacer clic, como "Comprar ahora", "Ver más", etc.

1. Insertar bloque de botones

  • Haga clic en el signo más (+) para seleccionar el bloque "Botones múltiples";
Imagen [7] - Cómo insertar enlaces y botones en Gutenberg: guía práctica para WordPress
  • Introduzca el texto del botón, por ejemplo "Más información";
Imagen [8] - Cómo insertar enlaces y botones en Gutenberg: guía práctica para WordPress
  • Después de seleccionar el texto, haga clic en el icono "Enlace" para añadir una dirección de reenvío;
Imagen [9] - Cómo insertar enlaces y botones en Gutenberg: guía práctica para WordPress
  • El estilo, el color y la anchura de los botones se pueden configurar en la barra lateral derecha;
Imagen [10] - Cómo insertar enlaces y botones en Gutenberg: guía práctica para WordPress
Imagen [11] - Cómo insertar enlaces y botones en Gutenberg: guía práctica para WordPress
  • Permite configurar varios botones para que se muestren uno al lado del otro (añada varios subbotones mediante "Grupo de botones").

2. Configurar el comportamiento de salto de botón

  • Soporte para añadirEnlacesURL externas;
  • Se recomienda activar la opción "Abrir en una nueva pestaña" en los enlaces de salto para evitar que los usuarios abandonen la página actual;
  • Si se utiliza para promoción o registro, puede utilizarse junto con la configuración del color del botón como tono principal para aumentar el porcentaje de clics.

IV. Consejos para la gestión de enlaces

  • Añada un "texto descriptivo" a todos los enlaces para mejorar la accesibilidad;
  • Para los enlaces externos, plugins como Enlaces externos tal vez Enlaces externos de WPAjuste de lotes nofollow e iconos;
  • Utilice regularmente plugins de detección de enlaces rotos como Broken Link Checker para comprobar si hay enlaces rotos en sus páginas y mantener la calidad del contenido;
  • Guarde los estilos de botón utilizados con frecuencia como "bloques reutilizables" para mejorar la eficacia de la edición.

V. Solución de problemas comunes

Imagen [12] - Cómo insertar enlaces y botones en Gutenberg: guía práctica de WordPress

¿Estilos de enlace incoherentes?
Algunos temas no definen los colores de los enlaces ni los estados hover, por lo que se recomienda utilizar el personalizador de temas o la función CSS Mayor uniformidad estilística.

¿Los botones se muestran mal en el móvil?
Se recomienda utilizar el bloque "Columnas" para controlar el diseño, o activar un tema responsivo para garantizar la compatibilidad.

¿Insertar un enlace y hacer clic en él no funciona?
Comprobar que no se inserta un protocolo erróneo por error (por ejemplo, omisión). https://), o el enlace está bloqueado por otros plugins (por ejemplo, plugins de seguridad).

resúmenes

El editor Gutenberg facilita añadir todo tipo de enlaces y botones, admite saltos de página y estilos. CoincidirBloques KadencePlug-ins como éste también permiten efectos e interacciones de botones más especializados.


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
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
© Declaración de reproducción
Autor : linxiulian
EL FIN
Si le gusta, apóyela.
felicitaciones112 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios