Ejemplos de casos de uso de diseño de vídeo con múltiples columnas
Los diseños de vídeo de varias columnas son útiles cuando se desea mostrar más de un vídeo en la misma sección. Pueden hacer que la página de producto sea más atractiva e informativa. Algunos casos de uso comunes incluyen:
- Mostrar las características del producto:Destaque diferentes características en videos separados.
- Vista de comparación:Coloca 2 o 3 videos uno al lado del otro para comparar modelos o variaciones de productos.
- Recomendaciones de clientes:Agregue varios videos de revisión para generar credibilidad.
- Tutoriales y cómo hacerlo:Muestra instrucciones paso a paso con clips cortos.
- Campañas de marketing:Combine historias de marca, vídeos de estilo de vida y contenido promocional.
Diseñe un diseño de video de varias columnas usando el elemento de video
Para crear un diseño de video de 3 filas para su página de producto creada con GemPages, siga estos pasos:
Paso 1: Acceda al Editor de GemPages
- Desde tu panel de administración de Shopify > GemPages > Páginas.
- Seleccione Producto para elegir entre sus páginas de productos existentes. De lo contrario, puede hacer clic en Crear nueva página > página de Producto para construir uno nuevo.
Paso 2: Agregar un elemento de fila
Una vez ingresado al editor, arrastra y suelta el Elemento Fila con un diseño de 3 columnas desde la barra lateral izquierda.
Si prefieres otro diseño de columnas para mostrar tus videos, puedes cambiarlo en el Configuración > Diseño .
El número máximo de columnas en una fila es 6.
Paso 3: Agregar elementos de video/banner de video
- A continuación, vuelva al Elemento pestaña en la barra lateral izquierda y desplácese hacia abajo hasta que vea el Medios de Comunicación .
- Arrastre y suelte un Elemento Elemento de Vídeo or Banner de video elemento en cada columna de su fila.
Paso 4: Sube y personaliza tu video
Haga clic en el video para abrir su configuración. En el Fuente de vídeo, Haga clic en el Tipo Campo para seleccionar la fuente de vídeo del menú desplegable: YouTube, Vimeo, o Video hosting.
Luego, ingrese la URL del video en el Enlace de vídeo campo y establecer el Miniatura imagen para cada video como prefieras.
Puedes elegir entre cualquier imagen de tu biblioteca (archivos de Shopify) o cargar una nueva.
Para más personalizaciones, consulte nuestros artículos:
Avanzado: Usar elemento de código personalizado
Ambos elementos solo permiten insertar un vídeo de una de tres fuentes (YouTube, Vimeo o alojamiento de vídeos). Por lo tanto, si prefieres añadir vídeos de otras fuentes, como TikTok, puedes usar... Elemento de Código Personalizado (Custom Code) Es la mejor opción.
Sigue estos pasos para crear tu propio diseño de video de 3 columnas con este elemento:
Paso 1: Arrastre y suelte un diseño de 3 columnas del elemento de fila en la posición deseada en la página.
Paso 2: Entrar "código personalizado” en la barra de búsqueda, luego anide el elemento Código personalizado en cada columna.
Paso 2: Haga clic en el elemento para abrir el panel de configuración en la barra lateral izquierda. Debajo de Código personalizado sección, seleccione la casilla junto a la Código .
Paso 3: El cuadro de diálogo Editor de código aparecerá en su pantalla. Debajo de HTML pestaña, pegue el código de incrustación del video y luego presione el botón Guardar .
Por ejemplo, , insertamos un código de incrustación de un vídeo de TikTok.
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@gempages/video/7384328395699539217" data-video-id="7384328395699539217" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@gempages" href="https://www.tiktok.com/@gempages?refer=embed">@gempages</a> <p>🥰 Master the Art of Crafting Comparison Tables with GemPages! 🥰 _________________________ ⭐️Try GemPages for FREE: https://bit.ly/appstore-Gempages #ecommerce #gempages #tipsandtricks #webdesign #landingpage #productdesign #productpage #homepage #abovethefold #mobileview #shopifydropshipping #pagebuilding #pagebuilder</p> <a target="_blank" title="♬ nhạc nền - GemPages" href="https://www.tiktok.com/music/nhạc-nền-GemPages-7384328668371667729?refer=embed">♬ nhạc nền - GemPages</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
Resultado:
gracias por tus comentarios