Seção de Preço com Parcela Destacada no Elementor

				
					<!-- ALTERAR ESTILO AQUI -->

<head>
    <style>

        .parcela {
            font-size: 100px;
            color: #fff;
            font-weight: 600;
            line-height: 100px;
            font-family: REM;
        }

        .qtd-parcelas, .centavos {
            font-family: REM;
            margin-top: 10px;
            line-height: 24px;
            font-size: 22px;
            font-size: 24px;
            color: #fff;
            font-weight: 400;
            text-align: center;
        }

        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            column-gap: 10px;
        }

        /* Adaptar no mobile */

        @media only screen and (max-width: 720px) {

            .qtd-parcelas, .centavos {
                font-size: 18px;
                line-height: 18px;
            }

            .parcela {
                font-size: 90px;
                line-height: 90px;
            }

    }
    </style>
</head>

<!-- ALTERAR TEXTO AQUI -->
<body>
    <div class="container">
        <div><p class="qtd-parcelas"> por 12x <br>de R$</p></div>
        <p class="parcela">9</p>
        <p class="centavos">,93</p>
    </div>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>

</html>
				
			

Posts relacionados

Melhore a velocidade de carregamento do seu site WordPress com esses trechos de códigos
Descubra como adicionar códigos CSS no WordPress de forma gratuita apenas com o Elementor na versão gratuita.
Aprenda como criar um cabeçalho fixo no Elementor que desaparece ao rolar para baixo e reaparece ao rolar a página para cima.
Descubra como usar a Inteligência Artificial para criar os layouts dos seus sites e Landing Pages.

Preencha com suas informações