Cómo crear varias columnas usando HTML

Listen To Our Podcast

¿Alguna vez has ido a insertar una imagen en tu página y luego has pasado los siguientes 30 minutos jugando con el texto? ¿Te preguntas cómo todos los demás obtienen esas columnas ordenadas de texto e imágenes?

En realidad, es más fácil de lo que podría pensar, y la mayoría de los temas de Shopify vienen preconstruidos para acomodar los tipos de cambios que le permitirán construir varias columnas sin demasiados problemas.

En este tutorial, le guiaremos a través de los pasos para agregar columnas dentro de sus páginas de Shopify usando etiquetas div dentro de su HTML. (No te preocupes, lo haremos muy fácil!)

¿Cuándo querrías usar esto?

A continuación se muestran algunos ejemplos diferentes de cómo se pueden utilizar diferentes combinaciones de columnas en sus páginas de contenido de Shopify:

Dos columnas: separar el texto en la mitad de la página y mostrar una imagen en la otra mitad.

Tres columnas: muestra una cuadrícula de fotos con 3 de ancho y 3 de abajo.

Cuatro columnas: se muestran 4 opciones de productos diferentes con texto, como 4 columnas separadas.

Vamos a sumergirnos en cómo las configuras.

Paso 1: Abra el editor HTML de la página de contenido

En tu administrador de Shopify, ve a Páginas de la tienda en línea Selecciona tu página

Haga clic en el editor HTML

Paso 2: Determine qué formato de HTML debe usar en función de su tema específico. Vea las diferentes opciones a continuación:

Temas fuera de la caja de arena (Parallax, Retina, Mobilia, Responsive),

A continuación se muestra un ejemplo de un diseño de dos columnas par:

div class = “ocho columnas alfa”

Columna 1

/div

div class = “ocho columnas omega”

Columna 2

/div

A continuación se muestra un ejemplo de diseño de tres columnas:

div class = “alfa de un tercio de la columna”

Columna 1

/div

div class = “columna de un tercio”

Columna 2

/div

div class = “omega de un tercio de la columna”

Columna 3

/div

Se podría utilizar lo siguiente para un diseño de cuatro columnas:

div class = “cuatro columnas alfa”

Columna 1

/div

div class = “cuatro columnas”

Columna 2

/div

div class = “cuatro columnas”

Columna 3

/div

div class = “cuatro columnas omega”

Columna 4

/div

Otro ejemplo: Vantage Theme

div class = “desktop-6 tablet-6 mobile-2”

Esto funciona también desde un diseño de 12 columnas, lo que significa:

desktop-6 le da una media columna en el escritorio (12 dividido por 6 = 2 medias columnas)

tablet-6 le da una columna completa en una tableta (en una tableta, solo hay espacio para 6 columnas)

mobile-2 le da una columna completa en el móvil (en el móvil solo hay espacio para 2 columnas)

div class = “desktop top-3 tablet-3 mobile-half”

Esto daría a la columna:

desktop-3 le da un cuarto de columna en un escritorio (12 dividido por 3 = 4, por lo tanto 4 columnas)

tablet-3 le da una media columna en una tableta (6 dividido por 3 = 2 columnas medias)

mobile-half le da una media columna en el móvil (en el móvil solo hay espacio para 2 columnas, 2 dividido por 1 le da 2 medias columnas)

Y así sucesivamente.

¿Cómo sé qué estructura utiliza mi tema?

Abre la tienda de demostración del tema que estás usando. Por ejemplo, si está usando Vantage, abra

Busque una sección que tenga las columnas que desee copiar. Por ejemplo, si desea 4 columnas, busque una cuadrícula de productos con 4 columnas.

Haga clic con el botón derecho y elija “Inspeccionar elemento”. Verá una clase, similar a la anterior. La mayoría de los temas funcionan en un diseño de 16 o 12 columnas. Para que pueda copiar lo que han hecho y aplicar las mismas clases a sus propias columnas.

Ejemplo:

Paso 3: Inserte el HTML y reemplace el texto de relleno con el contenido deseado.

Si está insertando una imagen en lugar de texto, simplemente resalte el texto y reemplácelo por una imagen utilizando el editor de páginas.

Nota: Es importante utilizar el formato de HTML que se adapte a su tema actual. Puede ver cuántas columnas está utilizando su tema para determinar qué números como se indica anteriormente.

Por ejemplo, en lugar de div img src = “su-image-here.jpg” /div, use div class = “tres columnas” img src = “your-image-here.jpg” /div

Con estos pasos, podrás crear columnas ordenadas en tus páginas de Shopify en solo unos minutos. Y si tienes alguna pregunta sobre este proceso, ¡déjalas en los comentarios! Estaremos encantados de ayudarte y te atenderemos lo más rápido que podamos.

Gracias por revisar nuestro Shopify Insider Blog @ Blackbelt Commerce, tenemos muchos otros mensajes valiosos e informativos que le ayudarán a continuar optimizando sus sitios web, como las Directrices de asociación y lo que aprendimos de nuestro rebrand. Por favor, echa un vistazo a nuestros otros servicios.

Add Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

;

Add Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.