Sélectionner une page


Étape 1 – Créer une structure de titre

Ajoutez une section par défaut et définissez ce remplissage de section sur 0. Dans le Onglet Avancé Définissez l’ID CSS sur Onglets de présentation.

Il devrait y avoir une ligne avec une colonne dans cette section. Nous n’avons pas à nous soucier du nombre de colonnes pour chaque onglet, nous les contrôlons via CSS personnalisé (propriété Flexbox, pour être précis). La démo utilise quatre colonnes pour les titres mais peut facilement être ajustée à plus ou moins de colonnes avec quelques améliorations.

Pour les paramètres de ligne – définir et définir la largeur de la ligne Largeur de gouttière personnalisée jusqu’au 1.

Ajoutons maintenant quatre modules Blurbs. Vous pouvez concevoir le texte de présentation comme vous le souhaitez. J’utilise des symboles dans ma mise en page. J’ai défini un rembourrage différent pour le bureau, la tablette et le téléphone portable et j’ai attribué une couleur d’arrière-plan différente à chaque texte de présentation. Le plus important est d’ajouter une classe personnalisée de Titre de l’onglet à chacun et définissez également l’URL du lien sur # tab1 (# tab2, # tab3, # tab4 – chaque texte de présentation fait référence à un ID différent).

Étape 2 – Concevoir les titres

De toute évidence, nous avons actuellement quatre textes de présentation pleine largeur. Il peut être facilement corrigé à l’aide de CSS Flexbox. Si vous voulez en savoir plus, il existe un jeu amusant appelé Flexbox FroggyVous trouverez ici toutes les propriétés de la Flexbox. Voici notre CSS pour y remédier:

/* Style the Blurbs Tabs */
#blurb-tabs .et_pb_column {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}
#blurb-tabs .tab-title {
	width:25%;
}

Nous devons utiliser des requêtes multimédias pour modifier la largeur de la présentation sur des tailles d’écran plus petites comme celle-ci:

@media (max-width: 767px ) {
	#blurb-tabs .tab-title {
		width:50%;
	}
}
@media (max-width: 479px ) {
	#blurb-tabs .tab-title {
		width:100%;
	}
}

Pour utiliser un nombre différent de colonnes pour les onglets, vous devez ajuster ces valeurs de largeur.

Dans ma mise en page de démonstration, j’ajoute également des personnalisations pour la tablette et les vues mobiles (telles que la modification de la taille de l’icône et le déplacement de l’icône vers la gauche sur le téléphone). Voici les styles de requête multimédia complets pour cette mise en page:

/* Tab Titles Mobile Styles */
@media (max-width: 767px ) {
	#blurb-tabs .tab-title {
		width:50%;
	}
	#blurb-tabs .tab-title .et_pb_main_blurb_image {
		margin-bottom:10px; /* Reduce icon bottom margin */
	}
}

@media (max-width: 479px ) {
	#blurb-tabs .tab-title {
		width:100%;
	}
	#blurb-tabs .tab-title .et_pb_blurb_content { /* This moves icon to the right */
		display:flex;
		align-items:center;
		justify-content:flex-start;
	}
	#blurb-tabs .tab-title .et_pb_main_blurb_image { /* Fix icon margins on mobile */
		margin-bottom:0;
		margin-right:30px;
	}
}

Cela nous donne un joli look de présentation réactif, mais nous utilisons également du CSS personnalisé pour créer des effets de survol pour chaque onglet / texte de présentation et définir des couleurs différentes pour l’onglet actif. Voici le code:

/* Hover Styles for Blurb Tabs - Titles */
#blurb-tabs .tab-title {
	transition:all .3s ease-in-out;
}
#blurb-tabs .tab-title:hover {
	cursor:pointer; 
	background:#222; /* Tab hover background color */
}
#blurb-tabs .tab-title.active-tab {
	background:#D9DFE2; /* Active tab background color */
}
#blurb-tabs .tab-title.active-tab .et_pb_blurb_container h4 a {
	color:#000; /* Active tab title color */
}
#blurb-tabs .tab-title.active-tab .et-pb-icon {
	color:#666!important; /* Active tab icon color */
}

