Um layout reutilizável para criar designs de moldura exclusivos com Divi

Construir designs de moldura exclusivos para suas linhas com Divi pode ser uma maneira útil (e divertida) de organizar o conteúdo de sua página de maneira criativa. Combinando divisores de seção Divi com uma estrutura de linha compacta, você pode explorar inúmeras possibilidades de design para enquadrar seu conteúdo. Você já deve ter visto essa técnica apresentada em tutoriais anteriores ou em alguns de nossos layouts predefinidos. Mas, hoje, pensei em mostrar a você uma maneira fácil de explorar essa técnica de design por si mesmo. Neste tutorial, vou mostrar como construir rapidamente um layout de seção reutilizável que pode ser salvo em sua biblioteca. Em seguida, você pode usar esse layout para explorar novos designs de moldura e esquemas de cores. O layout funciona enquadrando sua linha com um design exclusivo, de modo que todas as estruturas e módulos de coluna podem ser usados ​​dentro da linha.

Vamos começar.

Criando o Layout de Design de Moldura Reutilizável

Para começar, vamos criar uma nova seção com um layout de uma coluna. Não precisamos adicionar nenhum módulo neste momento. Em vez disso, vamos projetar nossa linha e seção primeiro, para que possamos preencher nossa linha com qualquer conteúdo que quisermos mais tarde.

Projete a linha

Atualize as configurações de linha da seguinte forma:

Cor de fundo: # 333333
Alinhamento de linha: centro
Largura personalizada: 775 px
Largura da calha: 2
Preenchimento personalizado: 130px superior, 130px inferior, 50px esquerdo, 50px direito
Margem personalizada: 0 px superior, 0 px inferior

Projete a seção

Atualize as configurações da seção da seguinte forma:

Cor de fundo: #ffffff
Estilo do divisor superior: veja a captura de tela
Cor do divisor superior: #ffffff
Estilo do divisor inferior: veja a captura de tela
Cor do divisor inferior: #ffffff

Em seguida, você definirá o preenchimento superior e inferior para 0 px e criará algum espaço superior e inferior usando uma borda da seguinte maneira:

Preenchimento personalizado: 0 px superior, 0 px inferior
Largura da borda superior: 5vw
Cor da borda superior: #ffffff
Largura da borda inferior: 5vw
Cor da borda inferior: #ffffff

Criar o espaçamento para a seção usando uma borda superior e inferior maximizará o espaço disponível para o divisor de seção que se sobreporá à linha. Desta forma, você pode escolher qualquer altura divisória para o seu projeto.

Salve o layout em sua biblioteca

Isso é tudo para a estrutura de layout básica de seu design de linhas emolduradas. Neste ponto, queremos salvar esta seção na biblioteca Divi para usar o layout da seção em projetos futuros.

Clique no ícone Salvar na Biblioteca no menu da seção.

Em seguida, digite um nome para o layout (algo como “Layout do quadro de linha”) e clique no botão Salvar na biblioteca.

Completando o Design do Quadro # 1

Agora que salvamos nosso layout de seção para empreendimentos futuros, vamos adicionar algum conteúdo à nossa linha para completar o primeiro exemplo de design.

Mudando a Estrutura da Coluna

Para este projeto, acho que adicionar uma galeria de imagens de seis colunas será bom. A pequena estrutura de colunas nos permitirá criar um pequeno agrupamento de imagens que são bem enquadradas dentro da linha estreita.

Para fazer isso, primeiro altere a estrutura da linha para um layout de seis colunas.

Adicionando Conteúdo à Linha

Em seguida, adicione três módulos de imagem (com imagens) a cada coluna. Estou usando imagens com mais orientação de retrato (ao invés de paisagem) com diferentes tamanhos / dimensões.

Aqui está o design final.

Dica de design de bônus

Antes de continuarmos a explorar mais possibilidades de design de moldura, gostaria de apontar um truque fácil para estender sua moldura para um lado da página. Para fazer isso, vá para as configurações da seção e adicione um gradiente de fundo da seguinte forma:

Gradiente de fundo, cor esquerda: # 333333
Cor certa do gradiente de fundo: #ffffff
Direção do gradiente: 90 graus
Posição inicial: 50%
Posição final: 0%

Confira este design.

Personalização do layout para diferentes designs e conteúdo de quadros

As possibilidades empolgantes desse layout simples são, no mínimo, numerosas. Personalizando o esquema de cores, o estilo do divisor, o layout da coluna e o conteúdo do módulo, você pode criar todos os tipos de designs de layout diferentes. Além disso, você pode usar os recursos legais do Divi, como "Localizar e substituir", para fazer mudanças generalizadas no esquema de cores com apenas alguns cliques.

