Uma visão geral das configurações avançadas da guia

Ao contrário do Configurações tab, essas configurações permanecem consistentes em todos os elementos. Ao explorar essas configurações, você pode personalizar efetivamente os recursos mais avançados de cada elemento e maximizar seu potencial.

Exibir em

O processo de Exibir Ligado A configuração permite que você escolha se um elemento ou seção específica será visível em tipos de tela específicos: desktop, tablet ou visualização móvel. 

Ajustar esta configuração permite ocultar ou mostrar conteúdo dependendo do dispositivo, garantindo que sua página seja otimizada para diferentes experiências do usuário.

Como funciona o “Display On”:

• Desktop: Controla se o elemento ou seção fica visível quando a página é visualizada em telas de desktop (telas maiores, normalmente acima de 1024 pixels de largura).
• Tablet: Controla a visibilidade em dispositivos tablet (telas de tamanho médio, normalmente entre 768 pixels e 1024 pixels de largura).
• Telemóvel: Controla a visibilidade em dispositivos móveis (telas pequenas, normalmente com menos de 768 pixels de largura).

Casos de uso em GemPages

• Design móvel primeiro: Se você tem uma imagem grande ou uma seção detalhada que fica ótima em um desktop, mas não cabe bem em telas menores, você pode oculte esse elemento em dispositivos móveis e substitua-o por uma versão mais adequada para dispositivos móveis.
• Layouts personalizados para diferentes dispositivos:Uma grade de produtos complexa pode funcionar bem em um desktop, mas em dispositivos móveis, você pode simplificar o layout ocultando a grade e mostrando uma lista de coluna única.
• Mensagens Direcionadas: Se você quiser mostrar diferentes mensagens de marketing para usuários em diferentes dispositivos (por exemplo, oferecendo um desconto exclusivo para dispositivos móveis) seletivamente, esta configuração permite mostrar determinados elementos com base no dispositivo do usuário.

Espaçamento

De acordo com o relatório Espaçamento seção, você pode ajustar todas as 4 dimensões do Margem e Preenchimento. 

Margem 

Margem é o espaço fora da borda de um elemento. Ele controla o espaço entre o elemento e outros elementos na página. As margens são transparentes e afastam o elemento do conteúdo ao redor, criando um buffer ao redor dele.

No GemPages, você pode usar margens para controlar a distância entre diferentes elementos, como entre duas imagens ou entre um botão e um bloco de texto, para criar separação visual ou espaço em branco.

Acolchoamento

Padding é o espaço dentro da borda de um elemento, mas fora de seu conteúdo. Ele define a quantidade de espaço entre o conteúdo do elemento (como texto ou imagem) e a borda do elemento.

Em GemPages, Acolchoamento é usado quando você deseja criar espaço dentro de um elemento. Por exemplo, você pode adicionar preenchimento a um botão para que o texto dentro dele tenha espaço ao redor, tornando o botão maior ou mais equilibrado visualmente.

Shape

Fronteira

A borda é a linha que envolve o conteúdo e o preenchimento de um elemento. Ela define o contorno ou a borda de um elemento, como um botão, imagem ou caixa de texto. As bordas podem ter diferentes larguras, estilos (sólido, tracejado, pontilhado, etc.) e cores.

Casos de uso em GemPages

Bordas são usadas para enfatizar, definir ou separar elementos visualmente. Por exemplo, adicionar uma borda ao redor de um botão de call-to-action faz com que ele se destaque mais claramente, ou aplicar bordas ao redor de imagens dá a elas uma aparência emoldurada.

Canto (raio da borda)

O canto, geralmente chamado de border-radius, controla a redondeza dos cantos de um elemento. Ele define o quão afiados ou curvos os cantos são. Quando você aplica um border radius, os cantos do elemento se tornam arredondados, com valores maiores tornando os cantos mais circulares.

Caso de uso em GemPages

Você pode usar o border-radius para suavizar a aparência dos elementos dando a eles cantos arredondados. Isso é particularmente útil para botões, imagens e contêineres onde você deseja criar uma estética moderna, amigável ou elegante. Por exemplo, uma imagem retangular pode ser transformada em um círculo definindo o raio da borda para 50%.

Shadow

Uma sombra adiciona um efeito de sombra ao redor de um elemento, dando a ele profundidade e uma sensação de camadas ou elevação. Sombras podem ser ajustadas por cor, raio de desfoque, dispersão e deslocamento (a distância do elemento).

