Hoe aantrekkelijke visitekaartjes te ontwerpen met een flipping-animatie op Divi

Rifat T Oct 20, 2021

Visitekaartjes zijn een populaire manier om een bedrijf aan een persoon te introduceren. Het bevat alle nodige informatie over die persoon en levert zijn nuttige contactgegevens. Wat dacht je van een virtueel visitekaartje op een website die draait en hetzelfde werk doet?" Het zal zeker dynamischer zijn en er zullen sociale links aan worden gekoppeld zodat iedereen gemakkelijk contact kan opnemen met het individu. Nou, dit klinkt echt interessant en we zullen leer vandaag nog over dit ontwerp, op Divi ! Dus laten we aan de slag gaan.

Ontwerpvoorbeeld

Vandaag gaan we dit ontwerp bouwen. Ziet er interessant uit, hè?

Deel 1: Ontwerp van een visitekaartje dat bij een klik omklapt

Toevoegen: Rij 1

Begin met het toevoegen van een rij met één kolom aan de reguliere sectie.

Werk de volgende instellingen bij.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu
  • Kolomhoogten gelijkmaken: JA
  • Breedte: 90%
  • Maximale breedte: 1200px

Open de kolominstelling en voeg er wat opvulling aan toe.

opvulling

  • Desktop - 30px boven en onder, 50px links en rechts.
  • Tablet - 30px boven en onder, 50px links en rechts.
  • Telefoon - 15px boven en onder, 15px links en rechts

Voeg de volgende CSS-klasse toe vanaf het tabblad geavanceerd. Deze code werkt als een trigger om te klikken voor onze flip-animatie.

  • CSS-klasse: kaartkolom

Kolom klonen

Nu de vorige kolom gedupliceerd. Nu hebben we een naar-kolomlay-out en elk van hen heeft dezelfde opvulling en CSS-klasse.

De achterkaart bouwen

Eerst maken we het visitekaartje dat meestal op de achterkant staat en naar voren komt wanneer erop wordt geklikt. Hier zullen we alle informatie over een persoon plaatsen. We zullen het terug-kaart noemen. Om dit te maken, zullen we een Divider in kolom 1 bevestigen. Vervolgens schakelen we de divider zichtbaarheid uit vanuit de divider-instelling omdat we de divider alleen zullen gebruiken om de afbeelding aan de kaart te bevestigen.

Achtergrond kleur

  • Achtergrondkleur: #322b3f

Achtergrond verloop

  • Achtergrondverloop links Kleur: rgba(50,43,63,0.72)
  • Achtergrond verloop juiste kleur: #322b3f
  • Gradiënttype: radiaal
  • Eindpositie: 34%
  • Plaats verloop boven achtergrondafbeelding: JA

Achtergrond afbeelding

  • Achtergrondafbeelding: [upload afbeelding of portret van teamlid]
  • Grootte achtergrondafbeelding: passen
  • Positie achtergrondafbeelding: midden

Maatvoering

  • Breedte: 100%
  • Minimale hoogte: 300px
  • Hoogte: 100%

Doos Schaduw

  • Box Shadow: zie screenshot
  • Box Shadow Verticale Positie: 0px
  • Doos Schaduwvervaging Sterkte: 50px

CSS-klasse en positie

Voeg nu de CSS-klasse toe aan de scheidingslijn en werk de positie bij.

  • CSS-klasse: achterkaart
  • Positie: Absoluut

Toevoegen: Logo op achterkaart

We hebben onze achterkaart op zijn plaats, we zullen er nu een logo aan toevoegen.

Upload nu het logo. De grootte moet ongeveer 60px * 60px zijn.

CSS-klasse

  • CSS-klasse: kaartinhoud

Positie

  • Positie: Absoluut
  • Verticale offset: 30px (desktop en tablet), 15px (telefoon)
  • Horizontale offset: 50px (desktop en tablet), 10px (telefoon)

Toevoegen: Naam kaarthouder

Voeg nu een tekstmodule onder logomodule toe aan de kaart voor naam. En update de naam van de persoon die je wilt uitlichten.

Maak dit volgende gewijzigd op het ontwerptabblad.

  • Tekstlettertype: Poppins
  • Tekst Tekstkleur: #ffffff
  • Tekst Tekstgrootte: 28px (desktop en tablet), 22px (telefoon)
  • Letterafstand: 1px
  • Tekstuitlijning: Rechts

Toevoegen: De vacature

Dupliceer de vorige tekstmodule om de functie toe te voegen. Bewerk de inhoud van de body en maak aanpassingen op het ontwerptabblad.

  • Tekst Lettertypestijl: TT
  • Tekst Tekstgrootte: 16px (desktop en tablet), 14px (telefoon)
  • Marge: 15px onder

Toevoegen: Bedrijfsnaam

Om de bedrijfsnaam toe te voegen, dupliceert u de vorige tekstmodule en wijzigt u de hoofdtekst.

  • Tekst Lettertype Gewicht: Licht
  • Tekst Lettertypestijl: standaard
  • Tekst Tekstgrootte: 22px (desktop en tablet), 18px (telefoon)
  • Tekstuitlijning: Links

Toevoegen: Contactnummer