Étape 3 – Ajoutez votre contenu

Nous avons besoin de quatre sections – une pour chaque onglet. La meilleure chose à propos de cette mise en page est que vous pouvez littéralement mettre tout ce que vous voulez dans n’importe quel onglet – tant qu’il tient dans une seule section. J’utilise une image, du texte et un module de boutons dans chaque section / onglet.

La partie importante est de définir les classes et les ID CSS corrects. Chaque section en a besoin Contenu de l’onglet Classe et un identifiant unique de tab1, tab2, tab3 et tab4 (Les noms doivent être les mêmes que les attributs d’URL Blurbs, sans le symbole #).

Étape 3 – Masquer les onglets lors du chargement de la page

Nous allons masquer la section avec CSS comme ceci:

/* Hide the tabs content/sections */
.tab-content {
	display:none;
}

Étape 4 – Un peu de magie jQuery

Maintenant – avec un peu de jQery – nous allons en ajouter un Onglet actif Cliquer sur chaque texte de présentation révèle une section avec le même identifiant que l’attribut URL (url) tout en s’assurant que les autres sections sont masquées. Voici le code de travail:

jQuery(document).ready(function($) {
	/* Blurbs as Tabs */
	$('.tab-title').each(function () {	
		var section_id = $(this).find("a").attr("href");
		$(this).find("a").removeAttr("href");	
		$(this).click(function() {
			$(this).siblings().removeClass("active-tab");
	                $(this).addClass("active-tab");
			$('.tab-content').hide();
			$(section_id).show();
		});
	});
});

Si vous ne savez pas où mettre ce code jQuery, j’ai écrit des instructions détaillées dessus Comment ajouter du Javascript à votre page Divi. Ça y est – vous devriez pouvoir recréer facilement cette mise en page sur votre site Divi 🙂

Éditer:

Comment ouvrir un onglet lors du chargement de la page?

Pour rendre l’une des sections visible par défaut, vous devez ajouter une autre classe à cette section, par exemple Onglet ouvert (donc il aura les deux: onglet-contenu onglet ouvert, sans virgule – juste l’espace entre les deux). Et pour activer l’onglet correspondant, le module blurb a également besoin d’une deuxième classe Onglet actif (il aura à la fois: tab-title active-tab).

Et puis tout de suite après en CSS:

.tab-content {
	display:none;
}

Vous devez ajouter:

.tab-open {
	display:block;
}

Modifier n ° 2:

Comment ajouter un défilement fluide pour sélectionner la section sélectionnée en cliquant sur l’onglet?

Si vous souhaitez que votre page défile automatiquement jusqu’à la section sélectionnée, telle que: cette page de démonstration (Cela peut être utile sur les appareils mobiles) Vous devez ajouter cette ligne à la fonction jQuery:

$('html, body').animate({scrollTop: $(section_id).offset().top}, 1000);

juste après

$(section_id).show();

Ainsi, le code JS complet ressemblerait à ceci:

jQuery(document).ready(function($) {
	/* Blurbs as Tabs */
	$('.tab-title').each(function () {	
		var section_id = $(this).find("a").attr("href");
		$(this).find("a").removeAttr("href");	
		$(this).click(function() {
			$(this).siblings().removeClass("active-tab");
	                $(this).addClass("active-tab");
			$('.tab-content').hide();
			$(section_id).show();
			$('html, body').animate({scrollTop: $(section_id).offset().top}, 1000);
		});
	});
});

Et si vous utilisez la navigation fixe, vous devrez modifier cette nouvelle ligne de code (et remplacer 80 par votre hauteur de navigation):

$('html, body').animate({scrollTop: $(section_id).offset().top - 80}, 1000); 

C’est ça!





Source link

Recent Posts