A secção de Banner da Durable vem em múltiplos estilos para que possa combinar com a aparência e a sensação da sua marca.
Aqui está como adicionar e configurar uma seção de Banner no editor do seu site Durable:
Clique Adicionar secção +
No seu editor de página, selecione Adicionar seção + no topo ou na parte inferior da sua página.
Pesquisar por “Banner”
Escreva Banner na caixa de pesquisa.
Você verá opções como Banner, Banner carousel completo, Banner slider de imagem horizontal, Banner slider de imagem dupla, Banner grade bento, e mais.
Escolha o seu estilo de banner
Clique no estilo que prefere para o adicionar à sua página.Durável irá inserir exemplos de títulos, subtítulos e imagens de espaço reservado.
Banner
Banner
Use a seção Banner quando quiser uma imagem (ou vídeo) de destaque, ousada e limpa, com uma única mensagem clara e uma chamada à ação opcional. É perfeita para:
Grande impacto, cópia mínima: Anúncios de lançamento, revelações de produtos ou declarações de marca onde uma manchete marcante e um fundo contam a história.
Focar a atenção: Direcionar os visitantes para uma ação principal como “Começar” ou “Reservar Agora” sem distrações visuais.
Apresentação de marca sem costura: Misturando o cabeçalho da sua página numa única imagem hero imersiva para um aspeto simplificado e coeso.
Aba de Conteúdo
É aqui que você edita o texto e decide se usa uma imagem/vídeo de fundo.
Slogan
Linha de acento opcional acima do seu título principal.
Clique Gerar para deixar o Durable sugerir uma frase curta.
Título
A sua mensagem principal.
Clique Regenerar para tentar diferentes títulos ou escreva o seu próprio.
Subtexto
Detalhes de apoio sob o seu título.
Clique Regenerar para novas sugestões de texto ou insira texto personalizado.
Alternar imagem
Ative a Imagem (imagem/vídeo de fundo) se quiser mídia atrás do seu texto.
Se ativado, verá o seletor Imagem/Vídeo abaixo.
Botões
Ative on Botões para adicionar uma chamada à ação.
Clique Adicionar botão +, depois defina o Rótulo e o Tipo de link (página, seção, email, telefone ou URL externa).
Aba de Estilo
Ajuste a aparência, o layout e o comportamento do fundo e do texto do seu banner.
Cores
Clique Alterar para escolher as cores de fundo e de texto da paleta do seu tema ou insira um código hex personalizado.
Imagem/vídeo de fundo
Se ativado em Conteúdo, verá esta opção aqui.
Posição os deslizadores permitem mover a imagem horizontal e verticalmente.
Sobreposição dropdown ajusta quão escura ou clara a sobreposição é para melhorar a legibilidade do texto.
Desfoque de Imagem/Vídeo aplica um efeito de suavidade atrás do seu texto.
Tamanho do texto
Heading: escolha Pequeno, Médio, Grande ou Extra Grande.
Subtexto: escolha Pequeno, Médio ou Grande.
Espaçamento
Superior e Inferior padding (Pequeno, Médio, Grande).
Altura mínima: selecione Conteúdo (ajusta o texto) ou Ecrã (preenche a área de visualização do navegador).
Alinhamento horizontal
Alinhe o seu texto à esquerda, ao centro ou à direita dentro do banner.
Divider
Ative on para adicionar um divisor decorativo na parte inferior do banner (clique Change para escolher um estilo).
Borda
Ative on para envolver o banner em um contorno.
Animações
Escolha como os elementos do banner aparecem ao rolar: Do tema (Desvanecer), Desvanecer, Aumentar ou Deslizar.
Combine com cabeçalho
Ative on para misturar perfeitamente o fundo do banner no cabeçalho do seu site.
Banner Carousel Full
Banner Carousel Full
Opte por Carrossel de Banners Completo quando tiver várias mensagens ou visuais chave que deseja exibir em sequência. Cenários ideais incluem:
Destaques de funcionalidades: Alternando entre benefícios do produto, ofertas de serviço ou instantâneas de estudos de caso, cada uma com seu próprio título e subtítulo.
Contar histórias em capítulos: Contar uma narrativa em várias etapas, como “Planejar → Construir → Crescer”, com cada slide cobrindo uma etapa.
Maximizar o imobiliário: Usar slides de largura total para manter a sua secção principal dinâmica e envolvente, especialmente quando tem 3–5 visuais fortes para partilhar.
Aba de Conteúdo
Use esta guia para editar o texto do seu carrossel, escolher imagens e alternar botões.
Slogan
Uma linha de acento breve acima do seu título.
Clique Gerar para sugerir automaticamente uma frase curta.
Título
A mensagem principal do seu carrossel rotativo.
Clique Regenerar para tentar novas ideias de títulos.
Subtexto
Detalhe de apoio abaixo do título.
Clique Regenerar para novas sugestões ou insira as suas.
Imagens do Carrossel
Arrastar e soltar para reorganizar até 5 diapositivos.
Clique no ícone do lápis em qualquer diapositivo para alterar a sua imagem, legenda ou texto alternativo.
Clique no ícone de lixo para remover um slide.
Botões
Ative on para mostrar um botão de chamada à ação abaixo do seu carrossel.
Clique Adicionar botão +, depois defina o seu Rótulo e Tipo de link (página, secção, email, telefone ou URL externa).
Aba de Estilo
Ajuste a aparência e o comportamento das imagens, texto e layout do seu carrossel.
Cores
Clique Alterar para escolher as cores de fundo e texto do seu tema ou palete personalizada.
Estilo do botão
Clique Mudar para escolher entre os estilos de botão predefinidos da Durable (preenchido, contorno, pílula, etc.).
Estilo de Imagem
Sobreposição: Ajustar a sobreposição de escuridão/clariidade em cada slide.
Desfoque da imagem: Aplique um desfoque suave atrás do texto para legibilidade.
Fade: Ativar para aplicar uma transição suave entre os slides.
Tamanho do texto
Cabeçalho: escolha Pequeno, Médio, Grande ou Extra Grande.
Subtexto: escolha Pequeno, Médio ou Grande.
Espaçamento
Superior e Inferior preenchimento: Pequeno, Médio, Grande.
Altura mínima: Conteúdo (ajusta-se ao texto) ou Ecrã (preenche a área de visualização do visitante).
Alinhamento de conteúdo
Alinhe o texto e os botões à esquerda, ao centro ou à direita sobre o carrossel.
Divider
Ative on para adicionar uma forma decorativa entre o seu carrossel e a próxima seção.
Borda
Ative on para envolver cada diapositivo em um contorno sutil.
ANIMAÇÕES
Selecione como os slides animam (Do tema, Desvanecer, Deslizar, Zoom).
Combinar com cabeçalho
Ative on para misturar perfeitamente o primeiro slide do carrossel com o cabeçalho do seu site, criando um efeito de estilo herói.
Deslizador de Imagem de Banner (Horizontal)
Deslizador de Imagem de Banner (Horizontal)
Escolha o estilo Deslizador de Imagem em Banner Horizontal para um carrossel de rolagem lateral que combina imagens e texto em um viewport mais compacto. Melhor para:
Exploração visual: Permitir que os utilizadores deslizem ou cliquem através de uma galeria de 6–10 imagens—ótimo para portfólios, testemunhos de clientes ou galerias de antes-&-depois.
Mensagens em camadas: Sobrepondo títulos concisos e CTAs em cada slide, enquanto mantém a altura do slider moderada para um acesso mais rápido à página.
Descoberta interativa: Incentivar o envolvimento do utilizador através de controlos de rolagem manuais, ideal quando os visitantes precisam de explorar opções ao seu próprio ritmo.
Content Tab
É aqui que gerencia o texto, imagens e botões do seu slider.
Slogan
Uma linha de acento curta acima do seu título.
Clique Gerar para taglines sugeridas pela IA.
Cabeçalho
A mensagem principal que aparece sobre o seu deslizador.
Clique em Regenerar para experimentar novas ideias de títulos.
Subtexto
Texto de apoio abaixo do título.
Clique Regenerar para atualizar a sugestão ou digite a sua própria.
Imagens do carrossel
Arraste e solte até 10 imagens na lista para definir os seus slides.
Clique no ícone ✎ de editar em um slide para trocar sua imagem, atualizar o texto alternativo ou mudar a legenda.
Clique no 🗑️ ícone de lixo para remover um slide indesejado.
Para adicionar mais, clique Adicionar imagem +.
Botões
Ative on para exibir um botão de chamada à ação abaixo do seu slider.
Clique Adicionar botão +, depois especifique:
Rótulo (por exemplo, “Explore os Nossos Serviços”)
Tipo de ligação (secção, página, URL externa, telefone ou email)
Dica: Mantenha os rótulos dos botões concisos para manter o equilíbrio visual.
2. Guia de Estilo
Use estes controlos para ajustar a aparência e a sensação do seu slider.
Cores
Clique Alterar para selecionar as cores de fundo, texto e botão do seu tema ou de uma palete personalizada.
Estilo do botão
Clique Alterar para escolher a forma (preenchida, contorno, pílula) e o comportamento ao passar o mouse.
Velocidade do carrossel
Selecione a velocidade de rotação automática dos diapositivos: Lenta, Normal, ou Rápida.
Layout
Posição do carrossel: Escolha se as imagens devem rolar horizontalmente (lado a lado) ou verticalmente (de cima para baixo).
Alinhamento de conteúdo: Alinhe o texto e os botões Esquerda, Centro ou Direita sobre os slides.
Tamanho do texto
Heading: escolha Pequeno, Médio, Grande ou Extra Grande.
Subtexto: escolha Pequeno, Médio ou Grande.
Cantos arredondados
Aplique raios de canto a cada diapositivo (Nenhum, Pequeno, Médio, Grande ou Padrão do tema).
Espaçamento
Superior e Inferior padding: Pequeno, Médio ou Grande.
Altura min.: Conteúdo (altura automática) ou Ecrã (altura total do viewport).
Animações
Escolha como os slides animam: Do tema, Desvanecer, Deslizar ou Ampliar.
Divisor
Ative on para inserir um divisor SVG decorativo abaixo do deslizante.
Borda
Ative on para adicionar um contorno subtil em torno de cada diapositivo.
Dica profissional: Uma velocidade de rolagem automática moderada com um simples botão “Explorar” costuma resultar no melhor engajamento.
Banner Duplo de Imagem (Vertical)
Banner Duplo de Imagem (Vertical)
Use este estilo quando quiser mostrar duas imagens lado a lado em cada diapositivo, com título e subtítulo sobrepostos, além de um call-to-action. Ótimo para:
Juxtaposição de visuais antes/depois ou problema/solução
Destaque de funcionalidades emparelhadas (por exemplo, “Suporte no local” ao lado de “Monitorização 24/7”).
Manter a altura da seção do herói enquanto ainda oferece aos visitantes várias imagens de alto impacto.
Aba de Conteúdo
Slogan (opcional)
Texto curto de acento acima do seu título (“Parceiro de TI Confiável”).
Clique Gerar para sugestões de IA.
Título
Suporte de TI Fiável para Empresas de Burnaby
Clique Regenerar para experimentar novas abordagens.
Subtexto
Descrição de duas ou três linhas abaixo do título.
Capacitando as empresas de Burnaby com soluções de TI fiáveis para operações contínuas e eficiência aumentada.Faça parceria com a P3Cloud Consulting hoje.
Imagens do Carrossel
Até 10 pares de imagens; cada diapositivo mostra duas lado a lado.
Use o puxador para reorganizar, lápis para trocar, lixo para remover, ou Adicionar imagem + para carregar/selecionar novas.
Botões
Ativar Adicionar um botão.
Personalizar Tipo de Link (seção da página, URL externa, telefone, email).
Editar Rótulo (“Obter Suporte de TI”) e alvo (“Secção de Contacto” ou link externo).
Guia de Estilo
Cores
Clique Alterar para selecionar as cores de fundo, texto e botão do seu tema ou de uma palete personalizada.
Estilo do botão
Clique Alterar para escolher a forma (preenchida, contorno, pílula) e o comportamento ao passar o rato.
Velocidade do carrossel
Selecione a velocidade de rotação automática dos slides: Lenta, Normal ou Rápida.
Layout
Posição do carrossel: Escolha se as imagens rolam horizontalmente (lado a lado) ou verticalmente (de cima para baixo).
Alinhamento de conteúdo: Alinhe texto e botões Esquerda, Centro ou Direita sobre os slides.
Tamanho do texto
Cabeçalho: escolha Pequeno, Médio, Grande ou Extra Grande.
Subtexto: escolha Pequeno, Médio ou Grande.
Cantos arredondados
Aplique raios de canto a cada diapositivo (Nenhum, Pequeno, Médio, Grande ou Padrão do tema).
Espaçamento
Superior e Inferior padding: Pequeno, Médio ou Grande.
Altura min.: Conteúdo (altura automática) ou Ecrã (altura total do viewport).
Animações
Escolha como os slides animam: A partir do tema, Desvanecer, Deslizar ou Aumentar.
Carrossel de Banners
Carrossel de Banners
Use este estilo quando quiser alternar entre várias imagens em grande largura com uma única sobreposição de título e subtítulo, permitindo que os visitantes deslizem ou avancem automaticamente pelas suas principais mensagens. Ideal para:
Contar histórias em etapas (por exemplo, “O Nosso Processo” em 3 etapas)
Destaque de estudos de caso ou peças de portfólio
A mostrar ofertas de serviços diversificadas num único herói
Content Tab
Slogan (opcional)
Descubra a Nossa Especialização
Clique Gerar para sugestões de IA.
Título
Chamada principal (“Avance com Consultoria Estratégica em TI”).
Clique em Regenerar para tentar uma redação diferente.
Subtexto
Descrição de suporte sob o título.
Eleve o potencial do seu negócio com serviços de consultoria de TI especializados, adaptados para atender às suas necessidades únicas em Burnaby, BC.
Imagens do Carrossel
Selecione até 10 imagens, cada uma preencherá a metade direita (ou a largura total em dispositivos móveis) em sequência.
Reordene através da alça de arrastar, troque através do ícone do lápis, remova através da lixeira, ou Adicionar imagem + para carregar/escolher novas.
Botões
Ativar Adicionar um botão para exibir um CTA (“Obter Suporte de TI”).
Personalizar Tipo de Link (seção da página, URL externa, telefone, email), Rótulo e alvo.
Aba de Estilo
Cores
Mude o acento para os pontos de paginação e destaques de botões.
Layout
Alinhamento de conteúdo: escolha sobreposição à esquerda, ao centro ou à direita.
Tamanho do Texto
Heading: escolha Pequeno, Médio, Grande ou Extra Grande.
Subtexto: escolha Pequeno, Médio ou Grande.
Cantos Arredondados
Aplicar raio de tema (por exemplo, Grande) para o cartão de sobreposição ou máscara de imagem.
Espaçamento
Espaçamentos superior e inferior (Pequeno/Médio/Grande) para equilíbrio.
Animações
Estilo de entrada (por exemplo, Do tema (Desvanecer)) para título e subtítulo.
Banner Bento Grid
Banner Bento Grid
Use o Banner Bento Grid quando quiser um layout limpo de três imagens que equilibre um bloco de título/subtexto forte com três visuais de apoio. Este estilo é perfeito para:
Apresentando Três Serviços Principais: Apresente as suas três principais ofertas lado a lado.
Destacar Estudos de Caso: Dê igual espaço às imagens de "antes", "durante" e "depois" do projeto.
Apresentando Membros da Equipa ou Testemunhos: Associe cada foto a uma chamada numa grelha unificada.
Content Tab
Tagline (opcional)
Descubra a Nossa Especialização
Clique Gerar para sugestões de IA.
Título
Chamada principal (“Avance com Consultoria Estratégica de TI”).
Clique Regenerar para tentar uma redação diferente.
Subtexto
Descrição de apoio sob o título.
Eleve o potencial do seu negócio com serviços de consultoria em TI especializados, adaptados para atender às suas necessidades únicas em Burnaby, BC.
Imagens do Carrossel
Selecione até 10 imagens, cada uma ocupará a metade direita (ou a largura total em dispositivos móveis) em sequência.
Reordene via a alça de arrastar, troque via ícone de lápis, remova via lixo, ou Adicionar imagem + para carregar/escolher novas.
Botões
Ativar Adicionar um botão para apresentar um CTA (“Obter Suporte de TI”).
Personalizar Tipo de Link (seção da página, URL externa, telefone, email), Rótulo e alvo.
Guia de Estilo
Cores
Mude o acento para os pontos de paginação e os destaques dos botões.
Layout
Alinhamento de conteúdo: escolha sobreposição à esquerda, ao centro ou à direita.
Tamanho do Texto
Heading: escolha Pequeno, Médio, Grande ou Extra Grande.
Subtexto: escolha Pequeno, Médio ou Grande.
Cantos Arredondados
Aplicar raio de tema (por exemplo, Grande) para o cartão de sobreposição ou máscara de imagem.
Espaçamento
Margens superiores e inferiores (Pequeno/Médio/Grande) para equilíbrio.
Animações
Estilo de entrada (por exemplo, Do tema (Desvanecer)) para título e subtítulo.
Banner Grid
Banner Grid
Use este estilo quando quiser apresentar um título único + subtexto ao lado de uma grelha compacta de até 3 imagens, todas visíveis ao mesmo tempo.É perfeito para:
Mostrando múltiplos pilares de serviço lado a lado sob uma mensagem unificadora
Apresentação de membros da equipa ou clientes chave num layout organizado
Destacar características do produto com instantâneas visuais rápidas
Aba de Conteúdo
Tagline (opcional)
Um pequeno pré-título de destaque (por exemplo, “Serviços de TI Especializados”)
Clique Gerar para sugestões de IA
Título
Chamada principal (por exemplo, “Elevar o Desempenho Empresarial com TI Fiável”
Clique Regenerar para tentar uma redação diferente
Subtexto
Descrição de apoio sob o título
Otimize as suas operações com a P3Cloud Consulting, o parceiro de confiança de Burnaby para soluções de TI inovadoras e fiáveis.Experimente a excelência hoje.
Imagens em Grelha
Selecione até 3 imagens—cada uma preenche uma célula da grelha
Reordene via a alça de arrastar, troque via ícone de lápis, remova via lixeira, ou Adicionar imagem + para carregar/escolher novas.
Botões
Ativar Adicionar um botão para exibir um CTA (por exemplo, “Aumente a Sua TI”
Personalizar Tipo de Link (seção da página, URL externa, telefone, email), Rótulo e alvo
Aba de Estilo
Cores
Mudar o acento (“Cc”) para os estados de botão e foco
Estilo do Botão
Escolha entre o Estilo 1 ou o Estilo 2 para o seu CTA
Layout
Posição da Grelha: escolha ícones image-left, image-right, image-top ou image-bottom
Alinhamento de Conteúdo: esquerda, centro ou direita em relação à grelha
Imagem Sem Bordas: desativar/ativar para remover molduras de imagem
Cantos Arredondados
Aplicar raio de tema (Pequeno/Médio/Grande/Extra Grande) às imagens e ao cartão de sobreposição
Tamanho do Texto
Heading: escolha Pequeno, Médio, Grande ou Extra Grande.
Subtexto: escolha Pequeno, Médio ou Grande.
Espaçamento
Superior & Inferior: escolha acolchoamento Pequeno/Médio/Grande para espaço de respiração
Altura Mín.
Defina como Conteúdo (automático) ou Ecrã (tela cheia)
Divisória / Borda
Ativar para desenhar uma linha fina ou caixa em volta da seção
Animações
Estilo de entrada (por exemplo, Do tema (Desvanecer)) para o cabeçalho e grelha
…e não se esqueça da nova barra de ferramentas de acesso rápido no topo da sua secção
Note que esta barra de ferramentas só aparece quando passa o rato sobre a secção no editor de páginas, basta mover o cursor sobre a secção para revelar estes botões de acção rápida.
Ícone / Botão | AÇÃO |
Restyle | Aplique instantaneamente uma configuração de seção ou palete de cores a esta seção. |
Regenerar imagens | Substitua todas as imagens atuais por opções novas provenientes de IA. |
↑ / ↓ | Mova esta seção para cima ou para baixo na página. |
⋮ (Menu mais) | Editar Secção • Duplicar secção• Eliminar secção• |
Estes controlos permitem-lhe experimentar e reorganizar em tempo real, sem necessidade de aprofundar nas definições.