A seção de um site é uma parte da página que agrupa elementos em torno de um tema. As seções são estruturas que permitem organizar o conteúdo do site/loja/página.

Protótipo:

Figura 1

Figura 2

Obs.: Entre a Seção e o Elemento há a Modal: Adicionar Elemento, clique e veja.

Seção com elemento:

Figura 3

As seções podem conter elementos como:

• Textos
• Imagens
• Vídeos
• Botões
• Grupos de Elementos
• Formulários
• Etc…

As seções podem ser adicionadas, removidas, duplicadas e movidas ou para cima ou para baixo.

Alguns exemplos de seções de um site são:

• Seção de contato
• Seção de boas-vindas
• Seção de sobre
• Seção de depoimentos
• Seção de formulário de inscrição
• Seção de vídeo
• Seção de compartilhamento de informações sobre a empresa
• Seção de rodapé
• Etc…

O Studio da UISHOP entrega ao usuário a experiência de com um clique ou um arrasta e solta o possa ser adicionado estruturas prontas e customizáveis.

A seção tem layout automático, sendo ajustável pelos seguintes parâmetros nas suas propriedades:

• Tamanho: Sua altura pode ser ajustada.
• Esticar Todos: Comando para colocar os itens internos em largura 100%.
• Orientar Layout: Define se os itens internos se organizam em coluna, linha ou quebra-linha.
• Alinhar: Define a posição dos itens dentro do layout na horizontal e vertical.
• Espaçar: Define os espaços “gap” entre os itens de forma manual, automática ou distribuída.
• Preencher: Acrescenta espaços “padding” às margens.
• Cor de Fundo: Define cor, gradiente ou imagem como plano de fundo.

Propriedades da Seção

Protótipo (com elemento/grupo dentro):

Figura 4

                            
{
    "in_visivel": true,
    "bubbles": [{
        "id_bubble": "b-xxxxxx",
        "ls_bubbles": [],
        "in_visivel": true,
        "elemento": {
            "id_elemento": 0,
            "id_variacao": 0,
            "nu_uniqid": "e-xxxxxx",
            "ds_configuracoes": {
                "content": {},
                "layout": {}
            },
            "styles": [
            {
                "atributo": {
                    "ds_configuracoes": {
                        "content": {},
                        "layout": {}
                    },
                    styles: {},
                    responsive:  {
                        "tablet": {
                            "content": {},
                            "layout": {}
                        },
                        "mobile": {
                            "content": {},
                            "layout": {}
                        }
                    }
                },
            }
            ],
            "responsive": {
                "tablet": {
                    "content": {},
                    "layout": {}
                },
                "mobile": {
                    "content": {},
                    "layout": {}
                }
            }
        },
        "ds_configuracoes": {
            "layout": {}
        },
        "responsive": {
            "tablet": {
                "in_visivel": true,
                "configuracoes": {
                    "layout": {}
                }
            },
            "mobile": {
                "in_visivel": true,
                "configuracoes": {
                    "layout": {}
                }
            }
        }
    }],
    "content": {},
    "layout": {},
    "responsive": {
        "tablet": {
            "in_visivel": true,
            "configuracoes": {
                "content": {},
                "layout": {}
            }
        },
        "mobile": {
            "in_visivel": true,
            "configuracoes": {
                "content": {},
                "layout": {}
            }
        }
    }
}