Com certeza você já reparou que cada página é dividida em diversos setores horizontais. Esses "setores" são chamados de Boxes, porque são vistos como caixas onde estão os Elementos. Dentro de cada box, pode haver até 4 elementos iguais os diferentes, que são separados proporcionalmente.


Outras características:


- Qualquer um dos 4 elementos (ou menos) adicionados em um box podem ser substituidos por qualquer outro elemento disponível a qualquer momento.

- Cada box pode ter seu tamanho individualmente configurado pelo usuário

- Cada box pode ter suas margens internas e externas individualmente configuradas pelo usuário

- O rodapé do site também é considerado um box

- O cabeçalho do site também é considerado um box


Veja aqui um exemplo de uma loja configurada com vários boxes:

mitienda-boxes-exemplo-paginacompleta


Já vimos que cada box pode ter até 4 elementos iguais ou diferentes e todos os elementos podem ser substituidos quando você quiser. Veja que aquele box que mostramos lá no início que continha 2 elementos categoria. Substituimos um deles por um elemento título:

mitienda-box-elementosdistintos


Repare também que cada elemento poderá ser editado separadamente dentro de um box, de acordo com as características que o mesmo ofereça. Se você deixar o mouse sobre um elemento, verá que o BOX ficará com uma linha que demarcará toda sua área e cada elemento também (neste caso uma linha azul). Veja o exemplo das linhas aqui quando deixamos o mouse sobre aquele box com 4 elementos produtos:

mitienda-box

Agora vemos o mesmo exemplo quando deixamos o mouse sobre o box com 1 elemento título:


mitienda-editarbox

Agora vamos entender todos estes ícones que aparecem.


1) Ícones do BOX
2) Ícones dos elementos (neste caso, existe apenas 1 elemento dentro deste box)


1) Ícones do box

mitienda-editarbox-flechas: clique sobre as setinhas e mova o box para cima ou para baixo.

mitienda-editarbox-fondo: edite o fundo do box.

mitienda-editarbox-espacio: defina as margens do box e entre os elementos.

mitienda-editarbox-ancho: edite a largura do box e o alinhamento vertical dos seus elementos.

mitienda-editarbox-duplicar: duplique o box e tenha dois iguais, com os mesmos elementos.

mitienda-editarbox-borrar: exclua o box completo.


2) Ícones dos elementos

Viu que apareceu lá no canto esquerdo superior o nome do elemento? Pois bem, perceba que apareceram também 2 ícones sobre o elemento, também: O primeiro é DUPLICAR mitienda-menu-duplicarelementos e o segundo é APAGAR mitienda-menu-borrarelementos. Porém aqui não estamos falando de duplicar/apagar o box, mas sim o elemento em questão. Prove tocar um destes ícones que você verá a reação. Lembrando que você poderá "duplicar" até que fiquem no máximo 4 elementos e poderá apagar até que fique no mínimo 1 elemento.