Cómo Colocar un Botón sobre una Imagen

¿Por Qué Colocar un Botón sobre una Imagen?

Colocar un botón sobre una imagen le ayuda a crear una llamada a la acción (Call to Action - CTA) claro sin interrumpir el flujo de su diseño. Hace que la página sea más atractiva y dirige a los visitantes a dar el siguiente paso de inmediato.

Los casos de uso comunes incluyen:

• Destacar un botón "Compra Ahora" en banners de productos o colecciones.
• Dirigir la atención a promociones o descuentos de temporada..
• Enlazar directamente a una página de destino específica o sección destacada..
• Crear un diseño más limpio en lugar de separar la imagen y el botón.

Consejos: Elija un color de botón que contraste con su imagen de fondo para asegurarse de que se destaque, especialmente en dispositivos móviles.

Para lograr esto en GemPages, puede seguir dos métodos simples explicados a continuación.

¿Cómo Colocar un Botón sobre su Imagen en GemPages?

Método 1: Usar un Elemento Hero Banner

Típicamente, puede usar el elemento Hero Banner para cargar esa imagen. Luego, el Hero Banner permite otros elementos sobre él, incluido el botón. Siga estos pasos:

Paso 1: Vaya a la GemPages > Páginas. Luego, haga clic en la página en la que desea colocar un botón sobre su imagen para abrir el editor.

Paso 2: En la barra lateral izquierda, busque "hero banner". Arrastre y suelte el diseño preferido en cualquier posición de su página.

Paso 3: Elimine los elementos de texto y conserve solo el elemento de botón.

Paso 4: Haga clic en el elemento Banner para revelar su configuración. Desplácese hacia abajo hasta la sección Fondo y seleccione el campo Imagen .

Paso 5: Cargue su imagen o elija una de la biblioteca para usar como imagen de fondo.

Paso 6: Ajuste la imagen de fondo según su preferencia.

Paso 7: Haga clic en el elemento Botón para abrir su configuración. Desde aquí, puede personalizar el botón a su manera, como:

• Cambiar el color, la forma y el tamaño.
• Agregar un icono o un efecto al pasar el cursor.
• Enlazar el botón a una nueva página o a una sección objetivo en su página.

Consulte este artículo para obtener más instrucciones.

Paso 8: Guarde sus cambios y presione Publicar.

Método 2: Utilizar la opción Relativa de la posición del botón

Para asegurarse de que el botón esté colocado correctamente sobre la imagen en el diseño de su página, puede establecer la Posición del botón en Relativa.

Siga estos pasos:

• Haga clic en el elemento Botón para abrir su configuración y navegue a la pestaña Avanzado .
• Desplácese hacia abajo hasta la sección Posición .
• Seleccione la Forma para Relativo del menú desplegable.

Obtenga más información sobre toda esta configuración a través de este artículo.