Divi: Use configurações de máscara de fundo e opções de transformação de padrão

Você gostaria de combinar configurações de máscara de fundo e opções de transformação de padrão Divi criar fundos únicos?

Os designs de fundo são uma ótima maneira de dar ao seu site da Web talento visual e se destacar da multidão. As novas configurações de Máscara de fundo e Transformação de padrão de Divi podem ser combinados de várias maneiras para criar esses padrões de fundo.

Neste artigo, veremos como usar as configurações de máscara de fundo e transformação de padrão de Divi para criar planos de fundo interessantes para seus layouts Divi.

Vamos começar.

Visão geral

Primeiro, aqui está uma prévia de cada exemplo em diferentes tamanhos de tela (telefone e desktop).

Leia também: Divi: Como usar efeitos de sombra e foco para criar conteúdo interativo

Exemplo 1

Versão 1 na área de trabalho

Versão 1 no telefone

Baixe DIVI agora !!!

Versão 2 na área de trabalho

Versão 2 no telefone

Exemplo 2

Versão 1 na área de trabalho

Versão 1 no telefone

Baixe DIVI agora !!!

Versão 2 na área de trabalho

Versão 2 no telefone

Exemplo 3

Versão 1 na área de trabalho

Versão 1 no telefone

Baixe DIVI agora !!!

Versão 2 na área de trabalho

Versão 2 no telefone

Opções de máscara de fundo e transformação de padrão Divi

Os novos recursos de máscara e padrão de fundo do Divi incluem várias opções para ajustá-los. Os ajustes incluem flip horizontal e vertical, rotação e inversão. Para ver as opções, vá para as configurações de plano de fundo de uma seção ou linha e selecione as guias Padrão de plano de fundo ou Máscara de plano de fundo.

Depois de adicionar um padrão ou máscara, as configurações de transformação são exibidas. Basta clicar nas opções que deseja usar. Podemos usá-los juntos e em qualquer combinação que quisermos.

Como funcionam as configurações de transformação de máscara e padrão do Divi

O padrão abaixo é Zig Zag com configurações padrão.

Opções de máscara de fundo e transformação de padrão Divi

Adicionamos uma máscara Layer Blog na imagem abaixo. Vamos usá-los para demonstrar como as configurações Background Mask e Pattern Transform funcionam.

Viragem horizontal

É a inversão horizontal. Aplicamos as configurações de transformação ao padrão e à máscara.

Virada vertical

Este é o flip vertical para o padrão e a máscara.

rotação

Este mostra Rotação para padrão e máscara.

Marcha ré

Este exemplo mostra Inverter para padrão e máscara.

Máscara de fundo e combinações de transformação de padrão

Claro, também podemos usar parâmetros de transformação em várias combinações. Aqui estão alguns exemplos.

Isso gira o padrão e inverte a máscara.

Máscara de fundo e combinações de transformação de padrão

Este exemplo usa inversão vertical, rotação e inversão para o padrão de fundo. A máscara de fundo usa inversão horizontal, inversão vertical e rotação.

Para este exemplo, usamos inversão e rotação horizontal para o padrão de plano de fundo e inversão e rotação vertical para a máscara de plano de fundo.

Exemplos de configurações de máscara de fundo e transformação de padrão

Em seguida, vamos ver como essas configurações podem ser usadas com layouts Divi. Usaremos uma seção como ponto de partida e criaremos três exemplos. Vamos personalizá-lo e, em seguida, usar as configurações de transformação para modificá-lo para cada exemplo.

Para nossos exemplos, estamos usando uma versão modificada da seção Hero da página de destino do layout Planeamento Patrimonial disponível em Divi.

Aqui está uma visão geral da seção em questão. Ele usa a cor de fundo: #92a5ab.

Plano de fundo: #92a5ab

Exemplos de configurações de máscara de fundo e transformação de padrão

Exemplo de Parâmetros de Transformação de Padrão e Máscara de Fundo 1

Nosso primeiro exemplo nos dá um arco que fica verticalmente no centro da tela. Um lado da tela tem um padrão tufado. Em seguida, criaremos uma versão alternativa com o arco voltado para o outro lado.

padrão de fundo

Abra as configurações da seção, role para baixo até BACKGROUND e selecione a guia Padrão de fundo. Escolha Tufted para o padrão de fundo e Inverting para Pattern Transform.

Padrão de fundo: tufado
Transformação de padrão: reverso

Máscara de fundo

Selecionar guia Máscara de fundo e escolher arco para a máscara de fundo. Altere a cor da máscara para #616d72 e defina a transformação da máscara para Inverter. Isso completa nossa primeira versão do laço com tufos.

Máscara de fundo: Arco
Cor da Máscara: #616d72
Transformação de Máscara: Inverter

Exemplo 1 Versão 2

