Editor do Wix Studio: usar contêineres
3 min de leitura
Contêineres são ferramentas de layout responsivas que ajudam você a simplificar e estruturar o conteúdo do site. Você pode personalizá-los para complementar o design do site e anexar elementos como texto, mídia e botões.
Neste artigo, saiba mais sobre:
Adicionar contêineres a um site
Comece adicionando um contêiner que sirva para o design e conteúdo do cliente. Você pode escolher entre uma variedade de contêineres predefinidos e interativos ou começar do zero com um design em branco.
Para adicionar um contêiner:
- Clique em Elementos
no lado esquerdo do Editor. - Selecione Contêineres.
- Escolha um estilo de contêiner (Vazio, Customizado ou Dinâmico).
- Clique e arraste o contêiner escolhido para adicioná-lo à página.
Fazer o design dos contêineres
Personalize o design do contêiner para complementar a estética do site. Você pode alterar a cor do background, definir o raio e muito mais.
Para fazer o design de um contêiner:
- Selecione o contêiner relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- Escolha como deseja personalizar o contêiner em Design:
- Background: defina a cor do background para torná-lo mais ou menos visível.
- Borda: adicione uma borda ao contêiner e use as opções para definir seu tamanho, cor e opacidade.
- Cantos: ajuste o raio dos cantos do contêiner (em px) para deixá-los mais redondos ou quadrados.
- Sombra: adicione e personalize um efeito de sombra no contêiner.
Anexar elementos a contêineres
Quando você coloca elementos dentro de um contêiner, eles são anexados automaticamente. Isso significa que você pode arrastar o contêiner e seus elementos anexados como um todo e visualizá-los juntos no painel Camadas.
Para anexar um elemento a um contêiner:
- Clique no elemento relevante.
- Arraste-o para a posição desejada no contêiner.
- Solte o elemento quando vir a mensagem Anexar.
Aplicar uma grade a um contêiner
Aplique uma grade CSS avançada ao contêiner para estruturar seu layout. Você pode escolher o número de linhas e colunas que deseja e definir seu tamanho usando medidas responsivas (por exemplo: fr, mín/máx, %)
Para aplicar uma grade a um contêiner:
- Selecione o contêiner relevante.
- Clique no ícone Mais ações
. - Clique em Aplicar grade CSS avançada.
- Escolha um layout no menu dropdown 1x1.
Dica: selecione Outro se quiser definir seu próprio número de linhas e colunas.
Esse artigo foi útil?
|