Configurações de estilo do elemento

A PageFly te dá opções poderosas para estilizar qualquer elemento. Para ilustrar como eles funcionam, iremos olhar 2 exemplos com os elementos Imagem e Parágrafo.

Parâmetros de Estilo

Geral

Cor do Conteúdo

Esse parâmetro permite a você escolher a cor para o conteúdo, podendo ser um texto ou ícone.

PageFly Element style settings

Nota:

Alguns elementos como “Imagem” não possuem este parâmetro.

Espaçamento

Os parâmetros neste grupo permitem a você controlar o espaçamento em volta e dentro do elemento. Nos parâmetros Espaçamento e Margem, cada um possui 4 caixas vazias que te permitem preencher o valor para os 4 lados: Topo – Direita – Inferior – Esquerda.

Você pode ler os detalhes no artigo de editar espaço.

Tipografia

Você pode editar a família da fonte aqui.

PageFly Element style settings 1

Você pode adicionar mais fontes abrindo o Gerenciador de Fontes.

Element style settings 2

Com qualquer fonte, você pode configurar os seguintes parâmetros:

  • Tamanho da Fonte
  • Alinhamento de Texto
  • Estilo do Texto

Element style settings 4

O botão Mais Configurações te dá 4 opções extras:

  • Largura da Fonte
  • Altura da Linha
  • Espaçamento da letra
  • Transformação de texto

Element style settings 5

Nota para usar fontes personalizadas

Se você deseja usar fontes personalizadas que não estão listadas nas fontes do PageFly, use um código personalizado para fazer isso. Leia aqui para saber mais detalhes.

Plano de Fundo

Vamos dar um exemplo com o histórico da seção.

Para a seção, há três estilos de plano de fundo para escolher, como:

  • Padrão
  • Vídeo
  • Paralaxe

Estilo padrão

Se você escolher o estilo Padrão para o plano de fundo, poderá escolher sua cor e imagem.

Cor de fundo

Imagem de fundo

You have 3 options to upload an image:

  1. Fazer upload do computador
  2. Importar da Internet
  3. Selecionar no Gerenciador de Imagens

Você pode ler aqui para saber mais detalhes sobre como enviar uma imagem e usar o Gerenciador de Imagens.

Neste exemplo, escolhemos uma imagem no Gerenciador de Imagens.

Caso deseje definir uma seção de largura total com uma imagem de plano de fundo, consulte este artigo para obter mais detalhes.

Depois de selecionar uma imagem de plano de fundo, o botão Mais Configurações fornecerá mais 4 opções para configurar a imagem de plano de fundo:

Estilo de vídeo

Você pode colar o URL do vídeo do Youtube, Vimeo ou MP4 aqui. Vamos dar uma olhada no exemplo:

Depois de selecionar um vídeo em segundo plano, o botão Mais configurações permite escolher a cor da Sobreposição do vídeo em segundo plano:

pagefly style settings

Parallax effect

Você pode verificar este artigo para saber mais detalhes sobre como usar o efeito de paralaxe para uma seção.

Borda

Você pode estilizar a borda dos elementos através das opções Estilo da Borda e Cor da Borda.

Veja na ilustração a seguir o estilo de borda sólida e borda colorida em vermelho:

pagefly styling tab 7

O botão Mais Configurações te dá 2 opções extras para ajustar a Largura da Borda e o Arredondamento da Borda. No exemplo abaixo,a Largura da Borda está definida em 10px para todos os lados e o Arredondamento da Borda está definido em 40px para os 4 lados.

pagefly styling tab 8

Exibição

Gerencie o arranjo do elemento via CSS através das opções de exibição:

  • Na Linha
  • Bloqueado
  • Flex

Leia Mais

Custom CSS

Todas as configurações que você fez para o elemento serão exibidas no parâmetro CUSTOM CSS como na imagem abaixo:

pagefly styling tab 9

Você pode editar o código CSS e todas as mudanças serão aplicadas no seu editor de página.

Estilos Predefinidos

A PageFly providencia estilos Predefinidos que permitem a você ter um estilo configurado rapidamente.

pagefly styling tab 10

Atualmente, essa funcionalidade está disponível para alguns elementos, porém, em um futuro próximo, atualizaremos os estilos predefinidos para todos os elementos.

Configurações de Dispositivos Específicos

Todos as configurações de estilo de todos os elementos podem ser configuradas de uma vez para todos os dispositivos assim como pode ser configurado individualmente para cada dispositivo como Laptop, Tablet ou Celular. Para editar o estilo para um dispositivo específico,use o Seletor de Dispositivos para mudar o modo de edição para o dispositivo desejado e ajustar o estilo para o mesmo.

pagefly styling tab 11

Nota:

O parâmetro configurado em “Todos os dispositivos” terá efeito para todos os dispositivos e automaticamente irá funcionar corretamente. Apenas em alguns casos você terá que realizar a configuração para dispositivos específicos.

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages