Door naar hoofdmenu

Maak een zwevend contactgedeelte met scrolleffecten op Divi

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

Elke website heeft een contactgedeelte nodig, maar dat betekent niet dat je voor een standaardontwerp moet gaan. Met Divi's scrolleffecten kunt u een zwevend contactgedeelte maken dat opvalt. Verbeter uw gebruikersinteractie met een verticaal scrollende contactsectie-indeling die bezoekers zal uitnodigen om met uw contactformulier te communiceren. In dit artikel laten we u zien hoe u een zwevend contactgedeelte over de volledige breedte kunt maken dat u aan elke pagina kunt toevoegen. U kunt het zelfs toevoegen aan de bovenkant van een voettekst voor de hele site met de Divi Theme Builder.

Hieronder vindt u een gratis downloadbaar bestand met de JSON-layout om te downloaden in uw eigen Divi-bibliotheek. We hebben ook een PSD-sjabloon toegevoegd om u te helpen de kaartachtergrond opnieuw te creëren, evenals een kaartpin SVG, zodat u deze kunt aanpassen met uw eigen kleuren.

Creëer een elementenstructuur

In dit ontwerp gaan we een achtergrondafbeelding gebruiken die een weergave is op Google Map van de locatie die u wilt markeren. U kunt dit doen met Photoshop of een andere afbeeldingseditor.

Voeg een nieuw gedeelte toe

Dit is het moment om te beginnen met het maken van het zwevende contactgedeelte met de Divi Builder! Het eerste dat we zullen doen, is een nieuwe of bestaande pagina openen en een nieuwe sectie toevoegen.

Voeg op het tabblad inhoud de achtergrond toe van de kaart die u in Photoshop hebt gemaakt.

  • Achtergrondafbeelding: uw aangepaste kaart
Divi achtergrondafbeelding

tussenruimte

Pas vervolgens de instellingen voor de sectie-afstand op het ontwerptabblad aan.

  • Boven- en ondermarge: 50vh
  • Vulling onderkant: 0vw
Divi 1 sectie-afstandsconfiguratie

zichtbaarheid

Stel vervolgens de overlopen in op zichtbaar.

  • Horizontale en verticale overloop: zichtbaar
zwevend contactgedeelte

Positie

Stel ten slotte de Z-index van de sectie in op 10.

  • Z Index: 10
Divi sectie positie

Voeg een nieuwe regel toe

Kolomstructuur

Dit is het moment om een ​​paar dingen toe te voegen. Voeg eerst een rij met 2 kolommen toe.

Rij heeft twee kolommen divi

sizing

Open de lijnparameters en pas de maatvoering als volgt aan.

  • Breedte
    • Kantoor: 90%
    • Tablet en telefoon: 80%
  • Max breedte: 90%
Divi line-parameter

zichtbaarheid

Klik op het geavanceerde tabblad en pas vervolgens de overlopen aan.

  • Horizontale en verticale overloop: zichtbaar
Divi line overflow configuratie

Positie

Voltooi de rij-instellingen door de positie-instellingen te wijzigen.

  • Positie: relatief
  • Offset-oorsprong: linksboven
  • Verticale offset
    • Bureaublad: -8vw
Configureer de positie van de divi-lijn

Instellingen kolom 1

Achtergrond

Voordat we modules toevoegen, moeten we de afzonderlijke kolommen opmaken. Voeg een achtergrondkleur toe aan kolom 1.

  • Effen kleur: # 25274d
Kolom kleur 1 divi

Spacing

Pas vervolgens de instellingen voor de afstand aan.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

  • Boven- en ondervulling
    • Desktop en tablet: 7vw
  • Linker en rechter opvulling
    • Bureaublad: 3vw
    • Tablet en telefoon: 6vw
Configuratie met afstand tussen twee kolommen

Grens

Voeg vervolgens enkele afgeronde hoeken toe aan de randinstellingen.

  • Afgeronde hoeken: 10px alle vier de hoeken
Afgeronde randen divi-doorsnede

Scroll effecten

Last but not least, gebruik wat verticale beweging in de instellingen voor scrolleffecten. Dit helpt ons om een ​​zwevend effect te creëren.

  • Scroll Transform-effecten: verticale beweging
  • Verticale beweging / desktop set
    • Startoffset: 4
    • Mid Offset: 0 (bij 50%)
    • Offset beëindigen: -4
  • Verticale beweging / tablet en telefoonset
    • Startoffset: 4
    • Mid Offset: 0 (bij 40% en 60%)
    • Einde offset: -3
  • Trigger motion effect: midden van element
