Cómo personalizar el botón Leer más en GeneratePress

En este tutorial, aprende a configurar y personalizar el estilo del botón Leer más en GeneratePress. Si quieres saber más sobre GeneratePress y su versión premium, puedes leer mi guía y ver si vale la pena comprarla.

En primer lugar, explicaré por qué es importante usar este botón para llamar tus visitantes a la acción a seguir leyendo artículos.

Luego te mostraré cómo modificar las configuraciones simples predefinidas por GeneratePress y especialmente cómo personalizar su aspecto con código CSS.

¿Por qué usar el botón de leer más?

En un blog, mostrar un enlace para seguir leyendo un artículo te permite dar a los usuarios una visión general de tu contenido más fácilmente cuando llegan a tu sitio, ya que sólo descubren breves extractos de cada artículo.

Si no están interesados en una entrada, lo notan más rápido y pasan a la siguiente. Por el contrario, si se muestran los artículos completos de inmediato, los visitantes tienen que desplazarse por todo el primer artículo para ver de qué trata el segundo, luego por el segundo antes de pasar al tercero y así sucesivamente. Perderás muchas visitas de los que no tienen esa paciencia.

Además, tus visitantes sólo se quedarían en la página de inicio sin darles ganas de interactuar con tu sitio web. Y sobre todo no irían a la página real del artículo lo que afectaría negativamente a tu SEO.

Otra característica muy importante es que la carga de extractos de artículos es más rápida que la de artículos completos. Así la página se mostrará más rápido, lo que es muy positivo para la experiencia del usuario.

Es aconsejado apuntar a un tiempo de carga de menos de 3 segundos por página. Más allá de eso, perderás visitantes que no tendrán la paciencia de esperar a que tu página se cargue.

Puedes medir el tiempo de carga de tu sitio con herramientas en línea como GTmetrix y PageSpeed Insights. Y también puedes leer mi tutorial para optimizar GeneratePress gratuitamente.

Es principalmente por estas razones que es interesante usar un botón Leer más.

Ahora pasemos a la personalización.

Configurar el botón Leer más en GeneratePress

Antes de usar el código CSS para personalizar su estilo, revisemos algunos ajustes de GeneratePress.

En GP Premium, ve a Apariencia > GeneratePress > Activa el módulo de Blog si aún no está hecho.

Después de eso ve a Apariencia > Personalizar > Diseño > Blog.

En la sección de Archivo, elige Tipo de contenido como Extracto y Extracto cantidad de palabras a 20, por ejemplo. La Etiqueta Leer Más como Leer más y marca la casilla Mostrar ‘Leer Más’ como un botón.

Personalizar el estilo del botón Leer más en GeneratePress

Para cambiar la apariencia del botón Leer más sólo tienes que añadir un poco de código CSS.

Si no sabes mucho sobre CSS, no importa porque puedes generar el CSS de un botón con tu elección de colores, tamaño, bordes y otras características usando herramientas online como CSSbuttongenerator.

El botón que puedes ver en mi página web tiene un efecto CSS llamado Gradiente en inglés. Si quieres ver muchos ejemplos de este estilo puedes ir a Gradient Buttons.

Sólo tendrás que copiar el código CSS del botón que te guste y pegarlo en tu tema de GeneratePress. Luego puedes jugar con los valores para cambiar el estilo de tu botón un poco más. Por ejemplo, no encontrarás el mío porque cambié algunos valores: colores, velocidad, etc.

Para mostrarte cómo se ve el código CSS, copiaré el mío presente en Aparencia > Personalizar > CSS adicional:

.read-more {
    background-image: linear-gradient(to right, #0073aa 0, #33dd82 51%, #0073aa 100%);
    border-radius: 50px;
}

.read-more {
    transition: 1s;
    background-size: 500% auto;
}

.read-more:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

Si quieres que el botón Leer más sea posicionado a la derecha, entonces hazlo flotar hacia la derecha usando el siguiente código:

.read-more {
    float: right;
}

Conclusión

Espero que ahora puedas personalizar tu botón Leer más en el tema de GeneratePress usando el código de arriba u otro. Además, puedes personalizar el botón a tu gusto para que coincida con tu marca.

Puedes leer otros de mis tutoriales de GeneratePress y consejos de optimización para optimizar tu sitio web de WordPress.

Espero que hayas encontrado útil este artículo y si te gustó no dudes en compartirlo en las redes sociales. Y si tienes alguna pregunta, pregúntame en los comentarios.