¿Cómo utilizar la sección Texto e imagen en el Editor de bloques de Waclis?

La sección Texto e imagen del Editor de bloques de Waclis permite combinar contenido visual y textual dentro de una misma composición.

Es una de las estructuras más versátiles disponibles porque puede utilizarse para presentar:

• productos;

• servicios;

• información institucional;

• procesos;

• características;

• beneficios;

• categorías;

• proyectos;

• novedades;

• casos de uso;

• explicaciones;

• llamados a la acción;

• cualquier contenido donde una imagen ayude a complementar un mensaje.

Dentro del Editor de bloques encontrarás diferentes alternativas en:

Secciones → Texto e imagen

Puedes seleccionar una composición prediseñada y luego personalizar:

• fotografía;

• Heading;

• Paragraph;

• Button o Link;

• distribución;

• proporción de columnas;

• alineación;

• fondo;

• espacios;

• comportamiento responsive.

¿Qué es una sección Texto e imagen?

Es una composición que combina principalmente:

IMAGEN
+
CONTENIDO

Por ejemplo:

┌──────────────────────┬──────────────────────┐
│                      │                      │
│       IMAGEN         │   NUESTRO SERVICIO  │
│                      │                      │
│                      │   Texto explicativo │
│                      │                      │
│                      │   [ CONOCER MÁS ]   │
│                      │                      │
└──────────────────────┴──────────────────────┘

También puede invertirse:

┌──────────────────────┬──────────────────────┐
│                      │                      │
│   NUESTRO SERVICIO   │       IMAGEN         │
│                      │                      │
│   Texto explicativo  │                      │
│                      │                      │
│   [ CONOCER MÁS ]    │                      │
│                      │                      │
└──────────────────────┴──────────────────────┘

¿Cuándo conviene utilizar Texto e imagen?

Puede ser especialmente útil cuando una imagen necesita apoyar una explicación.

Por ejemplo:

Servicio

[ imagen del servicio ]

IMPLEMENTACIÓN PERSONALIZADA

Adaptamos el proceso según las necesidades de cada proyecto.

[ CONOCER MÁS ]

Producto

[ imagen del producto ]

DISEÑADO PARA TU EMPRESA

Personaliza diferentes opciones según las necesidades de tu marca.

[ VER PRODUCTOS ]

Información institucional

[ fotografía de la empresa ]

MÁS DE X AÑOS ACOMPAÑANDO PROYECTOS

Trabajamos junto a empresas de diferentes sectores...

Proceso

[ fotografía / ilustración ]

UNA IMPLEMENTACIÓN SIMPLE

Nuestro equipo acompaña cada etapa...

Texto e imagen vs Banner

Ambas pueden utilizar:

• imagen;

• título;

• texto;

• Button.

Pero su jerarquía suele ser diferente.

Banner

Generalmente prioriza:

impacto visual + mensaje breve

Por ejemplo:

NUEVA COLECCIÓN

[ VER PRODUCTOS ]

sobre una gran imagen.

Texto e imagen

Permite desarrollar más el contenido.

Por ejemplo:

IMPLEMENTACIÓN PERSONALIZADA

Analizamos las necesidades del proyecto, configuramos la solución y acompañamos al equipo durante la puesta en marcha.

[ CONOCER EL SERVICIO ]

Texto e imagen vs Quiénes somos

La sección Quiénes somos utiliza contenido orientado específicamente a presentar:

• empresa;

• historia;

• equipo;

• valores;

• identidad.

Texto e imagen es más general.

Puedes utilizarla para casi cualquier tema.

Texto e imagen vs Características

Características suele presentar varias propiedades de forma resumida.

Texto e imagen puede profundizar una característica específica.

Por ejemplo:

Característica:
Sincronización automática

puede desarrollarse posteriormente mediante:

[ imagen ]

MANTÉN TU INFORMACIÓN ACTUALIZADA

La sincronización permite...

¿Cómo agregar una sección Texto e imagen?

Ingresa al Editor de bloques de la página o área editable donde quieras incorporarla.

Después abre:

Secciones

y selecciona:

Texto e imagen

Paso 1: elige la composición

Waclis mostrará las alternativas disponibles.

Puedes encontrar diseños orientados a:

• imagen izquierda + texto derecha;

• texto izquierda + imagen derecha;

• composiciones equilibradas;

• imágenes grandes;

• contenido más compacto;

• estructuras con Button;

• diferentes fondos.

Elige principalmente según:

• cantidad de texto;

• importancia de la imagen;

• posición que deseas;

• proporción de cada columna.

No es necesario conservar el contenido de ejemplo.

Paso 2: agrega la sección

Selecciona la composición elegida.

Después podrás personalizar individualmente:

• Image;

• Heading;

• Paragraph;

• Button;

• columnas;

• Section.

Paso 3: utiliza Navigator para comprender la estructura

Una composición típica puede tener:

Section
└── Container
    └── Grid Row
        ├── Grid Column
        │   └── Image
        │
        └── Grid Column
            ├── Heading
            ├── Paragraph
            └── Button

Esta jerarquía es importante.

Visualmente ves:

[ IMAGEN ] [ TEXTO ]

pero la estructura real suele depender de:

Grid Row → Grid Columns

¿Por qué es importante?

Porque la forma correcta de modificar:

• anchos;

• responsive;

• orden;

• alineación;

generalmente consiste en trabajar sobre las columnas.

No en mover Image o Heading mediante grandes márgenes.

