A seção Slider do Pixpa permite adicionar uma área visualmente atraente às suas páginas, além de otimizar o SEO. Seja em uma galeria, página, pasta, álbum de cliente ou blog, o banner ajuda a definir o tom e destacar o conteúdo importante.
Caso queira apenas exibir uma mensagem de texto na parte superior do seu site, use a barra de Anúncios . Ou, se preferir criar um pop-up que apareça quando os visitantes acessarem seu site, você pode experimentar o Pop-up de Marketing.
Neste artigo
- O que é um banner
- Adicionar banner a uma página
- Editar seção do banner
- Conteúdo do banner
- Configurações de banner
- Layout de banner
O que é um banner
Um banner é usado para mostrar uma imagem de banner/apresentação de slides/vídeo de largura total na parte superior/inferior do seu conteúdo.
Confira um banner de demonstração ao vivo
Adicionar seção de banner a uma página
- Uma seção pode ser adicionada a uma página. Você pode adicionar uma seção a uma página já existente ou crie uma nova página dentro do seu site.
- Na sua página, Clique no ícone + azul para adicionar um Nova Seção para sua página.
- Você vai agora ver o categorias de seção no lado esquerdo.
- Escolha o Seções de herói (1) categoria e clique em Slider guia (2) onde você pode escolher layouts diferentes que acontecerá no marco da Bandeira (3) seção.
- Escolha qualquer layout de seção e clique nele para adicioná-lo à sua página.
Editar seção do banner
Se a seção já foi adicionada à página, você pode editá-la facilmente.
- Posicione o cursor sobre a seção e clique em Editar conteúdo (1) botão.
- Uma barra lateral será aberta a partir da qual você poderá Editar (2) a seção do banner.
- Clique Economize (3) botão após fazer as alterações.
Conteúdo da seção do banner
A aba Conteúdo, na seção Editar Banner, permite adicionar e personalizar o conteúdo do seu banner, seja ele baseado em imagens ou em vídeos.
- Tipo de banner
- Slides de imagem
- Slides de vídeo
- Texto e botões do banner
- Texto do Banner
- Botão & Links
Tipo de banner
Selecione o tipo de banner. Você pode escolher qualquer uma das seguintes opções:
- Slides – Selecione a opção Slides se quiser exibir imagens no banner. Você pode adicionar vários slides de imagem sob um banner.
- Vídeo – Se quiser exibir vídeos como slides de banner, selecione esta opção. Abaixo de cada banner, você pode adicionar vários slides de vídeo.
Você pode adicionar até 25 slides em uma seção de banner.
Slides de imagem
Quando Slides é selecionado em Tipo de banner, você pode criar uma apresentação de slides carregando várias imagens como slides de banner.
- Adicione vários slides clicando em + Adicionar slides botão.
- Reordenar usando as alças de arrasto.
- Editar ou excluir slides individuais usando os respectivos ícones.
Editar slide de imagem/texto
- Imagem
- Clique no Escolher arquivo botão para mudar a imagem/slide. Clique no Apagar botão para excluir o slide.
- Mude o ponto focal da imagem apenas clicando na imagem em qualquer lugar.
- Imagem Móvel – Carregue uma imagem de banner para celular. Recomendamos adicionar imagens de retrato aqui.
- Especifique o texto alternativo para o slide de imagem. Isso ajuda para fins de SEO.
- Texto do slide - Insira o texto do slide que aparecerá sobre o slide. Você pode colocar o texto em negrito, itálico, sublinhado, vinculá-lo e fazer muito mais.
Veja também: O editor de texto Pixpa.
- Link do slide
-
- Clique no ícone de configurações e insira o link de sobreposição para o slide.
- Você pode especificar qualquer página dentro/fora do seu site, seu e-mail ou um número de contato.
Verifique também: Texto/botão de link
- Botão & Links
-
- Adicione até 10 botões/links ao conteúdo do slide.
- Você pode adicionar um botão normal, link de texto ou usar uma imagem/ícone como botão.
Verifique também: Botão & Links
- Bata o Economize botão para salvar suas alterações.
O slide completo será convertido em link somente quando a opção "Texto do banner e botões" estiver selecionada como "Diferente para cada slide".
Slides de vídeo
Ao selecionar a opção "Slide de vídeo" , você pode incorporar um vídeo do YouTube ou Vimeo em seu banner. As seguintes opções de configuração estão disponíveis:
1. Link do YouTube/Vimeo – Insira um link direto para o seu vídeo. Os formatos suportados incluem:
- YouTube: https://www.youtube.com/watch?v=XXXXXXXXXXX
- Vimeo: https://vimeo.com/XXXXXXXXXXX
2. Exibir vídeo – Escolha como o vídeo aparecerá no seu site:
- Reprodução automática: O vídeo será incorporado diretamente e reproduzido automaticamente em todos os dispositivos (silenciado por padrão).
- Reprodução automática – Somente para computador: O vídeo será incorporado diretamente e reproduzido automaticamente apenas em computadores (silenciado por padrão).
- Abrir no Lightbox: Clicar na pré-visualização do vídeo o abrirá em um pop-up.
3. Imagem para dispositivos móveis – Carregue uma imagem alternativa que será exibida em dispositivos móveis onde a reprodução automática de vídeo pode não funcionar ou não ser compatível. Isso garante que seu banner permaneça visualmente atraente em todos os tamanhos de tela.
4. Especificar Tag Alt (Opcional) – Adicione uma tag alt para melhorar o SEO e a acessibilidade. Ela descreve a imagem alternativa para leitores de tela ou para os casos em que a imagem não puder ser exibida.
5. Texto do slide – Insira o texto do slide que aparecerá sobre o slide. Você pode colocar o texto em negrito, itálico, sublinhado, vinculá-lo e fazer muito mais.
Veja também: O editor de texto Pixpa
6. Link do slide
- Clique no ícone de configurações e insira o link de sobreposição para o slide.
- Você pode especificar qualquer página dentro/fora do seu site, seu e-mail ou um número de contato.
Verifique também: Texto/botão de link
7. Botões e links
- Adicione até 10 botões/links ao conteúdo do slide.
- Você pode adicionar um botão normal, link de texto ou usar uma imagem/ícone como botão.
Verifique também: Botão & Links
8. Salvar – Clique no botão Salvar para salvar suas alterações.
Texto do banner e botões
- Especifique se o texto e os botões serão os mesmos para todos os slides ou diferentes para cada slide. Quando você seleciona o Igual para todos os slides opção, o Texto do Banner e botões será usada.
- Quando você seleciona o Diferente para cada slide opção, o texto e os botões especificados para um determinado slide serão usados.
Texto do Banner
- Insira o texto do banner que será comum a todos os slides.
Veja também: O editor de texto Pixpa
Botões e links
- Esses botões/links aparecem sobre os slides do banner (comuns para todos os slides).
Verifique também: Botão & Links - Depois de fazer as alterações, clique em Economize botão no canto superior direito para aplicá-los ao seu banner.
Configurações de banner
Na aba Configurações do banner, você obtém as seguintes opções:
- Modo de exibição de banner
- Controles de exibição de slides
- Estilo de banner
- carrossel
- botões
- Ícones sociais
Modo de exibição de banner
-
- Dimensionar e ajustar – As imagens caberão dentro da largura e altura do banner.
- Ajustar à largura (Apenas para desktop) – As imagens serão dimensionadas para a largura do banner. A altura do banner herdará a altura da imagem.
- Altura da área de trabalho do banner – Especifique a altura do banner da área de trabalho se você escolheu o sangramento total or dimensionar e ajustar opção no campo Modo de exibição.
- Altura do banner móvel – Especifique a altura do banner móvel.
Controles de exibição de slides
Essas configurações permitem personalizar a aparência e a transição dos slides na seção do banner.
-
Estilo de transição de slides – Escolha como os slides devem mudar. Você pode selecionar opções como Desvanecimento, Slide Horizontal ou Slide Vertical para uma transição suave entre os slides.
-
Slides por linha – Especifique quantas linhas de slides devem ser exibidas simultaneamente.
- Slides por coluna – Defina quantas colunas de slides devem aparecer. Isso controla quantos slides aparecem lado a lado em cada linha.
- Espaço entre slides – Ajuste o espaço entre slides individuais usando esta configuração. Você pode aumentar o espaçamento em pixels para controlar a separação visual entre os slides.
- Posição do conteúdo – Especifique a posição do conteúdo dentro do banner.
- Largura do conteúdo – Especifique a largura do conteúdo do banner.
Estilo de banner
- Cor de fundo – Defina a cor de fundo do banner.
- Sobreposição de cor – Defina a cor de sobreposição do banner.
- Estilo de Navegação – Especifique o estilo de navegação do banner. Você pode selecionar entre Chevron, Setas Longas e Setas Curtas. Selecione Nenhum se desejar desativar os controles de navegação.
- Cor de navegação – Especifique a cor dos controles de navegação no banner.
- Ativar seta de rolagem para baixo – Selecione esta opção para mostrar uma seta de rolagem para baixo sobre o banner.
- Raio de canto – Personalize o arredondamento dos cantos do slide do banner. Você pode aplicar o mesmo raio a todos os cantos ou especificar valores diferentes para cada canto individualmente.
carrossel
Essas configurações definem como os slides se movem e se comportam automaticamente dentro da seção de banner ou carrossel.
- Ativar rolagem suave – Ative esta opção para tornar as transições de slides mais suaves e proporcionar um efeito de rolagem perfeito.
- Ativar reprodução automática de slides – Quando ativada, a transição entre os slides será feita automaticamente, sem interação do usuário.
- Mostrar progresso da reprodução automática – Exibe um indicador visual mostrando o tempo restante antes da próxima transição de slide.
- Atraso de reprodução automática – Defina o intervalo de tempo entre as transições automáticas de slides (por exemplo, a cada 4 segundos).
- Loop do Carrossel – Ative esta opção para que os slides retornem continuamente ao primeiro slide após o último.
botões
Essas opções permitem personalizar os botões exibidos no banner.
- Tamanho do botão - Selecione o tamanho do botão dentre as opções disponíveis, como pequeno, médio ou grande.
- Alinhamento - Defina o alinhamento do botão dentro da seção (esquerda, centro ou direita).
- Espaço entre botões – Ajuste o espaçamento horizontal entre vários botões para um layout equilibrado.
- Espaço acima dos botões – Defina o espaço vertical entre o texto e os botões (medido em pixels).
- Tamanho do link de texto – Defina o tamanho da fonte para quaisquer botões ou links baseados em texto.
- Tamanho do botão de imagem – Ajuste o tamanho dos botões que incluem ícones ou imagens.
- Largura do botão – Escolha a largura do botão, com opções como padrão, grande, extra grande ou largura total.
Saiba mais sobre como estilizar botões e links.
Ícones sociais
Essas configurações permitem personalizar a aparência e o estilo dos ícones de redes sociais exibidos na seção do banner.
- Tamanho do ícone – Ajuste o tamanho dos ícones das redes sociais (em pixels) para que se adequem ao design geral do banner.
- Tipo de ícone – Escolha o estilo do ícone (por exemplo, Clássico, Contorno ou Sólido) que combine com o tema do banner.
- Cor do ícone – Selecione como a cor do ícone será definida. As opções incluem:
- Texto do link – Usa a mesma cor do texto do link da seção.
- Personalizado - Permite a seleção manual de uma cor personalizada.
- Cor da marca – Aplica a cor oficial da marca de cada plataforma (por exemplo, azul para o Facebook).
- Selecione a cor – Quando a opção "Personalizado" é selecionada, permite escolher uma cor específica para os ícones.
Layout de banner
Você pode alterar facilmente o layout de um banner. Saiba mais sobre os layouts de banner.
