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