Antes de seguir etapas específicas, você pode consultar este vídeo para ter uma demonstração melhor de como adicionar uma seção com imagem e texto
Antes de seguir etapas específicas, você pode consultar este vídeo para ter uma melhor demonstração de como adicionar uma seção com imagem e texto.
Neste artigo, você aprenderá como criar uma seção com imagens e texto do zero e como controlar seu layout.
Crie uma seção de 1 coluna
Etapa 1: Criar o layout
Primeiro, selecione Adicionar elemento no menu da barra lateral esquerda> Elemento> Layout. Escolha um layout de seção completo e arraste-o para a página.
Ao selecionar o elemento de seção, navegue até o Inspetor de elementos à direita. Escolha a guia Estilo> Plano de fundo> Imagem> Insira o plano de fundo da imagem para a seção aqui.
Para fazer a seção de um banner, você pode ajustar o Preenchimento e Margem no parâmetro Espaçamento e ajustar a posição do Plano de Fundo ou o Tamanho do Plano de Fundo ou qualquer coisa relacionada com a Imagem de Fundo em Mais Configurações.
Neste exemplo, a seção está definida para o Preenchimento na parte superior: 40px; direita: 500 px; inferior: 500 px e esquerda: 0 px. A Posição do Plano de Fundo é: centro; O Tamanho do Plano de Fundo é Capa conforme a imagem abaixo.
Importante: Quando um valor fixo é definido na visualização “Tudo”, ele será aplicado a todas as outras visualizações (tablet e celular) e faz com que o design não seja mais responsivo por padrão. Role para baixo para aprender como corrigir isso.
Vá para Adicionar Elemento> Elemento> Título e arraste algumas das variações para a seção. Estilize como quiser e repita com o elemento Botão.
Et voila! Esse é o design na exibição ao vivo de uma seção de 1 coluna com um cabeçalho e um botão.
Etapa 2: Otimizar o design móvel
Você pode verificar o design no celular escolhendo Celular no Alternador de Dispositivos na Barra Superior.
Como a seção originalmente possui preenchimento superior: 40px; preenchimento à direita: 50px; bot-padding: 500px e left-padding: 0px, no celular, o Título e o Botão foram esticados e não parecem bons.
O PageFly permite que você personalize o estilo para dispositivos individuais; portanto, escolha a Seção> guia Estilo> ESPAÇAMENTO> Defina 0px como preenchimento à direita.
Clique em Salvar e Publicar.
Crie uma seção de 2 colunas
Etapa 1: Crie o Layout
No Editor, escolha Adicionar Elemento no menu da barra lateral esquerda> Elemento> Layout> escolha o layout 1/2 – 1/2.
Você pode brincar um pouco com o elemento de layout para entender o que ele pode fazer. Altere o layout de 2 colunas para 3, 4 ou mesmo 10 colunas na guia Geral> CONTEÚDO> Adicionar coluna.
Volte para a seção de duas colunas que estamos construindo. Escolha Adicionar Elemento> Elemento> arraste um Elemento de Imagem para a coluna à direita.
Em seguida, arraste um elemento de Título e um Botão para a coluna esquerda e adicione estilos a eles na guia Estilo.
Para configurá-los flutuando no meio da coluna, precisamos adicionar algum espaço à coluna. Selecione a Coluna> escolha a guia Estilo> ESPAÇAMENTO> defina 30% para o preenchimento superior.
Etapa 2: Otimize o design para dispositivos móveis
Verifique o design no celular escolhendo Celular no Alternador de Dispositivos na Barra Superior.
Se você deseja remover o espaço acima do conteúdo, escolha a primeira coluna na seção> visite a guia Estilo> Estilos de Caixa> defina o preenchimento superior como 0.
Clique em Salvar e Publicar e pronto!
