As imagens de borda e de fundo continuam a ser elementos de design populares na construção de sites. Usar as imagens de fundo certas pode adicionar personalidade e estilo ao seu site sem gastar tempo e dinheiro em gráficos personalizados. E as bordas são úteis para adicionar estrutura ao seu conteúdo.

Hoje vamos juntar esses dois criando imagens de fundo como bordas. Divi tem um conjunto de opções úteis para personalizar imagens de fundo, facilitando a criação de imagens de fundo para designs de borda exclusivos. Isso nos permite combinar cores, gradientes, sombras de caixa e modos de mesclagem de todas as formas criativas.

Vamos começar.

O que você precisa para começar

Para começar, você precisa do seguinte:

  1. Le Tema Divi instalado e ativo
  2. Uma nova página criada para criar do zero no front-end (construtor visual)
  3. Imagens para usar conteúdo fictício

Depois disso você terá uma tela em branco para começar a desenhar em Divi.

Dicas gerais para criar padrões de borda de imagem de fundo

Antes de começar a construir, aqui estão algumas dicas gerais a serem lembradas ao criar padrões de borda de imagem de fundo.

# 1 Escolha imagens com muita textura

Na maioria das vezes, você deseja que suas fronteiras sejam mais estreitas. Isso significa que você não conseguirá ver muito da imagem. Portanto, é útil usar imagens com muita textura. Por exemplo, você pode usar uma foto de uma paisagem, um buquê de flores ou uma torre alta. Aqui estão algumas imagens que estou usando para este tutorial.

Plano darriete variedade

# 2 use gradientes e transparência com as bordas da imagem de fundo

Às vezes, as imagens de fundo podem ser uma ótima borda para o seu conteúdo. Mas na maioria das vezes você desejará adicionar sobreposições à imagem de fundo para obter cor ou tornar os fundos mais escuros ou mais claros. Gradientes de fundo são uma ótima maneira de adicionar camadas às imagens de fundo e criar designs de borda exclusivos.

# 3 Use os modos de mesclagem

Use gradientesO uso de modos de mesclagem nas imagens de fundo pode aplicar cores e texturas exclusivas aos padrões de borda. Tudo que você precisa fazer é adicionar uma cor de fundo ou gradiente com sua imagem de fundo e, em seguida, selecionar um modo de mesclagem para a imagem de fundo. Cor, Brilho, Multiplicação e Tela são ótimos modos de mesclagem para bordas de imagens de fundo.

Use opções de canto arredondado para formas exclusivas

Fronteiras com cantos arredondados

Nem todas as bordas precisam ter bordas retas. Misture um pouco! Opções de canto arredondado Divi permitem que você molde esses cantos de forma criativa.

Use imagens de fundo de paralaxe como bordas

Use imagens paralaxe como bordasA grande vantagem da paralaxe é que ela dá vida ao design com movimento. Além disso, se você usar imagens de fundo com paralaxe para seus designs de borda, poderá criar movimentos sutis que se destaquem e façam seu conteúdo se destacar.

Design de borda da imagem de fundo no Divi

Agora que entendemos a idéia geral subjacente à criação de padrões de borda de imagem de fundo, vamos imaginar alguns juntos. Vamos construir modelos diferentes do 2. Cada um terá um módulo básico de apresentação para servir como conteúdo fictício. E usaremos os parâmetros da coluna para adicionar a borda da imagem de fundo do módulo.

Vamos começar com o nosso primeiro design.

Imagem de fundo da borda #1

Este primeiro design apresenta uma borda estreita da imagem de fundo com uma área sombreada para torná-la mais parecida com uma moldura do conteúdo.

Veja como projetá-lo.

Primeiro, adicione uma linha de duas colunas a uma seção regular.

Escolha um layout de coluna dupla

Adicionar módulo de resumo

Em seguida, adicione um módulo de sinopse na coluna da esquerda.

Adicionar módulo de resumo divi

