Het is geen geheim dat 'Over ons'-pagina's erg goed zijn in het genereren van klikken naar uw website. Het is ook dit type pagina dat de nadruk legt op het menselijke deel van het bedrijf achter de Site web. Dit wetende, realiseren we ons dat het belangrijk is om aandacht te besteden aan hoe we pagina's structureren, wat voor soort informatie we delen en hoe we interacties creëren.

Een van de dingen die u kunt doen om de pagina-ervaring te verbeteren, is door een gedeelte voor teamleden aan te bieden dat uw medewerkers in de schijnwerpers plaatst. Bovendien kun je een biologisch zweefeffect toevoegen aan foto's van teamleden met alleen de ingebouwde opties van Divi.

Hiermee kunt u ruimte besparen op de pagina waaraan u werkt en een zweefinteractie creëren tussen u en uw bezoekers.

In deze tutorial laten we je stap voor stap zien hoe je daar komt. Zodra u de aanpak begrijpt, kunt u de ontwerpstijl aanpassen aan uw eigen behoeften.

Laten we gaan!

overzicht

Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.

Bureau

Mobile

Laten we beginnen met recreëren

Voeg een nieuw gedeelte toe

tussenruimte

Maak een nieuwe pagina of open een bestaande en voeg een nieuwe sectie toe met behulp van de volgende aangepaste vulwaarden:

• Beste opvulling: 100px
• Vulling onderkant: 100px

Rij 1 toevoegen

Kolomstructuur

Als u klaar bent met het toevoegen van de aangepaste vulling aan uw sectie, kunt u de sectie-instellingen sluiten en een nieuwe rij toevoegen met een enkele kolom.

Voeg een tekstmodule toe

Voeg H2-inhoud toe

Voeg een tekstmodule-titel toe aan de kolom met een H2-grootte naar keuze.

H2 tekstinstellingen

Ga vervolgens naar de H2-tekstinstellingen en breng enkele wijzigingen aan in het uiterlijk van de kopie.

• Kop 2 Lettertype: Cinzel
• Titel 2-tekenstijl: kleine hoofdletters
• Titel 2 Tekstuitlijning: midden
• Titel 2 Tekstgrootte: 70px

Voeg een deelmodule toe

zichtbaarheid

Blijf een nieuwe scheidingsmodule toevoegen net onder de titel van de tekstmodule.

• Divider weergeven: Ja

Kleur van het scheidingsteken

Ga naar het tabblad Ontwerpen, open de kleurinstellingen en verander de kleur van je scheidingslijn dienovereenkomstig:

• Kleur van het scheidingsteken: # 333333

sizing

Dan zullen we de grootte van de verdeler verkleinen en centreren.

• Breedte: 26%
• Uitlijning van de module: midden

Voeg de 2-regel toe

Kolomstructuur

Ga net onder de vorige regel die u hebt toegevoegd verder en voeg een nieuwe rij toe met drie kolommen van gelijke grootte.

sizing

Zonder meer modules toe te voegen, opent u de lijnparameters en brengt u enkele wijzigingen aan in de maatparameters.

• Gebruik een aangepaste breedte: Ja
• Eenheid: PX
• Aangepaste breedte: 2000px
• Gebruik een aangepaste gootbreedte: Ja
• Dakgootbreedte: 1
• Kolomhoogten gelijk maken: Ja

tussenruimte

Ga vervolgens naar de afstandsinstellingen en voeg aangepaste marge- en opvulwaarden toe.

• Bovenmarge: 50px
• Ondermarge: 50px
• Topvulling: 10px
• Vulling onderkant: 10px
• Linker opvulling: 5px
• Stoffering Rechts: 5px
• Kolom 1, 2 en 3 Padding aan de linkerkant: 5px
• Kolom 1, 2 en 3 Padding aan de rechterkant: 5px

Schaduw doos

We geven onze lijn ook een beetje diepte door een boxschaduw toe te voegen met de volgende parameters:

• Box Shadow Blur Force: 80px
• Voortplantingskracht boxschaduw: -14px
• Schaduwkleur: rgba (0,0,0,0,3)

Voeg een afbeeldingsmodule toe aan kolom 1

Laad een afbeelding in een afbeeldingsmodule

Het is tijd om modules toe te voegen! Om het biologische hover-effect te bereiken, hebben we in totaal twee modules nodig. een afbeeldingsmodule en een blurb-module. De Afbeeldingsmodule bevat de afbeelding van het teamlid dat u wilt presenteren.

De Blurb-mod wordt ondertussen gebruikt om het pictogram in de linkerbenedenhoek en de hoverbiografie toe te voegen. Voeg een afbeeldingsmodule toe aan de eerste kolom met een afbeelding in vierkant formaat.

