Como personalizar os elementos do seu site
Você pode editar o estilo de todo o seu site e blocos que consistem em seções e colunas e personalizar cada coluna e widget separadamente.
Na seção Introdução aos elementos do site de um de nossos artigos anteriores, falamos sobre os elementos da página do site. Neste artigo, explicaremos como personalizar cada elemento e a página inteira.
Diretrizes de configuração de design
Você pode personalizar a página inteira ou cada elemento separadamente:
O estilo do site define o esquema de cores e os estilos de texto e botão que serão aplicados a todos os elementos da página do seu site por padrão. Com esta opção, você pode personalizar seu site para combinar com o estilo da sua marca. Leia mais: Como personalizar o estilo geral da página.
As configurações de bloco definem o estilo do bloco selecionado e suas seções e colunas.
As configurações de coluna definem o estilo da coluna selecionada em sua seção. Você pode copiar uma coluna junto com todas as suas configurações para novas colunas. Por exemplo, ao adicionar informações sobre os recursos do serviço ou os benefícios do produto, você pode criar uma coluna, duplicá-la e adicioná-la a uma nova coluna e usá-la como modelo.
Personalização de widgets. O estilo geral do seu site é aplicado a todos os widgets por padrão. No entanto, você pode personalizar alguns de seus widgets depois de adicioná-los.
Saiba mais: Adicionando widgets.
Seu site terá um layout elástico, que permite que os elementos do site se ajustem automaticamente a telas de vários tamanhos. Você não pode definir uma largura ou altura fixa para seus elementos, mas pode alterar seu preenchimento.
Para editar elementos, passe o cursor sobre o canto superior direito de um bloco ou coluna, ou sobre o canto superior esquerdo de um widget, e clique no ícone de edição.
Você também pode voltar para as configurações de nível superior de um elemento (por exemplo, clicando em Estilo > Bloco > Coluna) no painel de edição.
Como editar seus elementos
Vamos revisar as configurações que você pode usar para personalizar os elementos. Para saber mais sobre configurações específicas, consulte a seção Parâmetros do elemento.
Bloco
Você pode personalizar as seguintes configurações do bloco:
| Cor de fundo | Altera a cor de fundo do bloco na página. Clique no ícone e selecione uma cor. |
| Margem superior e inferior | Adiciona espaço entre o bloco e outros elementos da página. Quanto maior o valor, mais espaço haverá entre o bloco e os outros elementos. Digite um valor em pixels. |
| Imagem de fundo | Define uma imagem de fundo em vez de uma cor. Ative a alternância e selecione uma imagem. |
| Largura em tela cheia | Estica o conteúdo para a largura total da tela. Ative esta alternância para fazer o conteúdo se ajustar de uma borda da tela à outra. |
| Altura em tela cheia | Estica o conteúdo para a altura total da tela. Ative esta alternância para fazer o conteúdo preencher a altura da tela. |
| Ocultar bloco em | Oculta o bloco em dispositivos móveis ou desktop. |
Coluna
Você pode personalizar as seguintes configurações da coluna:
| Proporção flexível do conteúdo | Quando você ativa essa configuração, pode ajustar manualmente a largura da coluna. Se você aumentar a largura de uma coluna, as outras vão encolher proporcionalmente, junto com seu conteúdo. |
| Espaçamento entre as colunas | Adiciona espaçamento externo entre as colunas. |
| Alinhamento de conteúdo | Alinha o conteúdo do widget verticalmente dentro de uma coluna. Você pode fixá-lo no topo, no meio ou na parte inferior. |
| Cor de fundo | Altera a cor de fundo da coluna. Clique no ícone e selecione uma cor.
Para evitar cobrir a cor de fundo do bloco, você pode definir o valor como Transparente. |
| Arredondamento | Arredonda os cantos da coluna. Quanto maior o valor, mais arredondados os cantos.
Para ver o efeito de arredondamento, selecione uma cor de fundo para a coluna. |
| Espaçamento interno | Adiciona espaçamento entre a borda da coluna e o widget. Selecione valores predefinidos ou insira seu próprio valor para o preenchimento superior, inferior, esquerdo e direito. |
| Imagem de fundo | Define uma imagem de fundo em vez de uma cor de fundo. Ative a alternância e selecione uma imagem. |
| Contorno | Adiciona uma borda ao redor da coluna para destacar suas bordas. Ative a alternância, defina a espessura da borda em pixels e selecione o tipo de linha e a cor. |
| Sombra | Adiciona uma sombra ao redor da coluna para destacá-la. |
| Animação | Adiciona animação aos elementos da coluna. Ative a alternância e selecione o tipo, direção e velocidade da animação. |
Widget
As configurações de estilo variam conforme o tipo de widget. Você pode saber mais sobre cada widget nos artigos dedicados a eles.
Saiba mais: Widgets de site.
Parâmetros do elemento
Alinhamento
O alinhamento posiciona um elemento e seu preenchimento interno em relação à borda do elemento pai. Por exemplo, com o widget de Botão, você pode alinhá-lo horizontalmente ao centro, à esquerda ou à direita. Você pode alinhar uma coluna verticalmente para colocar seu conteúdo no topo, meio ou fundo.
Largura
Espaçamento
A largura do seu conteúdo é afetada pelo preenchimento e pelas margens definidas ao editar um bloco, coluna ou widget.
Para blocos, na configuração de Margem superior e inferior, você pode adicionar margens externas no topo e na parte inferior. Você pode definir o valor de 0 a 240 px.
Para colunas, você pode definir margens externas horizontais na configuração de Espaçamento entre colunas e margens internas na configuração de Preenchimento interno.
Para alguns widgets, na configuração de Preenchimento interno, você pode adicionar preenchimento interno entre os elementos à direita, esquerda, cima e baixo.
Você também pode separar os elementos do site adicionando o widget de Espaçador ou a linha de Divisor. Por exemplo, você pode usar esses recursos para separar a tela principal da seção que destaca os benefícios do seu produto ou serviço.
Proporção das colunas
À medida que você adiciona elementos à sua página, as larguras das colunas se distribuem de forma equilibrada pela seção. Você também pode ajustar a largura das colunas para criar o layout de conteúdo que preferir.
Ative o botão de Proporção flexível das colunas e mova o divisor da coluna.
Essa configuração ajusta todas as larguras das colunas em uma seção. Aumentar a largura de uma coluna reduzirá proporcionalmente as outras. Você pode alterar a largura em seções com duas, três ou quatro colunas. Porém, se adicionar cinco ou seis colunas, não será possível ajustar as larguras delas.
Largura do widget
Você pode esticar seu conteúdo até a largura total da tela usando a opção Bloco de largura total. Isso não alterará a largura geral da sua página.
Para alguns widgets, como o Texto, a configuração de Largura permite especificar uma porcentagem para controlar quanto da largura do elemento será preenchido com conteúdo.
Altura
A altura do elemento depende do tamanho das imagens, fontes, vídeos e do preenchimento do elemento na seção. Por exemplo, se você tiver várias colunas com alturas de elementos diferentes, a seção usará a altura do elemento mais alto.
Na configuração de Alinhamento do conteúdo, você pode ajustar o alinhamento do seu elemento dentro da coluna e gerenciar o espaço extra.
Posição
Na configuração de Posição, você pode mover widgets para a esquerda, direita, cima ou baixo.
Digite valores nos campos:
| X | Move o elemento no eixo X (horizontalmente). Digite um número negativo para mover o conteúdo para a esquerda e um número positivo para movê-lo para a direita. |
| Y | Move o elemento no eixo Y (verticalmente). Digite um número negativo para mover o conteúdo para cima e um número positivo para movê-lo para baixo. |
| Z-index | Move o elemento no eixo Z (à frente ou atrás de outros elementos). Defina um número de 1 a 9.
Elementos com um índice Z mais alto cobrirão elementos com números mais baixos. |
| Rotação | Gire o elemento até 360 graus. Digite um número negativo para girá-lo para a direita e um número positivo para girá-lo para a esquerda*. |
* Ao inserir valores, tenha em mente o tamanho do seu bloco. Se o valor exceder o tamanho do seu bloco, o elemento se moverá para fora da tela e não será visível.
Elementos posicionados manualmente não se ajustam automaticamente a diferentes tamanhos de tela, portanto, é melhor configurar a versão móvel separadamente da versão para desktop.
Fundo
Por padrão, o esquema de cores que você seleciona na seção Estilo geral é aplicado ao fundo da sua página. Você não pode definir um fundo personalizado para toda a página de uma vez — você só pode configurá-lo para cada bloco e coluna individualmente.
Vá para as configurações de fundo do elemento e, em Cor de fundo, selecione uma cor ou imagem. Se precisar preencher o espaço, defina as margens superior e inferior do seu bloco em pixels na configuração de Margem superior e inferior.
Você também pode selecionar uma imagem como fundo do seu bloco. Ative o botão de Imagem de fundo e selecione ou faça upload de uma imagem.
Para configurar o estilo da imagem, você pode escolher entre as seguintes opções:
| Tamanho | Ajuste o tamanho e o posicionamento da imagem dentro do bloco.
As seguintes opções estão disponíveis:
|
| Posição |
Defina o posicionamento da imagem dentro do bloco. Esta configuração é aplicável apenas se você tiver selecionado Padrão ou Ajustar na opção Tamanho. |
| Repetir |
Repete a imagem dentro do bloco. Esta configuração é aplicável apenas se você tiver selecionado Padrão ou Ajustar na opção Tamanho. Opções disponíveis: Não repetir, Horizontalmente, Verticalmente, e Ambos. |
| Filtros | Aplique um dos oito filtros à sua imagem. |
| Sobreposição de cor | Adicione uma sobreposição de cor à imagem e ajuste sua saturação. |
| Efeitos de rolagem | Adicione um efeito de rolagem à imagem.
Opções disponíveis:
|
Arredondamento
Por padrão, as bordas das seções (colunas ou certos widgets) são retangulares. Você pode arredondar as bordas ajustando o valor de arredondamento. Quanto maior o valor, mais arredondadas serão as seções. Recomendamos aumentar o preenchimento interno para que informações importantes não sejam cortadas.
Fixação de bloco
Você pode fixar o primeiro bloco no cabeçalho do seu site para que ele permaneça no topo mesmo enquanto você rola. Para isso, vá para as configurações do bloco e ative a opção Fixar no topo do site.
Animação
Adicione animação de rolagem aos seus elementos para tornar sua página mais interativa e atraente.
Você pode adicionar animação aos widgets Texto, Botões, Imagens e ao elemento Coluna. Se você adicionar animação ao elemento Coluna, todos os seus elementos aparecerão com o tipo de animação selecionado.
Vá para as configurações do seu elemento, ative o botão de Animação ao rolar e configure as opções:
| Tipo de animação | Selecione um efeito de entrada. | |
| Desvanecer | Este efeito permite que um elemento desapareça ou apareça gradualmente quando os usuários rolarem para cima ou para baixo. | |
| Escala | Aumenta ou diminui o tamanho de um elemento gradualmente à medida que os usuários rolarem para cima ou para baixo. | |
| Deslizar | Esta opção permite mover um elemento de uma posição para outra quando os usuários rolarem a sua página. Use esse efeito para criar uma experiência de usuário dinâmica e empolgante. | |
| Ticker de rolagem | Esta opção adiciona um efeito que faz o texto horizontal rolar continuamente pela tela. Esse efeito ajuda a destacar informações importantes.
Você pode aplicar esse efeito apenas ao widget de Texto. Ele aparecerá no seu site publicado ou no modo de visualização. |
|
| Posição da animação | Selecione a direção de onde seu elemento deve aparecer (esquerda, direita, superior ou inferior). | |
| Velocidade da animação | Selecione a velocidade com que seu elemento deve aparecer (lenta, média ou rápida). | |
Como editar elementos na versão mobile
Você pode editar elementos individuais, colunas e seções, personalizar fontes e ocultar blocos em dispositivos móveis ou desktop separadamente.
Saiba mais: Como ajustar a versão do seu site para dispositivos móveis.
Última Atualização: 14.11.2024
ou