Configurando uma seção - Construindo - Documentação Carrd
Criando uma Seção
No coração do conceito de Seções está a Quebra de Seção, um elemento especial de Controle que marca onde uma seção começa, onde termina e quais elementos devem pertencer a ela. Veja como usá-lo:
Clique em Adicionar Elemento.
Clique em Controle para criar um novo elemento de Controle.
Defina o Tipo como Quebra de Seção.
Dê um Nome curto e descritivo composto apenas por letras minúsculas, números e hífens (por exemplo,
trabalho
). Isso identificará a seção de forma única e permitirá que você faça um link para ela (veja abaixo).Arraste a quebra de seção para onde você gostaria de dividir o site, solte o clique para soltá-la, e ... é isso. Embora os efeitos não sejam aparentes no construtor, veja o que acontece na versão publicada do site:
- Cria uma nova seção com o nome que você acabou de definir (por exemplo,
trabalho
) que contém todos os elementos após a quebra de seção (até outra quebra de seção, um marcador de rodapé ou o final do site). - Atribui todos os elementos antes da quebra de seção (até outra quebra de seção, um marcador de cabeçalho ou o topo do site) à seção anterior.
- ... e se não existir uma seção anterior, cria automaticamente uma com o nome de
home
.
Faça um link para a seção com um botão, um link ou praticamente qualquer outra coisa que use uma URL usando um hash
#
seguido pelo nome da seção (por exemplo,#trabalho
).(Opcional) Selecione o elemento Página do site, clique na aba Animação, e então selecione um efeito de Mudança de Seção para usar quando o site mudar de seções.
Você terminou! Clicar em um link para a seção agora a abrirá imediatamente e revelará seu conteúdo (e fará isso usando um efeito de mudança de seção se um foi selecionado), e cada seção pode ser vinculada diretamente simplesmente adicionando seu nome prefixado por hash à URL do site (por exemplo,
foo.carrd.co/#trabalho
). Você também pode vincular aos seguintes URLs especiais para navegar entre suas seções:
URL | Descrição |
---|---|
section:next | Abra a próxima seção. |
section:previous | Abra a seção anterior. |
section:first | Abra a primeira seção. |
section:last | Abra a última seção. |
... e é só isso! Basta repetir o processo para criar mais seções, ou opcionalmente levar o conceito um passo adiante e adicionar um cabeçalho e rodapé.