Para numerosos entusiastas de WordPress, la posibilidad de añadir un botón sobre una imagen es esencial para hacer el contenido más interactivo y atractivo. Sus motivaciones pueden provenir del deseo de enriquecer las interacciones del usuario, aprovechar las capacidades de WordPress o abordar las limitaciones de los temas o plugins. Ya sea para mejorar la navegación del usuario, superar los retos de diseño o simplemente para adoptar las tendencias modernas de diseño web, esta función puede ayudar a los usuarios a superar los retos de diseño o adoptar las tendencias modernas de diseño sin necesidad de conocimientos avanzados.
Afortunadamente, el bloque Portada incorporado de WordPress hace que el proceso sea sencillo y accesible. En esta guía, te mostraremos cómo lograrlo paso a paso.
Paso 1: Añadir un bloque de cubierta
Para empezar, abre la página o la entrada en la que quieras colocar tu imagen preferida con el botón. En el editor de WordPress, haz clic en el botón "+" para añadir un bloque y busca "Portada". Una vez que lo encuentres, selecciona el bloque Portada.
Paso 2: Insertar una imagen
Una vez que hayas añadido el bloque, tienes que cargar su imagen elegida o elija una de la Mediateca. Esta imagen servirá ahora de fondo para su diseño.
Paso 3: Añadir un título a la imagen (opcional)
Una vez colocado el bloque de portada, verás que dentro de la imagen aparece el texto "Escribir título...". Haz clic en este texto y escribe el título o encabezado que quieras mostrar sobre la imagen.
Paso 4: Añadir un botón sobre la imagen
Una vez que el bloque Portada esté listo, haz clic en la imagen y aparecerá el insertador de bloques. Ahora haz clic en el signo '+', busca "Botones" y añade el bloque.
Paso 5: Personalizar el diseño
Para afinar cada detalle, hemos separado esta sección en 3 partes. Empezaremos por el título, luego los botones y terminaremos con el bloque general de la portada para obtener un aspecto profesional.
5.1 Personalizar el texto del título
Haz clic en el texto que pusiste como Título dentro del bloque Portada para seleccionarlo. Utiliza la barra de herramientas del bloque para ajustar el estilo del texto: negrita, cursiva o alineación. Si quieres más personalización, ve a la configuración del bloque en la barra lateral derecha para cambiar el tamaño de la fuente, el color y la tipografía.
5.2 Personalizar el botón
Seleccione el bloque de botones, escriba el texto que desea mostrar y vincúlelo a la página o URL correspondiente haciendo clic en el icono de cadena. (1) en la barra de herramientas. Utilice la barra de herramientas de bloque para alinear el botón y ajustar su estilo.
Ahora, navegue hasta el panel de configuración de bloques en el lado derecho. En Ficha General (1) permite ajustar la anchura del botón en relación con su contenedor, y el botón Ficha Estilos (3) le permite personalizar los estilos, colores, tipografía, dimensiones y borde del botón.
5.3 Personalizar el bloque de cubierta general
Haga clic en el bloque Portada para acceder a su configuración en el menú Ficha General. A partir de ahí, ajuste el Configuración del diseño para restringir los bloques anidados, active la opción Fondo fijo para mantener el fondo inmóvil mientras se desplaza o el botón Antecedentes repetidos si su imagen es más pequeña que el bloque y necesita ser colocada en mosaico para rellenar el espacio, y establezca la opción Punto Focal para mantener visibles las zonas importantes de la imagen.
A continuación, cambie a Ficha Estilos. A partir de ahí, puedes ajustar el color general, la opacidad, la tipografía, la dimensión, la relación de aspecto, el borde y mucho más.
Paso 6: Vista previa y publicación
Vuelva a recorrer toda la página para asegurarse de que tanto el botón como la imagen aparecen como se pretendía. Cuando todo parezca correcto, publica o actualiza el contenido para que esté activo.
Conclusión
La posibilidad de añadir un botón sobre una imagen en WordPress abre posibilidades creativas para hacer tu contenido más interactivo y visualmente atractivo. El bloque Portada de WordPress permite superponer botones a las imágenes y crear diseños interactivos y visualmente atractivos sin necesidad de herramientas o códigos adicionales. Ofrece una flexibilidad total para personalizar títulos, botones y detalles de diseño para que resulte fácil alinear tu contenido con las tendencias de diseño modernas. Siguiendo esta guía, puede conseguir un resultado profesional que mejore tanto el diseño como la funcionalidad de su sitio web. Siguiendo esta guía, el diseño de su sitio puede destacar con una mejor navegación y un acabado refinado.