Aqui está o processo básico para atualizar o layout:

1. Carregar layout de seção salvo para a página
2. Atualize o esquema de cores da seção usando “Localizar e substituir”.
3. Alterar o estilo do divisor
4. Personalize a linha com um novo plano de fundo e estrutura de colunas.
5. Adicione módulos às suas colunas

Com esse processo, explorar novos designs deve ser muito divertido! Vamos continuar.

Frame Design # 2

Para este próximo projeto, usaremos o layout de seção salvo que criamos anteriormente. Para fazer isso, clique para adicionar uma nova seção no construtor visual. Em seguida, selecione a guia Adicionar da biblioteca e clique no layout de seção da lista.

Agora estamos prontos para personalizar a seção para um novo design.

Para alterar o esquema de cores usado para este layout, podemos invocar alguns poderes de design Divi usando o recurso Localizar e Substituir. Vá para as configurações de seção da seção duplicada e clique com o botão direito na cor de fundo e selecione “Localizar e Substituir”.

No modal Localizar e substituir, atualize o seguinte:

Dentro de: Esta seção
Substituir por: # 443850
Selecione Substituir Tudo

Isso substituirá a cor branca usada para o plano de fundo da seção, borda e divisórias por uma nova cor.

Agora atualize as configurações da seção com um novo estilo de divisor:

Em seguida, atualize as configurações de linha com uma cor de fundo branca e uma sombra de caixa para completar o novo design de quadro para a linha.

Para o conteúdo, vamos tentar um layout de cinco colunas com algumas sinopses. Vá em frente e atualize o layout de coluna de sua linha para um layout de cinco colunas.

Em seguida, adicione uma sinopse à primeira coluna. Retire o texto do conteúdo padrão e deixe apenas o texto do Título. Em seguida, substitua a imagem do blurb por um ícone de estrela. Atualize as configurações de design da seguinte forma:

Cor do ícone: # 7d8491
Tamanho da fonte do ícone: 80px
Orientação do Texto: Centro

Duplique o módulo blurb e atualize as configurações da seguinte maneira:

Cor do ícone: # 8cd845
Tamanho da fonte do ícone: 50px

Agora duplique ou copie e cole esses dois módulos em um padrão ao longo de suas cinco colunas com três módulos em cada coluna.

Aqui está o design final.

Frame Design # 3

Para o terceiro projeto de estrutura, primeiro precisamos carregar nosso layout de seção salvo como fizemos anteriormente para o segundo projeto.

Depois disso, podemos usar localizar e substituir na cor de fundo da seção (como fizemos no design anterior) para substituir a cor branca usada para o fundo da seção, divisor e borda por uma bela cor azul. Para fazer isso, vá para as configurações da seção, clique com o botão direito do mouse na cor de fundo e selecione localizar e substituir. Em seguida, atualize o seguinte:

Dentro de: Esta seção
Substituir por: # 1e3888
Selecione Substituir Tudo

Em seguida, atualize o divisor de seção com um novo estilo de divisor superior e inferior (as nuvens):

Em seguida, vá para as configurações de linha. Dê à linha um fundo gradiente da seguinte maneira:

Cor do gradiente de fundo à esquerda: padrão (# 2b87da)
Cor do gradiente de fundo à direita: # 1E3888 (mesma cor do fundo da seção)
Tipo de gradiente: Radial (para dar à linha uma sensação arredondada de "nuvem")
Posição final: 83% (para ocultar um pouco as bordas da linha)

Agora, tudo o que precisamos fazer é adicionar algum conteúdo à nossa linha emoldurada. Vamos adicionar um módulo de apelo à ação à linha e atualizar as configurações da seguinte forma:

Adicione “#” à caixa de entrada do link para mostrar o botão
Usar cor de fundo: NÃO

Cor do texto do título: # ffc338
Cor do texto do botão: # ffc338

Aqui está o design final.

E quanto ao celular?

Caso você esteja se perguntando. Aqui está a aparência dos designs em dispositivos móveis.

Pensamentos finais

Os designs de moldura criados neste tutorial têm o objetivo de destacar as possibilidades de design em vez de mostrar peças de design totalmente polidas. Por esse motivo, concentrei-me nos designs dos quadros e usei exemplos básicos de conteúdo. Esperançosamente, eles irão, pelo menos, inspirar você a explorar novos designs, brincando com diferentes divisores de seção, esquemas de cores e conteúdo.

Estou ansioso para ouvir de você nos comentários.

Saúde!