Para obtener una comprensión profunda del elemento Fila y sus capacidades, consulte nuestra Artículo sobre elementos de fila.
A continuación se muestran algunos ejemplos de diseño de teclas mediante filas y guías paso a paso.
Banner de héroe de diseño
Un banner de héroe es un banner destacado que se coloca en la parte superior de la página, generalmente con una imagen de fondo, un título y un botón de llamada a la acción.
Si bien puedes utilizar un diseño prediseñado elemento Banner Principal Para ello, el elemento Fila le proporciona un mayor control y flexibilidad.
Pasos para crearlo:
Paso 1: Arrastre y suelte un Elemento Fila de 2 columnasEsto crea el diseño base para el banner de tu héroe.
Paso 2: Personaliza tu banner de héroe en el Configuración .
Desplácese hacia abajo hasta Fondo y haga clic en el cuadro junto a Imagen para establecer un fondo de imagen para la sección.
Puedes explorar la galería para elegir una imagen disponible o cargar una nueva.
Paso 3: Arrastre y suelte un bloque de texto, un encabezado o cualquier otro elemento, como un elemento de botón, en su diseño.
Personaliza cada elemento a través del Configuración y Pestañas avanzadas para ajustes.
Paso 4: A ajustar el tamaño del fondo, Haga clic en la sección para abrir su configuración.
Navegue a la pestaña Avanzado Pestaña para ajustar los márgenes y el relleno debajo de la Espaciado Sección para un ajuste ideal.
Paso 5: Cambie a la vista móvil y ajuste el diseño para que responda mejor.
Sección de desglose del producto de diseño
El diseño de desglose del producto en capas es perfecto para resaltar las características o especificaciones del producto de una manera estructurada y visualmente atractiva.
Pasos para crearlo:
Paso 1: Arrastre y suelte un Elemento Fila de 2 columnasEsto constituye la base para el diseño del desglose del producto.
Paso 2: Arrastre un elemento de imagen a la columna de la izquierda y sube la imagen deseada.
Paso 3:Para crear el contenido de desglose con íconos y bloques de texto similares al ejemplo, arrastre y suelte otro elemento de fila. En la columna de la derecha.
Paso 4: Agregue sus elementos preferidos a la columna, como un ícono, bloques de texto, un encabezado, una lista de elementos y un elemento de botón.
Luego puedes personalizarlos a tu manera en el Configuración .
Paso 5: Cambie a la vista móvil y ajuste el diseño para que responda mejor.
Detalles del producto de diseño
Para una sección de producto detallada, puede crear un diseño personalizado que organice imágenes de productos, descripciones y opciones de compra.
Pasos para crearlo:
Paso 1: Arrastrar un Fila de 2 columnas A tu editor.
Paso 2: Colocar un imagen en la columna de la izquierda. Agregar encabezamientos, bloques de texto, botones, etc., en la columna derecha.
Paso 3: Reemplaza el texto del marcador de posición, sube una imagen y personaliza los elementos añadidos a tu gusto. Además, añade un enlace a tus botones de CTA:
Diseño de caja de testimonios dentro de un carrusel
Para diseñar un Cuadro de testimonios dentro de un carrusel, siga estos pasos:
Paso 1: Arrastrar el Elemento Carrusel a tu página.
Paso 2: Dentro del carrusel, agrega un Fila de 2 columnasAjuste el tamaño de las columnas según sus preferencias. Luego, inserte imágenes en la columna izquierda y texto en la columna derecha.
Paso 3: Ajusta la apariencia de cada elemento para adaptarlo a tu estilo.
Paso 4: Utilice el Copiar / Pegar Función para replicar diapositivas y luego actualizar cada una con contenido nuevo.
Para obtener más consejos de diseño y tutoriales detallados sobre cómo crear diseños optimizados, explore nuestra GemPages Academy.
gracias por tus comentarios