O controle deslizante de largura total vem com alguns recursos incríveis, incluindo a capacidade de adicionar controles deslizantes com fundos de vídeo. Mas, um recurso que o torna ainda mais poderoso é a capacidade de expandir o controle deslizante para exibir no modo de tela inteira. Então, vamos mostrar como adicionar funcionalidade de tela inteira a um controle deslizante.
A adição de um recurso de tela inteira 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, como os cabeçalhos de tela inteira.
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 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.
adicionar um módulo de controle deslizante Divi #
Em Fullscreen Slider Settings, na guia "Custom CSS", adicione uma classe CSS chamada " et_fullscreen_slider ".
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] (Estou usando uma imagem de unsplash.com)
Repita esta etapa para quantos slides você deseja adicionar.
Quando terminar, clique em " Saída segura ".
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:
.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 intitulada " Adicione o código ao cabeçalho seu blog »:
(function($) { $(window).on('load resize', function() { $('.et_fullscreen_slider').each(function() { et_fullscreen_slider($(this)); }); }); function et_fullscreen_slider(et_slider) { var et_viewport_width = $(window).width(), et_viewport_height = $(window).height(), et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(), $admin_bar = $('#wpadminbar'), $main_header = $('#main-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);
finalmente
Agora você tem um controle deslizante de modo de tela cheia para o seu site. Use-o para criar controles deslizantes de largura total eficazes para a maioria dos navegadores.
Se você tiver alguma dúvida, não hesite em perguntar.
[vc_row center_row=”sim”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Ralway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutoriais” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]BAIXE O PLANILHAS DIVI[/vcex_button][/vc_column][/vc_row]
Outros tutoriais Divi
- sites 5 para uso restaurante Divi tema
- Como adicionar texto em um produto Divi WooCommerce
- Como alterar a cor do menu entre as páginas Divi
- Como personalizar as grades de um blog com Divi
- Como usar o editor Divi papel em WordPress
- Como criar um controle deslizante Divi em tela cheia
- Como mudar a cor dos menus entre as páginas Divi
- Recursos que você provavelmente não conhece sobre o Divi
- Como usar o Divi Builder no WordPress
- Como usar o módulo de rolagem de vídeo Divi
- Como usar o módulo Divi Builder Flip
- Como adicionar um módulo de depoimento no Divi Builder
- Como usar o módulo de texto Divi
- Como criar um controle deslizante no Divi
- Como editar uma função de usuário Divi
- Como usar o módulo Divi Social Media
- Como usar o módulo de loja no tema WordPress Divi
- Como usar o módulo da barra lateral Divi
- Como usar o módulo Divi Price Table
- Como usar o módulo de título das publicações Divi
- Como adicionar um módulo de vídeo do Divi
- Como usar o módulo de navegação do artigo
- Como usar o módulo de pesquisa Divi
- Como usar o módulo de carteira Divi
- Como usar o módulo person no Divi Builder
- Como usar o módulo de carteira com filtro Divi
- Como usar o módulo deslizante de largura total
- Como usar o módulo de imagem do Divi Builder
- Como usar o módulo de navegação de largura total do Divi Builder
- Como usar o módulo da galeria de imagens
- Como usar o módulo de placa de largura total do Divi Builder
- Como usar o módulo de portfólio de largura total Divi
- Como usar o módulo de cabeçalho Divi de largura total
- Como usar o módulo do contador Divi
- Como usar o controle deslizante de artigos no Divi Builder
- Como usar o módulo Divi Email Optin
olá e obrigado por este tutorial! Não consigo encontrar o código js e css para inserir no controle deslizante aqui
Olá, ótimo tutorial.
Por outro lado, não é exibido em tela inteira no iphone, por exemplo, ao inclinar o iphone o controle deslizante é exibido de vez em quando em tela inteira, mas não o tempo todo…. como se não respondesse, você teria alguma ideia de consertar esse probleminha?
Desde já, obrigado,
Atenciosamente,
Bom Dia,
Tente desativar todos os outros plugins, verifique também se suas versões do WordPress e Divi estão atualizadas.
Boa tarde, como posso customizar o tamanho do slide para coincidir com o tamanho da imagem do banner para não poder recortar a imagem?
Bom Dia,
Eu não entendo a pergunta.
Bom Dia,
Obrigado por este artigo. Eu li que não é necessariamente necessário instalar um tema filho com Divi, desde que não modifiquemos muito o CSS.
Ainda há um pouco de personalização aqui ...
Então, você recomenda um tema infantil antes de aplicar seu supertutorial?
Agradeço antecipadamente por todos os seus bons conselhos, muitas vezes eu me inspiro neles 🙂
Bom Dia,
Não necessariamente. Você pode manter divi se não tiver muito conhecimento técnico.
Olá, muito bom artigo!
Eu segui o que foi indicado no artigo, mas meu controle deslizante não é exibido em tela inteira no DIVI.
Pode me ajudar ? Eu gostaria de colocá-lo em minha página inicial.
Obrigado pela vossa ajuda
Bom Dia,
Você já contatou a equipe DIVI?
Olá Aliénor,
Tenho o mesmo problema ... Encontrou uma solução?
Merci d'avance
Bom Dia,
Estou construindo minha página inicial com o construtor ... quando faço uma visualização, vejo a página.
O problema é que, quando salvo minha página e a abro novamente, o controle deslizante não aparece.
Alguém poderia me ajudar, por favor?
Bom Dia,
Isso pode ser devido a um bug, você tentou entrar em contato com o suporte do Eleganthemes?
Bom Dia,
Obrigado por seu artigo!
Você sabe como eu posso mudar os slides velocidade de rolagem?