Destaque do plug-in Divi: Máscara Divi

Divi Mask é um plugin de terceiros para Divi que adiciona um novo módulo ao Divi Builder com alguns estilos exclusivos para imagens e planos de fundo. Ele coloca uma máscara sobre a imagem para que a imagem tome a forma da máscara. Tudo fora da máscara pode ser da cor que você quiser, incluindo um gradiente ou até mesmo um fundo diferente.

Inclui 54 máscaras predefinidas que funcionam como recortes, revelando a imagem por trás delas. Você também pode adicionar seus próprios usando SVGs. Inclui títulos, conteúdo e uma ferramenta de plano de fundo. Cada um dos elementos pode ser ajustado e estilizado.

Neste destaque do plugin, vamos dar uma olhada no Divi Mask, ver o que ele pode fazer e ver como é fácil de usar. Você pode comprar Divi Mask no site do desenvolvedor.

Módulo Máscara Divi

Faça upload e ative o plugin normalmente. Não há nada para configurar. Ele está pronto para ser usado assim que for ativado. O módulo Divi Mask é adicionado ao Divi Builder.

A guia Conteúdo permite adicionar uma imagem, máscara e texto. Outros ajustes permitem que você personalize a cor de fundo da imagem, espelhe a imagem e defina a opacidade da imagem. Você também pode adicionar um link e um plano de fundo. Esta imagem mostra a guia Máscara nas Configurações de máscara. Eu adicionei uma imagem do pacote de layout de eSports.

Esta é a guia Máscara nas Configurações de máscara. Ele adiciona uma caixa suspensa onde você pode escolher entre 54 máscaras integradas ou carregar sua própria máscara personalizada usando um plugin gratuito chamado Salvar SVG.

Essa guia também adiciona opções para preencher o módulo, selecionar entre três versões da máscara, dimensionar para o tamanho desejado, girá-la e ajustar a posição horizontal e vertical. Eu ajustei cada um deles neste exemplo. Esta é a opção 1 da máscara Splodge.

Esta é a opção 1 com o Módulo de Preenchimento habilitado. Ele amplia e preenche o espaço alocado para o módulo.

Esta é a opção 2 da máscara Splodge. Ele cria alguns padrões interessantes de manchas.

Esta é a opção 3 da máscara Splodge.

A guia Texto das Configurações de máscara adiciona áreas para o título e o conteúdo, com personalizações independentes para cada um.

Escolha a tag de título, ajuste a cor do fundo, a largura do fundo, a posição horizontal e vertical e a rotação. Os ajustes de texto são feitos na guia Design.

A área de conteúdo adiciona um editor completo onde você pode adicionar texto, imagens, mídia, etc. Também inclui ajustes de fundo para a cor, largura e posição horizontal e vertical. Este não inclui rotação. Os ajustes para o texto estão na guia Design.

A guia Design inclui todas as configurações esperadas para títulos, corpo do texto, dimensionamento, espaçamento, borda, sombra da caixa, filtros, transformação e animação.

A guia Avançado inclui áreas CSS para o título e o texto.

Exemplos de máscara Divi

Neste exemplo, estou usando uma máscara de paralelogramo definida para preencher o módulo. Escalei a máscara e ajustei sua rotação e alinhamento. Também adicionei um fundo e gradiente da mesma imagem que usei na guia Imagem das Configurações de máscara. A máscara revela parte da imagem e permite que a imagem de fundo apareça no fundo. Vou usar um que é mais óbvio mais tarde.

Para este, adicionei uma máscara de círculo. Coloquei o cabeçalho sobre a imagem com um fundo branco. Reduzi a largura e a opacidade do fundo e adicionei efeitos de sombra ao texto. Mudei o conteúdo abaixo da imagem e adicionei um conjunto de fotos que são clicáveis. Por usar o editor de conteúdo, cada elemento pode ter uma URL diferente, separada do link do módulo. Claro, eu poderia colocar o conteúdo sobre a imagem, se quisesse. Isso daria um CTA interessante.

Para este, mudei o fundo para escuro e movi o texto para sobrepor a imagem. Aumentei o tamanho do cabeçalho e do texto do conteúdo e dei a eles um fundo branco. Removi as imagens em miniatura do exemplo anterior para que o foco ficasse na imagem central.

Para este exemplo, substituí o módulo de imagem central no pacote de layout da agência de viagens e adicionei a mesma imagem no módulo Máscara Divi. Reduzi a opacidade da imagem, adicionei um texto de cabeçalho, configurei-o para a posição vertical de 50%, alterei a cor do fundo do cabeçalho e diminuí a opacidade. Esta é uma maneira fácil de criar links para páginas, projetos, postagens ou apenas mostrar informações.

