Divi Plugin Highlight: Divi Ribbon Module

Divi Ribbon Module é um plugin de terceiros para Divi que adiciona uma faixa de opções estilizável ao conteúdo do módulo. Adicione uma imagem, botão, título, conteúdo e estilize cada elemento da forma mais detalhada que desejar. Use-o para destacar a venda de um produto, criar uma frase de chamariz ou chamar a atenção para qualquer elemento. Neste destaque do plugin Divi, daremos uma olhada no Divi Ribbon Module e ver o que ele pode fazer.

Instalando o Módulo de fita Divi

1. Acesse e baixe o plugin
2. No painel do WordPress, vá para Plug - ins > Adicionar novo
3. Clique em Carregar Plugin
4. Selecione o arquivo compactado do seu computador
5. Clique em Instalar agora
6. Quando vir “Plugin instalado com sucesso”, clique em Ativar Plugin
7. Acesse Ferramentas > Licença do Divi Ribbon Plugin e insira sua chave de licença

Módulo de fita Divi

Um novo módulo é adicionado ao Divi Builder chamado Divi Ribbon. O módulo cria uma sinopse (completa com título, conteúdo, ícone, imagem e botões) e coloca uma faixa nessa sinopse. Você tem controle sobre o posicionamento e o estilo da faixa de opções, bem como sobre os outros elementos do módulo. A sinopse inclui uma sombra de caixa por padrão.

Divi Ribbon Content Tab

A guia Conteúdo inclui as configurações principais, rotação da sinopse, imagem e ícone, link, plano de fundo e rótulo administrativo. As configurações principais fornecem seleções para o tipo de fita, localização, texto, título e conteúdo.

Configurações principais

Existem 7 tipos de fita para escolher. Eles funcionam da mesma maneira e incluem o mesmo conteúdo, mas exibem formas diferentes. As formas incluem fitas com pontas bifurcadas, fitas que abrangem as sinopses, fitas na lateral ou superior e têm diferentes tipos de extremidades, como garfos ou círculos. Isso oferece muitas opções de exibição.

Cada um dos tipos de fita possui diferentes opções de localização, dependendo de suas capacidades de exibição. Este exemplo mostra a faixa de opções de canto. Ele pode ser colocado no canto superior esquerdo ou direito, ou no canto inferior esquerdo ou direito.

Bifurcada pode ser exibida no canto superior esquerdo ou direito.

A largura total pode ser exibida acima ou abaixo.

Alguns dos tipos de faixa de opções têm outras opções que se abrem quando você os seleciona. Este exemplo mostra a fita de largura total. Você pode ajustar sua localização e altura.

A faixa lateral inclui ajustes de localização, largura e altura. Todos os controles são os controles deslizantes Divi padrão, portanto, são fáceis de usar.

O título e o conteúdo são adicionados ao próprio cartão. A área de conteúdo possui guias para visual e texto e podem incluir mídia, links, código e códigos de acesso.

Rotação do Blurb

A rotação do Blurb adiciona uma opção de virar 3D que mostra o conteúdo depois que o cartão é virado de lado e uma imagem e ícone para mostrar na fonte.

Adicione imagens de sua biblioteca de mídia e ícones da lista. A imagem / ícone será mostrado primeiro e, em seguida, o cartão irá virar para mostrar o conteúdo ao passar o mouse. Você também pode adicionar imagens como plano de fundo.

Botão

O botão inclui texto, link, opções de janela, preenchimento e margem. Eu adicionei alguma margem esquerda para tirar o botão de debaixo da faixa de opções.

Divi Ribbon Design Tab

A guia Divi Ribbon Design inclui configurações de imagem e ícone, rotação, texto, tamanho, ribbon, texto do título, corpo do texto, botão, espaçamento, borda, filtros, transformação e animação.

Imagem e Ícone

As configurações de imagem e ícone permitem ajustar a largura da imagem, borda, sombra da caixa, cores, modo de mesclagem, etc.

Rotação

As configurações de rotação permitem ajustar a cor do rosto. Este é o fundo por trás da imagem. Desative a borda original do cartão para que você possa criar a sua própria. Ajuste o ícone de rotação. Tem várias opções para o ícone. Adicione uma cor de ícone, plano de fundo, borda e use um tamanho de fonte pré-rotação.

No início, foi um pouco confuso que o ajuste do ícone estivesse aqui em vez das configurações de imagem e ícone, mas faz sentido estar nesta seção. Faria sentido colocar as configurações de imagem aqui também, mas há tantas que é necessária uma guia separada.

Espaçamento de Texto

