Entrar
Início
Preços
Documentação
Feedback
Português do Brasil

Noções básicas de layout

Last updated on 12/2/2024@mrbirddev

Estrutura de uma página slidde

Slidde.co usa uma estrutura simples de quatro camadas:

Página
(Estilos Globais)
Slide
(Segmentação de Conteúdo)
Contêiner
(Largura Responsiva, Múltiplas colunas)
Elementos Inline
(Conteúdo Específico)
...
Elementos Inline
(Conteúdo Específico)
...
...
...

Página

A camada Página está no topo e é usada para definir estilos globais como fontes, cores e estilos de links, já que as propriedades CSS são herdáveis.

Opcionalmente, você pode usar variáveis CSS para tornar seu modelo mais amigável ao usuário.

Se você não puder selecionar diretamente o elemento Página, use a opção Selecionar página na barra de ferramentas.

O recurso Seção de hash pode simular um site de várias páginas. Confira esta demonstração: Demo Link

Slide

Um Slide é o elemento de primeiro nível sob um Página, usado para segmentar conteúdo.

  • Páginas simples, como páginas de "link na bio", podem ter apenas um Slide.
  • Páginas de destino complexas podem incluir várias seções como #header, #hero, #works, #contact, #footer.

Um ID de âncora (ID HTML) é essencialmente um ID HTML. Nomeie-os com base no conteúdo dentro do Slide para fácil navegação usando links como “#ID”. Saiba mais sobre links de pular.

Para ocultar um Slide do site final, mas mantê-lo salvo, marque o atributo Oculto. Isso é semelhante aos slides ocultos do PowerPoint e também pode ser usado para tutoriais.

O recurso Fixo é para barras de navegação flutuantes ou quaisquer outros elementos. Veja um exemplo aqui: Sticky Demo

Contêiner

Um Contêiner gerencia larguras responsivas e exibições de várias colunas.

  • As larguras para dispositivos móveis e desktops geralmente diferem. Use o atributo Largura em um Contêiner para larguras adaptativas em diferentes dispositivos.
  • As colunas definem quantas colunas há em um container. Você pode definir larguras como x/12 (por exemplo, duas colunas de 6/12 para 50% de largura cada).

Cada coluna também pode ter configurações de alinhamento horizontal e vertical.

Outros

Outros elementos são elementos inline, que podem ser posicionados dentro do container.

Seguindo essa abordagem estruturada, você pode criar páginas web visualmente atraentes e responsivas com facilidade usando o Slidde.co.

Loading...