Paso 4: reemplaza la imagen

Selecciona:

Image

Después utiliza:

Contenido → Set Image

y selecciona la fotografía que quieras mostrar.

Completa Alt

Cuando la imagen aporta información utiliza un texto alternativo descriptivo.

Por ejemplo:

Equipo realizando una implementación en una empresa

o:

Botella térmica negra personalizada

Evita:

foto1

Elige una imagen relacionada con el contenido

Por ejemplo:

Título:

ATENCIÓN PERSONALIZADA

Imagen apropiada:

equipo atendiendo a un cliente

Una imagen sin relación reduce la claridad de la sección.

No utilices una imagen solamente para llenar el espacio

La fotografía debería:

• explicar;

• reforzar;

• contextualizar;

• mostrar.

Si no aporta valor, puedes considerar otra composición.

Paso 5: modifica el Heading

Selecciona el Heading y reemplaza el título.

Ejemplos:

Soluciones personalizadas

Diseñado para tu empresa

Una implementación simple

Conoce nuestra forma de trabajar

Todo lo que necesitas en un solo lugar

Utiliza títulos claros

El visitante debería poder comprender el tema incluso antes de leer el Paragraph.

Evita títulos excesivamente largos

Por ejemplo:

Conoce todas las diferentes alternativas que nuestra empresa puede ofrecer para acompañar la evolución de tus proyectos

puede convertirse en:

Soluciones para cada proyecto

Paso 6: modifica el Paragraph

Utiliza el texto para ampliar el concepto.

Por ejemplo:

Analizamos las necesidades de cada proyecto para ofrecer una solución adaptada a sus objetivos.

Puedes utilizar más de un Paragraph

Si el contenido lo requiere:

Título

Párrafo introductorio.

Segundo párrafo con información adicional.

[ CTA ]

Pero evita convertir una composición visual en una enorme pared de texto.

La relación entre imagen y texto debe mantenerse equilibrada

Si la fotografía ocupa:

50 %

y el contenido contiene:

800 palabras

probablemente la sección termine siendo muy desbalanceada.

Para textos extensos

Puedes considerar:

• dividir el contenido;

• crear varias secciones;

• utilizar Acordeones;

• enlazar una página específica.

Paso 7: configura el Button si existe

Muchas composiciones pueden incorporar una acción.

Por ejemplo:

[ CONOCER MÁS ]

[ VER PRODUCTOS ]

[ SOLICITAR INFORMACIÓN ]

[ CONOCER SERVICIO ]

El Button es opcional

Una sección Texto e imagen puede utilizarse únicamente para explicar.

Por ejemplo:

[ IMAGEN ]

NUESTRA METODOLOGÍA

Trabajamos...

sin ningún CTA.

No agregues un Button solamente porque la plantilla lo incluye.

Si no necesitas el Button

Selecciona el elemento correcto mediante Navigator y elimínalo.

Recuerda que Waclis no solicita confirmación.

Si eliminas algo incorrectamente utiliza:

Deshacer

Si existe Button, comprueba también el Link

Dependiendo de la estructura puedes encontrar:

Link
└── Html Button

En ese caso:

• Html Button → Text;

• Link → URL.

Utiliza Navigator para seleccionar el elemento correspondiente.

Cambiar el texto no cambia necesariamente la URL

Por ejemplo:

Button:
Ver servicios

puede seguir enlazando hacia:

/productos

si solamente cambiaste el texto.

Prueba siempre el destino.

Proporción de columnas

Una composición Texto e imagen no tiene que utilizar necesariamente:

50 % / 50 %

También puede utilizar una distribución asimétrica.

50 / 50

┌────────────────────┬────────────────────┐
│      IMAGEN        │       TEXTO        │
└────────────────────┴────────────────────┘

Es una opción equilibrada.

40 / 60

┌───────────────┬─────────────────────────┐
│    IMAGEN     │          TEXTO          │
└───────────────┴─────────────────────────┘

Puede resultar útil cuando el contenido necesita más espacio.

60 / 40

┌───────────────────────────┬─────────────┐
│          IMAGEN           │    TEXTO    │
└───────────────────────────┴─────────────┘

Puede funcionar cuando la fotografía tiene mayor protagonismo.

No pienses las columnas únicamente como porcentajes visuales

En Grid Row puedes configurar tamaños de columnas según dispositivo.

El sistema de grilla trabaja conceptualmente sobre 12 unidades.

Por ejemplo:

6 + 6

equivale a una distribución aproximadamente:

50 / 50

Otro ejemplo

5 + 7

genera una proporción diferente.

Otro ejemplo

7 + 5

invierte la prioridad.

Utiliza Grid Row para cambiar la distribución

Selecciona:

Grid Row

y revisa las columnas.

Puedes ajustar los tamaños correspondientes según los dispositivos disponibles.

No utilices Width manual en Image para simular una columna

Por ejemplo:

Image Width: 43 %

mientras el texto permanece fuera de una estructura de columnas puede ser más difícil de mantener.

Utiliza Grid cuando la composición depende de dos áreas principales.

Alineación vertical

Una fotografía puede ser más alta que el texto.

Por ejemplo:

┌─────────────────────┬─────────────────────┐
│                     │ TÍTULO              │
│                     │                     │
│       IMAGEN        │ Texto               │
│                     │                     │
│                     │ Button              │
│                     │                     │
└─────────────────────┴─────────────────────┘

