Como Criar Desenhos de Bordas de Imagem de Fundo em Divi
Publicados: 2019-08-18Bordas e imagens de plano de fundo continuam sendo recursos de design populares na construção de websites. Usar as imagens de fundo certas pode adicionar personalidade e estilo ao seu site sem ter que gastar tempo e dinheiro com gráficos personalizados. E as bordas são úteis para adicionar estrutura ao seu conteúdo.
Hoje, vamos reunir esses dois ativos projetando imagens de fundo como bordas. Divi tem um conjunto útil de opções para personalizar imagens de fundo, o que facilita o design de imagens de fundo para designs de borda exclusivos. Isso nos permite combinar cores, gradientes, sombras de caixa e modos de mesclagem de todos os tipos de formas criativas.
Vamos começar.
Espiada
Aqui estão os designs de borda da imagem de fundo que construiremos juntos.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Inscreva-se no nosso canal no Youtube
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará ter o seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Imagens a serem usadas para conteúdo simulado
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Dicas gerais para criar designs de bordas de imagens de fundo
Antes de começarmos a construir, aqui estão algumas dicas gerais que você deve ter em mente ao criar designs de borda de imagem de plano de fundo.
# 1 Escolha imagens com muitas texturas
Na maioria das vezes, você desejará que suas fronteiras sejam mais estreitas. Isso significa que você não conseguirá ver muito da imagem. Por isso, ajuda usar imagens com muita textura. Por exemplo, você pode usar uma foto de uma paisagem, um buquê de flores ou um arranha-céu na cidade. Aqui estão algumas imagens que estou usando para este tutorial.
# 2 Use gradientes e transparência com as bordas da imagem de plano de fundo
Às vezes, as imagens de fundo podem servir como uma grande fronteira para o seu conteúdo. Mas, na maioria das vezes, você desejará adicionar algumas sobreposições à imagem de fundo para obter alguma cor ou tornar os fundos mais escuros ou mais claros. Gradientes de fundo são uma ótima maneira de adicionar sobreposição às imagens de fundo e criar designs de borda exclusivos.
# 3 Use modos de mistura
Usar modos de mesclagem em suas imagens de fundo pode implementar cores e texturas exclusivas para os designs de borda. Tudo o que você precisa fazer é adicionar uma cor de fundo ou gradiente junto com sua imagem de fundo e então selecionar um modo de mesclagem para a imagem de fundo. Alguns ótimos modos de mesclagem para bordas de imagem de plano de fundo são cor, luminosidade, multiplicação e tela.
Use opções de cantos arredondados para formas exclusivas
Nem todas as bordas precisam ter bordas retas. Misture um pouco! As opções de cantos arredondados da Divi permitem moldar esses cantos de maneiras criativas.
Use imagens de fundo paralaxe como bordas
A grande vantagem da paralaxe é que ela dá vida ao design e ao 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.
Projetando bordas de imagem de plano de fundo em Divi
Agora que entendemos a ideia geral por trás da criação de designs de bordas de imagens de plano de fundo, vamos projetar alguns juntos. Vamos construir 4 designs diferentes. Cada um terá um módulo de sinopse básico para servir como conteúdo simulado. E usaremos as configurações de coluna para adicionar a borda da imagem de fundo para o módulo.
Vamos começar com nosso primeiro design.
Projeto de borda da imagem de fundo nº 1
Este primeiro design apresenta uma borda estreita da imagem de fundo que tem uma sombra de caixa 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.
Adicione o Módulo Blurb
Em seguida, adicione um módulo de sinopse à coluna da esquerda.
Uma vez que a sinopse estiver no lugar, abra as configurações da sinopse e retire a imagem padrão para que apenas o Título e o Conteúdo do corpo fiquem visíveis.
Em seguida, dê à sua sinopse uma cor de fundo branca.
Em seguida, atualize as configurações de design do blurb da seguinte maneira:
- Fonte do título: Oswald
- Fonte do corpo: Lato
- Margem 5% superior, 5% inferior, 5% esquerda, 5% direita
- Preenchimento: 7% superior, 7% inferior, 10% esquerdo, 10% direito
- Cantos arredondados: 20 px superior direito, 20 px inferior esquerdo
- Sombra da caixa: veja a imagem
Adicione a imagem de fundo à coluna
Isso cuida do nosso módulo de sinopse. Agora vamos adicionar nossa borda da imagem de fundo. Para fazer isso, adicionaremos uma imagem de plano de fundo à coluna que contém o módulo blurb. Abra as configurações de linha e, em seguida, abra as configurações da coluna 1 e adicione o seguinte plano de fundo:
- Imagem de fundo: [carregar imagem de sua escolha]
- Cor de fundo: # 303a7a
- Mistura de imagem de fundo: luminosidade
Em seguida, atualize os cantos arredondados e a sombra da caixa da seguinte forma:
- Cantos arredondados: 20 px superior direito, 20 px inferior esquerdo
- Sombra da caixa: veja a imagem
Resultado final
Agora verifique o design final.
Projeto de borda da imagem de fundo # 2
O próximo design destaca como usar imagens com muita textura pode realmente criar lindas bordas, especialmente quando você as combina com modos de mesclagem de imagem.
Veja como projetá-lo.
Adicione o Módulo Blurb
Para criar o design, vamos adicionar a sinopse à coluna 2 da mesma linha que contém o design # 1. Vá em frente e copie o módulo do blurb do design nº 1 e cole-o na coluna 2. Em seguida, atualize as configurações do módulo do blurb da seguinte maneira:
- Cantos arredondados: restaurar para o padrão
- Margem: 10% superior, 10% inferior, 10% esquerda, 10% direita
- Preenchimento: 15% superior, 15% inferior, 10% esquerdo, 10% direito
- Largura da borda: 1px
- Cor da borda: #ffffff
Adicione a imagem de fundo à coluna
Com nosso módulo no lugar, abra as configurações de linha e adicione um gradiente de fundo à coluna 2.
- Cor do gradiente de fundo à esquerda: # f7e0a5
- Cor direita do gradiente de fundo: rgba (237.240,0,0,79)
- Direção do gradiente: 90 graus
- Posição inicial: 50%
- Posição final: 0%
Em seguida, adicione uma imagem de fundo com um bom efeito de mistura de cores.
- Imagem de fundo: [upload de imagem]
- Mistura de imagem de fundo: cor
Como você pode ver, o modo de mistura de cores preserva a luminosidade das duas cores de gradiente atrás da imagem para criar um belo design de borda de imagem com cores suaves.
Resultado final
Confira o resultado final do projeto.
Projeto de borda da imagem de fundo # 3
O próximo design destaca o uso de imagens paralaxe em um design de borda. Também usaremos um truque de sombra de caixa para criar uma sobreposição de cores para a imagem de paralaxe.
Veja como projetá-lo.
Para começar, adicione uma nova linha de duas colunas abaixo da primeira linha e copie o módulo da sinopse na coluna 1 da linha superior e cole-o na coluna 1 da nova linha.
Em seguida, atualize o módulo blurb da seguinte maneira.
- Cor de fundo: # 333344
- Cor do Texto: Claro
- Margem: 10% superior, 10% inferior, 10% esquerda, 10% direita
- Preenchimento: 10% superior, 10% inferior
- Cantos arredondados: 20px
- Sombra da caixa: nenhuma
Quando a sinopse estiver pronta, abra as configurações de linha e atualize as configurações da coluna 1 da seguinte maneira:
- Imagem de fundo: [upload de imagem]
- Use o efeito de paralaxe: SIM
- Método Parallax: True Parallax
- Cantos arredondados: 20px
- Sombra da caixa: veja a imagem
No momento, a borda da imagem de fundo com paralaxe é um pouco arrogante por padrão e pode desviar a atenção do conteúdo.
Para tornar a imagem de fundo com paralaxe mais clara, podemos adicionar uma sombra de caixa à sinopse que servirá como uma sobreposição de luz.
Abra as configurações do blurb novamente e adicione o seguinte:
- Sombra da caixa: veja a imagem
- Força do desfoque de sombra da caixa: 0 px
- Força de propagação da sombra da caixa: 200px
- Cor da sombra: #ffffff
Design final
Agora vamos verificar o design final.
Projeto de borda da imagem de fundo # 4
Para este próximo design, vamos combinar uma imagem de fundo com gradientes para servir como uma borda superior e inferior para o conteúdo da sinopse.
Adicione o Módulo Blurb
Para começar, copie o módulo blurb na coluna 2 da linha superior e cole-o na coluna 2 da segunda linha.
Quando terminar, atualize as configurações do módulo blurb da seguinte maneira:
- Borda: [Retire a borda restaurando os padrões de borda]
- Sombra da caixa: nenhuma
- Margem: 5% superior, 5% inferior, 0% esquerda, 0% direita
Adicionar a borda da imagem de fundo
Para adicionar a borda da imagem de fundo para este design, abra as configurações de linha e atualize as configurações da coluna 2 da seguinte maneira:
- Imagem de fundo: [upload de imagem]
- Cor do gradiente de fundo à esquerda: # 141777
- Cor certa do gradiente de fundo: # ffb7eb
- Direção do gradiente: 90 graus
- Posição inicial: 50%
- Posição final: 0%
- Imagem de fundo: [upload de imagem]
- Mistura de imagem de fundo: luminosidade
Design final
Confira o design final.
Pensamentos finais
Criar bordas de imagem de fundo com Divi é uma maneira simples de adicionar beleza e personalidade ao seu design. Os designs apresentados neste tutorial têm como objetivo mostrar as principais opções disponíveis no Divi para criar designs de borda exclusivos. No entanto, com todas as diferentes combinações de cores e modos de mesclagem disponíveis, seu único limite é sua imaginação. Então, pegue algumas imagens de sua preferência e explore novos e emocionantes designs de borda para seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!