Cómo crear múltiples columnas usando HTML

¿Alguna vez ha ido a insertar una imagen en su página, luego pasó los próximos 30 minutos jugando con el texto-envoltura? ¿Te preguntas cómo todos los demás obtienen esas ordenadas columnas 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 pre-construidos para acomodar los tipos de cambios que le permitirán construir múltiples columnas sin demasiados problemas.

In this tutorial, we’ll walk you through the steps to adding columns within your Shopify pages using <div> tags within your HTML. (Don’t worry, we’ll make it super easy!)

¿Cuándo quieres usar esto?

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

• Dos columnas: separar el texto en una mitad de la página y mostrar una imagen en la otra mitad.
• Tres columnas: mostrando una cuadrícula de fotos con 3 a través y 3 hacia abajo.
• Cuatro columnas: mostrando 4 opciones de productos diferentes con texto, como 4 columnas separadas.

Vamos a sumergirnos en cómo los configuras.

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

• En tu Shopify admin, ve a Online Store > pages > 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:

Fuera de los temas de Sandbox (Parallax, retina, Mobilia, responsive),

El siguiente es un ejemplo de un diseño de dos columnas incluso:

<div class="eight columns alpha">
<strong>Column 1</strong>
</div>
​
<div class="eight columns omega">
<strong>Column 2</strong>
</div>

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

<div class="one-third column alpha">
  <strong>Column 1</strong>
</div>

<div class="one-third column">
  <strong>Column 2</strong>
</div>

<div class="one-third column omega">
  <strong>Column 3</strong>
</div>

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

<div class="four columns alpha">
  <strong>Column 1</strong>
</div>

<div class="four columns">
  <strong>Column 2</strong>
</div>

<div class="four columns">
  <strong>Column 3</strong>
</div>

​<div class="four columns omega">
  <strong>Column 4</strong>
</div>

Otro ejemplo: Vantage Theme

<div class=”<b>desktop-6</b> <b>tablet-6</b> <b>mobile-2</b>“>

Esto también funciona con 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, sólo hay espacio para 6 columnas)
• Mobile-2 le da una columna completa en el móvil (en el móvil sólo hay espacio para 2 columnas)

<div class=”<b>desktop-3</b> <b>tablet-3</b> <b>mobile-half</b>“>

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 medias columnas)
• móvil-la mitad le da una media columna en el móvil (en el móvil sólo 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?

1. Abra el almacén de demostración del tema que está utilizando.  Por ejemplo, si utilizas Vantage, abre https://vantage-shopify-theme.myshopify.com.
2. Busque una sección que tenga las columnas que desea copiar.  Por ejemplo, si desea 4 columnas, busque una cuadrícula de productos con 4 columnas.
3. 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.  Así que puede 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 va a insertar una imagen en lugar de texto, simplemente resalte el texto y reemplácelo con una imagen mediante 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á usando su tema para determinar qué números como arriba.

For example, instead of <div><img src=”your-image-here.jpg”></div>, use <div <strong>class=”three columns”</strong>><img src=”your-image-here.jpg”></div>

—

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

Gracias por consultar nuestra Shopify Insider blog @ Blackbelt Commerce, tenemos muchos otros posts valiosos e informativos que usted le ayudará a seguir para optimizar sus sitios web como Directrices de asociación,  what-are-the-latest-trends-in-e-commerce, which are the best e-commerce websites,  and Lo que aprendimos de nuestro Rebrand. Por favor, echa un vistazo a nuestros otros Servicios.