Baixe 10 imagens de fundo da seção de fluidos GRATUITAS para Divi
Publicados: 2018-10-07Se você deseja renovar a aparência de suas seções, esta pode ser a postagem ideal para você. Criamos 10 imagens de fundo de seção de fluido diferentes que você pode baixar gratuitamente e usar em qualquer site que estiver construindo. Além disso, também mostraremos como combinar essas imagens de fundo da seção fluida com as opções integradas do Divi. Você poderá atribuir qualquer plano de fundo gradiente à sua imagem de plano de fundo fluido e combiná-lo com um plano de fundo gradiente de linha para garantir que seu conteúdo permaneça legível também.
Vamos lá!
Antevisão
Vamos começar dando uma olhada nas 10 imagens de fundo da seção de fluidos diferentes, que você poderá baixar mais adiante no post. Combinamos as imagens com fundos gradientes para criar resultados únicos. Compartilharemos cada uma das combinações de gradiente neste artigo também, mas sinta-se à vontade para experimentar cores diferentes para alcançar o resultado final desejado.
Baixe as imagens de fundo da seção de fluidos GRATUITAMENTE
Para colocar as mãos nas imagens de fundo da seção de fluidos grátis, 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!
Recriar Seção
Adicionar nova seção regular
Espaçamento
Depois de baixar todos os arquivos de imagem, vá para o site do WordPress e abra uma página nova ou existente. Em seguida, usando o Visual Builder do Divi, adicione uma nova seção regular. Abra suas configurações e altere os valores de Espaçamento.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 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 e faça alterações nas configurações de dimensionamento.
- Tornar esta linha com largura total: Sim
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
Espaçamento
Adicione alguns valores de preenchimento às configurações de Espaçamento também.
- Preenchimento superior: 312 px
- Preenchimento inferior: 312 px
- Preenchimento da coluna à esquerda: 50 px
- Preenchimento da coluna direita: 50 px
Adicionar Módulo de Texto
Adicionar conteúdo
É hora de começar a adicionar os módulos! O primeiro módulo de que precisamos é um Módulo de Texto. Vá em frente e adicione algum conteúdo à caixa de conteúdo, de preferência um título H2 e um parágrafo.
Configurações de texto H2
Vá para as configurações de texto H2 a seguir e aplique as seguintes alterações:
- Fonte do título 2: Montserrat
- Peso da fonte do cabeçalho 2: ultra negrito
- Cor do texto do título 2: #FFFFFF
- Tamanho do texto do título 2: 82 px (desktop), 60 px (tablet), 40 px (telefone)
- Altura da linha do título 2: 1,4em
Configurações de texto
Altere também as configurações gerais de texto.
- Cor do texto: #FFFFFF
- Tamanho do texto: 16px
- Altura da linha de texto: 1,9em
- Orientação do Texto: Centro
Dimensionamento
Continue diminuindo a largura deste módulo na área de trabalho.
- Largura: 58% (desktop), 100% (tablet e telefone)
- Alinhamento do Módulo: Centro
Adicionar Módulo de Botão
Adicionar cópia
O segundo e último módulo de que precisamos é um Módulo de botão. Depois de adicionar o módulo abaixo do Módulo de Texto, adicione alguma cópia.
Alinhamento de Botão
A seguir, altere o Alinhamento do botão.
- Alinhamento do botão: Centro
Configurações de botão
Em seguida, vá para as configurações do botão e faça algumas alterações.
- Use estilos personalizados para botão: Sim
- Tamanho do texto do botão: 18 px
- Cor do texto do botão: # 000000
- Cor de fundo do botão: #FFFFFF
- Largura da borda do botão: 0 px
- Raio da borda do botão: 0 px
- Espaçamento entre letras dos botões: -1px
- Fonte do botão: Montserrat
- Peso da fonte: ultra negrito
- Estilo da fonte: maiúsculas
Espaçamento
Por último, mas não menos importante, adicione algum espaço entre o módulo anterior e este adicionando alguma margem superior.
- Margem superior: 25px
Plano de fundo da seção de fluido # 1
Fundo do gradiente da seção
Use o seguinte fundo gradiente para sua seção:
- Cor 1: # 000000
- Cor 2: # 2d5b9b
- Tipo de gradiente: Linear
- Direção do gradiente: 137 graus
- Posição inicial: 48%
Imagem de fundo da seção
Faça upload do arquivo ' fluid-style-1.png ' que você pode encontrar na pasta de download e combine-o com as seguintes configurações de plano de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: centro
Fundo Gradiente de Linha
Para completar, adicione um gradiente de linha no topo do plano de fundo da seção. Isso tornará o texto mais legível. Também o ajudará a adicionar profundidade à sua página.
- Cor 1: rgba (0,0,0,0.67)
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Centro
Plano de fundo da seção de fluido # 2 e # 3
Fundo do gradiente da seção
A segunda e a terceira imagens de fundo da seção de fluido usam o seguinte fundo de gradiente de seção:
- Cor 1: # 4f009e
- Cor 2: # fa00ff
- Tipo de gradiente: Linear
- Direção do gradiente: 137 graus
- Posição inicial: 48%
Imagem de fundo da seção
Faça upload do arquivo ' fluid-style-2.png ' ou ' fluid-style-3.png ' que você pode encontrar na pasta de download e combine-o com as seguintes configurações de plano de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: centro
Fundo Gradiente de Linha
Adicione também um fundo gradiente de linha sutil:
- Cor 1: rgba (255,48,75,0.13)
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Centro
Fundo da seção de fluido # 4
Fundo do gradiente da seção
Use o seguinte fundo gradiente para sua seção:
- Cor 1: # 00245e
- Cor 2: # ffee00
- Tipo de gradiente: Linear
- Direção do gradiente: 137 graus
- Posição inicial: 48%
Imagem de fundo da seção
Faça upload do arquivo ' fluid-style-4.png ' que você pode encontrar na pasta de download e combine-o com as seguintes configurações de plano de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: centro
Fundo Gradiente de Linha
Para terminar, adicione um fundo gradiente de linha usando as seguintes configurações:
- Cor 1: rgba (0,0,0,0.37)
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Centro
Fundo da seção de fluido # 5
Fundo do gradiente da seção
Adicione o seguinte fundo gradiente à sua seção:
- Cor 1: # 04000f
- Cor 2: # 00436d
- Tipo de gradiente: Linear
- Direção do gradiente: 137 graus
- Posição inicial: 48%
Imagem de fundo da seção
Em seguida, carregue o arquivo ' fluid-style-5.png ' que você pode encontrar na pasta de download e combine-o com as seguintes configurações de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: centro
Fundo Gradiente de Linha
Conclua seu projeto usando o seguinte fundo gradiente de linha:
- Cor 1: rgba (0,0,0,0.58)
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Centro
Fundo da seção de fluido # 6
Fundo do gradiente da seção
Use a seguinte combinação impressionante de fundo gradiente de seção:
- Cor 1: # 4800ff
- Cor 2: # c854ff
- Tipo de gradiente: Linear
- Direção do gradiente: 137 graus
- Posição inicial: 48%
Imagem de fundo da seção
Faça upload do arquivo ' fluid-style-6.png ' que você pode encontrar na pasta de download e combine-o com as seguintes configurações de plano de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: centro
Fundo Gradiente de Linha
Por último, mas não menos importante, adicione uma sobreposição de fundo gradiente de linha.
- Cor 1: rgba (0,0,0,0.51)
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Centro
Fundo da seção de fluido nº 7
Fundo do gradiente da seção
Aplique as seguintes configurações de fundo gradiente à sua seção:
- Cor 1: # ff8300
- Cor 2: # 52006b
- Tipo de gradiente: Linear
- Direção do gradiente: 137 graus
- Posição inicial: 48%
Imagem de fundo da seção
Faça upload do arquivo ' fluid-style-7.png ' que você pode encontrar na pasta de download e combine-o com as seguintes configurações de plano de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: canto superior direito
Fundo Gradiente de Linha
Por último, adicione um fundo gradiente de linha no topo de sua seção.
- Cor 1: rgba (106,0,198,0,34)
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Centro
Fundo da seção de fluido # 8
Fundo do gradiente da seção
Aplique o seguinte fundo gradiente azul à sua seção:
- Cor 1: # 0b43dd
- Cor 2: # 09f9ed
- Tipo de gradiente: Linear
- Direção do gradiente: 137 graus
- Posição inicial: 48%
Imagem de fundo da seção
Faça upload do arquivo ' fluid-style-8.png ' que você pode encontrar na pasta de download e combine-o com as seguintes configurações de plano de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: canto superior esquerdo
Fundo Gradiente de Linha
Conclua seu projeto aplicando um fundo gradiente de linha.
- Cor 1: rgba (0,7,119,0,57)
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: Linear
- Direção Radial: Centro
Fundo da seção de fluido # 9
Fundo do gradiente da seção
Adicione o seguinte fundo gradiente à sua seção:
- Cor 1: # 051f89
- Cor 2: # 6d0272
- Tipo de gradiente: Linear
- Direção do gradiente: 137 graus
- Posição inicial: 48%
Imagem de fundo da seção
Faça upload do arquivo ' fluid-style-9.png ' que você pode encontrar na pasta de download e combine-o com as seguintes configurações de plano de fundo:
- Tamanho da imagem de fundo: capa
- Posição da imagem de fundo: centro
Fundo Gradiente de Linha
Por último, mas não menos importante, aumente a legibilidade do seu conteúdo usando um fundo gradiente de linha.
- Cor 1: rgba (0,0,0,0.59)
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Centro
Fundo da seção de fluido # 10
Fundo do gradiente da seção
O último exemplo precisa do seguinte fundo gradiente de seção:
- Cor 1: # 051f89
- Cor 2: # 6d0272
- Tipo de gradiente: Linear
- Direção do gradiente: 137 graus
- Posição inicial: 48%
Imagem de fundo da seção
Faça upload do arquivo ' fluid-style-10a.png ' que você pode encontrar na pasta de download e combine-o com as seguintes configurações de plano de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: canto superior esquerdo
Fundo Gradiente de Linha
Em seguida, adicione um fundo gradiente de linha.
- Cor 1: rgba (0,0,0,0.59)
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Centro
Imagem de fundo da linha
Adicione uma imagem de plano de fundo à sua linha também. Encontre ' fluid-style-10b.png ' na pasta de download, carregue-o e combine-o com as seguintes configurações de fundo:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: inferior direita
Antevisão
Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado final.
Pensamentos finais
Neste post, compartilhamos 10 imagens de fundo de seções fluidas diferentes e exclusivas que você pode usar em seus próprios sites sem quaisquer restrições. Além disso, também fornecemos fundos gradientes impressionantes que você pode combinar com as imagens de fundo fluidas usando apenas as opções integradas do Divi. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo e diga-nos qual das imagens de plano de fundo da seção de fluidos você mais gosta!