Debes decidir cómo quieres alinear el contenido.

Alineación superior

Texto comienza arriba

Puede funcionar cuando tienes mucho contenido.

Alineación centrada

        TÍTULO
        Texto
        Button

queda visualmente centrado respecto de la imagen.

Es una composición muy común.

Alineación inferior

Puede utilizarse en diseños específicos, aunque es menos habitual.

Grid Row incluye controles de alineación

Puedes trabajar con:

• Vertical align;

• Horizontal align;

según la estructura.

Utiliza estas herramientas antes de agregar grandes márgenes para centrar contenido.

Evita centrar mediante Margin Top rígido

Por ejemplo:

margin-top: 180px;

puede centrar visualmente el contenido en desktop.

Pero si:

• cambia la imagen;

• cambia el texto;

• cambia la pantalla;

dejará de estar correctamente alineado.

Usa alineación estructural

Es mucho más robusta responsive.

Imagen con altura completa de la columna

Algunas composiciones funcionan mejor cuando Image llena el área.

Por ejemplo:

┌──────────────────────┬───────────────────────┐
│                      │                       │
│                      │     TÍTULO            │
│       IMAGEN         │                       │
│                      │     Texto             │
│                      │                       │
│                      │     [ BUTTON ]        │
│                      │                       │
└──────────────────────┴───────────────────────┘

Cover

Si la imagen debe llenar completamente un contenedor de altura determinada puede ser apropiado:

object-fit: cover;

cuando corresponda.

Cover prioriza llenar el espacio

La fotografía puede recortarse.

Esto suele funcionar bien para:

• personas;

• ambientes;

• proyectos;

• fotografías decorativas.

Contain

Si necesitas mostrar el objeto completo:

object-fit: contain;

puede ser mejor.

Por ejemplo:

• producto;

• equipo;

• logotipo;

• ilustración.

Ejemplo de producto

┌──────────────────────┬──────────────────────┐
│                      │                      │
│      [ PRODUCTO ]    │ PRODUCTO DESTACADO  │
│                      │                      │
│                      │ Conoce...            │
└──────────────────────┴──────────────────────┘

Si el producto se recorta, la comunicación pierde valor.

Contain puede resultar más apropiado.

Ejemplo institucional

┌──────────────────────┬──────────────────────┐
│                      │                      │
│ [ EQUIPO TRABAJANDO ]│ CONOCE NUESTRO      │
│                      │ EQUIPO               │
└──────────────────────┴──────────────────────┘

Cover puede resultar más natural.

No deformes la imagen

Evita forzar simultáneamente:

• Width;

• Height;

de manera que alteres su proporción.

Proporción de la fotografía

Si el espacio es alto y vertical, una fotografía horizontal puede necesitar mucho recorte.

Elige imágenes pensando en el contenedor donde serán utilizadas.

Imagen y Border radius

Puedes aplicar esquinas redondeadas a Image.

Por ejemplo:

╭──────────────────╮
│                  │
│      IMAGEN      │
│                  │
╰──────────────────╯

Mantén coherencia con el resto del diseño.

Sombra

Puede aplicarse de forma moderada cuando la fotografía se presenta como una pieza independiente.

No es necesaria en todas las composiciones.

Fondo de Section

Puedes utilizar:

• blanco;

• gris claro;

• color de marca;

• imagen;

• otros fondos disponibles.

Fondo diferente ayuda a separar secciones

Por ejemplo:

SECCIÓN 1
fondo blanco

↓

TEXTO E IMAGEN
fondo gris claro

↓

SECCIÓN 3
fondo blanco

Esto genera ritmo visual.

No necesitas un borde alrededor de todo

La separación también puede conseguirse mediante:

• Background;

• Padding;

• espacios.

Padding de Section

Texto e imagen suele necesitar suficiente espacio superior e inferior.

Por ejemplo:

        espacio

[ IMAGEN ] [ TEXTO ]

        espacio

Esto evita que el contenido quede pegado a las secciones vecinas.

Padding interno de la columna de texto

También puedes necesitar espacio entre:

borde del contenedor

y:

Heading

especialmente si el fondo llega hasta los extremos.

No abuses del Padding

Si la columna ya es relativamente estrecha, un Padding enorme puede dejar muy poco espacio para el texto.

Desktop vs celular: el cambio más importante

Una composición horizontal:

[ IMAGEN ] [ TEXTO ]

normalmente necesita reorganizarse en celular.

Por ejemplo:

[ IMAGEN ]

[ TEXTO ]

O puede ser

[ TEXTO ]

[ IMAGEN ]

según el objetivo.

No intentes mantener dos columnas estrechas automáticamente

Por ejemplo:

[IMG][TXT]

en un celular puede hacer que:

• la imagen sea diminuta;

• el texto tenga líneas extremadamente cortas;

• el Button no entre.

Utiliza Grid responsive

Configura las columnas para que en pantallas pequeñas ocupen el ancho necesario.

Ejemplo conceptual

Desktop:

columna 6
+
columna 6

Mobile:

columna completa
+
columna completa

La vista de dispositivos no cambia la estructura

Recuerda:

los iconos superiores de:

• celular;

• tablet;

• computadora;

sirven para previsualizar.

Para modificar realmente el comportamiento responsive debes trabajar con:

• Grid Row;

• columnas;

• Estilo;

• Avanzado;

• CSS si corresponde.

Orden responsive

Supongamos que en desktop tienes:

[ IMAGEN ] [ TEXTO ]

En móvil probablemente quieras:

[ IMAGEN ]
[ TEXTO ]

Esto sigue naturalmente el orden de la estructura.

Pero ¿qué ocurre con una sección invertida?

Desktop:

[ TEXTO ] [ IMAGEN ]

En móvil puede quedar:

[ TEXTO ]
[ IMAGEN ]

Esto puede ser perfectamente correcto.

Alternancia de bloques

Una técnica visual muy habitual es:

Bloque 1
[ IMAGEN ] [ TEXTO ]

Bloque 2
[ TEXTO ] [ IMAGEN ]

Bloque 3
[ IMAGEN ] [ TEXTO ]

Esto genera un recorrido tipo zigzag.

Ejemplo

SERVICIO 1

[ IMAGEN ] [ TEXTO ]


SERVICIO 2

[ TEXTO ] [ IMAGEN ]


SERVICIO 3

[ IMAGEN ] [ TEXTO ]

Ventaja

Evita que una página larga se vuelva visualmente repetitiva.

Pero cuidado en móvil

Si se conserva literalmente el orden:

Bloque 1:
Imagen
Texto

Bloque 2:
Texto
Imagen

Bloque 3:
Imagen
Texto

la segunda sección comenzará con texto mientras las demás comienzan con imagen.

Eso puede ser intencional o no.

Decide el patrón móvil conscientemente

Podrías preferir siempre:

Imagen
Texto

en celular.

O siempre:

Texto
Imagen

La elección depende del diseño.

No dupliques automáticamente las secciones para conseguir otro orden

Antes de crear:

versión desktop
+
versión mobile

comprueba si puedes resolver el orden mediante la estructura responsive.

Mantener una sola sección suele ser más fácil.

Duplicar versiones tiene costo de mantenimiento

Si cambias:

• texto;

• imagen;

• URL;

• promoción;

tendrás que modificar ambas.

Contenido primero o imagen primero en móvil

No existe una regla universal.

Imagen primero

Puede funcionar cuando:

• la fotografía da contexto;

• el producto es protagonista;

• el diseño es muy visual.

Texto primero

Puede funcionar cuando:

• el mensaje es lo principal;

• la imagen es complementaria;

• quieres que el visitante entienda inmediatamente de qué trata la sección.

Revisa el recorrido completo

No tomes la decisión aislando un bloque.

Una página puede quedar:

IMAGEN
TEXTO
IMAGEN
TEXTO
IMAGEN
TEXTO

y funcionar muy bien.

O podría sentirse excesivamente repetitiva

En ese caso puedes variar:

• fondo;

• composición;

• contenido;

• alineación.

Texto e imagen para varios servicios

Puedes crear:

SERVICIO 1

[ imagen ] [ contenido ]

SERVICIO 2

[ contenido ] [ imagen ]

SERVICIO 3

[ imagen ] [ contenido ]

Cada bloque debería mantener:

• misma jerarquía;

• tamaños compatibles;

• Padding similar;

• Buttons consistentes.

No cambies completamente el estilo en cada bloque

Por ejemplo:

Bloque 1 → Border radius 4
Bloque 2 → 40
Bloque 3 → sin borde

sin una razón puede reducir coherencia.

Classes compartidas

Puedes utilizar conceptualmente:

contenido-imagen-section
contenido-imagen-media
contenido-imagen-content
contenido-imagen-title
contenido-imagen-text
contenido-imagen-button

Esto ayuda a mantener estilos.

Linked styles

Si varias secciones utilizan la misma Class:

contenido-imagen-title

pueden compartir:

• tamaño;

• Font weight;

• color.

Esto puede ser beneficioso.

Excepciones

Si una Section utiliza fondo oscuro y necesita título claro:

puedes agregar una Class adicional.

Por ejemplo:

class="contenido-imagen-title texto-claro"

sin eliminar el estilo base.

Clonar una sección Texto e imagen

Es una forma práctica de crear varios bloques relacionados.

Por ejemplo:

1. crea Servicio 1;

2. clona la estructura completa;

3. modifica para Servicio 2;

4. cambia imagen;

5. cambia textos;

6. cambia URL;

7. invierte distribución si corresponde.

Selecciona la unidad correcta

Si quieres duplicar toda la composición, selecciona:

Section

o el contenedor completo correspondiente.

No clones solamente:

• Grid Row;

• Image;

• Heading;

sin saber exactamente qué incluye.

Antes de clonar utiliza Navigator

Confirma la jerarquía.

Después de clonar revisa

• Image;

• Alt;

• Heading;

• Paragraph;

• Button;

• URL;

• ID personalizado, si existe.

IDs

Si la estructura original utiliza:

id="servicio-diseno"

la copia no debería conservar el mismo ID.

Por ejemplo:

id="servicio-implementacion"

Eliminar una composición

Si ya no necesitas una sección:

selecciona el contenedor completo.

Recuerda:

Waclis no solicita confirmación.

Utiliza:

Deshacer

si borraste un nivel incorrecto.

Mover una composición

Puedes reorganizar secciones.

Por ejemplo:

Antes:

Producto A
Producto B
Producto C

Después:

Producto C
Producto A
Producto B

Mueve el bloque completo.

No muevas únicamente la Image si quieres cambiar el orden de toda la sección

Podrías dejar:

imagen de Producto C
+
texto de Producto A

por error.

Texto e imagen con List

También puedes combinar:

