Noções básicas de layout

Estrutura de uma página da web slidde

Slidde.co utiliza uma estrutura simples de quatro camadas:

• userCompName.Page (Estilos Globais)
• userCompName.Slide (Segmentação de Conteúdo)
• userCompName.Container (Largura Responsiva, Múltiplas colunas)
• Elementos Inline (Conteúdo Específico)

userCompName.Page

A camada userCompName.Page 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 o elemento userCompName.Page diretamente, use a opção userCompOption.Select page na barra de ferramentas.

O recurso userCompOption.hashSection pode simular um site com várias páginas. Confira esta demonstração: Link da Demo

userCompName.Slide

Um userCompName.Slide é o elemento de primeiro nível sob um userCompName.Page, 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 userCompOption.htmlId é essencialmente um ID HTML. Nomeie-os com base no conteúdo dentro do userCompName.Slide para facilitar a navegação usando links como “#ID”. Saiba mais sobre links de pular.

Para ocultar um userCompName.Slide do site final, mas mantê-los salvos, marque o atributo userCompOption.hidden. Isso é semelhante aos slides ocultos do PowerPoint e também pode ser usado para tutoriais.

O recurso userCompOption.sticky é para barras de navegação flutuantes ou qualquer outro elemento. Veja um exemplo aqui: Sticky Demo

userCompName.Container

Um userCompName.Container gerencia larguras responsivas e exibições em várias colunas.

• As larguras para dispositivos móveis e desktops geralmente diferem. Use o atributo userCompOption.width em um userCompName.Container para larguras adaptativas em diferentes dispositivos.
• As colunas definem quantas colunas há em um contêiner. 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 contêiner.

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