Criar uma seção com imagem e texto

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!