CodeWatchers

Como criar um site de rolagem de página inteira no Elementor

Rifat Tutoriais do WordPress Mar 31, 2024

Criar páginas de rolagem em tela inteira no Elementor também é muito fácil e conveniente. Para isso, utilizaremos um plugin chamado fullPage.js . Existem outros métodos para obter esse efeito, como rolagem CSS ou complementos Elementor . No entanto, fullPage.js fornece a melhor solução em termos de compatibilidade, capacidade de resposta e usabilidade.

Como criar um site de rolagem de página inteira no Elementor

Criação de sites de rolagem em tela inteira no Elementor

Agora vamos demonstrar o processo de criação de um site de rolagem de página inteira no Elementor.

Etapa 1: carregar fullPage.js

Para usar as funções do plugin fullPage.js , devemos primeiro carregá-lo.

O código a seguir deve ser adicionado ao cabeçalho do nosso site para que ele carregue corretamente:

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

Precisamos de um plugin para executar este código porque o Elementor atualmente não oferece um meio de adicionar código ao cabeçalho do site. Embora existam vários plugins que podem adicionar código ao nosso cabeçalho, descobri que este é o mais fácil de usar.

Selecione Adicionar HTML personalizado em CSS e JS personalizados no painel do WordPress após instalar o plug-in. Agora cole o código mencionado, certificando-se de colocá-lo tanto no cabeçalho quanto no front end.

Adding code to the Header using a WordPress Plugin

A próxima etapa é incluir algum JS exclusivo. Para inicializar fullPage.js e definir suas opções e procedimentos, devemos utilizar jQuery. Aqui estão algumas escolhas fundamentais que se aplicam a todos os sites com rolagem vertical.

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

Certifique-se de incluir este código no rodapé do front end.

Também definimos nossas configurações FullPage nesta fase. O exemplo anterior inclui pontos de navegação, que aparecerão no lado direito do nosso site de rolagem, bem como o mínimo de opções necessárias para um site de rolagem de página inteira. Quando modificarmos nosso design para ser responsivo, examinarei mais alternativas. Visite a documentação oficial para obter mais detalhes sobre suas opções.

Etapa 2: configurar a página Elementor

A marcação a seguir é exigida por fullPage.js para nossa página de rolagem.

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 2.1</div>
        <div class="slide">Slide 2.2</div>
        <div class="slide">Slide 2.3</div>
    </div>
    <div class="section">Section 3</div>
</div>

Os divs individuais de nossa página de rolagem com a seção de classe serão seções de tela inteira. Utilizar modelos é a abordagem mais simples para fazer isso funcionar com Elementor.

Vamos primeiro configurar nossa página real. Crie uma nova página no Pages, atribua a ela um título e URL adequados e edite-a usando Elementor.

Crie uma seção com uma coluna no Elementor agora. Queremos adicionar um widget HTML a esta coluna. Este widget, que inclui códigos de acesso para cada slide individual, servirá como estrutura de nossa página. Queremos adicionar o seguinte código:

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Verifique se a seção tem largura total. Além disso, como não queremos o preenchimento que o Elementor adiciona às colunas por padrão, defina o preenchimento da seção e da coluna como 0.

Depois de criar os slides reais nas etapas posteriores, alteraremos o ID do modelo Elementor para seu valor correto.

Etapa 3: configurar seções

A última etapa é construir e salvar separadamente cada seção como um modelo.

Você precisará do Elementor Pro para usar códigos de acesso. Chegou a hora de comprá-lo, caso ainda não tenha pensado em fazê-lo. Você tem todas as ferramentas necessárias para construir um site usando Elementor. Não há necessidade de sempre comprar um novo tema!

Crie uma nova seção acessando Modelos - Adicionar novo.

O primeiro slide do nosso site de rolagem de página inteira será criado agora. Crie uma nova seção no Elementor e defina sua altura para “Ajustar à tela”. Agora que adicionou seu material, você pode estilizá-lo. Apenas certifique-se de que cada modelo contenha no máximo uma parte. Para criar um layout exclusivo, você pode usar quantas colunas e colunas internas desejar.

Salve seu slide quando terminar e retorne aos modelos Elementor. O modelo que você desenvolveu recentemente deve aparecer na lista. Pegue o ID deste modelo e cole-o na página que criamos no Passo 2, copiando-o.

Agora repita este procedimento para cada slide que você tiver. Cada modelo deve ter uma área com altura ajustada para corresponder à tela.

Empacotando

Isso é tudo, então! Esta é a maneira mais simples de criar páginas de rolagem em tela inteira com fullPage.js no Elementor . Espero que isso possa ajudá-lo a criar um site fácil e minimalista para seus empreendimentos futuros.

Divi WordPress Theme