Ir para o conteúdo principal

Como criar um ecrã completo deslizante no Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

O controle deslizante de largura total vem com recursos impressionantes, incluindo a capacidade de adicionar controles deslizantes com fundos de vídeo. Mas, um recurso que o torna ainda mais poderoso é a capacidade de estender o controle deslizante para exibir no modo de tela cheia. Então, mostraremos como adicionar um recurso de tela cheia em um controle deslizante.

Adicionando um recurso de tela cheia ao módulo deslizante de Divi é extremamente fácil de implementar com algumas linhas de CSS e JavaScript. Em apenas 5 minutos, você pode converter seu controle deslizante de largura total em um controle deslizante de tela cheia que se expande para preencher a tela inteira, como nos cabeçalhos de tela cheia.

A implementação da funcionalidade de controle deslizante de tela cheia no Divi

Se você ainda não leu nosso tutorial sobre a apresentação da interface do Divi, Convido você a fazê-lo.

Etapa 1: adicione um controle deslizante com slides no modo de largura total

Use o " Divi Builder »Adicione uma seção« largura total »E clique em« Inserir um módulo ".

Adicionar um módulo de largura total.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

adicionar um módulo de controle deslizante Divi #

Nas Configurações do Slider, em tela cheia, na guia "CSS personalizado", adicione uma classe CSS chamada " et_fullscreen_slider ".

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Em "Configurações gerais", adicione um novo slide.

Nas configurações do slide, em Configurações gerais, atualize os seguintes itens:

  • Secção: [insira seu tópico]
  • Botão Texto: [insira seu texto do botão]
  • URL Botão: [introduzir o botão URL]
  • Imagem de fundo: [adicionar uma imagem de fundo] (Eu uso uma imagem de unsplash.com)

Repita esta etapa para quantos slides você deseja adicionar.

Quando terminar, clique em " Save & Exit ".

Como adicionar CSS e JavaScript personalizados

No painel do WordPress, vá para " Divi → Opções de tema E em "Configurações gerais", digite o seguinte CSS na caixa de texto CSS personalizado:

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

.et_pb_slides .et_fullscreen_slider, .et_pb_slide .et_fullscreen_slider, .et_pb_container .et_fullscreen_slider {min-altura: 100% significativo; height: 100% importantes;! }

clique na próxima guia e adicione o seguinte javascript à caixa de texto " Adicione o código ao cabeçalho do seu blog »:

<Script> (function ($) {$ (janela) .em ( 'redimensionamento load', function () {$ () cada (function () {et_fullscreen_slider ($ (this)) 'et_fullscreen_slider ..';}); }); função et_fullscreen_slider (et_slider) {var et_viewport_width = $ (janela) .width () et_viewport_height = $ (janela) .height () = $ et_slider_height (et_slider) .find () innerHeight () 'et_pb_slider_container_inner.'. , admin_bar $ = $ ( '# wpadminbar), main_header $ = $ (' # mão-header ') top_header $ = $ (' # top-header '); $ (et_slider) .height (' auto '); if ($ admin_bar.length) {var = et_viewport_height et_viewport_height - $ admin_bar.height ();} if ($ top_header.length) {var = et_viewport_height et_viewport_height - $ top_header.height ();} if ($ ( 'et_transparent_nav !. ') .length) {var = et_viewport_height et_viewport_height - $ main_header.height ();} if (et_viewport_height> et_slider_height) {$ (et_slider) .height (et_viewport_height);}}}) (jQuery); </ Script>

finalmente

Agora você tem um controle deslizante no modo de tela cheia para o seu site. Use-o para criar controles deslizantes eficazes em largura total para a maioria dos navegadores.

Se você tiver alguma dúvida, não hesite em perguntar.

Outros tutoriais Divi

Este artigo contém comentários 12

  1. Olá, ótimo tutorial.
    Por contras, ele não é exibido em tela cheia no iphone, por exemplo, inclinando o iphone, o controle deslizante é exibido periodicamente em tela cheia, mas não o tempo todo…. como se ele não respondesse, você tem uma ideia para resolver esse pequeno problema?

    Agradecemos antecipadamente,
    Atenciosamente,

  2. Bom Dia,
    Obrigado por este artigo. Eu li que não era necessário instalar um tema infantil com o Divi até que você alterasse o CSS demais.
    Ainda há um pouco de personalização ...
    Então, você recomenda um tema infantil antes de aplicar seu tutorial super?
    Agradeço antecipadamente por todos os seus bons conselhos, muitas vezes me inspiro

  3. Olá, muito bom artigo!
    Eu segui o que foi indicado no artigo, mas meu controle deslizante não é exibido em tela cheia no DIVI.
    Você pode me ajudar? Gostaria de colocá-lo na minha página inicial.

    Obrigado pela vossa ajuda

  4. Bom Dia,
    Eu construo minha página inicial com o construtor ... quando eu faço uma previsualização, vejo a página.
    O problema é que quando eu salvar minha página e abri-la novamente, o controle deslizante não aparece.
    Alguém poderia me ajudar?

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
11 ações
ação5
chilrear1
Enregistrer5