Construa sites Belos WordPress usando Divi e Divi Builder

Como adicionar fitas personalizadas no WordPress usando elementor

Muneeb Tutoriais do WordPress May 1, 2021

Fitas são uma maneira visualmente agradável de fazer um anúncio em seu site. Embora existam muitas situações em que você pode usar fitas, mas muitas vezes você as encontra com anúncios de vendas, descontos ou out of Stock nas lojas Woocommerce.

As fitas são usadas para dizer ao visitante sobre uma venda ou um desconto assim que chegam ao seu site. Neste tutorial, vamos entender como você pode adicionar fitas usando Elementor.

Por que você deve usar fitas?

Fitas são uma ótima maneira de atrair instantaneamente seu visitante quando você está fazendo um anúncio. Por exemplo, você anunciou um desconto em um determinado produto e, em seguida, você aplica a fita de desconto na miniatura desse produto, ele imediatamente fará com que o usuário clique no produto.

Fitas são visualmente atraentes quando usadas de uma certa maneira. Eles podem ajudar o usuário a passar por produtos não relacionados e melhorar as conversões e vendas do seu site.

Baixar Divi o melhor tema WordPress

O tema mais popular do WordPress no mundo e o Ultimate WordPress Page Builder

Download Divi

Como adicionar fitas personalizadas usando elementor

Para iniciar o processo, você precisa adicionar uma seção Interna onde adicionaremos os widgets.

Em seguida, você precisará arrastar uma coluna na seção. Para este tutorial, usaremos uma estrutura de uma coluna.

Uma vez que você terminar com as configurações acima, você pode ir em frente e criar um título para sua fita.

Para o próximo passo, siga para a frente para as Classes CSS na guia Advanced e adicione "estilo gc-ribbon" no campo.

Abaixo disso, você precisará adicionar o seguinte CSS personalizado.

.gc-ribbon-style {
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.2);
background: #61CE70;
color: #ffffff;
font-size: 17px;
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
position: relative;
top: 0px;
Z-index:10;
}

.gc-ribbon-style:before {
border-top: 10px solid #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
}

.gc-ribbon-style:after {
border-top: 10px solid  #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-right: 10px solid transparent;
}

Você está quase terminando. Publique-o e verifique seu site para ver como funciona.

É assim que você pode adicionar fitas aos seus produtos usando Elementor. Não deixe de se juntar a nós em nosso Facebook e Twitter para continuar recebendo atualizações frequentes sobre nosso conteúdo.

Share Your Thoughts