Como Desenvolver Landing Page Com Elementos Atômicos - Elementor V4

Como Desenvolver Landing Page com Elementos Atômicos – Elementor V4

Neste tutorial de desenvolvimento web, você vai acompanhar na prática a criação de uma landing page profissional com o Elementor, explorando os Elementos Atômicos do Elementor V4 e aplicando esse recurso na construção de um projeto real.

Se você trabalha com WordPress, Elementor e desenvolvimento de sites, este vídeo vai ajudar você a entender como utilizar os Elementos Atômicos na prática e criar páginas para projetos profissionais.

Códigos utilizados no vídeo:

JavaScript

<style>
    .foto-jo:before {
        content: '';
        position: absolute;
        width: 80%;
        height: 100%;
        top: 0;
        left: 0;
        border: solid 1px #8F181A;
        transform: translate(90px, 25px);
    }
    
    @media(max-width: 1024px) {
        .foto-jo:before {
            width: 50%;
            transform: translate(calc(100% - 150px), 25px);
        }
    }

    @media(max-width: 767px) {
        .foto-jo:before {
            width: 100%;
            transform: translate(20px, 20px);
        }
    }
</style>

Copy

<style>
    .foto-jo:before {
        content: '';
        position: absolute;
        width: 80%;
        height: 100%;
        top: 0;
        left: 0;
        border: solid 1px #8F181A;
        transform: translate(90px, 25px);
    }
    
    @media(max-width: 1024px) {
        .foto-jo:before {
            width: 50%;
            transform: translate(calc(100% - 150px), 25px);
        }
    }

    @media(max-width: 767px) {
        .foto-jo:before {
            width: 100%;
            transform: translate(20px, 20px);
        }
    }
</style>