Poner texto sobre la imagen

En GemPages v7, puedes colocar texto sobre una imagen usando un Banner elemento o un Fila .

Método 1: Uso del elemento Banner de héroe

El elemento Banner de héroe está diseñado para crear banners de héroe impactantes o banners de colección que se vinculan a páginas de colección, entre otros casos de uso.

De forma predeterminada, ofrece ajustes preestablecidos que permiten establecer un fondo y editar texto en la imagen de fondo. Esto lo convierte en una solución ideal para situaciones en las que es necesario colocar texto sobre una imagen.

Paso 1: Ingrese al editor de GemPages

Desde el panel de GemPages, navegue hasta el Páginas, y haga clic en la página de destino para abrirla editor.

En la barra lateral izquierda, busque el Banner en la sección Medios de Comunicación sección, luego arrástrela y suéltela en cualquier posición de su página.

Paso 2: Sube y modifica tu imagen

• Haga clic en el elemento para abrir el Configuración panel. Desplácese hacia abajo hasta el Fondo sección y haga clic en el Imagen .

• En la sección Fuente, pase el cursor sobre la imagen de muestra y haga clic Subir imagen Para subir tu imagen. Si la has subido a Archivos de Shopify, selecciona Explorar biblioteca.

• Modifique la configuración de la imagen como prefiera. Consulte este artículo para obtener más detalles sobre cómo configurar el fondo de su imagen en el Banner de héroe.

Para mejorar la legibilidad, puedes aplicar una superposición:

• En la sección Fondo, haga clic en Mostrar másy localice el Overlay .
• Elija un color oscuro (por ejemplo, negro o gris oscuro).
• Ajuste el control deslizante de Opacidad hasta que el texto se destaque claramente sobre el fondo.

Esto crea una capa oscura sutil sobre la imagen, lo que hace que el texto sea más fácil de leer y mantiene el fondo visualmente atractivo.

Paso 3: personaliza el bloque de texto

Haz clic en el elemento Bloque de texto para ver su configuración. Después, personaliza la fuente, el tamaño y el color del texto desde el panel de configuración para que destaque en la imagen.

Para obtener una guía completa sobre la configuración del estandarte del héroe, consulta este artículo.

Método 2: Utilizar el elemento de fila

Paso 1:En el editor, arrastre y suelte un Fila elemento de la barra lateral izquierda a su página.

Para comprender en profundidad el elemento fila, consulte este artículo.

Paso 2:En el panel de configuración, desplácese hacia abajo hasta Fondo y haga clic en el Imagen .

Paso 3: Establece una imagen como fondo para toda la fila. Puedes elegir entre los archivos de Shopify (Explorar biblioteca) o subir uno nuevo.

Luego, ajuste la escala y posición, elige la imagen tipo de repetición y accesorio, y habilitar/deshabilitar el Precarga Función para optimizar LCP.

Paso 3:Arrastre y suelte un Bloque de Texto elemento dentro de esta fila para hacer el texto sobre tu imagen.

Paso 4: Modifica el texto como prefieras.

Estandarte de héroe vs. fila

Ambas opciones pueden satisfacer tus necesidades eficazmente, pero usar el elemento Banner de Héroe suele ser más rápido y sencillo. Mientras tanto, usar el Fila El elemento ofrece más flexibilidad para ciertos casos de uso específicos.

BUENAS PRÁCTICAS

• Mantener el contraste: Asegúrese siempre que el color del texto contraste fuertemente con la imagen de fondo.
• Utilice superposiciones: Aplique superposiciones oscuras en imágenes brillantes para mejorar la legibilidad del texto.
• Prueba móvil: Obtenga una vista previa de su diseño en pantallas más pequeñas para confirmar que el texto permanezca claro.
• Mantenga el texto conciso: Limite la cantidad de texto sobre las imágenes para una mejor legibilidad.