Baixe 5 imagens de borda GRÁTIS para Divi
Publicados: 2018-10-01É sempre bom ter recursos extras que você pode usar ao criar um novo site para você ou para um cliente. É por isso que garantimos que você receberá novos pacotes de layout todas as semanas. Mas há outros recursos que também podem ser úteis, como “imagens de borda” ou imagens que você pode usar ao longo de um lado ou outro de um elemento de design Divi para adicionar um toque estilístico. Usar as opções integradas do Divi junto com essas imagens de borda pode trazer resultados impressionantes. Neste post, fornecemos 5 imagens de borda diferentes que você pode baixar gratuitamente abaixo. Vamos explicar como você pode usar essas imagens de borda a seu favor e criar um resultado final impressionante.
Vamos lá!
Antevisão
Vamos dar uma olhada nas diferentes imagens de borda que você poderá baixar mais adiante neste post. Para cada uma das formas, você encontrará 4 versões: superior, inferior, esquerda e direita. Essas imagens permitirão que você obtenha exatamente o mesmo resultado mostrado nas primeiras quatro imagens abaixo:
Baixe os arquivos de imagem GRATUITAMENTE
Para obter as imagens de borda gratuitas, 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!
Abordagem
- Depois de baixar e descompactar a pasta que contém todas as 5 imagens de borda, você encontrará 4 subpastas: borda superior, borda inferior, borda esquerda e borda direita
- Isso significa que há um total de 20 arquivos de imagens disponíveis para você usar
- Mais tarde nesta postagem, você encontrará as configurações de acompanhamento que correspondem a cada um dos lados da borda
- Para completar, você pode combinar as imagens das bordas com sobreposições de gradiente
- Essas sobreposições de cores irão ajudá-lo a fazer as imagens parecerem tão vibrantes ou sutis quanto você quiser
- Você é livre para usar essas imagens de borda sem quaisquer restrições, mesmo para fins comerciais
Criando o Design Geral
Adicionar nova seção
Espaçamento
Vamos começar criando o design geral que usamos para mostrar as imagens das bordas. Abra uma página nova ou existente, adicione uma nova seção regular e adicione algum preenchimento personalizado:
- Preenchimento superior: 300 px
- Preenchimento inferior: 300 px
Adicionar nova linha
Estrutura da Coluna
Continue adicionando uma nova linha à sua seção usando a seguinte estrutura de colunas:
Dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha, vá para as configurações de dimensionamento e aumente a largura da linha.
- Tornar esta linha com largura total: Sim
Adicionar Módulo de Título de Texto à Coluna 1
Adicionar caixa de conteúdo H2
Vamos começar a adicionar alguns módulos! O primeiro módulo necessário é um Módulo de Texto. Adicione um à primeira coluna e adicione sua cópia H2 de escolha à caixa de conteúdo.
Configurações de texto de título
Em seguida, faça algumas alterações nas configurações de texto H2 na guia Design.
- Fonte do Título 2: Abril Fatface
- Tamanho do texto do título 2: 80 px (desktop), 70 px (tablet), 50 px (telefone)
Espaçamento
Continue adicionando alguma margem ao topo deste Módulo de Texto.
- Margem superior: 150px
Adicionar Módulo de Texto de Link à Coluna 1
Adicionar link à caixa de conteúdo
Logo abaixo do título Módulo de texto que você acabou de adicionar, vá em frente e adicione um novo Módulo de texto. Estamos usando este Módulo de Texto como um botão, portanto, certifique-se de adicionar um link para o CTA.
Configurações de texto de link
Em seguida, altere as configurações de texto do link na guia Design.
- Peso da Fonte do Link: Ultra Negrito
- Estilo da fonte do link: maiúsculas
- Cor do texto do link: # 000000
- Tamanho do texto do link: 21 px
Espaçamento
Adicione alguma margem superior para criar espaço entre este Módulo de Texto e o anterior também.
- Margem superior: 100px
Fronteira
Por último, adicione uma borda inferior sutil ao Módulo de Texto do link.
- Largura da borda inferior: 1 px
- Cor da borda inferior: # 333333
Adicionar Módulo de Texto de Descrição à Coluna 2
Configurações de texto
A segunda coluna precisa apenas de um Módulo de Texto de descrição. Depois de adicionar conteúdo à caixa de conteúdo, aplique as seguintes configurações de texto:
- Tamanho do texto: 22 px (desktop), 20 px (tablet), 18 px (telefone)
- Altura da linha de texto: 2.6em
- Orientação do Texto: Justificar
Dimensionamento
Faça com que as configurações de dimensionamento correspondam também a tamanhos de tela diferentes:
- Largura: 82% (desktop), 100% (tablet e telefone)
Espaçamento
E, por último, adicione alguma margem superior e inferior.
- Margem superior: 100px
- Margem inferior: 100px
Adicionando as formas de borda
Configurações de fundo da borda esquerda
Agora que completamos o design geral, podemos começar a adicionar as imagens das bordas! Começaremos com o lado esquerdo da borda. Encontre sua imagem de borda de escolha na pasta 'Borda esquerda' e carregue-a como a imagem de fundo da seção. Em seguida, aplique as seguintes configurações de imagem de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: centro esquerdo
- Repetição da imagem de fundo: sem repetição
Configurações de fundo da borda direita
Ou você pode encontrar a imagem de sua escolha na pasta 'Borda direita' e adicioná-la como plano de fundo da seção usando as seguintes configurações:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: centro à direita
- Repetição da imagem de fundo: sem repetição
Configurações de fundo da borda superior
A mesma coisa vale para a imagem da borda superior, mas em vez disso, use as seguintes configurações de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: Centro superior
- Repetição da imagem de fundo: sem repetição
Configurações de fundo da borda inferior
Ou, por último, mas não menos importante, você pode encontrar as imagens da borda inferior na pasta 'Borda inferior' e combiná-las com estas configurações de plano de fundo da seção:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: centro inferior
- Repetição da imagem de fundo: sem repetição
Misturar cores usando sobreposição semitransparente
Para cada uma das formas de borda incluídas, você pode decidir adicionar uma sobreposição de cor também. Essa sobreposição ajuda a tornar as imagens das bordas mais sutis. Para adicionar uma sobreposição, vá para as configurações da seção e adicione um fundo gradiente na parte superior da imagem de fundo da borda.
- Cor 1: #ffffff
- Cor 2: rgba (255,255,255,0,36)
- Direção do gradiente: 141 graus
- Colocar gradiente acima da imagem de fundo: Sim
Antevisão
Agora que já passamos por todas as etapas, vamos dar uma olhada final em alguns projetos em potencial que você pode conseguir usando essas imagens de bordas gratuitas.
Pensamentos finais
Neste post, compartilhamos 5 imagens de borda diferentes que você pode baixar gratuitamente. Você pode usar essas imagens de borda para qualquer site em que estiver trabalhando, sem quaisquer restrições. Nós encorajamos você a experimentar todos eles e criar designs impressionantes. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!