Pas het scroleffect van de divi-sectie aan

Kolom 2 instellingen

Positie

Laten we nu verder gaan met de parameters van de tweede kolom. Pas de positieparameters dienovereenkomstig aan.

  • Positie: relatief
  • Oorsprong van de offset: linksboven
  • Verticale offset
    • Kantoor: 25vw
Divi-kolomaanpassing

Scroll effecten

We voegen ook een verticale beweging toe aan deze kolom.

  • Scrolltransformatie-effecten: verticale beweging
  • Definieer verticale / desktop-beweging
    • Start offset: 2
    • Gemiddelde offset: 0 (bij 50%)
    • Einde offset: -2
  • Definieer verticale beweging / tablet en telefoon
    • Start offset: 0
    • Gemiddelde offset: 0 (bij 50%)
    • Einde offset: -2
  • Motion Effect Trigger: Element Top
Divi-scrolleffect

Voeg een tekstmodule toe aan de 1-kolom

Inhoud

Het is tijd om modules toe te voegen, te beginnen met een tekstmodule in kolom 1. Voeg elke gewenste H2-inhoud toe.

Kolom 1 inhoudsmodule

Titeltekst

Ga naar het ontwerptabblad en stijl de H2-tekst als volgt.

  • Titel niveau: H2
  • Lettertype: Palanquin Dark
  • Lettergewicht: vet
  • Tekenstijl: TT
  • Kleur: geel # ffd868
  • Maat
    • Kantoor: 5vw
    • Tablet: 10vw
    • Telefoon: 12vw
  • Letterafstand: 4px
Divi-lettertypeaanpassing bovenaan

Voeg een contactformuliermodule toe aan kolom 1

Inhoud

Voeg onder de tekstmodule een contactformulier toe. Dit zijn de velden die we gebruiken:

  • Achternaam
  • E-mail*
  • materiaal
  • Bericht
Voeg divi contactformulier toe

Spam Protection

Voor het stylen van de contactformuliermodule. activeer spambeveiliging en verbind uw ReCaptcha-account.

  • Gebruik een service voor spambeveiliging: Ja
  • Dienstverlener: ReCaptcha
  • Selecteer een account
Divi contactformulier spambescherming

Velden

Schakel over naar het ontwerptabblad en geef de velden als volgt vorm.

  • Achtergrondkleur: donkerblauw # 25274d
  • Tekstkleur: lichtgrijs # d1d1d1
  • Focus achtergrondkleur: donkerblauw # 25274d
  • Focus tekstkleur: lichtgrijs # d1d1d1
  • Lettertype: Palanquin
  • Stijl: TT
  • Tekstgrootte
    • Kantoor: 0.9vw
    • Tablet: 2vw
    • Telefoon: 3vw
  • Letterafstand: 1px
Kleurenvelden aanpassen 1

knoop

Stileer vervolgens de knop.

  • Aangepaste stijlen: Ja
  • Tekstgrootte: 20px
  • Tekstkleur: donkerblauw # 25274d
  • Achtergrondkleur: Geel # ffd868
  • Randradius: 7px
  • Pictogramkleur: donkerblauw # 25274d
  • Bovenmarge: 5px
Divi-knopstijl aanpassen 1
Divi-knop kleurconfiguratie

sizing

Vervolgens passen we de maatparameters aan.

  • Breedte: 100%
  • Max breedte: 100%
Divi dimensionering configuratie

tussenruimte

We zullen ook topvulling toevoegen.

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

  • Bovenvoering: 4vw
Divi-afstand

grens

Voltooi de moduleparameters door de randparameters aan te passen.

  • Ingangen met afgeronde hoeken: 6 px op de vier hoeken
  • Invoer Randstijlen: alle vier de zijden
  • Breedte ingangsrand: 2px
  • Invoer Randkleur: geel # ffd868
Divi grensconfiguratie

Voeg de volgmodule voor sociale media toe aan kolom 2

Inhoud

Ga naar kolom 2 en voeg een social media module toe. Gebruik alle sociale netwerken die u nodig heeft.

  • Facebook
  • Twitter
  • Linkedin
Module volg ons op sociale netwerken