De filters

Het ontwerp dat we maken is volledig in grijstinten. Om deze grijstint aan onze afbeelding toe te voegen, gaat u naar de filterinstellingen en verwijdert u alle verzadiging.

• Verzadiging: 0%

Voeg de Blurb-module toe aan de 1-kolom

Voeg inhoud toe

Ga verder door een nieuwe Blurb-module toe te voegen net onder de afbeeldingsmodule in kolom 1. Voeg de naam van het teamlid toe aan het titelveld en voer aanvullende informatie over het teamlid in het vak in. inhoud.

Kies een pictogram

Het volgende dat we zullen doen, is een keuzepictogram kiezen dat wordt weergegeven bezoekers dat er meer is dan alleen een foto.

Standaard achtergrondkleur

Vervolgens kiezen we een volledig transparante achtergrondkleur.

• Achtergrondkleur: rgba (255,255,255,0)

Achtergrondkleur op viaduct

En we zullen deze zwevende kleur veranderen.

• Achtergrondkleur: rgba (255,255,255,0.88)

Standaard pictograminstellingen

We willen een zichtbaar pictogram dat helpt bezoekers om te begrijpen dat ze eroverheen kunnen vliegen. Wijzig de pictograminstellingen om een ​​dergelijk pictogram te krijgen.

• Pictogramkleur: #ffffff
• Cirkelpictogram: ja
• Cirkelkleur: # 000000
• Pictogram locatie: links
• Gebruik de tekengrootte van het pictogram: Ja
• Pictogram Lettergrootte: 50px

Hover-pictogram instellen

We willen echter niet dat het pictogram tijdens het zweven wordt weergegeven. Daarom gebruiken we in plaats daarvan een volledig transparante kleur.

• Icoon kleur: rgba (255,255,255,0)
• Cirkelkleur: rgba (255,255,255,0)

Standaard titelinstellingen

Ga vervolgens naar de tekstinstellingen van de titel en breng enkele wijzigingen aan.

• Titel Police: Cinzel
• Titellettertype: Vet
• Titel Fontstijl: kleine hoofdletters
• Kleur teksttitel: # 000000
• Tekst Titel Grootte: 0px

Beweeg over de tekstinstellingen van de titel

Verander de grootte van de tekst door te zweven.

• Tekst Titel Grootte: 30px

Standaard instellingen voor hoofdtekst

Wijzig ook de instellingen voor de hoofdtekst.

• Body Police: Open Sans
• Tekst in hoofdtekst: # 000000
• Hoofdtekstgrootte: 0px
• Lichaamslengte: 1.8em

Parameter van het lichaam bij overvliegen

En, nogmaals, verander de lichaamsgrootte van de tekst die zweeft.

• Hoofdtekstgrootte: 14px

Standaard afstand

Last but not least moeten we een overlap maken tussen de Blurb-module en de afbeeldingsmodule met behulp van een negatieve bovenmarge.

• Bovenmarge: -3.7vw (desktop), -9vw (tablet en telefoon)
• Ondermarge: 1.5vw (tablet), 2vw (telefoon)

Stationaire afstand

Wijzig de aangepaste marge en vul waarden in rollover.

• Bovenmarge: -11,38vw
• Topvulling: 20px
• Vulling onderkant: 20px
• Stoffering Rechts: 50px

Kloneer de twee modules twee keer en plaats de duplicaten in de resterende kolommen.

We zijn klaar met het creëren van ons eerste biologische zweefeffect. Om tijd te besparen, kunnen we de twee modules in kolom 1 gewoon dubbel klonen en de duplicaten in de resterende twee kolommen plaatsen.

Bewerk de afbeelding en inhoud van de Blurb-module

Vergeet niet om de afbeelding in de Afbeeldingsmodule te wijzigen en deze naar de Blurb-module te kopiëren om het gedeelte met teamleden te voltooien!

overzicht

Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken naar hoe we naar verschillende schermformaten hebben gekeken.

Bureau

Mobile

Final gedachten

In dit artikel hebben we u laten zien hoe u een biologisch zweefeffect kunt creëren voor foto's van teamleden met alleen de ingebouwde opties van Divi. We hebben benadrukt hoe belangrijk het is om goede pagina's te maken, omdat dit een van de meest bezochte websites is.

Het gebruik van bio-hover-effecten voor foto's van teamleden verbetert niet alleen de kwaliteit van uw pagina, maar creëert ook interactie met uw bezoekers. Als je vragen of suggesties hebt, laat dan een reactie achter in de comments hieronder!