Design de layout de vídeo para página de produto

Este artigo orienta você sobre como projetar um layout de vídeo com várias colunas para sua página de produto usando Elemento de vídeo or Código personalizado Element no GemPages v7.

Exemplos de casos de uso de layout de vídeo com várias colunas

Layouts de vídeo com várias colunas são úteis quando você deseja exibir mais de um vídeo na mesma seção. Eles podem tornar sua página de produto mais envolvente e informativa. Casos de uso comuns incluem:

Apresentando características do produto: Destaque diferentes recursos em vídeos separados.
Visão de comparação: Coloque 2 a 3 vídeos lado a lado para comparar modelos ou variações de produtos.
Depoimentos: Adicione vários vídeos de avaliação para construir credibilidade.
Tutoriais e instruções: Mostre instruções passo a passo com clipes curtos.
Campanhas de marketing: Combine histórias de marca, vídeos de estilo de vida e conteúdo promocional.

Crie um layout de vídeo com várias colunas usando o elemento de vídeo

Para criar um layout de vídeo de 3 linhas para sua página de produto criada com o GemPages, siga estas etapas:

Etapa 1: acesse o editor GemPages

No painel de administração do Shopify > Construtor GemPages app> PÁGINAS.
Selecione Produto para escolher entre suas páginas de produtos existentes. Caso contrário, você pode clicar Crie uma nova página > Página do produto para construir uma nova.

Etapa 2: adicionar um elemento de linha

Uma vez inserido no editor, arraste e solte o Elemento de linha com um layout de 3 colunas na barra lateral esquerda.

Se você preferir outro layout de coluna para exibir seus vídeos, você pode alterá-lo no Configurações guia> traçado seção.

O número máximo de colunas em uma linha é 6.

Etapa 3: adicionar elementos de vídeo/banner de vídeo

Trás à Element aba na barra lateral esquerda e role para baixo até ver a Media seção.
Arraste e solte um Elemento de vídeo or Faixa de vídeo elemento em cada coluna da sua linha.

Dicas: Use o Vídeo elemento para exibir apenas vídeo, ou o Faixa de vídeo se você preferir um texto sobrepondo o vídeo.

Etapa 4: carregue e personalize seu vídeo

Clique no vídeo para abrir suas configurações. Sob o Fonte de vídeo, Clique no Formato campo para selecionar a fonte de vídeo no menu suspenso: YouTube, Vimeo, ou Hospedagem de vídeo.

Observação: Se você escolher Hospedagem de vídeo, você precisa primeiro enviar o vídeo para um servidor de hospedagem, como o Shopify.

Em seguida, insira a URL do vídeo no Link de vídeo campo e defina o Imagem imagem para cada vídeo como preferir.

Você pode escolher qualquer imagem da sua biblioteca (arquivos do Shopify) ou carregar uma nova.

Para mais personalizações, confira nossos artigos:

Avançado: usar elemento de código personalizado

Ambos os elementos permitem inserir apenas um vídeo de uma das três fontes (YouTube, Vimeo ou hospedagem de vídeo). Portanto, se preferir adicionar vídeos de outras fontes, como o TikTok, use o Elemento de código personalizado é a melhor opção.

Siga estas etapas para criar seu próprio layout de vídeo de 3 colunas com este elemento:

Passo 1: Arraste e solte um layout de 3 colunas do Elemento Linha para a posição desejada na página.

Passo 2: Entrar "código personalizado” na barra de pesquisa e aninhe o elemento Código personalizado em cada coluna.

Passo 2: Clique no elemento para abrir o painel de configurações na barra lateral esquerda. Abaixo do Código personalizado seção, selecione a caixa ao lado de Code campo.

Passo 3: A caixa de diálogo Editor de Código aparecerá na tela. Sob o HTML guia, cole o código de incorporação do vídeo e clique em Economize botão.

Por exemplo, inserimos um código de incorporação de um vídeo do 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>

Observação: Não é possível visualizar o vídeo instantaneamente no editor. No entanto, você pode visualizar a página do produto para conferir o resultado.

Resultado:

O que você achou deste conteúdo?

Seus comentários

Irrelevante: Informação inesperada ou fora do tópico.

Incorreto: As informações não correspondem ao produto.

Precisa de pequenas correções: há erros de digitação ou links quebrados.

Tenho sugestões: Gostaria de sugerir melhorias para esta página.

Email*

Endereço de email invalido.

Algo deu errado. Por favor, tente novamente mais tarde.

Ao enviar seu endereço de e-mail e comentários, você concorda com a coleta e uso de suas informações conforme descrito em nosso Política de Privacidade e concordar com o nosso Termos de serviço.