Om het contactnummer van de persoon toe te voegen. voeg een blurb-module toe onder de bedrijfstekstmodule. werk de inhoud van het lichaam bij met telefoonnummer en voeg een pictogram toe.

Werk vanuit de ontwerpinstellingen het volgende bij:

  • Pictogramkleur: #20BFA
  • Plaatsing afbeelding/pictogram: links
  • Gebruik pictogram Lettergrootte: JA
  • Pictogram Lettergrootte: 20px
  • Lichaamslettertype: Poppins
  • Kleur hoofdtekst: #ffffff
  • Grootte hoofdtekst: 16px
  • Marge: 10px onder

Voeg email adres toe

Dupliceer de vorige blurb-module en werk de hoofdtekst bij als e-mailadres. Werk het pictogram vervolgens bij als een envelop.

Toevoegen: De Website

Doe hetzelfde als we deden voor de e-mailsectie. Kopieer de vorige blurb-module en wijzig de inhoud.

Toevoegen: Pictogrammen voor sociale media

De laatste module die we op de achterkaart zullen toevoegen, is de module voor het volgen van sociale media. Voeg deze module toe onder de laatste blurb-module.

Maak vanuit de instellingen elk sociaal pictogram transparant en voeg indien nodig een URL toe. Om alle pictogrammen transparant te maken, opent u elke module voor sociale media en sleept u de wit gemarkeerde balk naar beneden. Het zal het werk veranderen.

Lijn vanaf het ontwerptabblad ook de sociale media-volgpictogrammen aan de rechterkant uit.

Toevoegen: dezelfde klasse aan alle modules

Aangezien de plaatsing en aanpassing van al onze modules is voltooid, zullen we ze nu selecteren met behulp van Divi 's multi-select-functie en een gemeenschappelijke CSS-klasse toevoegen. In overeenstemming met deze CSS-klasse zullen we CSS-code toevoegen die de inhoud van de kaart vóór de kaart laat zien door middel van flip-animatie.

  • CSS-klasse: kaartinhoud

Houd "Cmd" of "Ctrl" ingedrukt en klik op elementen om ze te selecteren. Klik vervolgens op een instelling van een willekeurige module en maak de aanpassing.

De voorste kaart bouwen

Onze achterkaart is klaar en nu gaan we werken aan de voorkaart die op de plaats van de achterkaart komt te zitten en de inhoud achterin verbergt. We zullen de frontkaart ontwerpen via een afbeeldingsmodule in kolom 2 die de kaart in kolom 1 zal vervangen. Eerst voegen we een afbeeldingsmodule toe aan kolom 2 en voegen we een logo (60px*60px) toe aan de module.

Open nu de instellingen van de scheidingsmodule van de achterkaart en kopieer de achtergrond.

Open nu de afbeeldingsinstellingen voor de voorkaart en plak deze.

Werk vanuit het ontwerpgedeelte de afstand van de afbeelding als volgt bij:

  • Opvulling (desktop en tablet): 30px boven, 50px links
  • Vulling (telefoon): 15px boven, 10px links

Geavanceerde instellingen

Geef deze afbeelding op het tabblad Geavanceerd een CSS-klasse.

  • CSS-klasse: voorkaart

Voeg de aangepaste CSS toe aan het hoofdelement.

height: 100%;
width: 100%;

Werk ook de positie-instellingen bij.

  • Positie Absoluut
  • Z-index: 13

Nu, als u klaar bent met de voorste kaart, sleept u deze over de achterste kaartmodule in kolom 1.

Deel 2: Aangepaste code toevoegen

Ten slotte zullen we wat aangepaste CSS- en JQuery-code toevoegen om flip-animaties toe te voegen aan ons visitekaartjeontwerp. Voeg hiervoor een codemodule toe onder kolom 1.

Toevoegen: CSS-code

Voeg nu de onderstaande code toe in de codemodule. Zorg ervoor dat u dan binnen een Style- tag blijft.

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}
 
.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}
 
.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}
 
.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
 
.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}
 
.card-content {
  transition: all 300ms ease-out 0ms;
}
 
.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}
 
.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

Toevoegen: JQuery-code

Voeg de volgende JQuery-code toe onder de CSS-code. Vergeet niet om ze binnen Script- tags te houden.

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");
 
    $cardContent.css("opacity", "0");
 
    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

Meer visitekaartjes maken

Om meer visitekaartjes van je teamgenoten toe te voegen, moeten we de kolom zo vaak klonen als je nodig hebt. Maar zorg ervoor dat je de codemodules van gekloonde kaarten hebt verwijderd, want als je twee codemodules hebt, wordt het ontwerp verbroken.

Pas nu elke kaart aan volgens elke persoon die u hier wilt laten zien.

Eindbeeld

Na al het werk dat we hebben gedaan, ziet ons ontwerp er zo uit. Klik op elke kaart en deze wordt omgedraaid en toont informatie over de persoon. Klik vervolgens naar buiten en het zal teruggaan naar zijn vorige positie.

Conclusie

Het interactieve visitekaartje is een geweldige manier om uw teamgenoten op de website te tonen. U kunt dit gebruiken om informatie over onze projecten te tonen, ideeën te delen en nog veel meer! Klik op delen als je deze tutorial nuttig vindt en als je vragen of vragen hebt, kun je hieronder reageren.

Divi WordPress Theme