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.
Verá opções como Banner, Banner carousel full, Banner image slider horizontal, Banner double image slider, Banner bento grid, e mais.
Escolha o estilo do seu 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, texto mínimo: Anúncios de lançamento, revelações de produto ou declarações de marca onde um título marcante e o plano de fundo sustentam a narrativa.
Direcionar a atenção: Levar os visitantes a uma única ação principal, como “Get Started” ou “Book Now”, sem distrações visuais.
Apresentação de marca integrada: Integrar o cabeçalho da sua página numa única imagem principal imersiva para um aspeto simplificado e coerente.
Separador 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.
Alternador de imagem
Ative a Imagem (imagem/vídeo de fundo) se quiser mídia atrás do seu texto.
Se estiver ativado, verá o seletor Imagem/Vídeo abaixo.
Botões
Ative on Botões para adicionar uma chamada à ação.
Clique em Botão Adicionar +, depois defina o Rótulo e o Tipo de ligação (página, secção, e-mail, telefone ou URL externo).
Pestana 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 menu suspenso ajusta quão escura ou clara a sobreposição é para melhorar a legibilidade do texto.
Desfoque de imagem/vídeo aplica um efeito de suavização por trá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).
Alt. mín.: selecionar Conteúdo (ajusta ao texto) ou Ecrã (preenche a janela 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).
Fronteira
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.
Carrossel de Banner Completo
Carrossel de Banner Completo
Opte por Carrossel de Banners Completo quando tiver várias mensagens ou visuais chave que deseja exibir em sequência. Cenários ideais incluem:
Características em destaque: Alternando entre os benefícios do produto, as ofertas de serviços ou excertos de estudos de caso, cada um com o seu próprio título e subtítulo.
Narrativa em capítulos: Contar uma narrativa em várias etapas, como “Planear → Construir → Crescer”, com cada diapositivo a abordar uma etapa.
Aproveitar ao máximo o espaço: Utilizar slides de largura total para manter a sua secção principal dinâmica e envolvente, especialmente quando tem 3–5 elementos visuais marcantes para partilhar.
Separador 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 de lápis em qualquer diapositivo para alterar a imagem, a legenda ou o texto alternativo.
Clique no ícone do caixote do lixo para remover um diapositivo.
Botões
Ative on para mostrar um botão de chamada à ação abaixo do seu carrossel.
Clique no botão Adicionar +, depois defina o seu Rótulo e o Tipo de ligação (página, secção, e-mail, telefone ou URL externo).
Separador 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 da imagem
Sobreposição: Ajustar a sobreposição de escuridão/clariidade em cada slide.
Desfoque de imagem: Aplique um ligeiro desfoque por trás do texto para melhorar a legibilidade.
Fade: Ative para aplicar um subtil fundido cruzado entre diapositivos.
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.
Fronteira
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.
Carrossel de Imagens do Banner (Horizontal)
Carrossel de Imagens do 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 para percorrer uma galeria de 6–10 imagens—ideal para portefólios, testemunhos de clientes, ou galerias de antes-&-depois.
Mensagens em camadas: Sobreposição de títulos concisos e CTAs em cada slide, mantendo a altura do slider moderada para um acesso mais rápido à página.
Descoberta interativa: Incentiva o envolvimento dos utilizadores através de controlos manuais de rolagem, ideal quando os visitantes precisam de percorrer as opções ao seu próprio ritmo.
Separador de Conteúdo
É 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.
Título
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 edição num diapositivo para substituir a sua imagem, atualizar o texto alternativo, ou alterar a legenda.
Clique no 🗑️ ícone do lixo para remover um diapositivo indesejado.
Para adicionar mais, clique em Adicionar imagem +.
Botões
Ative on para exibir um botão de chamada à ação abaixo do seu slider.
Clique no botão Adicionar +, em seguida especifique:
Etiqueta (por exemplo “Explore Our Services”)
Tipo de ligação (secção, página, URL externa, telefone ou e-mail)
Dica: Mantenha os rótulos dos botões concisos para preservar o equilíbrio visual.
2. Separador 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 do conteúdo: Alinhe o texto e os botões à esquerda, ao centro ou à direita nos diapositivos.
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 mínima: Conteúdo (altura automática) ou Ecrã (altura total da área de visualização).
Animações
Escolha como os slides animam: Do tema, Desvanecer, Deslizar ou Ampliar.
Separador
Ative on para inserir um divisor SVG decorativo abaixo do deslizante.
Fronteira
Ative on para adicionar um contorno subtil em torno de cada diapositivo.
Dica profissional: Uma velocidade de rolagem automática moderada com um botão simples “Explore” frequentemente proporciona o melhor engajamento.
Slider duplo de imagens do banner (vertical)
Slider duplo de imagens do banner (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:
Justaposição de visuais antes/depois ou problema/solução.
Realçar funcionalidades emparelhadas (por exemplo “On-site Support” ao lado de “24/7 Monitoring”).
Manter a altura da secção hero enquanto continua a oferecer aos visitantes várias imagens de grande impacto.
Separador 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 ligação (secção da página, URL externa, telefone, e-mail).
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 do conteúdo: Alinhe o texto e os botões Esquerda, Centro, ou Direita nos diapositivos.
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 mín.: 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:
Storytelling em etapas (por exemplo, “Our Process” em 3 etapas)
Realçar estudos de caso em destaque ou peças do portefólio
A apresentar diversas ofertas de serviços numa única área principal compacta
Separador de Conteúdo
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 o tipo de ligação (seção da página, URL externa, telefone, e-mail), a etiqueta, e o destino.
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çamento superior & inferior (Pequeno/Médio/Grande) para equilíbrio.
Animações
Estilo de entrada (por exemplo, Do tema (Desvanecer)) para título e subtítulo.
Grelha Bento de Banner
Grelha Bento de Banner
Utilize o Banner Bento Grid quando quiser um layout limpo de três imagens que equilibra um bloco de título/subtexto forte com três elementos visuais de apoio. Este estilo é perfeito para:
Apresentando Três Serviços Principais: Apresente as suas três principais ofertas lado a lado.
Destaque de estudos de caso: Reserve o mesmo espaço para as imagens do projeto “before,” “during,” e “after”.
Apresentação de Membros da Equipa ou Testemunhos: Associe cada foto a um elemento de destaque numa grelha unificada.
Separador de Conteúdo
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”).
Personalize o tipo de ligação (secção da página, URL externa, telefone, e-mail), o rótulo e o destino.
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.
Texto secundário: 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 um equilíbrio.
Animações
Estilo de entrada (por exemplo, Do tema (Desvanecer)) para título e subtítulo.
Grelha de Banners
Grelha de Banners
Use este estilo quando quiser apresentar um título único + subtítulo ao lado de uma grelha compacta de até 3 imagens, todas visíveis de uma só vez.É perfeito para:
Apresentar múltiplos pilares de serviço lado a lado sob uma mensagem unificadora
Apresentar membros da equipa ou clientes-chave numa disposição organizada
Destacar características do produto com instantâneos visuais rápidos
Separador 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
Reordenar via alça de arrasto, trocar via ícone do lápis, remover via caixote do lixo, 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 ligação (secção da página, URL externa, telefone, e-mail), etiqueta e destino
Separador 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 do Conteúdo: esquerda, centro ou direita relativamente à grelha
Imagem sem bordas: alternar desativado/ativado 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ínima
Defina como Conteúdo (automático) ou Ecrã (tela cheia)
Separador / 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 cursor sobre a secção no editor da página simplesmente mova o cursor sobre a secção para revelar estes botões de açã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; não é necessário aceder a definições mais profundas.