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.

图片[1]-如何在古腾堡中插入链接与按钮: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.
图片[2]-如何在古腾堡中插入链接与按钮: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);
图片[3]-如何在古腾堡中插入链接与按钮: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);
图片[4]-如何在古腾堡中插入链接与按钮: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;
图片[5]-如何在古腾堡中插入链接与按钮:WordPress 实用操作指南
  • Marque "Abrir en una nueva pestaña" para mejorar la experiencia del usuario.
图片[6]-如何在古腾堡中插入链接与按钮: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";
图片[7]-如何在古腾堡中插入链接与按钮:WordPress 实用操作指南
  • Introduzca el texto del botón, por ejemplo "Más información";
图片[8]-如何在古腾堡中插入链接与按钮:WordPress 实用操作指南
  • Después de seleccionar el texto, haga clic en el icono "Enlace" para añadir una dirección de reenvío;
图片[9]-如何在古腾堡中插入链接与按钮:WordPress 实用操作指南
  • El estilo, el color y la anchura de los botones se pueden configurar en la barra lateral derecha;
图片[10]-如何在古腾堡中插入链接与按钮:WordPress 实用操作指南
图片[11]-如何在古腾堡中插入链接与按钮: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

图片[12]-如何在古腾堡中插入链接与按钮: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
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) Correo electrónico: [email protected]
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
© Declaración de reproducción
本文作者:托尼屎大颗
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