Heading
Paragraph
List
Button

Por ejemplo:

UNA SOLUCIÓN COMPLETA

Incluye:

✓ Configuración
✓ Capacitación
✓ Acompañamiento

[ CONOCER MÁS ]

Utiliza List cuando realmente exista una enumeración

Es más fácil de recorrer que un párrafo con muchos conceptos separados por comas.

No conviertas la sección en una lista interminable

Si necesitas mostrar 15 características, quizá sea mejor:

• Características;

• Acordeón;

• otra sección específica.

Texto e imagen con ícono

También puedes incorporar un:

• Font Icon;

• SVG Icon;

junto al contenido.

Por ejemplo:

[ Ícono ]

ATENCIÓN PERSONALIZADA

Texto...

Mantén el icono como refuerzo.

Texto e imagen con varias fotografías

Si necesitas:

imagen 1
imagen 2
imagen 3

puede ser más apropiado utilizar:

• Galería;

• Carrusel;

si las fotografías tienen igual importancia.

Texto e imagen funciona mejor cuando existe una relación principal

Por ejemplo:

una imagen
+
una explicación

Imagen grande + texto pequeño

Puede utilizarse para:

• proyectos;

• productos;

• portfolio.

Texto grande + imagen pequeña

Puede utilizarse cuando:

• explicación;

• contenido;

• mensaje;

tienen mayor importancia.

Proporción según contenido

No utilices siempre 50/50 por costumbre.

Pregunta:

¿Qué necesita más espacio?

Ejemplo

Título y dos líneas:

30-40 % texto

puede ser suficiente.

Contenido más desarrollado

Puede necesitar:

60 % texto

Imágenes de personas

Si utilizas Cover, comprueba especialmente:

• rostro;

• manos;

• producto;

• objeto importante.

No permitas que el recorte móvil elimine aquello que la imagen pretende mostrar.

Imágenes de productos

Contain puede resultar útil si:

• el producto debe verse completo;

• tiene una silueta reconocible;

• el fondo puede mantenerse limpio.

Imágenes institucionales

Cover puede funcionar muy bien si se trata de:

• oficina;

• reunión;

• fábrica;

• equipo.

Imágenes con texto incorporado

Evítalas cuando puedas.

Por ejemplo:

[ imagen que ya dice:
"IMPLEMENTACIÓN EN 3 PASOS" ]

y luego el Heading también dice:

Implementación en 3 pasos

duplica información.

Utiliza la imagen para lo visual

y el editor para:

• títulos;

• textos;

• Buttons.

Background Image en Texto e imagen

Aunque la categoría se llama Texto e imagen, algunas composiciones pueden utilizar fondos.

Si utilizas Background Image, presta atención a:

• contraste;

• Cover;

• posición;

• Overlay.

Para una composición clásica de dos columnas

un componente Image suele ser más sencillo de controlar que una fotografía de fondo.

Responsive y espacios

Una composición que en desktop necesita:

Padding lateral 60 px

puede necesitar menos en móvil.

Por ejemplo:

20 px

conceptualmente.

No mantengas valores muy grandes si dejan poco espacio al contenido.

Margin entre Image y texto

En desktop las columnas ya pueden generar separación.

En móvil, cuando se apilan, puede necesitar existir un espacio vertical.

Por ejemplo:

[ IMAGEN ]

24 px

TÍTULO
Texto

Evita Margin excesivo después de apilar

Un valor creado para desktop puede generar enormes espacios en móvil.

Comprueba cada vista.

Min Height

Puede ser útil para mantener una sección con determinada presencia.

Pero no utilices:

height: 600px;

solamente porque la imagen original tenía esa altura.

Permite que el contenido determine la altura cuando sea apropiado.

El texto puede cambiar

Una sección con:

dos líneas

hoy puede tener:

seis líneas

mañana.

Una estructura flexible soportará mejor futuras actualizaciones.

No diseñes solamente para el contenido actual

Piensa también en mantenimiento.

Texto e imagen como bloque reusable

Esta sección es especialmente buena para crear una estructura reutilizable.

Por ejemplo:

servicio-item

con:

• Image;

• Heading;

• Paragraph;

• Button.

Después puedes clonar y reemplazar contenido.

Mantén nombres descriptivos

Por ejemplo:

servicio-bloque
servicio-imagen
servicio-contenido
servicio-titulo
servicio-texto
servicio-boton

Esto facilita personalizaciones futuras.

CSS personalizado

Si necesitas un comportamiento avanzado, limita el scope.

Por ejemplo:

