CodeWatchers

Hoe ontwerp je een aantrekkelijk kleverige koptekst-toggle-tabblad in Divi

Rifat Divi Oct 16, 2021

Als het gaat om het geven van een korte output van wat de website bevat, spelen headers een grote rol. Het beschikt over de nodige bevoegdheden om mensen naar verschillende secties te navigeren op basis van hun behoeften. Bovendien zijn plakkerige kopteksten best cool omdat het de mogelijkheid biedt om overal op de website te gaan, zelfs als u zich niet bovenaan de pagina bevindt waar het kopgedeelte zich bevindt.

Hoe ontwerp je een aantrekkelijk kleverige koptekst-toggle-tabblad in Divi

Divi is een veelzijdig WordPress-thema waarmee je verschillende ontwerpen kunt maken, en dit trekt echt veel aandacht van je kijkers. Dus vandaag zullen we zien hoe u een wisseltabblad kunt maken voor een plakkerige koptekst. Dit is een geweldig idee om een schakelaar op de koptekst te zetten als uw website een galerijsectie of blogsectie heeft, omdat de plakkerige kop soms op de een of andere manier de weergave blokkeert. De tutorial van vandaag zal dus super geweldig en nuttig zijn voor mensen die worstelen met het probleem met de koptekst.

Zet je schrap en laten we aan de slag gaan met ons ontwerp van vandaag.

Ontwerpvoorbeeld

We zullen dit ontwerp vandaag maken. Als je hier opmerkt, kun je zien dat het menukop sticky menu altijd zichtbaar is. Wanneer we op de schakeloptie klikken, wordt deze naar boven verplaatst.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Deel één: de sjabloon importeren en instellen

We zullen vandaag aan deze vooraf gemaakte sjabloon werken. U kunt het sjabloonbestand downloaden door hier te klikken.

Sjabloon importeren

We hopen dat je het JSON-bestand met succes hebt gedownload via de bovenstaande link. Pak het nu uit en haal het JSON-bestand op. Ga vervolgens naar uw WordPress-dashboard en klik vanuit de optie voor het bouwen van thema's op het draagbaarheidspictogram.

Ga naar de importoptie en schakel die gemarkeerde opties uit en klik op "Divi Theme Builder-sjabloon importeren".

Klik nu op Importeren als statische lay-out en ga verder.

Nu is onze lay-out geïmporteerd. Verwijder het voettekstgedeelte, klik op wijzigingen opslaan en open instellingen bewerken.

Bestaande codemodule verwijderen

Nu kan ons ontwerp worden bewerkt en laten we de bestaande codemodule uit lagen verwijderen.

Deel twee: maak een wisseltabblad met plakkerige koptekst

De sectie-instellingen

We zullen het plakkerige effect op de hele sectie implementeren en daarvoor moeten we een CSS-klasse op de hele sectie plaatsen, zodat we er later mee kunnen werken.

Open de sectie-instellingen en werk het volgende bij:

  • CSS-klasse: et-divi-sticky-header
  • Kleverige positie: blijf bij boven

Toggle Tab maken vanuit een Blurb-module

We voegen een blurb-module toe onder de menumodule.

Blurb-inhoudsinstelling

Open vervolgens de instelling voor de blurb-module en werk de inhoud als volgt bij:

  • Titel inhoud verwijderen
  • Body-inhoud verwijderen
  • Gebruik pictogram: JA
  • Icoon: pijl omhoog (zie screenshot)
  • Achtergrondkleur: #ffffff

Blurb-ontwerpinstellingen

Werk het volgende bij op het tabblad Ontwerpen:

  • Pictogramkleur: #1a3066
  • Gebruik pictogram lettergrootte: JA
  • Pictogram Lettergrootte: 40px

Open de maatinstelling en maak de volgende aanpassingen.

  • Breedte: 45px
  • Hoogte: 45px
  • Marge: 0px Onder
  • Afgeronde hoeken: 12px linksonder, 12px rechtsonder
  • Transformeren Y-as vertalen: 100%
  • Afbeelding/Icoon Animatie: Geen Animatie

Geavanceerde instellingen van Blurb

Werk het volgende bij vanaf het tabblad Geavanceerd:

  • CSS-klasse: et-divi-sticky-toggle
  • Positie: Absoluut
  • Locatie: rechtsonder
  • Horizontale verschuiving: 20px
  • Z-index: -1

We hebben met succes alle instellingen van de Blurb-module voltooid. Volgens ons ontwerp bevindt de blurb-module die we zullen gebruiken als de schakelknop zich in de linkerbenedenhoek van de menumodule.

Deel drie: code toevoegen

Om nu meer functionaliteit aan ons ontwerp toe te voegen, voegt u een codemodule toe onder de blurb-module.

CSS-code toevoegen

Voeg de volgende CSS-code toe aan de codemodule. Zorg ervoor dat u ze in een Style- tag plaatst. 

.et-divi-sticky-toggle {
  visibility: hidden;
  opacity: 0;
  transition: all 400ms;
}
 
.et-divi-sticky-toggle:hover {
  cursor: pointer;
}
 
.et-divi-sticky-toggle.et-show-toggle {
  visibility: visible;
  opacity: 1;
}
 
.et-divi-sticky-header {
  transition: all 400ms !important;
}
.et-divi-sticky-header.et-hide-sticky-header {
  transform: translateX(0%) translateY(-100%) !important;
}
 
.et-divi-sticky-toggle .et-pb-icon {
  margin-bottom: 0px;
  transition: all 400ms;
}
 
.et-hide-sticky-header .et-divi-sticky-toggle .et-pb-icon {
  transform: rotateX(180deg);
}

JQuery-code toevoegen

Voeg de JQuery-code toe aan de codemodule en plaats deze in een Script- tag. 

jQuery(document).ready(function ($) {
  // variables for header and toggle
  $stickyHeader = $(".et-divi-sticky-header");
  $stickyToggle = $(".et-divi-sticky-toggle");
 
  // attach scroll event handler function to window that
  // uses the windows scroll position (winScrollTop) and
  // the height of the header (headerHeight) to hide/show
  // toggle once the user scrolls beyond the header height.
  $(window).on("scroll", function () {
    winScrollTop = $(window).scrollTop();
    headerHeight = $stickyHeader.height();
    if (
      winScrollTop  headerHeight AndAnd
      $stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.removeClass("et-show-toggle");
      $stickyHeader.removeClass("et-hide-sticky-header");
    }
  });
 
  // attach click event function on toggle tab that
  // toggles the "et-hide-sticky-header" class.
  $stickyToggle.on("click", function (e) {
    $stickyHeader.toggleClass("et-hide-sticky-header");
  });
});

Deel vier: Definitieve instellingen

Sla nu het ontwerp van rechtsonder op en klik rechtsboven op kruis. U bent terug op themabouwer vanaf het dashboard en daar klikt u op het tandwielpictogram en selecteert u Alle pagina's. En we zijn klaar.

Definitief ontwerp

Dit is het resultaat van wat we tot nu toe hebben gedaan. Wij hopen dat u hiermee tevreden bent.

Conclusie

In het ontwerp van vandaag hebben we geprobeerd u te laten zien dat u een aantrekkelijk kleverig kop-toggle-tabblad in Divi kunt ontwerpen. Dit geeft uw gebruiker een aangenamere ervaring terwijl ze op uw website zijn. Misschien kun je deze truc gebruiken voor je volgende webontwikkelingswerk, en het zal zeker positieve feedback van klanten opleveren. Ik hoop dat je dit leuk vindt, en als dat zo is, zal een deel geweldig zijn!

Divi WordPress Theme