Divi: Hoe maak je een compacte testimonial slider voor een header

Wilt u een compacte testimonial-slider voor een Divi-header invoegen?

Het toevoegen van getuigenissen aan uw site is een effectieve manier om geloofwaardigheid voor uw bedrijf (of uw merk) op te bouwen en vertrouwen op te bouwen bij gebruikers. bezoekers. 

Een testimonial-schuifregelaar is een handig hulpmiddel om getuigenissen op één plek te presenteren. Met dat in gedachten is het logisch om een ​​compacte testimonial-schuifregelaar aan uw kop toe te voegen, zodat deze getuigenissen een van de eerste dingen zijn die de gebruiker ziet wanneer ze uw website.

In deze zelfstudie laten we u zien hoe u een compacte testimonial-schuifregelaar maakt om korte getuigenissen in de kop van uw Site web. 

Om dit te doen, gaan we de Divi Slider Module op een leuke en unieke manier aanpassen.

Laten we beginnen!

Maar voordat u onze gids kunt ontdekken op Divi, het beste WordPress-thema ter wereld en het gemakkelijkst te gebruiken

overzicht

Hier is de compacte testimonial-slider die we zullen bouwen met behulp van Divi's Slider-module.

En hier is diezelfde testimonial-schuifregelaar toegevoegd aan een globale koptekst.

En zo ziet het eruit op mobiel.

Maak een nieuwe pagina met Divi Builder

Om te beginnen, moet u het volgende doen:

Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een ​​nieuwe pagina te maken.

Geef het een titel die voor jou logisch is en klik op Gebruik Divi Builder

klik vervolgens op Begin met bouwen (Bouw vanaf het begin)

Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.

Hoe maak je een Compact Testimonial Slider in Divi

Nieuwe rij- en schuifmodule toevoegen

Voeg om te beginnen een rij met één kolom toe aan de sectie.

Voeg vervolgens een Slider-module toe aan de regel.

Dia bewerken

Verwijder onder schuifregelaarinstellingen de standaard tweede dia onder het tabblad Contenten klik vervolgens op om de instellingen voor de resterende dia te wijzigen.

Dia-inhoud

Onder het tabblad Content update vanuit de dia-instellingen het volgende:

• Titel: “Donec bezorgdheidin molestie malesuada. Vivamus suscipit tortor eget.
• Knop: Alles lezen
• Lichaam: — Tatiana Gagelman

Als u klaar bent, slaat u de dia-instellingen op.

Lees ook: Divi: instellingen voor achtergrondmaskers en opties voor patroontransformatie gebruiken

Schuifregelaarinstellingen bijwerken

Besturingselementen dupliceren en verbergen

Na het bijwerken van de eerste dia met inhoud, dupliceer deze dia om een ​​of meer extra dia's te maken.

Dan onder de optiegroep Elementen, verberg de schuifregelaars door het volgende bij te werken:

• Toon controle: NEE

Werk de achtergrond van alle dia's bij

Vervolgens voegen we een achtergrond toe die voor alle dia's wordt gebruikt.

Werk het volgende bij om de achtergrond toe te voegen:

• Achtergrond verloop:
  • Verloop stopt 0%: #000000
  • Verloop stopt 100%: #000000

• Achtergrond afbeelding :
  • Maat: Pasvorm
  • Positie: Midden Links
  • Mengsel: helderheid

Instellingen schuifregelaar

Onder het tabblad Design, werk het volgende bij:

deksel

• Achtergrondoverlay gebruiken: JA
• Achtergrondoverlaykleur: rgba(0,0,0,0.7)

Titel tekst

• Titel:
  • Koersniveau: H4
  • Lettertype: Josefin Sans
  • Lettergewicht: gemiddeld
  • Tekstuitlijning: links
  • Tekstgrootte: 16px (desktop en tablet), 14px (telefoon)
  • Lijnhoogte: 1,5em

Het lichaam van de tekst

• Lichaam:
  • Lettertype: Josefin Sans
  • Tekstuitlijning: links
  • Tekstkleur: #aaaaaa
  • Letterafstand: 0,05em

knoop

• Gebruik aangepast formaat voor knop: JA
• Knop:
  • Tekstgrootte: 1em
  • Tekstkleur: Standaard (Desktop), #000 (Hover)
  • Achtergrondkleur (bureaublad): rgba (255,255,255,0.19)
  • Achtergrondkleur (zweven): #ffffff
  • Randbreedte: 0 pixels
  • Letterafstand: 0,05em
  • Lettertype: Josefin Sans
  • Marge: 0px (boven en onder)
  • Vulling: 0px (boven en onder), 0,6em (links en rechts)