Caso de uso em GemPages

As sombras geralmente criam um efeito tridimensional em elementos planos, fazendo-os saltar da página. Por exemplo, você pode adicionar uma sombra sutil a um cartão ou bloco de texto para criar uma sensação de profundidade ou aplicar uma sombra mais dramática para destacar um elemento importante, como uma imagem de produto.

Posição

O CSS position A propriedade é essencial para controlar como os elementos são posicionados em uma página web. Ela define como um elemento é posicionado no layout usando diferentes valores.

• Estático: O método de posicionamento padrão. O elemento aparece no fluxo normal do documento, empilhando-se naturalmente com outros elementos com base em sua ordem no HTML.
• Relativo: O elemento permanece no fluxo normal, mas pode ser deslocado de sua posição original usando propriedades de deslocamento (superior, direita, inferior, esquerda). O espaço que ocupava originalmente ainda é preservado.
• Absoluto: O elemento é posicionado em relação ao ancestral mais próximo que possui um relative, absolute, ou fixed posição. Ela é removida do fluxo normal do documento, portanto não afetará o posicionamento de outros elementos.
• Sticky: O elemento se comporta como relative até que a página seja rolada até um certo ponto, então ela “gruda” no lugar como fixed. Isso é comumente usado para cabeçalhos fixos ou barras flutuantes.
• Fixo: O elemento é posicionado em relação à janela do navegador e permanece visível no mesmo local, mesmo durante a rolagem. Útil para elementos persistentes da interface do usuário, como botões flutuantes ou navegação fixa.

Casos de uso em GemPages

• Elementos sobrepostos: Usando o posicionamento absoluto, você pode criar elementos sobrepostos, como colocar texto sobre uma imagem. Ajuste o índice z para controlar qual elemento aparece no topo.
• Ajustes de deslocamento: Você pode usar deslocamentos superior, esquerdo, inferior ou direito para ajustar o posicionamento de uma imagem ou texto que precisa ser deslocado ligeiramente de sua posição usual sem afetar outros elementos.

Opacidade

Opacidade é o grau de transparência de um elemento, determinando a quantidade de fundo ou elementos subjacentes que são visíveis através dele. O valor de opacidade varia de 0% a 1%, onde:

• 0%: O elemento é totalmente transparente (completamente invisível).
• 100%: O elemento é totalmente opaco (completamente visível).
• Qualquer valor entre os elementos é parcialmente transparente, permitindo visibilidade variável.

Animação

As animações são categorizadas em efeitos de aparição e de pairar. Alterne o Animação para LIGADO para expandir suas configurações, escolha a sua preferida e configure-a para alinhar a animação com suas expectativas.

Quando aparecer

• Selecione Fade, Slide, Zoom ou Shake como o efeito de exibição. Clique nenhum se você não quiser adicionar um efeito quando o elemento aparecer.
• Ajuste a velocidade, o atraso e a suavização do efeito que aparece.

Quando pairar

Selecionar nenhum para nenhum efeito adicionado, ou escolha entre os efeitos Zoom e Shake.

Caso de uso em GemPages

• Botão de chamada para ação Shake: Você pode fazer um botão tremer ou pular para chamar a atenção do usuário, encorajando-o a clicar. Por exemplo, um botão “Compre agora” pode usar o efeito de tremer ao passar o mouse ou após um atraso específico para se destacar.
• Seção Fade-in na rolagem: Seções específicas podem desaparecer ou deslizar para a visualização quando os usuários rolam uma página para baixo. Esse efeito cria uma experiência mais envolvente, guiando os usuários pelo conteúdo de uma forma visualmente atraente.
• Zoom de imagem ao passar o mouse: Para adicionar interatividade, você pode definir imagens para ampliar quando o usuário passar o mouse sobre elas, o que funciona bem para imagens de produtos ou elementos visuais em galerias.
• Animação de Texto: Você pode animar elementos de texto para deslizar ou aparecer gradualmente ao carregar ou rolar, enfatizando mensagens ou títulos importantes.

Interação

Crie uma interação de gatilho para o elemento.

Depois de clicar Criar, você será redirecionado para o Configuração de interação.

Classe CSS

Uma classe CSS é um estilo reutilizável para elementos HTML. Ela ajuda a manter uma aparência consistente para esses elementos em todo o seu site.