Noodzaak om inline-velden en module-velden met volledige breedte te combineren Contactformulier de Divi ?
Le Contact formulier is een belangrijk element om op uw website op te nemen als u e-mails wilt vastleggen en uw bezoekers wilt omzetten in klanten.
De module Contactformulier de Divi kan eenvoudig worden aangepast om te creëren vormen aantrekkelijke en boeiende contactkaarten voor alle soorten websites. Deze module wordt geleverd met twee weergaveopties die op elk formulierveld kunnen worden toegepast: online ou volle breedte.
In deze zelfstudie presenteren we vier unieke lay-outmogelijkheden voor uw Contact formulier Divi met behulp van inline en velden met volledige breedte.
Laten we beginnen!
overzicht
Hier is een voorproefje van wat we gaan ontwerpen.
Eerste lay-out
Tweede lay-out
derde lay-out
Vierde indeling
Wat je nodig hebt om te beginnen
Voordat we beginnen, installeer en activeer het Divi-thema en zorg ervoor dat je de laatste versie van Divi op je website hebt staan.
Nu ben je klaar om te beginnen!
4 voorbeeldlay-outs voor de contactformuliermodule van Divi met behulp van inline en volledige breedtevelden
Selecteer de vooraf gedefinieerde lay-out
Elk van de 4 sjablonen is aangepast vanuit de lay-out van de Shoe Repair Contact Page-lay-out van Lay-outpakket voor schoenreparaties, die u kunt vinden in de Divi-bibliotheek.
Voeg een nieuwe pagina toe aan uw website, geef deze een titel en selecteer vervolgens de optie Gebruik Divi Builder.
We gebruiken voor dit voorbeeld een vooraf gemaakte lay-out uit de Divi-bibliotheek, dus selecteer Door lay-outs bladeren.
Zoek en selecteer de lay-out Contactpagina schoenreparatie.
Selecteer Gebruik deze lay-out om de lay-out aan uw pagina toe te voegen.
We zijn nu klaar om onze voorbeelden te ontwerpen.
Eerste lay-out
Verplaats eerst de regel met de module Contactformulier naar het gedeelte hierboven, net onder de lijn met Blurb-modules. Vervolgens kunt u het resterende lege gedeelte verwijderen.
Open lijninstellingen en voeg linker- en rechteropvulling toe,
- Vulling (links en rechts): 15%
Selecteer responsieve opties en stel opvulling in voor mobiel.
- Vulling (links en rechts): 5%
Gewijzigde contactformulierlay-out met inline en volledige breedte velden
Voor deze lay-out maken we twee afzonderlijke velden voor voornaam en achternaam.
Open de instellingen van de module Contactformulier en wijzig het veld ID en Titel voor het veld Achternaam in Voornaam.
Voeg een nieuw veld toe onder het veld Voornaam. Stel het veld ID en Titel in op Naam.
Open in de naamveldinstellingen de lay-outinstellingen en stel Make Fullwidth in op No.
- Maak volledige breedte: NEE
Vervolgens, onder de instellingen van de Contact formulier, wijzig de volgorde van het onderwerp en de telefoon zodat de telefoon vóór het onderwerp wordt vermeld.
Open de lay-outinstellingen van het onderwerpveld en stel het veld in op volledige breedte.
- Maak volledige breedte: JA
Aanpassing van het ontwerp van het contactformulier
Laten we nu een paar instellingen wijzigen om het ontwerp te voltooien. Navigeer naar het tabblad Ontwerp van de instellingen van de module Contactformulier.
Wijzig eerst de achtergrondkleur van de knop.
- Knopachtergrond: #DBC2B3
Voeg een bovenmarge toe aan de knop.
- Knopmarge (boven): 10 px
Ga ten slotte naar randinstellingen en voeg afgeronde hoeken toe aan velden.
- Invoer afgeronde hoeken: 30px
Zie ook: Divi: Hoe voeg je een responsive logo toe aan de module "Fullwidth Menu"
Eindresultaat van voorbeeld 1
Hier is het eindresultaat op desktop en mobiel.
Tweede voorbeeld
Voor ons tweede voorbeeld verplaatsen we de Blurb-modules naar de linkerkant van de pagina en plaatsen we het contactformulier aan de rechterkant van de pagina. Verplaats Blurb-modules naar een kolom.
Wijzig de rijlay-out.
Open instellingen voor lijnontwerp en schakel uit Aangepaste gootbreedte gebruiken.
- Gebruik aangepaste gootbreedte: NEE
Voeg code toe aan de aangepaste CSS van het hoofdelement om de Blurb- en Contactformulier-modules verticaal uit te lijnen.
align-items:center;
Nu moeten we de dunne rand tussen de kolommen verwijderen. Open rij-instellingen, open vervolgens kolominstellingen 1. Ga op het tabblad Ontwerpen naar randinstellingen en verwijder de rand.
- Breedte rechterrand: 0px
Open vervolgens de instellingen voor kolom 2 en herhaal de stappen om de rand te verwijderen.
- Breedte rechterrand: 0px
Stel de tekst "Contact opnemen" in om gecentreerd te zijn.
Verplaats het contactformulier naar de rechterkolom. Verwijder de resterende lege sectie.
Gewijzigde contactformulierlay-out met inline en volledige breedte velden
Deze lay-out heeft ook twee afzonderlijke velden voor voornaam en achternaam. Open de instellingen van de module Contactformulier en wijzig het veld ID en Titel voor het veld Achternaam in Voornaam.
Voeg een nieuw veld toe onder het veld Voornaam. Stel het veld ID en Titel in op Naam.
Open in de naamveldinstellingen de lay-outinstellingen en stel Make Fullwidth in op No.
- Maak volledige breedte: NEE
Wijzig de volgorde van de telefoon- en onderwerpvelden zodat de telefoon vóór het onderwerp komt.
Open de veldinstellingen voor E-mail, Telefoon en Onderwerp en stel de lay-out in op volledige breedte.
- Maak volledige breedte: JA
Aanpassing van het ontwerp van het contactformulier
Open rij-instellingen, open vervolgens kolominstellingen 2. Stel de achtergrondkleur in.
- Achtergrond: #DBC2B3
Ga in de instellingen van kolom 2 naar het tabblad Ontwerp en voeg opvulling toe.
- Opvulling (boven, onder, links en rechts: 50px
Selecteer het mobielpictogram om responsieve instellingen te wijzigen. Opvulling voor mobiel instellen.
- Opvulling (boven, onder, links en rechts): 30px
Voeg vervolgens een vakschaduw toe aan de kolom.
Open ten slotte de instellingen van de module Contactformulier en wijzig de tekstkleur van het veld.
- Tekstkleur velden: #000000
Eindresultaat van voorbeeld 2
Hier is het eindresultaat van de tweede lay-out.
Derde voorbeeld
Voor de derde lay-out hebben we het contactformulier aan de linkerkant en de Blurb-modules aan de rechterkant. Laten we beginnen met het wijzigen van de kolomstructuur van de rij die de Blurb-modules bevat.
Verplaats de adresmodule naar de rechterkolom.
Verplaats vervolgens de tekstmodule "Contact US" naar de linkerkolom en verwijder vervolgens de resterende lege regel.
Verplaats de contactformuliermodule naar de linkerkolom, onder de tekstmodule "Contact US". Verwijder het resterende lege gedeelte.
Open de lijninstellingen, onder het tabblad Ontwerpen en schakel uit Aangepaste gootbreedte gebruiken
- Gebruik aangepaste gootbreedte: NEE
Voeg code toe aan de aangepaste CSS van het hoofdelement om de Blurb- en Contactformulier-modules verticaal uit te lijnen.
align-items:center;
Open rij-instellingen, open vervolgens kolominstellingen 1. Ga op het tabblad Ontwerpen naar randinstellingen en verwijder de rand. Herhaal de stappen om de rand van kolom 2 te verwijderen.
- Breedte rechterrand: 0px
De lay-out van het contactformulier wijzigen
We laten de veldbreedtes zoals ze zijn voor het derde ontwerp, open echter de instellingen van het contactformulier en verander de volgorde van het telefoonnummer en het onderwerpveld zodat telefoon eerst komt.
Eindresultaat van voorbeeld 3
Hier is het eindresultaat van de derde lay-out.
Lees ook: Divi: de Fullwidth Header-module op volledig scherm weergeven
Vierde voorbeeld
Voor de vierde en laatste lay-out bevindt de module Contactformulier zich aan de linkerkant en de Blurb-modules aan de rechterkant. Nogmaals, we beginnen met het wijzigen van de kolomstructuur van de rij die de Blurb-modules bevat.
Verplaats de adresmodule naar de rechterkolom.
Verplaats vervolgens de module Contactformulier naar de linkerkolom. Verwijder het resterende lege gedeelte.
Open de lijninstellingen, op het tabblad Ontwerpen en schakel uit Aangepaste gootbreedte gebruiken.
- Gebruik aangepaste gootbreedte: NEE
Voeg code toe aan de aangepaste CSS van het hoofdelement om de Blurb- en Contactformulier-modules verticaal uit te lijnen.
align-items:center;
Open rij-instellingen, open vervolgens kolominstellingen 1. Ga op het tabblad Ontwerpen naar randinstellingen en verwijder de rand.
- Breedte rechterrand: 0px
Open vervolgens de instellingen voor kolom 2 en herhaal de stappen om de rand te verwijderen.
- Breedte rechterrand: 0px
Open de instellingen van de tekstmodule voor de tekst "Contact opnemen" en centreer de tekst.
- Tekstuitlijning: gecentreerd
Gewijzigde contactformulierlay-out met inline en volledige breedte velden
Voor dit ontwerp zijn al onze velden over de volledige breedte. Open de instellingen van de contactformuliermodule en open vervolgens de instellingen voor elk veld. Selecteer op het tabblad Ontwerpen Layout en definieer Maak de volledige breedte op JA.
Nadat u elk veld met volledige breedte hebt gemaakt, zou het formulier er als volgt uit moeten zien.
Wijzig nu het veld ID en Titel voor het veld Achternaam in Voornaam.
Voeg een nieuw veld toe onder het veld Voornaam. Stel het veld ID en Titel in op Naam.
Wijzig de volgorde van de telefoon- en onderwerpvelden zodat de telefoon vóór het onderwerp komt.
Het ontwerp van de contactformuliermodule aanpassen
Stel in de module-instellingen op het tabblad Ontwerp de tekstkleur van het veld in op zwart.
- Tekstkleur velden: #000000
Open de sectie-instellingen en voeg een achtergrondkleur toe.
- Achtergrond: #DBC2B3
Voeg ten slotte een achtergrondmasker toe.
- Achtergrondmasker: Arch
- Maskertransformatie: horizontaal
Laten we de responsieve instellingen gebruiken om het achtergrondmasker beter te laten werken op mobiel.
- Maskertransformatie (telefoon): horizontaal en roterend
Eindresultaat
Hier is het eindresultaat van de vierde lay-out.
Definitieve resultaten
Laten we al onze voorbeelden nog een keer bekijken.
Eerste voorbeeld
Tweede voorbeeld
Derde voorbeeld
Vierde voorbeeld
Download DIVI nu!!!
Conclusie
Het hebben van een aantrekkelijk contactformulier kan uw conversies verhogen en uw bezoekers in staat stellen rechtstreeks met u in contact te komen.
Zoals we in dit artikel hebben gedemonstreerd, kunt u de veldopties voor inline en volledige breedte gebruiken om verschillende looks en lay-outs voor uw formulier te creëren, en met de ingebouwde ontwerpopties van Divi kunt u unieke en aantrekkelijke ontwerpen maken om het formulier te laten opvallen.
Hopelijk voegt deze techniek nog een nuttige ontwerpvaardigheid toe voor toekomstige projecten.
We hopen dat deze tutorial je zal inspireren voor je 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.
...