Automatisch invullen en animatie

Werk vervolgens de afstand tussen de schuifregelaars bij om compact te zijn en stel de gewenste automatische animatiesnelheid in.

• Marge: 0px (boven en onder)
• Vulling: 1em (boven en onder), 5% (links en rechts)
• Automatische animatie: AAN
• Automatische animatiesnelheid: 3500

Aangepaste CSS

Onder het tabblad Geavanceerd, voeg de volgende aangepaste CSS toe om de stijl van elk schuifregelaarelement (titel, knop en pijlen) bij te werken

Diatitel

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Dit zorgt ervoor dat de titel van de dia geen regeleinde creëert op kleinere schermen.

Schuifknop

position:absolute;
bottom: 1em;
right: 6%;

Dit geeft de knop een absolute positie, zodat deze ruim onder de titel en rechts van de dia zit, waardoor de schuifregelaar nog compacter wordt.

Sleep pijlen

font-size: 30px;
margin-top: -15px;

Het maakt de navigatiepijlen van de schuifregelaar alleen kleiner om plaats te bieden aan het compacte formaat van de schuifregelaar.

Tip: voeg dezelfde achtergrondkleur toe aan de kolom voor vloeiendere dia-overgangen

Open hiervoor de instellingen van de bovenliggende kolom van de schuifregelaar en voeg de volgende achtergrondkleur toe:

• Achtergrond: #000000

Achtergrondafbeeldingen van auteurs aan een dia toevoegen

Als u een achtergrondafbeelding van een auteur voor een dia wilt opnemen, kunt u dit doen door aan elke dia een achtergrondafbeelding toe te voegen.

Nadat u de achtergrondafbeelding aan de dia hebt toegevoegd, neemt de achtergrondafbeelding de stijlen over die al aanwezig zijn onder de instellingen van de schuifregelaar (niet de dia).

Resultaat

Bekijk het eindresultaat.

De schuifregelaar voor compacte getuigenissen toevoegen aan een kopsjabloon

Sla de module op in de Divi-bibliotheek

Voordat we de compacte testimonial-schuifregelaar aan een globale header kunnen toevoegen, moeten we de module eerst registreren in de Divi-bibliotheek. 

U kunt dit doen door met de muis over de Slider-module te gaan en op de " Toevoegen aan bibliotheek“. Geef dan een naam aan de layout en klik op de knop " Opslaan in bibliotheek".

Compacte testimonial-modulelay-out toegevoegd aan een kopsjabloon

Aangepaste koptekst bewerken

Zodra de nieuwe testimonial-schuifmodule in de bibliotheek is opgeslagen, zijn we klaar om deze toe te voegen aan een aangepaste koptekst.

Toegang tot Divi > Themabouweren klik vervolgens op het pictogram waarmee u kunt wijzigen " Aangepaste koptekst".

Opgeslagen testimonial-schuifmodule uit bibliotheek invoegen

Klik in de editor voor koptekstlay-out om de compacte testimonial-schuifmodule toe te voegen waar u deze wilt weergeven.

In de modus "Invoegmodule", selecteer het tabblad "Toevoegen vanuit bibliotheek". Zoek de schuifregelaar voor compacte getuigenissen die u eerder in de bibliotheek hebt opgeslagen en selecteer deze.

Sla na het laden de wijzigingen op.

Zie ook: Divi: de Fullwidth Header-module op volledig scherm weergeven

Eindresultaat

Hieronder is de testimonial-schuifregelaar toegevoegd aan een globale koptekst.

Hier hebben we de testimonial-schuifregelaar zonder de achtergrondafbeeldingen van de auteur.

En zo ziet het eruit op mobiel.

Download DIVI nu!!!

Conclusie

Een compacte testimonial-schuifregelaar kan een nieuwe toevoeging zijn aan de kop van wat dan ook Site web proberen de geloofwaardigheid van haar diensten op de meest zichtbare plaats op haar website te vergroten. 

Je kunt het ook gebruiken om door te verwijzen bezoekers naar een testimonial-pagina of verkooppagina om conversies te verhogen. We hopen dat dit nuttig voor u zal zijn bij uw volgende Divi-projecten.

Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.

U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.

Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...