Para este exemplo, estou criando uma seção de largura total e adicionarei uma máscara que se mesclará com a separação da seção. Eu adicionei o cabeçalho e o texto do conteúdo, mudei suas cores e tamanhos, tornei seu fundo transparente e os posicionei onde quero na imagem.

Eu adicionei uma máscara de triângulo e selecionei a opção 2. Eu a ampliei e ajustei a configuração horizontal. Também adicionei um fundo gradiente ao módulo. Esse mesmo gradiente pode ser espelhado e adicionado à próxima seção para que eles se misturem.

Esta é a opção 3. Ela vira a máscara para o outro lado. Mudei a posição horizontal para mostrar mais da imagem e ajustei a posição vertical do cabeçalho e do texto para sobrepor a máscara. O texto se sobrepõe automaticamente.

Este mostra uma máscara de seta na opção 1.

Esta é a opção de seta 4. Coloquei-a em uma linha menor para que mais dela apareça na minha tela.

Esta é a máscara de inicialização usando as configurações padrão com meu gradiente de fundo.

Aqui está uma bela máscara de borboleta.

Aqui está a máscara de coração. Mudei o gradiente de fundo apenas para coincidir com o tema do coração.

Agora, adicionei a mesma imagem como plano de fundo e configurei o gradiente para mostrar acima da imagem de plano de fundo. Isso dá a ele o efeito da máscara cortando parte do gradiente.

Claro, qualquer imagem pode ser usada como plano de fundo. Neste exemplo, substituí a imagem de fundo para que a imagem da máscara seja exibida sobre ela. Também reduzi a opacidade do plano de fundo para que mais informações apareçam, tornando o efeito mais proeminente.

Para este, girei a máscara e movi-a para a direita. Eu ajustei a opacidade do gradiente do fundo. Ele ainda está mostrando uma imagem de fundo diferente da imagem da máscara. Também adicionei o texto do conteúdo e ajustei o tamanho do texto e a posição vertical e a largura do conteúdo. Isso criaria alguns CTAs ou sinopses interessantes para informações.

Este usa a máscara de fala. Eu ajustei sua posição horizontal e movi o conteúdo para o centro dentro dela.

Esta é a máscara de borda. Ele cria um quadro de imagem. Eu centrei, redimensionei para caber nas imagens e centrei o conteúdo.

Para este, eu defini a escala de volta para o padrão e selecionei Módulo de Preenchimento. A fronteira ainda existe, mas está fora da área de visualização.

Para este, ajustei a escala para mostrar a borda.

Este usa a máscara Rhombus. É uma praça virada de canto. Eu a ampliei e movi para a direita. Eu centrei o conteúdo e dei a ele um plano de fundo com transparência suficiente para que o plano de fundo aparecesse. Eu adicionei um cabeçalho e posicionei-o para mostrar ao lado. Também dei um fundo com um toque de transparência.

Preço da máscara Divi e documentação

Divi Mask custa US $ 12 e inclui 6 meses de suporte e atualizações vitalícias. Ele pode ser usado em sites ilimitados. Você pode comprar Divi Mask no site do desenvolvedor.

O site do desenvolvedor também inclui um passo a passo detalhado do plug-in. Isso mostra o básico e inclui como usar o recurso SVG para criar suas próprias máscaras personalizadas. O site também inclui um pequeno FAQ para guiá-lo pelo processo de instalação.

Reflexões finais

Achei o Divi Mask um módulo interessante. É altamente intuitivo. Nunca precisei ler as instruções ou assistir ao vídeo, mas é bom que eles estejam disponíveis para garantir. Minhas formas favoritas de usá-lo são no lugar de uma sinopse, como um CTA, para vincular a páginas ou produtos, ou apenas para adicionar algum estilo de design a uma imagem.

É responsivo, mas é possível criar designs que não respondem tão bem quanto você gostaria. Isso é apenas algo que eu manteria em mente ao projetar com ele. Claro, você também pode criar versões para tablet e celular de seus designs e pode testar os designs usando os vários modos visuais no Divi Builder.

Gosto das 54 máscaras integradas. Eles fornecem alguns visuais interessantes e os controles expandem isso ainda mais. Também gosto que você possa criar o seu próprio usando SVGs. Também é interessante ter cabeçalhos separados e elementos de conteúdo com planos de fundo que podem ser movidos.

Divi Mask abre muitas possibilidades de design para imagens e texto. Se você estiver interessado em adicionar recortes às suas imagens no Divi, vale a pena dar uma olhada no Divi Mask.

Nós queremos ouvir de você. Você já experimentou o Divi Mask? Deixe-nos saber o que você pensa sobre isso nos comentários abaixo.

Imagem em destaque via Oleksandr Korchahin / shutterstock.com