O espaçamento do texto fornece as configurações de margem e preenchimento para o título e o corpo do texto. Normalmente, a faixa de opções será exibida sobre o conteúdo. Isso permite ajustar o posicionamento do texto com base na localização da faixa de opções, se desejar que fique visível. Eu adicionei preenchimento para o título e o texto do corpo neste exemplo.

Configurações da fita

As configurações da faixa de opções permitem alterar a cor, adicionar uma imagem que preencherá a faixa de opções, desligar a extremidade da faixa de opções (para impedir que o estilo se sobreponha ao cartão), ajustar as fontes, adicionar uma sombra de texto, ajustar os cantos da faixa de opções e a borda. Eu mudei a cor da fita neste exemplo.

A imagem vai preencher a fita. Só consegui fazer com que os JPGs funcionassem, mas funciona bem. Eu recomendo escolher uma imagem que já tenha o tamanho desejado para que você tenha controle sobre como ela é exibida.

Desligar a ponta da fita elimina a parte que fica dobrada atrás do cartão, como você pode ver à esquerda da fita neste exemplo.

Texto

O título e o texto do corpo incluem todas as opções esperadas. Neste exemplo, aumentei o tamanho de ambos, alterei a cor do texto do título e centralizei ambos.

Botão

O estilo do botão inclui todas as opções esperadas e adiciona um recurso para exibir o gradiente acima da imagem de fundo. Neste exemplo, aumentei o tamanho da fonte, alterei a cor da fonte e da borda, arredondei a borda, dei ao fundo um gradiente e adicionei uma sombra.

Exemplos de fita Divi

Aqui estão alguns exemplos de como a fita Divi se parece com os layouts Divi.

Fita à venda

Para o primeiro exemplo, substituirei o CTA à direita.

Foi feito com três módulos: imagem, texto e botão. Vou usar o mesmo plano de fundo, texto e botão e recriá-los com um único módulo Divi Ribbon.

Aqui está o resultado usando Divi Ribbon. Eu adicionei a imagem, o texto do título e o texto do corpo para corresponder ao original. Também adicionei a faixa de opções ao canto e movi o botão para o centro e usei a cor da borda do plano de fundo da faixa de opções. O original usou a imagem da coluna. Eu o removi e adicionei a imagem ao módulo, mas funcionaria de qualquer maneira.

Não incluí a imagem ondulada (uma onda triangular), mas poderia ser adicionada na área de conteúdo facilmente. O título também precisa ser movido para a área de conteúdo para que o gráfico apareça acima do título. A faixa de opções On Sale o destaca um pouco mais.

Faixa de projetos mais recentes

Para este, substituí uma imagem pelo módulo Divi Ribbon e adicionei uma ribbon de largura total como um CTA para ver os projetos mais recentes. A faixa de opções possui uma imagem de fundo e fontes do layout. A sombra da caixa é a configuração padrão. Eu centrei o texto.

Fita CTA do produto

Para este exemplo, adicionei um módulo Divi Ribbon à seção hero da página da loja do layout Leather Company. Usando uma imagem do layout, substituí o CTA de venda padrão. A faixa de opções e o botão usam cores do layout. Mudei a fita para o canto inferior direito e removi a ponta da fita.

Esta é uma seção especializada. Fico feliz em ver que funciona bem nas seções de especialidades. Muitos módulos de terceiros nem sempre são compatíveis com este tipo de seção.

Teste e Compra

Você pode comprar o Divi Ribbon Module no site do desenvolvedor por US $ 11 para uso pessoal ou comercial em um único site.

Você também pode testar o plug-in antes de comprá-lo para ver se funciona para as suas necessidades. O link para testar o plugin é encontrado na página de vendas do desenvolvedor. Dá a você acesso total ao Divi Builder e ao plugin, para que você possa estilizá-lo da forma que quiser. Eu recomendo dar uma chance.

Reflexões finais

Divi Ribbon Module é um módulo interessante para o Divi Builder. Inclui vários lugares para adicionar imagens e você pode incluir um título, conteúdo, um ícone e um botão. Com todos esses recursos, ele funciona muito bem como uma sinopse, frase de chamariz, link de produto, link de blog, etc. Adicione a isso uma faixa de opções estilizável para chamar a atenção para vendas ou outros CTAs, e este plug-in oferece opções de estilo difíceis de obter com um único módulo.

O Divi Ribbon Module funciona muito bem com o Visual Builder e o Theme Builder. É um excelente plugin fácil de recomendar.

Nós queremos ouvir de você. Você já experimentou o Divi Ribbon Module? Conte-nos sobre sua experiência nos comentários.

Imagem em destaque via Foxys Graphic / shutterstock.com