Hoe visueel aantrekkelijker de CTA, hoe groter de kans dat de conversieratio zal zijn. Er zijn veel manieren om uw CTA's te ontwerpen, maar in dit artikel laten we u zien hoe u verbluffende CTA-kolomsjablonen kunt maken met semi-transparante afbeeldingen en kolomoverlappingen. De semi-transparante afbeeldingen vindt u in de downloadmap hieronder, maar u kunt gerust andere afbeeldingen gebruiken. U kunt het JSON-bestand ook gratis downloaden!
Laten we gaan.
previews
Laten we, voordat we in de tutorial duiken, snel kijken hoe deze eruitziet op verschillende schermformaten.
Laten we beginnen met recreëren!
Voeg een nieuw gedeelte toe
verband
Begin met het maken van een nieuwe pagina of het toevoegen van een nieuwe reguliere sectie aan een bestaande pagina. Ga vervolgens naar het instellingengedeelte en voeg een verloopachtergrond toe.
- Achtergrond: verloop
- Kleurverloop verloop: zeer lichtgrijs #efefef
- Achtergrondkleur twee: Wit #ffffff
- Gradiënttype: Radiaal
- Radiale richting: centrum
- Startpositie: 52%
- Eindpositie: 50%
tussenruimte
Schakel over naar het tabblad Ontwerp en pas de opvulling aan in de instellingen voor afstanden.
- Vulling boven en onder
- Kantoor: 0vw
- Stoffering In Kousen
- Tablet + telefoon: 70vw
Voeg een nieuwe regel toe
Kolomstructuur
Ga door met het toevoegen van een nieuwe rij met behulp van de volgende kolomstructuur:
sizing
Pas vervolgens de breedte en maximale breedte van de lijn aan.
- Breedte: 100%
- Max breedte 100%
Voeg een tekstmodule toe
Voeg H2 en tekstuele inhoud toe
Het is tijd om modules toe te voegen! Voeg eerst een tekstmodule toe en voeg er enkele in inhoud H2 en paragrafen naar keuze.
Teksten
Schakel over naar het ontwerptabblad en geef de tekst als volgt vorm:
- Tekst lettertype: Open Sans
- Uitlijning van de tekst: midden
- Tekstkleur: Groen #5bba1b
- Tekstgrootte:
- Kantoor: 1.2vw
- Tablet: 2.8vw
- Telefoon: 3.6vw
- Afstand van tekstletters: 0.2vw
- Hoogte van de regel tekst: 1.8em
Titel 2 tekst
Na het opmaken van de alineatekst, stijl je ook de tekst H2 op.
- Sectie: H2
- H2 Lettergewicht: Doppio One
- H2 Tekstuitlijning: Midden
- Tekstkleur H2: #3d3d3d
- H2 Tekstgrootte:
- Kantoor: 4.4vw
- Tablet: 5.9vw
- Telefoon: 6.9vw
tussenruimte
En voeg een beetje vulling bovenaan toe.
- Topvulling: 212px
Voeg een deelmodule toe
zichtbaarheid
Voeg onder de tekstmodule een divisiemodule toe en zet de zichtbaarheid op "Ja".
- Zichtbaarheid: ja
lijn
Wijzig vervolgens de kleur van het scheidingsteken.
- Lijnkleur: donkergrijs #545454
sizing
Pas nu de grootte van het scheidingsteken aan zodat het kleiner lijkt.
- Gewicht separator: 4px
- Breedte: 9%
- Uitlijning van de module: midden
tussenruimte
Voeg ook een negatieve bovenmarge toe.
- Bovenmarge:
- Kantoor: -40px
- Tablet + telefoon: -15px
Voeg een nieuwe regel toe
Kolomstructuur
Ga verder door een nieuwe rij toe te voegen met drie kolommen van gelijke grootte. Dit zal de basis vormen voor het ontwerp van de CTA-kolom.
verband
Voordat u modules toevoegt, moet u een verloop toevoegen aan de achtergrond van de parameters van de lijn.
- Achtergrond: verloop
- 1 achtergrondkleurverloop: wit #ffffff
- Achtergrondkleur met kleurovergang twee: transparant
- Gradiënttype: Radiaal
- Radiaal stuurcentrum
- Startpositie: 42%
- Eindpositie: 50%
sizing
Pas nu de grootte van de lijn aan.
- Breedte: 100%
- Maximale breedte: 100%
tussenruimte
Ga vervolgens naar de afstandsinstellingen en voeg aangepaste opvulwaarden toe.
- bovenste bekleding: 22vw
- Vulling onderkant: 10vw
- Vulling links en rechts: 10vw
1 Kolominstellingen
verband
Ga verder door de 1-kolom te openen en een verloopachtergrond toe te voegen.
- Achtergrond: verloop
- Achtergrond met kleurovergang: Blauw #2a4eed
- Achtergrondkleur gradiënt twee: lichtblauw #91f5f7
- Gradient type: lineair
- Richting van de helling: 38eg
- Startpositie: 23%
grens
Definieer vervolgens de afgeronde hoeken van de kolommen in de randinstellingen.
- Afgeronde hoeken: 2vw op alle hoeken
Schaduw doos
Voeg ook een subtiele schaduw toe.
- Box Shadow: tweede optie
- Schaduw van het vak Horizontale positie: 6px
- Box Shadow Vertical Position: -10px
- Box Shadow Blur Force: 50px
overflows
Zorg ervoor dat de overlopen van de kolom ook zichtbaar zijn.
- Horizontale en verticale overloop: zichtbaar
2 Kolominstellingen
verband
Ga naar de tweede kolom en voeg de volgende gradiëntachtergrond toe:
- Achtergrond: verloop
- Achtergrondverloopkleur één: #1ba038
- Tweekleurig achtergrondverloop: #c6f727
- Gradient type: lineair
- Richting van de helling: 38eg
- Startpositie: 23%
grens
Voeg ook een randradius toe aan de kolom.
- Afgeronde hoeken: 2vw op de vier hoeken
Schaduw doos
Met een subtiele boxschaduw.
- Box Shadow: tweede optie
- Schaduw van het vak Horizontale positie: 6px
- Box Shadow Vertical Position: -10px
- Box Shadow Blur Force: 50px
Transformator
Deze kolom is iets hoger dan de andere. Om dit effect te creëren, gaan we de instellingen voor conversieconversie voor kolom 2 aanpassen.
- Transformer Vertalen:
- Kantoor: -8vw, y-as
- Tablet + telefoon: 30vw, Y-as
overflows
Maak ook de overlopen van deze kolom zichtbaar.
- Horizontale en verticale overstorten: zichtbaar
3 Kolominstellingen
verband
Laten we verder gaan naar de laatste en laatste kolom! Voeg een verloopachtergrond toe.
- Achtergrond: verloop
- Achtergrond met kleurverloop één: #f0562c
- Tweekleurig achtergrondverloop: #f1a526
- Gradient type: lineair
- Richting van de helling: 38eg
- Startpositie: 23%
grens
Schakel over naar het tabblad Ontwerpen en voeg een randstraal toe aan elke hoek.
- Afgeronde hoeken: 2vw op alle hoeken.
Schaduw doos
Voeg ook een schaduw toe.
- Box Shadow: tweede optie
- Schaduw van het vak Horizontale positie: 6px
- Box Shadow Vertical Position: -10px
- Box Shadow Blur Force: 50px
Transformator
Op kleinere schermformaten moeten we de kolom verplaatsen met aangepaste conversiewaarden.
- Transformer Vertalen:
- Tablet + telefoon: 60vw
overflows
Pas ten slotte de overloopinstellingen aan.
- Horizontale en verticale overstorten: zichtbaar
Voeg afbeeldingsmodules toe
Importeer een uitgesneden semi-transparante afbeelding
Nadat u alle kolomparameters heeft gemaakt, is het tijd om modules toe te voegen. Voeg een afbeeldingsmodule toe aan kolom 1 en upload een semi-transparante afbeelding naar keuze. U kunt de afbeeldingen die we hebben gebruikt vinden in de gecomprimeerde map die u aan het begin van dit artikel kon downloaden.
sizing
Maak de module op volledige breedte.
- Schakel over naar de volledige breedte: Ja
tussenruimte
Voeg vervolgens aangepaste marge en vulwaarden toe.
- Bovenmarge:
- Kantoor: -11vw
- Tablet + telefoon: -24vw
- Vulling links en rechts:
- Kantoor: 5vw
- Tablet + telefoon: 20vw
Verander de ladder in een hover
We voegen een subtiel zweefeffect toe aan de afbeelding met behulp van de schaaltransformatieoptie in de transformatie-instellingen.
- Transform Scale on Hover: 120% op beide assen.
Z-Index
Om ervoor te zorgen dat de afbeelding bovenaan de kolom verschijnt, verhoogt u de z-indexwaarde op het tabblad Geavanceerd.
- Z-Index: 1
Dupliceer en sleep afbeeldingsmodules
Kloon nu de afbeeldingsmodule twee keer en plaats de duplicaten in de resterende twee kolommen. Dit proces is gemakkelijker in bedrade modus.
- Begin door de afbeeldingsmodule twee keer te dupliceren
- Sleep vervolgens de nieuwe afbeeldingsmodules naar de kolommen 2 en 3.
- Download verschillende afbeeldingen
Voeg tekstmodules toe
Voeg H3-inhoud toe
Voeg onder de afbeelding in kolom 1 een tekstmodule toe en voeg er enkele in inhoud H3 naar keuze.
Titel 3 tekst
Schakel over naar het ontwerptabblad en pas een stijl toe op de H3-tekstinstellingen.
- Teksttitel: H3
- H3-lettertype: Doppio One
- H3 Lettergewicht: vetgedrukt
- H3 Uitlijning: midden
- H3 Tekstkleur: Wit #ffffff
- H3 Tekstgrootte:
- Kantoor: 1.8vw
- Tablet: 5vw
- Telefoon: 6vw
Tekstmodules dupliceren en slepen
Kloon de tekstmodule twee keer en plaats de duplicaten in de twee resterende kolommen.
- Begin met het tweemaal dupliceren van de tekstmodules.
- Sleep ze vervolgens onder de afbeeldingsmodules in de kolommen 2 en 3.
- Verander de inhoud in elke nieuwe tekstmodule
Voeg tekstmodules toe
Voeg inhoud toe
Voeg onder de titelmodule een nieuwe tekstmodule toe. Voeg alinea-inhoud toe in het inhoudsgebied.
Teksten
Stijl de tekst nu als volgt op.
- Tekst lettertype: Open Sans
- Tekstkleur: Wit #ffffff
- Tekstgrootte:
- Kantoor: 0.6vw
- Tablet: 2vw
- Telefoon: 2.8vw
- Hoogte van de regel tekst: 2.2em
tussenruimte
Om de tekst te centreren, past u de afstand van de module als volgt aan.
- Onderste marge:
- Kantoor: 5vw
- Tablet + telefoon: 10vw
- Opvulling links en rechts
- Kantoor: 5vw
- Tablet + telefoon: 14vw
Tekstmodules dupliceren en slepen
Kloon de tekstmodule tweemaal en sleep de duplicaten naar de resterende twee kolommen.
- Begin met het tweemaal dupliceren van de tekstmodules
- Plaats vervolgens de duplicaten in kolommen 2 en 3
- Wijzig de inhoud van elk duplicaat
Knopmodules toevoegen
Voeg inhoud toe
Laten we naar de laatste module gaan! Voeg een knopmodule toe aan de 1-kolom met een exemplaar naar keuze.
Voeg een link toe
Voeg een link in de linkopties van de module in.
alignement
Lijn nu de knopmodule uit.
- Uitlijning: midden
Knopstijlen
Roep vervolgens de knop als volgt aan.
- Grootte van de knoptekst:
- Kantoor: 1vw
- Tablet: 2vw
- Telefoon: 3vw
- Tekstkleur knop: helderblauw #2a4eed
- Knop Achtergrondkleur: Wit #ffffff
- Straal van de rand van de knop: 50vw
- Knoplettertype: Double One
- Lettergewicht: vetgedrukt
- De kleur van de knoppen: Bright Blue #2a4eed
tussenruimte
Vorm de knop en creëer een overlap aan de onderkant door aangepaste marge- en opvulwaarden toe te voegen in de afstandsinstellingen.
- Onderste marge:
- Kantoor: -1.7vw
- Tablet: -4vw
- Telefoon: -6vw
- Bekleding boven en onder:
- Kantoor: 1vw
- Tablet + telefoon: 3vw
- Opvulling links en rechts
- Kantoor: 4vw
- Tablet + telefoon: 10vw
Schaduw doos
Last but not least, voeg een subtiele box-schaduw toe aan de knop.
- Box schaduw: eerste optie
- Schaduw van de horizontale positie van het vak: 0px
- Schaduw van de verticale positie van het vak: 2px
- Box Shadow Blur Force: 50px
Modules voor dupliceren en slepen
Net als bij eerdere modules, kloon je de knop twee keer en plaats je de duplicaten in de resterende twee kolommen van de regel.
- Kloon de knopmodule twee keer
- Plaats de duplicaten in kolommen 2 en 3
Knop 2 Pictogramtekst en kleur
Wijzig de pictogramkleur van de knop en de knopmodule in kolom 2.
- Tekstkleur knop: Groen # 1ba038
- Icoonkleur: # 1ba038
Knop 3 Pictogramtekst en kleur
Doe hetzelfde met de knop in de laatste kolom en je bent klaar!
- Kleur van de tekst van de knoppen: Oranje #f0562c
- Pictogramkleur: # f0562c
Om te eindigen
In dit artikel hebben we u laten zien hoe u semi-transparante afbeeldingen kunt gebruiken om een verbluffend CTA-kolomontwerp te maken. We hebben instellingen voor kolomoverloop gebruikt Divi zodat afbeeldingen en knoppen naadloos overlappen. Probeer dit ontwerp in uw volgende project te gebruiken Divi en laat ons weten hoe het gaat in de comments!