.servicio-bloque .servicio-imagen {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

Responsive

@media (max-width: 768px) {
    .servicio-bloque .servicio-imagen {
        height: 280px;
    }
}

si realmente necesitas diferentes alturas.

Pero utiliza primero Grid y Estilo

No agregues CSS para:

• alineación;

• columnas;

• Padding;

si puede resolverse fácilmente desde el editor.

Evita selectores globales

No utilices:

img {
    height: 420px;
}

si solo quieres modificar esta sección.

Hover en Image

Puede agregarse un efecto sutil si la imagen o Card es interactiva.

Por ejemplo:

.servicio-bloque .servicio-imagen {
    transition: transform .3s ease;
}

Pero si la imagen no es clicable, no es necesario simular interacción.

Hover en Button

Puede configurarse como cualquier CTA.

El Button debería dar una respuesta visual clara.

Animate on scroll

Puedes animar:

• Section completa;

• Row;

• Image;

• contenido.

No necesitas animar Image y texto con efectos completamente diferentes

Una aparición coherente suele ser suficiente.

Ejemplo

Image entra suavemente desde izquierda y texto desde derecha puede formar parte de un diseño, pero utiliza estas combinaciones con moderación.

No hagas que la lectura dependa de la animación

El contenido principal debe terminar visible correctamente.

Texto e imagen en Home

Puede utilizarse para:

• presentar empresa;

• explicar servicio principal;

• destacar categoría;

• comunicar diferencial.

Ejemplo

Banner
↓
Beneficios
↓
Texto e imagen
"Conoce nuestra propuesta"
↓
Productos

Texto e imagen en Productos

Puede complementar el catálogo.

Por ejemplo:

[ imagen ]

PRODUCTOS PERSONALIZADOS

Conoce diferentes alternativas para empresas.

↓

CATÁLOGO DINÁMICO

No recrees el catálogo manualmente

Utiliza Texto e imagen para introducir o complementar.

Texto e imagen en Blog

Puede utilizarse para:

• destacar contenido;

• presentar una temática;

• dirigir hacia artículos.

Texto e imagen en Servicios

Puede utilizarse para explicar:

• metodología;

• ventajas;

• proceso.

Texto e imagen en una landing

Puede formar una secuencia narrativa.

Por ejemplo:

Problema

[ imagen ] [ texto ]

↓

Solución

[ texto ] [ imagen ]

↓

Beneficios

↓

CTA

Es especialmente útil para contar una historia visual

Alternando:

imagen → explicación

y:

explicación → imagen

No abuses de la alternancia

Una página con diez bloques idénticos alternados puede seguir sintiéndose repetitiva.

Puedes intercalar:

• Beneficios;

• Galería;

• Testimonios;

• CTA.

Ejemplo práctico: servicio

Queremos:

[ IMAGEN ]

IMPLEMENTACIÓN PERSONALIZADA

Analizamos las necesidades de cada proyecto para configurar una solución adecuada.

[ CONOCER SERVICIO ]

en desktop:

[ IMAGEN ] [ TEXTO ]

y en móvil:

[ IMAGEN ]

[ TEXTO ]

Paso 1

Abre:

Secciones → Texto e imagen

Paso 2

Elige un diseño.

Paso 3

Utiliza Navigator para identificar:

Section
→ Container
→ Grid Row
→ Grid Columns

Paso 4

Reemplaza Image.

Paso 5

Completa Alt.

Paso 6

Modifica Heading.

Paso 7

Modifica Paragraph.

Paso 8

Configura Button y Link si corresponde.

Paso 9

Revisa proporción de columnas.

Paso 10

Configura alineación vertical.

Paso 11

Comprueba:

Cover / Contain

Paso 12

Revisa desktop.

Paso 13

Revisa tablet.

Paso 14

Revisa celular y comprueba que las columnas se apilen.

Paso 15

Guarda.

Paso 16

Utiliza:

Ver página

y prueba el Button.

Ejemplo práctico: producto

[ PRODUCTO ]

DISEÑADO PARA ACOMPAÑAR TU MARCA

Personaliza diferentes alternativas según tu proyecto.

[ VER PRODUCTOS ]

En este caso puede ser importante:

Contain

para mostrar todo el producto.

Ejemplo práctico: empresa

[ EQUIPO ]

TRABAJAMOS JUNTO A NUESTROS CLIENTES

Acompañamos cada proyecto desde el relevamiento inicial hasta su implementación.

Puede funcionar con Cover sobre una fotografía institucional.

Ejemplo práctico: bloques alternados

SERVICIO 1

[ IMAGEN ] [ TEXTO ]


SERVICIO 2

[ TEXTO ] [ IMAGEN ]


SERVICIO 3

[ IMAGEN ] [ TEXTO ]

Mantén:

• proporciones;

• Typography;

• Padding;

• Buttons;

consistentes.

¿Qué hacer si la imagen queda muy pequeña?

Revisa:

• tamaño de columna;

• Width;

• Container;

• Padding.

Tal vez la imagen esté dentro de una columna demasiado estrecha.

¿Qué hacer si el texto queda demasiado estrecho?

Aumenta su proporción de columna.

Por ejemplo, pasar de:

6 / 6

a:

5 / 7

si el diseño lo requiere.

¿Qué hacer si la imagen domina demasiado?

Reduce:

• columna;

• altura;

• tamaño.

O utiliza otra composición.

¿Qué hacer si el texto no queda centrado verticalmente?

Selecciona Grid Row y revisa:

Vertical align

antes de utilizar Margin manual.

¿Qué hacer si el contenido queda centrado pero quiero que empiece arriba?

Modifica la alineación correspondiente.

No necesitas reestructurar toda la sección.

¿Qué hacer si en móvil siguen apareciendo dos columnas?

Revisa los tamaños de columnas para dispositivos pequeños.

La vista móvil es solo una previsualización; debes modificar la configuración responsive real.

¿Qué hacer si el orden en móvil no es el esperado?

Revisa la jerarquía:

Grid Row
├── Column A
└── Column B

El orden estructural influye en cómo se apilan.

Si necesitas un comportamiento especial, evalúa primero las opciones del Grid antes de duplicar contenido.

¿Qué hacer si la imagen aparece debajo y quiero que aparezca arriba?

Revisa:

• orden estructural;

• Direction;

• posibilidades responsive del Row.

Evita crear una segunda sección móvil como primera alternativa.

¿Qué hacer si al invertir columnas se desordena desktop?

Realiza los cambios de forma controlada y prueba cada dispositivo.

No cambies simultáneamente:

• orden;

• tamaño;

• CSS;

sin comprobar el resultado.

¿Qué hacer si la imagen se recorta demasiado?

Evalúa:

• Cover;

• Contain;

• fotografía;

• altura.

Puede ser más sencillo utilizar otra imagen.

¿Qué hacer si la imagen se deforma?

Revisa:

• Width;

• Height;

• object-fit.

No alteres la proporción.

¿Qué hacer si el Button queda lejos del texto?

Revisa:

• Margin;

• estructura;

• Paragraph;

• espacios internos.

No compenses con posiciones absolutas.

¿Qué hacer si hay demasiado espacio vacío bajo el texto?

Puede deberse a:

• altura de Image;

• Min Height;

• alineación;

• Height del Row.

Identifica primero qué elemento genera la altura.

¿Qué hacer si hay demasiado espacio entre Image y texto en móvil?

Revisa:

• Margin inferior de Image;

• Margin superior del contenido;

• Padding de columnas;

• Row.

¿Qué hacer si un estilo aplicado a un título cambia todos los bloques?

Comprueba:

Linked styles

Si las secciones comparten una Class, puede ser correcto.

Si quieres una excepción, agrega:

• Class adicional;

• ID.

¿Qué hacer si clono una sección y mantiene el mismo Button?

Actualiza:

• Text;

• URL.

¿Qué hacer si clono una sección y mantiene el mismo ID?

Modifícalo.

Los IDs deben ser únicos dentro de la página.

¿Qué hacer si eliminé Image pero quedó una columna vacía?

Si quieres eliminar toda la parte visual:

considera si también debes eliminar o reorganizar la columna.

No dejes:

[ vacío ] [ texto ]

sin intención.

Si ya no quieres una imagen

Quizá sea más apropiado:

• ampliar la columna de texto;

• utilizar otra sección.

IA para crear una sección Texto e imagen

ChatGPT, Claude o Gemini pueden ayudarte a definir su estructura.

Por ejemplo:

Quiero crear una sección dentro del Editor de bloques de Waclis.

Necesito:

Desktop:
- Imagen a la izquierda ocupando aproximadamente 45 %.
- Contenido a la derecha ocupando aproximadamente 55 %.
- Contenido centrado verticalmente.

Celular:
- Imagen arriba.
- Contenido debajo.
- Ambos deben ocupar todo el ancho.

Componentes:
- Section.
- Container.
- Grid Row.
- Dos Grid Columns.
- Image.
- Heading.
- Paragraph.
- Button.

Explícame primero cómo configurarlo con las herramientas visuales del editor.

No generes CSS salvo que sea necesario.

IA para personalizar CSS

Estoy trabajando con una sección Texto e imagen en Waclis.

La sección utiliza:
.servicio-bloque

La imagen:
.servicio-imagen

El contenido:
.servicio-contenido

Desktop funciona correctamente.

En celular necesito:
- imagen con altura máxima de 280 px;
- contenido con Padding lateral de 20 px;
- título de 30 px;
- conservar Image arriba y contenido debajo.

No modifiques desktop.

No modifiques otras imágenes.

No agregues JavaScript.

Devuélveme solamente el CSS necesario.

IA para elegir Cover o Contain

Puedes indicar:

Esta imagen corresponde a un producto y necesito que se vea completo dentro de la columna.

No quiero que se recorte ni se deforme.

¿Debo utilizar Cover o Contain y qué CSS mínimo necesitaría?

IA para mejorar el contenido

Por ejemplo:

Tengo una sección Texto e imagen.

Título:
[texto]

Descripción:
[texto]

Quiero mantener la misma información pero reducir la descripción a un máximo de 45 palabras para que la composición permanezca equilibrada.

Utiliza español neutro.

No inventes beneficios adicionales.

IA para diseñar varios bloques alternados

Tengo tres servicios y quiero presentarlos mediante secciones Texto e imagen.

Necesito:
- Servicio 1: imagen izquierda.
- Servicio 2: imagen derecha.
- Servicio 3: imagen izquierda.
- En celular quiero una estructura coherente y fácil de leer.

Propón el orden de Image y contenido en móvil y explica por qué.

No escribas código todavía.

Buenas prácticas para Texto e imagen

Recomendamos:

• utilizar una imagen relacionada con el contenido;

• mantener Heading claro;

• no saturar la sección con demasiado texto;

• utilizar Button solo cuando exista una acción;

• estructurar la composición mediante Grid Row y columnas;

• definir proporciones según la importancia del contenido;

• utilizar alineación vertical;

• evitar grandes márgenes para acomodar elementos;

• elegir conscientemente entre Cover y Contain;

• mantener fotografías sin deformar;

• revisar el orden móvil;

• permitir que las columnas se apilen;

• utilizar Navigator;

• mantener Classes descriptivas en personalizaciones avanzadas;

• revisar IDs después de clonar;

• limitar CSS a la sección;

• probar el resultado mediante Ver página.

Errores frecuentes

Utilizar Margin para simular columnas

Utiliza Grid Row.

Crear una distribución rígida mediante Position

Puede fallar responsive.

Mantener 50/50 siempre

Adapta la proporción al contenido.

Mantener dos columnas estrechas en celular

Permite que se apilen.

No revisar el orden móvil

El orden estructural importa.

Crear versiones desktop y móvil sin necesidad

Intenta adaptar una sola estructura.

Utilizar Cover para un producto que debe verse completo

Considera Contain.

Utilizar Contain cuando necesitas llenar una fotografía ambiental

Puede dejar espacios innecesarios.

Forzar Width y Height deformando la imagen

Respeta su proporción.

Centrar texto con Margin Top enorme

Utiliza alineación vertical.

Escribir demasiado contenido

Divide la información.

Utilizar un Button que no aporta una acción real

Puede eliminarse.

Cambiar el texto del Button y olvidar la URL

Prueba el Link.

Clonar una sección y olvidar cambiar imagen, Alt o URL

Revisa toda la copia.

Repetir IDs personalizados

Mantén IDs únicos.

Eliminar Image y dejar una columna vacía

Reorganiza la estructura.

Aplicar CSS global a img

Limita el scope.

Utilizar Height fijo con textos variables

Mantén una estructura flexible.

No comprobar espacios en móvil

Margin y Padding pueden necesitar adaptación.

Animar excesivamente Image y contenido

Mantén una experiencia coherente.

No utilizar Ver página

Comprueba el resultado final.

Flujo recomendado

1. DEFINIR EL MENSAJE
↓
2. ELEGIR IMAGEN
↓
3. ELEGIR DISEÑO
↓
4. AGREGAR SECCIÓN
↓
5. REVISAR NAVIGATOR
↓
6. REEMPLAZAR IMAGE
↓
7. COMPLETAR ALT
↓
8. MODIFICAR HEADING
↓
9. MODIFICAR PARAGRAPH
↓
10. CONFIGURAR BUTTON / LINK SI EXISTE
↓
11. DEFINIR PROPORCIÓN DE COLUMNAS
↓
12. CONFIGURAR ALINEACIÓN
↓
13. REVISAR COVER / CONTAIN
↓
14. CONFIGURAR RESPONSIVE
↓
15. REVISAR ORDEN MÓVIL
↓
16. GUARDAR CAMBIOS
↓
17. VER PÁGINA

Checklist antes de publicar una sección Texto e imagen

• La imagen está relacionada con el contenido.

• Reemplacé la imagen de ejemplo.

• La fotografía tiene calidad suficiente.

• Completé Alt cuando corresponde.

• La imagen no está deformada.

• Elegí conscientemente Cover o Contain.

• El Heading es claro.

• El Paragraph tiene una extensión razonable.

• El Button es necesario, si existe.

• El texto del Button describe la acción.

• La URL es correcta.

• La estructura utiliza Grid Row y columnas correctamente.

• La proporción de columnas corresponde al contenido.

• La alineación vertical es correcta.

• No utilicé grandes márgenes para posicionar manualmente el contenido.

• Desktop se visualiza correctamente.

• Tablet se visualiza correctamente.

• Celular se visualiza correctamente.

• Las columnas se apilan correctamente.

• El orden móvil es el esperado.

• El título no es demasiado grande en celular.

• Los espacios laterales son adecuados.

• No existe scroll horizontal inesperado.

• Revisé Navigator.

• Los elementos clonados fueron actualizados.

• Los IDs personalizados son únicos.

• Linked styles tiene el alcance esperado.

• El CSS personalizado está limitado a esta sección.

• Las animaciones son moderadas, si existen.

• Guardé los cambios.

• Probé el Button o Link.

• Revisé el resultado mediante Ver página.

En resumen

La sección Texto e imagen es una de las estructuras más flexibles del Editor de bloques de Waclis.

Puedes utilizarla para:

• servicios;

• productos;

• información institucional;

• características;

• procesos;

• proyectos;

• explicaciones;

• contenido comercial.

Una estructura habitual es:

Section
└── Container
    └── Grid Row
        ├── Grid Column
        │   └── Image
        └── Grid Column
            ├── Heading
            ├── Paragraph
            └── Button

Su principal ventaja es que permite combinar:

contenido visual + explicación

manteniendo ambos elementos relacionados.

No es necesario utilizar siempre una distribución:

50 / 50

Puedes adaptar las columnas según el contenido:

40 / 60

60 / 40

u otra proporción adecuada.

Uno de los puntos más importantes es el responsive.

Una estructura desktop:

[ IMAGEN ] [ TEXTO ]

normalmente deberá transformarse en celular en:

[ IMAGEN ]

[ TEXTO ]

o:

[ TEXTO ]

[ IMAGEN ]

según el recorrido que quieras crear.

Por eso:

utiliza Grid Row y sus columnas para construir la distribución, en lugar de acomodar los elementos mediante Margin o posiciones rígidas.

También recuerda:

Cover → llena el espacio y puede recortar.

Contain → muestra toda la imagen y puede dejar espacios.

Elige según la función visual.

Y si utilizas varios bloques consecutivos puedes alternar:

[ IMAGEN ] [ TEXTO ]

[ TEXTO ] [ IMAGEN ]

[ IMAGEN ] [ TEXTO ]

para generar ritmo, siempre comprobando qué orden tendrá el contenido en celular.

Finalmente:

Guardar Cambios → Ver página → revisar computadora, tablet y celular → probar el CTA si existe.

Una sección Texto e imagen bien construida debe poder adaptarse al ancho disponible sin depender de posiciones rígidas y mantener una relación clara entre lo que el visitante ve y lo que necesita comprender.