Ir para o conteúdo principal

Como criar um ecrã completo deslizante no Divi

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]

O controle deslizante de largura total vem com recursos impressionantes, incluindo a capacidade de adicionar sliders com fundos de vídeo. Mas, um recurso que o torna ainda mais poderoso é a capacidade de estender o controle deslizante para ser exibido no modo de tela inteira. 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 inteira que se expande para preencher a tela inteira, bem como os cabeçalhos de tela inteira.

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

Se você ainda não leu nosso tutorial sobre a apresentação da interface do DiviConvido você a fazer isso.

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

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

Adicionar um módulo de largura total.

Divi: O melhor tema WordPress de todos os tempos!

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

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 ".

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

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. [FREE]

Nas configurações de 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 este passo para quantos slides quiser adicionar.

Uma vez feito, clique em " Save & Exit ".

Como adicionar CSS e JavaScript personalizados

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

.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 rotulada " Adicionar código à cabeça 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 em tela cheia para o seu site. Use-o para criar sliders eficientes 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 10
  1. 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

  2. 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

  3. 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
15 ações
ação10
chilrear1
Enregistrer4
Whatsapp