Em seguida, vamos criar uma variação do nosso design. Basta modificar o transformação de máscara para padrão de fundo em flip horizontal e flip vertical. Isso altera o arco para a outra direção e compensa o padrão, para que não pareça apenas uma imagem espelhada.

Transformação de máscara: virar horizontalmente, virar vertical

Exemplo de Parâmetros de Transformação de Padrão e Máscara de Fundo 2

Para nosso segundo exemplo, criaremos uma oval no centro da tela com um padrão dentro da oval. Em seguida, vamos alterar o posicionamento do padrão. Também modificaremos este para diferentes tamanhos de tela.

Padrão de fundo

Nas configurações de fundo, selecione a guia Padrão de fundo e escolher Shippo para o motivo. Defina a transformação de padrão para Inverter.

Plano de fundo padrão: Shippo
Transformação de padrão: reverso

Máscara de fundo

Em seguida, selecione a guia Máscara de fundo e altere as seguintes configurações.

Máscara de fundo: Elipse
Cor: #758489
Transformação de máscara: flip horizontal, rotação

Tablet e telefone

Tanto o tablet quanto o telefone usarão as mesmas configurações, portanto, teremos apenas que alterar as configurações do tablet. Selecione os Guia do tablet e modificar o transformação de máscara na inversão horizontal.

Transformação de máscara: flip horizontal, inversão

Exemplo 2 Versão 2

Em seguida, criaremos a variação para nosso segundo exemplo. Primeiro, selecione a guia Padrão de fundo e defina a cor do padrão para rgba(0,0,0,0.06).

Cor do padrão: rgba(0,0,0,0.06)

Em seguida, selecione a guia Máscara de fundo e escolha Flip Horizontal, Rotate e Invert para a transformação da máscara.

Transformação de máscara: flip horizontal, rotação, inversão

Tablet e telefone

Para opções de tablet e telefone, selecione o ícone do Tábua . Modifique o transformação de máscara em reversão e inversão horizontal. A versão alternativa do exemplo dois agora está completa.

Transformação de máscara: flip horizontal, inversão

Exemplo de Parâmetros de Transformação de Padrão e Máscara de Fundo 3

Para nosso terceiro exemplo de configurações de transformação de máscara e padrão, usaremos um padrão de favo de mel com uma máscara de pintura. Também criaremos uma versão móvel para este.

padrão de fundo

Primeiro, escolha a guia Configurações do dispositivo e selecione o ícone Dispositivo. escritório. Selecionar guia Padrão de fundo e escolha Honeycomb para o padrão de fundo. Altere a cor para rgba(0,0,0,0.42). Para este vamos deixar as opções Transformação de padrão desativado. Vamos adicioná-los para a versão alternativa.

Padrão de fundo: favo de mel
Cor do padrão: rgba(0,0,0,0.42)
Transformação de padrão: nenhum

Máscara de fundo

Em seguida, selecione a guia Máscara de fundo. Escolher pintar para a máscara de fundo. Altere a cor para #697b82. Escolha Flip Vertical para a transformação da máscara.

Máscara de fundo: tinta
Cor da Máscara: #697b82
Transformação de máscara: flip vertical

Então selecione Cobrir para tamanho. Isso abre mais algumas opções. Escolher Canto inferior direito para localização. Isso é tudo para a versão desktop. Em seguida, criaremos a versão móvel.

Tamanho da Máscara: Capa
Posição da Máscara: Inferior Direita

Tablet e telefone

Em seguida, selecione a aba tablet e modificar a transformação do máscara fundo em flip vertical e rotação. Isso completa o estilo do nosso terceiro exemplo. Em seguida, criaremos a versão alternativa.

Transformação de máscara: flip vertical, rotação

Exemplo 3 Versão 2

Para a versão alternativa deste exemplo, ajustaremos o padrão de plano de fundo e a máscara de plano de fundo.

padrão de fundo

Para o padrão de fundo, altere a cor do padrão para rgba(0,0,0,0.11). Altere a transformação do padrão para inverter horizontalmente, inverter verticalmente e girar.

Cor da máscara: rgba(0,0,0,0.11)
Transformação de máscara: flip horizontal, flip vertical, rotação

máscara de fundo

Em seguida, selecione a aba Máscara de fundo. Mude a cor para branco e a transformação da máscara para flip horizontal, flip vertical e inversão.

Cor da máscara: #ffffff
Transformação de máscara: flip horizontal, flip vertical, inversão

Em seguida, altere o tamanho da máscara para cobrir e escolha Centro para a posição da máscara.

Tamanho da Máscara: Capa
Posição da Máscara: Centro

Tablet e telefone

Por fim, escolha a guia tablet para criar a versão móvel. Escolher guia máscara de fundo e selecione as quatro opções de transformação de máscara. Isso conclui a versão alternativa do terceiro exemplo.

Transformação de máscara: flip horizontal, flip vertical, rotação, inversão