Se você já usou Shopify, você conhece o tema Dawn. É um dos temas gratuitos disponíveis para novos empreendedores e uma opção altamente personalizável para projetar uma vitrine exclusiva.
O tema Dawn vem com vários módulos, como o bloco padrão de upload de vídeo e um banner de imagem.
O banner de imagem permite que botões e texto sirvam como primeiro plano, enquanto a imagem é o plano de fundo. Infelizmente, o módulo de vídeo não permite esse tipo de primeiro plano. No entanto, há maneiras de obter o melhor dos dois mundos, criando um banner de vídeo onde o vídeo é um plano de fundo — e há texto no primeiro plano.
Neste guia, mostraremos como construir um Tema da madrugada banner de vídeo para chamar a atenção em sua página inicial!
Visão geral do tema Dawn
O tema Dawn é gratuito Shopify tema que é amplamente utilizado por varejistas de comércio eletrônico. Com um design simples e configurações diretas, continua sendo uma escolha popular para montar uma loja visualmente atraente e elegante.
O que é um plano de fundo/banner de vídeo e por que você deve usá-lo em seu site?
Um banner de vídeo é uma área de uma página da web que apresenta um vídeo como plano de fundo de largura total, junto com outros elementos em primeiro plano, como botões e texto.
Um módulo como um banner de vídeo com tema Dawn oferece vários benefícios para aprimorar a experiência geral do site para os visitantes. Aqui estão algumas vantagens principais:
- Elementos visuais enriquecidos: Ao incorporar vídeos cativantes, o site torna-se mais apelativo visualmente, captando a atenção dos visitantes.
- Conteúdo dinâmico e envolvente: Os vídeos transmitem informações de forma eficaz. Eles podem mostrar recursos do produto, demonstrar como fazer ou contar uma história de marca cativante, mantendo os visitantes engajados.
- Maior envolvimento do usuário: Os vídeos têm o poder de criar uma impressão duradoura nos visitantes. A combinação de recursos visuais, áudio e movimento chama a atenção e incentiva os usuários a explorar mais.
- Comunicação eficaz da marca: Um fundo de vídeo ou banner pode comunicar a mensagem da marca aos clientes. Permite que as empresas destaquem a sua proposta de valor única, apresentem produtos ou serviços e estabeleçam uma identidade de marca forte.
Ao aproveitar o poder do vídeo no design do seu site, você pode torná-lo mais interessante e aumentar as conversões.
Guia passo a passo para adicionar um plano de fundo/banner de vídeo ao tema Dawn
Existem tecnicamente quatro maneiras de adicionar um banner de vídeo com o tema Dawn (nem todas ideais):
- Convertendo o vídeo para o formato de vídeo/imagem WebP.
- ajustar o Shopify código para um banner de imagem normal, para que ele suporte vídeo.
- Convertendo o vídeo para o formato GIF.
- Basta enviar um vídeo para o bloco Vídeo em Shopify, ignorando a ideia de ter elementos em primeiro plano (portanto, não seria um banner verdadeiro).
Não é terrivelmente difícil modificar o Shopify código para um banner de imagem padrão, mas o processo é desnecessariamente longo considerando que você tem acesso a um formato de arquivo como WebP. Os GIFs diminuem significativamente a qualidade do vídeo, e a opção 4 não nos fornece um banner de vídeo real.
Portanto, recomendamos converter qualquer formato de vídeo que você tenha (.mp4, .mov, .wmv) para o formato WebP. O WebP combina as vantagens de imagens JPEG, vídeos e GIFs de alta resolução, no sentido de que você pode produzir belos vídeos em movimento sem volume e sem perder muita resolução. E você pode carregar vídeos/imagens WebP para um Shopify bandeira de imagem.
Veja como:
Etapa 1: pegue seu vídeo e converta-o em arquivo WebP Format
Existem vários conversores gratuitos de “vídeo para WebP” online. Experimente uma pesquisa online ou use um dos conversores que testamos:
Carregue seu vídeo na ferramenta de conversão gratuita e escolha convertê-lo para o formato WebP. Salve o novo arquivo no seu computador.
Etapa 2: Encontre o tema Dawn em Shopify
Vá para “Loja Online”> “Temas”.
Se você ainda não o tiver, instale o tema Dawn. Caso contrário, você deverá encontrar o tema Dawn designado como Shopifydo “Tema Atual”. Clique no botão “Personalizar” para prosseguir.
Etapa 3: adicione e selecione o bloco de banner de imagem
O bloco “Image Banner” é adicionado por padrão no tema Dawn. Portanto, você poderá clicar nesse módulo para abrir suas configurações no painel esquerdo. Também é possível clicar no próprio banner da imagem, na visualização à direita. Use o link “Adicionar Bloco” se precisar inserir o “Banner de Imagem” do zero.
Etapa 4: faça upload do arquivo de vídeo WebP
Clique no botão “Selecionar imagem” na seção “Primeira imagem”.
Isso carrega uma área para fazer upload de imagens para a biblioteca de mídia da sua loja. Também é possível colar URLs de vídeos, mas usaremos a funcionalidade de upload. Escolha o botão “Adicionar imagens” e escolha o arquivo WebP que você criou anteriormente. Marque o arquivo recém-carregado com uma marca de seleção e clique no botão “Concluído”.
Isso coloca o arquivo de vídeo WebP no banner de imagem, permitindo que você edite qualquer conteúdo em primeiro plano também. Clique em “Salvar”.
Parabéns, você adicionou com sucesso um banner de vídeo com o tema Dawn!
Etapa 5: visualize o vídeo
Mas espere, é sensato visualizar o vídeo no frontend para garantir que ele tenha a aparência correta, funcione sem problemas e tenha a resolução apropriada.
De volta à tela principal do painel, clique no ícone do globo ocular para “Ver sua loja online”. Ele está localizado próximo a “Loja Online”, abaixo da seção “Canais de Vendas”.
Sucesso!
Personalizando seu banner de vídeo com tema Dawn: tornando-o exclusivamente seu
A personalização garante que seu vídeo se adapte perfeitamente à sua marca e à estética da loja. Então, vamos arregaçar as mangas e mergulhar de cabeça, certo?
Você deve sempre selecionar o banner da imagem para ver suas configurações. Uma vez lá, você pode modificar a opacidade da sobreposição da imagem e alterar a altura do banner. Então, você pode modificar a posição do conteúdo da área de trabalho, alterando onde o texto da sobreposição está localizado.
Mover o conteúdo e as posições dos botões funciona para mostrar o texto e o botão acima de uma área do vídeo onde eles são mais visíveis.
Para maior personalização, você tem acesso a uma seção “CSS personalizado”.
E claro, é possível selecionar o texto ou botão do conteúdo para alterar o que eles dizem e como aparecem.
Dicas para otimizar seu arquivo de vídeo para máxima velocidade e compatibilidade
Ter um vídeo impressionante não importa se ele retarda o rastreamento do seu site ou não é exibido corretamente em determinados dispositivos.
É por isso que otimizar seu arquivo de vídeo para máxima velocidade e compatibilidade é uma tarefa inegociável. Nesta seção, compartilharemos algumas dicas úteis para garantir que o conteúdo do seu vídeo seja simplificado para carregamento eficiente e reprodução universal.
- Use formatos de arquivo de vídeo (como WebP) que sejam amplamente compatíveis com a maioria dos navegadores da web.
- Mantenha o tamanho do arquivo de vídeo o menor possível. WebP faz um trabalho maravilhoso de compactação de vídeo sem perder qualidade.
- Defina a proporção do vídeo para caber bem no tamanho da tela.
- Opte por um vídeo com cores e contrastes equilibrados que reflitam a personalidade da loja.
Solução de problemas comuns ao adicionar um plano de fundo/banner de vídeo ao tema Dawn
Às vezes, não importa o quão cuidadoso você tenha sido, ainda podem surgir problemas ao adicionar o banner de vídeo com o tema Dawn. Aqui estão algumas dicas de solução de problemas quando você encontrar problemas:
Problemas de incompatibilidade
Tente converter o vídeo para um formato de arquivo compatível, como WebP, ou use o link de incorporação do vídeo.
O tamanho do vídeo é muito grande
Corte o vídeo ou compacte-o para reduzir o tamanho do arquivo e preservar a qualidade.
O vídeo não é reproduzido automaticamente
Verifique se você ativou a opção “Reprodução automática” nas configurações do tema.
Nossa conclusão sobre como adicionar um banner de vídeo com tema Dawn
Seguindo nosso guia passo a passo e dicas de solução de problemas, você poderá adicionar o banner de vídeo do tema Dawn ao Shopify com facilidade.
Quais são seus pensamentos? Deixe-nos saber nos comentários se você teve sucesso ao adicionar um banner de vídeo com o tema Dawn!
Comentários Respostas 0