Si los enlaces ancla de tu web no ajustan y no sabes cómo arreglarlo en WordPress, este artículo te va a resultar de utilidad. Quédate, que te explico la manera de arreglarlo fácilmente.
Normalmente, cuando añadimos un enlace ancla en una página hecha con WordPress, a la hora de realizar el salto a la parte de la página siempre se pasa un poco de largo. Esto, a nivel de usabilidad (UX) o incluso de conversión (CRO) no ayuda mucho que digamos. Ya sea porque el subtítulo queda escondido y el usuario puede perder el contexto o porque ese pequeño ajuste puede acabar ser decisivo para una conversión.
Por suerte, esto tiene una fácil solución. Tan solo tienes que hacer un pequeño retoque en los estilos CSS de tu web.
Tan solo tienes que crear un nuevo estilo y llamar a ese estilo CSS en la parte donde irá el salto. El estilo en cuestión es este:
.ajuste-ancla { padding-top: 90px; }
Yo le he llamado ajuste-ancla, pero llámalo como consideres oportuno. Igualmente, retoca el espaciado a tu gusto: yo he considerado oportuno 90px.
Si tienes dudas o problemas para crear tu ancla, no te pierdas nuestra guía de cómo generar un enlace ancla donde te lo explico paso a paso.
Añadir el código para ajustar el salto de página
Ahora que ya conoces el código, tan solo te queda añadirlo a los estilos de tu web. En este caso, como tan solo es un pequeño ajuste, podemos utilizar sin problema el personalizador de WordPress.
Para ello, ves al panel izquierdo de administración de WordPress. En el apartado “Apariencia”y accede a “Personalizar”.
Una vez dentro del personalizador, tienes que acceder a CSS adicional. Encontrarás este subapartado en el menú izquierdo.
Ahora, te aparecerá un espacio que, como su propio nombre indica, podrás añadir CSS adicional. Tan solo debemos pegar el código que te he facilitado anteriormente y publicar los cambios. Recuerda ajustarlo a tu gusto. Te muestro una imagen de ejemplo:
Ahora que ya tenemos el estilo CSS creado, tan solo nos queda aplicarlo en el espacio que sea necesario. Para aplicarlo, sitúate en el bloque que necesites ajustar y en la configuración del bloque que te aparece a la izquierda despliega la sección «Avanzado» y añade el nombre que le has dado a la clase CSS. Tal que así:
Ahora, si todo ha ido bien, tu enlace ancla ya debería dar el salto con los ajustes especificados.
Espero que esta guía te haya servido de ayuda. Comparte cualquier duda en los comentarios.
¡Hasta la próxima!