Para uma compreensão aprofundada do elemento Row e suas capacidades, confira nosso Artigo sobre o elemento de linha.
Aqui estão alguns exemplos importantes de layout usando linhas e guias passo a passo.
Banner de Herói de Design
Um banner de herói é um banner de destaque colocado no topo da sua página, geralmente com uma imagem de fundo, título e botão de chamada para ação.
Embora você possa usar um pré-projetado Elemento do banner do herói para isso, o elemento Row oferece maior controle e flexibilidade.
Passos para criá-lo:
Passo 1: Arraste e solte um Linha de 2 colunas. Isso cria o layout base para seu banner de herói.
Passo 2: Personalize o banner do seu herói no Configurações aba.
Role para baixo até Contexto e clique na caixa ao lado de Imagem para definir uma imagem de fundo para a seção.
Você pode navegar pela galeria para escolher uma imagem disponível ou carregar uma nova.
Passo 3: Arraste e solte um bloco de texto, título ou qualquer outro elemento, como um elemento de botão, no seu layout.
Personalize cada elemento através do Configurações e Abas avançadas para ajustes.
Passo 4: Para ajustar o tamanho do fundo, clique na seção para abrir sua configuração.
Navegue até a Avançado tab para ajustar as margens e o preenchimento sob a Espaçamento seção para um ajuste ideal.
Passo 5: Mude para a visualização móvel e ajuste o layout para maior capacidade de resposta.
Seção de detalhamento do produto de design
O layout de detalhamento de produtos em camadas é perfeito para destacar características ou especificações do produto de uma forma estruturada e visualmente atraente.
Passos para criá-lo:
Passo 1: Arraste e solte um Linha de 2 colunas. Isso forma a base para o layout de detalhamento do seu produto.
Passo 2: Arraste um elemento de imagem para a coluna da esquerda e carregue a imagem desejada.
Etapa 3: Para criar o conteúdo detalhado com ícones e blocos de texto semelhantes ao exemplo, arraste e solte outro elemento de linha na coluna da direita.
Passo 4: Adicione seus elementos preferidos à coluna, como um ícone, blocos de texto, um título, uma lista de itens e um elemento de botão.
Depois você pode personalizá-los do seu jeito Configurações aba.
Passo 5: Mude para a visualização móvel e ajuste o layout para maior capacidade de resposta.
Detalhes do produto de design
Para uma seção detalhada do produto, você pode criar um layout personalizado que organize imagens do produto, descrições e opções de compra.
Passos para criá-lo:
Passo 1: Arraste um Linha de 2 colunas para seu editor.
Passo 2: Coloque um imagem na coluna da esquerda. Adicionar cabeçalhos, blocos de texto, botões, etc., na coluna da direita.
Passo 3: Substitua o texto de espaço reservado, carregue uma imagem e personalize os elementos adicionados à sua maneira. Adicione também um link para os seus botões de CTA:
Caixa de depoimentos de design dentro de um carrossel
Para projetar um Caixa de depoimentos dentro de um carrossel, Siga esses passos:
Passo 1: Arraste o Elemento carrossel para sua página.
Passo 2: Dentro do carrossel, adicione um Linha de 2 colunas. Ajuste os tamanhos das colunas conforme sua preferência. Em seguida, insira imagens na coluna da esquerda e texto na coluna da direita.
Passo 3: Ajuste a aparência de cada elemento de acordo com seu estilo.
Passo 4: Use o Copiar / Colar recurso para replicar slides e atualizar cada um com novo conteúdo.
Para mais dicas de design e tutoriais detalhados sobre como criar layouts otimizados, explore nosso Academia GemPages.
Obrigado por seus comentários