pagefly.ioA 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.
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.
Você pode adicionar mais fontes abrindo o Gerenciador de Fontes.
Com qualquer fonte, você pode configurar os seguintes parâmetros:
- Tamanho da Fonte
- Alinhamento de Texto
- Estilo do Texto
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
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:
- Fazer upload do computador
- Importar da Internet
- 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:
- Posição de fundo. Leia Mais.
- Fundo de repetição. Leia Mais.
- Tamanho do plano de fundo. Leia Mais.
- Anexo em segundo plano. Leia Mais.
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:
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:
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.
Exibição
Gerencie o arranjo do elemento via CSS através das opções de exibição:
- Na Linha
- Bloqueado
- Flex
Leia Mais
- Entendendo a exibição CSS: Nenhum, Bloqueado, Na linha e Bloco em Linha.
- Entendendo a Caixa Flex CSS.
Custom CSS
Todas as configurações que você fez para o elemento serão exibidas no parâmetro CUSTOM CSS como na imagem abaixo:
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.
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.
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.
Previous article
