En el episodio 70# del podcast de Plugins, WordPress y más allá vamos a ver un tema muy interesante e importante por las cosas que nos va a dejar hacer y es cómo crear enlaces ancla en WordPress con Elementor y con Gutenberg.
Os voy a dejar enlazado un vídeo sobre cómo hacer enlaces ancla con elementor y con Gutenberg, es muy parecido aunque hay cosas diferentes que debemos tener en cuenta.
¿Qué son los enlaces ancla en WordPress?
Corresponde al texto en el que se puede hacer clic de un hipervínculo HTML, este hipervínculo puede ser dentro de la misma página o desde una página a otra dentro de la misma web. Nos va a permitir navegar por distintas secciones o partes específicas de nuestra web.
No debemos confundir un ancla con un hipervínculo, aunque utilice el mismo elemento a. Para un ancla inicializamos la propiedad name con el nombre del ancla. Un ancla sería una parte de la página que queremos que el usuario llegue a partir de un hipervínculo.
Sin tener que vincular el texto a una URL, página o publicación; sólo tienes que vincular un nombre de anclaje con el símbolo # antes
Aqui hay diferencias si estamos usando Elementor o si estamos usando Gutenberg, por eso en los vídeos vais a poder ver la diferencia.
Las ventajas de los textos ancla son muchas ya que hay veces que hacemos páginas largas con muchos apartados y estos ancla hacen que lleguemos a los sitios puntuales muy rápido, por ejemplo imagina que tenemos una web con profesores y en la página de quienes somos presentamos uno a uno aquí podemos encontrarnos dos cosas, la primera que en la misma página mostremos todos los nombres con una pequeña descripción de cada uno y al inicio de la página vamos a poder enlazar a cada uno con la parte correspondiente de la página donde está y luego imagina que ese profesor tiene además una página independiente dentro de la misma web, puedes enlazar justo a la parte de la web donde se habla de él o donde tú quieras dentro de la misma web pero en páginas distintas.
Enlaces ancla con Elementor
Aquí lo hacemos con ID de CSS, que es lo que nos encontraríamos en la página de destino, y ahí creamos un ID único que por ejemplo sería branding, este ID lo podemos crear en varios sitios, por ejemplo en el título, la foto pero con crearlo en uno es suficiente. Esta parte la encontraríamos en la parte izquierda de elementor, donde pone contenido, estilo, avanzado, pues en la parte de avanzado es donde ponemos el ID de CSS.
Una vez tenemos el id creado en la página de destino vamos a la página que para nosotros es de origen y vamos donde queremos poner ese botón o esa parte que nos lleve a la sección de la web que queremos, que es donde está el ID. Y en esa parte cogemos la url de la página y después de a barra / pones #branding y al pinchar en el enlace te va a llevar a la parte de la web donde hablo de eventos que es donde he creado el ID
Enlaces ancla con Gutenberg
En Gutenberg es igual ya que necesitamos un valor único y ese unirlo a la url para que haga el anclaje, pero se hace de otra forma diferente a la de elementor.
Aquí nosotros ponemos en donde queremos añadir ese valor único por ejemplo un título, foto etc… en Guenberg las opciones nos salen a la derecha, abajo tenemos una pestaña que sale avanzado, si pinchas se abre el desplegable con anclaje html, y es ahí donde pones el valor único sin almohadilla, guardas cambios y vamos a la página de origen cogemos la URL de donde tenemos el ID único y la pegamos en la parte donde queremos que al pinchar nos lleve al destino , la pegamos y al igual que elementor detrás de la barra / pegamos #branding y listo. Ya tendríamos nuestro enlace ancla.
Pregunta suscriptor
Hola Miriam, excelente vídeo y muy útil, ( Cómo hacer una web multidioma con TranslatePress), tengo una consulta. He hecho los pasos del vídeo pero las banderas no me aparecen en el header ¿qué puede pasar?
Esta pregunta es muy típica en el sentido de que a veces queremos poner cosas en los menús y no sabemos bien como, en el caso de las banderas de cada idioma, para ponerlas en el menú tienes que hacerlo desde menús , y ponerlo donde tengas el menú principal… mira cuál es el principal y lo pones ahí como en el vídeo hago yo.
Como siempre, muchas gracias a todos por vuestras valoraciones de cinco estrellas en Apple Podcast, vuestros comentarios y me gustas en iVoox. Recordad que también me podéis escuchar en Spotify, Google Podcast y me ayudaríais muchísimo si os suscribierais al Podcast desde vuestra plataforma de podcast favorita, ya que de esa forma me dais más visiblidad y así podría llegar a más gente 🙂
Enlaces de interés
Episodio 69# Cómo agregar chat en vivo en WordPress
Episodio 56# Cómo hacer una web multiidioma con Translatepress
Último curso disponible, Curso de gestión de inventario en WooCommerce
¿Te gustó este podcast? ¡No sabes lo que te estás perdiendo en YouTube!
Deja una respuesta