Pandrecht

Voeg vóór het stylen links toe naar de overeenkomstige netwerken.

Context van het artikel

Open nu het eerste sociale netwerk en verander de achtergrondkleur.

  • Kleur: Donkerblauw # 25274d
Wijzig divi 1 achtergrond

Element Icoon

Wijzig op het ontwerptabblad van hetzelfde element de pictograminstellingen als volgt.

  • Kleur: geel # ffd868
  • Lettergrootte van pictogram
    • Bureau en tablet: 31 px
    • Telefoon: 26 px
Pas kleur divi aan

Artikelafstand

Voeg vervolgens een kleine marge toe om de pictogrammen van elkaar te scheiden.

  • Rechter marge: 1vw
Configuratie tussen ruimte voor sociaal delen

Kopieer en plak itemstijlen

Om de resterende sociale netwerken te stylen, keert u terug naar het hoofdinhoudsvenster en kopieert u de elementstijlen van het eerste pictogram. Plak vervolgens de elementstijlen op de overige sociale netwerken.

Kopieer stijlelement
Plak stijlelement divi

alignement

Schakel over naar het hoofdontwerptabblad en zorg ervoor dat de module links uitgelijnd is.

  • Uitlijning van de module: links
Kies uitlijning

sizing

Pas vervolgens de maatvoering van de module aan.

  • Breedte: 100%
Configureer de dimensionering van de divisies

tussenruimte

Wis ook alle standaardvulling.

  • Vulling boven, onder, links en rechts: 0vw
Configureer de divi-afstand

grens

Voeg tot slot afgeronde hoeken toe in de randinstellingen. Hiermee worden de randen van alle pictogrammen tegelijk aangepast.

  • Ronde hoeken
    • Linksboven en rechts: 7 pixels
    • Linksonder en rechts: 0px
Divi-module grensconfiguratie

Voeg een tekstmodule toe aan de 2-kolom

Inhoud

Voeg onder de sociale media-module nog een tekstmodule toe. Voeg inhoud naar keuze toe. We hebben twee adressen, een telefoonnummer en een e-mailadres toegevoegd. Gebruik vetgedrukt voor de titel van elk item in hoofdletters.

  • Hoofdkantoor: 1587 Sukhumvit Soi 21, Bangkok, Thailand.
  • Verkooppunt : Emporium Mall, 2e verdieping
  • telefoon: (321) 564 2398
  • e-mail: [e-mail beveiligd]
Divi-tekstmodule adresconfiguratie

verband

Verander de achtergrondkleur van de module.

  • Kleur: Donkerblauw # 25274d
Achtergrondconfiguratie van tekstmodule

Teksten

Schakel over naar het ontwerptabblad en geef de tekst stijl.

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

  • Lettertype: Palanquin
  • Kleur: geel # ffd868
  • Grootte: 18px
Lettertype van de Divi-module

tussenruimte

Voeg ook aangepaste afstandswaarden toe.

  • Bovenmarge
    • Kantoor: -60px
    • Tablet en telefoon: -50 pixels
  • Boven-, onder-, linker- en rechtervulling
    • Kantoor: 3vw
    • Tablet: 6vw
    • Telefoon: 8vw
Divi-afstandsmarge

grens

En voltooi de module door afgeronde hoeken toe te voegen in de randinstellingen. Dat is het!

  • Afgeronde hoeken: 10 pixels rechtsboven, linksonder en rechtsonder.
Afgeronde rand divi-tekstmodule

overzicht

Nu we klaar zijn met het opnieuw maken van het gedeelte met zwevende contacten, kunt u het resultaat op verschillende schermformaten nog eens bekijken.

zwevend contactgedeelte

Aanvullende bronnen

De bronnen kunnen een aanvulling zijn op wat u zojuist hebt gelezen. Ze kunnen aanvullend worden gebruikt of door degenen die het Divi-thema niet hebben.

Voltooien

Door gebruik te maken van de nieuwe Divi-scrolleffecten, wordt elke standaardlay-out een mooi ontwerp. Door uw eigen achtergrond te creëren, heeft u meer controle over het uiterlijk van het voltooide ontwerp. Als je vragen of suggesties hebt, laat dan een reactie achter in de comments hieronder!

Dit artikel bevat opmerkingen 0

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
0 aandelen
aandeel
gekwetter
Enregistrer