Baixe 9 superposições de imagem em forma GRATUITA para Divi
Publicados: 2019-01-10A maneira como você mostra imagens em seu site pode realmente fazer a diferença no design geral que você está criando. Com as opções integradas do Divi, você já pode aplicar várias configurações de design que o ajudarão a exibir imagens de uma forma deslumbrante, pense em bordas e sombras de caixa, por exemplo. Mas se você quer dar uma forma mais única às suas imagens, este post irá ajudá-lo. Vamos compartilhar 9 superposições de imagem em forma GRATUITA que você pode baixar e usar em qualquer site que criar. Depois de compartilhar essas superposições de imagens em forma, também mostraremos como tirar proveito delas ao construir um site com Divi. Esperamos que este tutorial inspire você a criar seu próprio tipo de superposição de imagem em forma também.
Vamos lá!
Antevisão
Antes de mergulhar no tutorial e fazer o download, vamos dar uma olhada rápida no resultado que você pode esperar em diferentes tamanhos de tela.
Área de Trabalho
Telefone
Baixe as superposições de imagem moldada GRATUITAMENTE
Para colocar suas mãos sobre as superposições de imagem em forma, primeiro você precisa baixá-las 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 e sexta-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
- As superposições de imagem em forma que você pode encontrar na pasta de download estão prontas para uso se você as combinar com uma linha branca e / ou cor de fundo de seção
- Se você quiser ajustar as sobreposições de imagem em forma de acordo com outra cor de fundo, você precisará exportar as sobreposições de imagem em outra cor usando o arquivo ilustrador que está incluído no download acima
- Mostraremos como alterar a cor de sobreposição da imagem em forma na primeira parte do tutorial (usando Adobe Illustrator)
- Em seguida, passaremos para Divi e enviaremos uma das superposições de imagem em forma para um Módulo de Imagem
- Também adicionaremos uma imagem de fundo e um fundo gradiente ao Módulo de imagem que será mostrado através da sobreposição de imagem em forma
Modificando sobreposições de imagens moldadas para cor de fundo da seção com Adobe Illustrator
Abra o arquivo do Illustrator na pasta de download
Conforme mencionado na seção de abordagem deste post, se você deseja usar as sobreposições em forma de imagem em um fundo branco, você está pronto para ir usando apenas os arquivos PNG que você pode encontrar na pasta de download. No entanto, se desejar usar as sobreposições de imagem em forma em uma linha e / ou cor de fundo de seção diferente, você precisará alterar a cor manualmente usando o arquivo Adobe Illustrator que está incluído na pasta de download também. Alterar a cor leva pouco ou nenhum tempo e permite que você use as sobreposições de imagem em literalmente qualquer site que você construir, então vamos seguir as etapas. Em primeiro lugar, você precisará abrir o arquivo Adobe Illustrator.
Selecione a sobreposição de formato de imagem de escolha
Depois de abrir o arquivo, você encontrará 9 pranchetas diferentes com as sobreposições de imagens em forma que você pode usar para qualquer tipo de finalidade. Selecione o que deseja editar.
Mude a cor para corresponder à cor de fundo da seção
Continue alterando a cor da forma para a mesma cor de fundo que você está planejando usar para sua linha e / ou seção.
Selecione a prancheta
Depois que a cor for modificada, você pode selecionar toda a prancheta que contém a sobreposição de imagem em forma.
Salvar sobreposição de imagem em formato PNG para a web
E salve-o como um arquivo de imagem PNG para a web em Arquivo> Exportar> Salvar para a web .
Vamos começar a criar!
Inscreva-se no nosso canal no Youtube
Adicionar nova seção
É hora de mudar para Divi e criar o resultado! Crie uma nova página ou abra uma existente e adicione uma nova seção regular.
Adicionar nova linha
Estrutura da Coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:
Adicionar Módulo de Imagem à Coluna 1
Carregar sobreposição de imagem moldada
O único módulo de que precisaremos na coluna 1 é um Módulo de imagem. É aqui que toda a magia acontecerá. Começaremos enviando a sobreposição de imagem em formato. Você notará que uma parte da imagem é completamente transparente. Isso permitirá que a imagem de fundo e o fundo gradiente apareçam nas próximas etapas.
Fundo Gradiente
Vá em frente e adicione um fundo gradiente de sua escolha a seguir.
- Cor 1: # aa2bff
- Cor 2: # 09f7eb
Imagem de fundo
E carregue uma imagem de fundo PNG, ou apenas uma normal, se você não quiser que o fundo gradiente apareça. Você também pode baixar as ilustrações que estamos usando, indo para o seguinte post que criamos sobre como alterar um fundo gradiente ao pairar.
- Tamanho da imagem de fundo: capa
- Posição da imagem de fundo: centro inferior
- Repetição da imagem de fundo: sem repetição
Dimensionamento
Outra etapa importante para fazer este tutorial funcionar é habilitar a opção 'Forçar largura total' nas configurações de dimensionamento do Módulo de imagem. Isso garantirá que o fundo gradiente e a imagem de fundo apareçam apenas na área transparente da sobreposição da imagem em forma.
- Forçar largura total: Sim
Adicionar Módulo de Título de Texto à Coluna 2
Adicionar conteúdo
Vamos passar para a segunda coluna. Aqui, o primeiro módulo de que precisaremos é um Módulo de texto de título. Adicione algum conteúdo de sua escolha.
Configurações de texto
Em seguida, vá para as configurações de texto do título e faça algumas alterações.
- Fonte do título 2: Antic Didone
- Peso da fonte do cabeçalho 2: negrito
- Tamanho do texto do título 2: 45 px
- Cabeçalho 2 espaçamento entre letras: -2 px
Espaçamento
Adicione alguma margem superior personalizada também.
- Margem superior: 100px
Adicionar Módulo de Texto de Descrição à Coluna 2
Adicionar conteúdo
O segundo módulo de que precisaremos é um Módulo de Texto de descrição. Insira algum conteúdo de sua escolha.
Configurações de texto
Em seguida, vá para as configurações de texto e altere a orientação do texto do módulo.
- Orientação do Texto: Justificar
Dimensionamento
Altere a largura nas configurações de dimensionamento também.
- Largura: 63%
Adicionar Módulo de Botão à Coluna 2
Adicionar cópia
O próximo e último módulo de que precisaremos é um Módulo de botão. Insira algum conteúdo de sua escolha.
Configurações de botão
Continue acessando as configurações do botão e alterando a aparência do botão.
- Use estilos personalizados para botão: Sim
- Tamanho do texto do botão: 17 px
- Cor do texto do botão: #ffffff
- Gradient Color 1: # aa2bff
- Gradient Color 2: # 09f7eb
- Direção do gradiente: 111deg
- Largura da borda do botão: 0 px
- Raio da borda do botão: 100 px
- Espaçamento entre letras dos botões: -2 px
- Peso da fonte: ultra negrito
- Estilo da fonte: maiúsculas
Espaçamento
Adicione também um preenchimento personalizado extra ao botão.
- Enchimento superior: 10 px
- Preenchimento inferior: 10 px
- Preenchimento esquerdo: 50 px
- Preenchimento direito: 50 px
Sombra da caixa
Por último, mas não menos importante, complete o design adicionando uma sombra de arco sutil ao botão.
- Força do desfoque de sombra da caixa: 50 px
- Força de propagação da sombra da caixa: -5px
Antevisão
Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.
Área de Trabalho
Telefone
Pensamentos finais
Neste post, compartilhamos 9 superposições de imagem em formato GRATUITO para Divi que você pode usar em qualquer tipo de site que estiver construindo. Esperamos que este tutorial o tenha inspirado a criar suas próprias superposições de imagem em formato exclusivo que você pode reutilizar constantemente. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!