> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Use boxes para estruturar landing pages

> Use boxes para agrupar elementos, controlar o layout e criar landing pages estruturadas e flexíveis, com espaçamento e alinhamento precisos.

O elemento Box é uma das ferramentas de layout mais importantes do LanderLab.

Ele permite agrupar, organizar e controlar os elementos da sua página com mais precisão.

***

## O que é um Box?

Um Box é um contêiner que guarda outros elementos dentro dele.

Você pode colocar dentro de um box:

* Textos
* Imagens
* Botões
* Listas
* Outros boxes

👉 Pense nele como um invólucro que ajuda a estruturar o seu conteúdo.

<Note>
  Observações importantes

  * Os boxes são essenciais para estruturar layouts
  * Você pode aninhar boxes para ter mais flexibilidade
  * Eles resolvem a maioria dos problemas de alinhamento e espaçamento
</Note>

### Como adicionar um Box

* Abra a barra lateral esquerda
* Vá até **Layout**
* Arraste **Box** para dentro de uma seção ou coluna

***

## Por que os boxes são importantes

Os boxes dão mais controle sobre como os elementos são organizados.

Você os usa para:

* Agrupar elementos relacionados
* Alinhar os elementos corretamente
* Criar layouts mais avançados
* Ajustar com precisão o espaçamento e o posicionamento

👉 A maioria dos layouts detalhados depende de boxes para funcionar corretamente.

***

## Como os boxes funcionam

Exemplo de estrutura:<br />Seção → Colunas → Box → Elementos

* Um box fica dentro de colunas ou seções
* Os elementos ficam dentro do box
* Você pode colocar boxes dentro de outros boxes para ter mais controle

***

## Controle de layout

Com um box selecionado, você pode controlar:

* **Direction** → layout em linha ou em coluna
* **Alignment** → posição dos elementos (esquerda, centro, direita)
* **Distribution** → distribuir os elementos de forma uniforme
* **Gap** → espaço entre os elementos

É aqui que acontece a maior parte dos ajustes de layout.

***

## Opções de estilo

Os boxes também oferecem:

* Fundos (cor ou gradiente)
* Espaçamento (padding e margin)
* Bordas e arredondamento
* Sombras
* Largura e altura