Seções do Site
As seções são os blocos de conteúdo que compõem suas páginas. Cada página pode conter várias seções organizadas em qualquer ordem. O Website Studio oferece uma ampla variedade de tipos de seção organizados em quatro categorias: Conteúdo, Layout, Conteúdo Dinâmico e Interativo.
Categorias de Seção
Seções de Conteúdo
Blocos de conteúdo estático onde você controla o texto, as imagens e o layout.
| Tipo de Seção | Descrição |
|---|---|
| Hero | Uma seção de banner grande com imagem de fundo ou cor, título, subtítulo e botões de chamada para ação. Ideal para o topo da sua página Início. |
| Content | Um bloco de conteúdo de rich text. Suporta HTML para formatação flexível. |
| Gallery | Uma galeria de imagens exibida em grade ou layout masonry. |
| Embed | Incorpore conteúdo externo como vídeos do YouTube, Vimeo ou códigos de incorporação personalizados. |
| Map | Uma incorporação do Google Maps mostrando a localização da sua igreja, obtida das configurações de endereço da igreja. |
| What We Believe | Uma seção de declaração de fé com itens de crença expansíveis, cada um com título, descrição e referência bíblica. |
Seções de Layout
Elementos estruturais para espaçamento visual e separação.
| Tipo de Seção | Descrição |
|---|---|
| Spacer | Adiciona espaçamento vertical entre seções. Escolha entre alturas pequena, média ou grande. |
| Divider | Uma linha divisória horizontal entre seções. |
Seções de Conteúdo Dinâmico
Essas seções puxam automaticamente dados ao vivo do banco de dados do TimelyChurch.
| Tipo de Seção | Descrição |
|---|---|
| Service Times | Exibe a programação de cultos da sua igreja. Layouts incluem cards, lista ou compacto. |
| Staff Directory | Mostra sua equipe e liderança em layout de grade ou lista. |
| Events | Lista próximos eventos do seu módulo Events. |
| Announcements | Exibe anúncios recentes. |
| Groups | Mostra pequenos grupos e ministérios ativos. |
| Prayer Wall | Exibe pedidos de oração públicos com contagem de orações. |
| Giving | Uma chamada para doação com título, descrição e botão personalizáveis. |
| Testimonials | Um carrossel ou grade de histórias de transformação e depoimentos. |
| Livestream | Incorpora uma transmissão de vídeo ao vivo com exibição de programação e chat opcional. Suporta YouTube, Facebook, Vimeo ou fontes personalizadas. |
| Latest Sermon | Uma exibição em destaque do seu sermão mais recente, com informações de série e pregador. |
| Sermon Archive | Um arquivo pesquisável e filtrável de todos os sermões. |
Seções Interativas
Seções que oferecem recursos interativos para visitantes.
| Tipo de Seção | Descrição |
|---|---|
| Contact Form | Um formulário de contato para visitantes. Você pode usar o formulário padrão integrado ou selecionar um formulário criado no módulo Forms. |
| Plan Your Visit | Uma seção de boas-vindas para visitantes de primeira vez com etapas personalizáveis (What to Expect, Service Times, Kids & Families, Where to Park). |
| Next Steps | Guia visitantes pela jornada espiritual com cards de etapas (Baptism, Join a Group, Serve, Membership). |
| FAQ | Uma seção de perguntas frequentes em estilo acordeão. |
| Announcement Banner | Um banner fixo no topo ou na parte inferior da página para anúncios importantes. Suporta diferentes estilos (info, warning, success, alert) e pode ser dispensado. |
| Launcher Widget | Um botão de ação flutuante com links rápidos (Plan Your Visit, Watch Live, Give, Connect). Aparece no canto da página. |
| Countdown Timer | Uma contagem regressiva para um evento ou data futura, com chamada para ação e mensagem personalizável quando o timer termina. |
Adicionando uma Seção a uma Página
- Abra uma página no editor de páginas (Website Studio > Pages > clique em uma página).
- Clique no botão Add Section.
- Um modal aparecerá mostrando todos os tipos de seção disponíveis organizados por categoria.
- Clique no tipo de seção que deseja adicionar.
- A seção será adicionada ao final da página e você retornará ao editor de páginas.
Dica: As seções são sempre adicionadas ao final da página. Você pode reordenar as páginas depois usando arrastar e soltar.
Reordenando Seções
As seções podem ser reordenadas usando arrastar e soltar:
- No editor de páginas, encontre o identificador de arrastar (o ícone de linhas horizontais) no lado esquerdo de cada card de seção.
- Clique e arraste a seção para sua nova posição.
- Solte o botão do mouse. A nova ordem é salva automaticamente.
Editando uma Seção
- No editor de páginas, clique no ícone de editar (lápis) no card da seção.
- Você será levado ao editor de seção com três áreas principais:
Content
A área de conteúdo muda com base no tipo de seção:
- Seções Hero têm campos para heading, subheading, background image (upload ou URL) e primary button text/URL.
- Seções Content têm um campo de heading e uma área de body content que suporta HTML.
- Seções dinâmicas (Events, Staff, Groups, etc.) têm campos de heading e subheading. Os dados reais são puxados automaticamente do seu banco de dados.
- Seções Giving têm heading, subheading, description, button text e um give URL opcional.
- Seções Contact Form permitem escolher entre o formulário de contato padrão ou um formulário do seu módulo Forms.
- Seções FAQ permitem editar pares individuais de pergunta e resposta.
- Seções Beliefs permitem editar itens individuais de crença com título, descrição e referência bíblica.
- Seções Testimonials permitem editar depoimentos individuais com nome e citação.
- Seções Next Steps permitem configurar cards de etapas individuais com título, descrição, URL e ícone.
- Seções Sermon têm heading, subheading e call-to-action text/URL.
Settings
As configurações variam por tipo de seção, mas comumente incluem:
- Section is visible — Alternar se a seção aparece na página pública.
- Height (Hero) — Escolha entre Small, Medium, Large ou Full Screen.
- Alignment (Hero) — Alinhamento Left, Center ou Right para o texto.
- Number of items to show (Events, Groups, Announcements, etc.) — Controla quantos itens são exibidos.
- Columns (Staff, Groups, Gallery) — Escolha 2, 3 ou 4 colunas.
- Padding — Controla o espaçamento vertical: Small, Normal ou Large.
Controles de Sobreposição de Imagem Hero:
- Overlay Darkness — Um controle deslizante de 0% a 100% controlando quão escura a sobreposição aparece sobre sua imagem de fundo.
- Overlay Color — Escolha a cor da sobreposição (padrão é preto).
- Background Blur — Um controle deslizante de 0px a 20px para desfocar a imagem de fundo para melhor legibilidade do texto.
Background
Cada seção pode ter um fundo personalizado:
- None — Usa o fundo padrão da página.
- Solid Color — Escolha uma cor de fundo específica usando o seletor de cores.
- Image — Envie uma imagem ou forneça uma URL. Ao usar fundo de imagem, você pode configurar overlay darkness, overlay color, background blur e text color (light ou dark).
- Clique em Save Changes quando terminar.
Pré-visualização ao Vivo com Alternador de Dispositivo
Enquanto edita uma seção, o lado direito do editor mostra uma pré-visualização ao vivo da seção renderizada dentro de um iframe. A pré-visualização atualiza automaticamente conforme você altera conteúdo e configurações.
No topo do card de pré-visualização você encontrará um device switcher com três botões:
- Mobile — Restringe a pré-visualização a 375px de largura, correspondendo a um celular típico.
- Tablet — Restringe a pré-visualização a 768px de largura, correspondendo a um tablet típico.
- Desktop — Permite que a pré-visualização use toda a largura disponível.
Dica: Sempre verifique suas seções na largura mobile. Texto hero, posicionamento de botões e contagem de colunas frequentemente precisam de ajuste para ficarem corretos em celulares.
Alternando Visibilidade da Seção
Você pode mostrar ou ocultar rapidamente uma seção sem excluí-la:
- No editor de páginas, clique no ícone de olho no card da seção.
- A seção alternará entre visível e oculta.
- Seções ocultas mostram o rótulo «Hidden» e não aparecerão na página pública.
Duplicando uma Seção
- No editor de páginas, use a ação de duplicar em um card de seção.
- Uma cópia da seção (com todo o conteúdo e configurações) será inserida diretamente após a original.
Excluindo uma Seção
- No editor de páginas, clique no ícone de excluir (lixeira) no card da seção.
- Confirme a exclusão quando solicitado.
Importante: Excluir uma seção remove permanentemente ela e seu conteúdo. Isso não pode ser desfeito.
Larguras do Container da Seção
Cada seção pode ser configurada com uma de três larguras de container:
- Full Width — O conteúdo ocupa toda a largura da página.
- Container — O conteúdo é restrito a uma largura máxima padrão (padrão).
- Narrow — O conteúdo é restrito a uma coluna estreita, ideal para seções com muito texto.
Próximos Passos
- Personalizando o Design — Saiba mais sobre temas, cores e fontes
- Diretório da Equipe — Configure sua página de equipe/liderança