Assim que a sinopse estiver no lugar, abra as configurações da sinopse e extraia a imagem padrão para que apenas o título e o conteúdo do corpo fiquem visíveis.

Redefinir imagem padrão

Em seguida, dê ao seu texto um fundo branco.

Atualize os parâmetros de design da apresentação da seguinte maneira:

  • Título do texto: Oswald
  • Corpo Policial: Lato
  • Margem 5% na parte superior, 5% na parte inferior, 5% na esquerda, 5% na direita
  • Estofados: 7% na parte superior, 7% na parte inferior, 10% na esquerda, 10% na direita
  • Cantos arredondados: 20px no canto superior direito, 20px no canto inferior esquerdo
  • Sombra da caixa: veja a imagem

Estilo de módulo de resumo modificado

Adicionar imagem de fundo à coluna

Isso cuida do nosso módulo de apresentação. Agora vamos adicionar nossa borda da imagem de fundo. Para fazer isso, adicionaremos uma imagem de fundo à coluna que contém o módulo Blurb. Abra as configurações de linha, a seguir as configurações da coluna 1 e adicione o seguinte plano de fundo:

  • Imagem de fundo: [carregue a imagem de sua escolha]
  • Cor de fundo: #303a7a
  • Imagem de fundo da mistura: Brilho

Divi color background mergeEm seguida, atualize os cantos arredondados e a sombra da caixa da seguinte maneira:

  • Cantos arredondados: 20px no canto superior direito, 20px no canto inferior esquerdo
  • Sombra da caixa: veja a imagem

Modificação da coluna divisória

Resultado final

Agora, verifique o design final.

Borda divi do resultado final com imagem

Imagem de plano de fundo da borda # 2

Imagem com borda quadradaO próximo design destaca o fato de que o uso de imagens altamente texturizadas pode criar bordas bonitas, especialmente quando você as combina com os modos de mesclagem de imagens.

Veja como projetá-lo.

Adicione o módulo Blurb

Para criar o design, adicionaremos o texto da sinopse à coluna 2 da mesma linha que contém o design nº 1. Vá em frente e copie o módulo de layout de design nº 1 e cole-o na coluna 2. Em seguida, atualize as configurações do módulo de apresentação da seguinte forma:

  • Cantos arredondados: restaura as configurações padrão
  • Margem: 10% na parte superior, 10% na parte inferior, 10% na esquerda, 10% na direita
  • Estofados: 15% na parte superior, 15% na parte inferior, 10% na esquerda, 10% na direita
  • Largura da borda: 1px
  • Cor da borda: #ffffff

Configuração de espaçamento do módulo de resumo DiviAdicionar imagem de fundo à coluna

Com o módulo instalado, abra as configurações de linha e adicione um gradiente de fundo à coluna 2.

  • Gradiente de fundo esquerdo: #f7e0a5
  • Gradiente de fundo direito Cor: rgba (237,240,0,0.79)
  • Direcção do Gradiente: 90deg
  • Posição inicial: 50%
  • Posição final: 0%

divisória de imagem de fundo de desenhos de fronteira

Em seguida, adicione uma imagem de fundo com um bom efeito de gradiente.

  • Imagem de fundo: [baixar imagem]
  • Mix de imagem de fundo: cor

Divi mistura de cores

Como você pode ver, o modo de mistura de cores preserva o brilho dos dois gradientes de cor atrás da imagem para criar um padrão de borda de imagem agradável com cores suaves.

Resultado final

Descubra o resultado final do design.

Resultado final divi

Últimos pensamentos

Criar bordas com fotos é uma maneira fácil de adicionar beleza e personalidade ao seu design. O design destacado neste tutorial é feito para destacar as possibilidades disponíveis com Divi no design de bordas exclusivas. Portanto, com as diferentes combinações de cores, os desenhos são ilimitados. Então, pegue algumas imagens e explore mais o desenho de bordas com imagens no Divi.

Para sua saúde.