Wil je weten hoe je de Icon-module van Divi om aangepaste pictogrammen te maken?
Pictogramknoppen zijn een nietje geworden in de wereld van webdesign. Pictogrammen bieden beknopte visuele oproepen tot actie die uitstekend werken voor mobiele apparaten omdat ze niet veel ruimte in beslag nemen. Ze werken ook goed als schakel- of pop-upknoppen die gebruikers intuïtief herkennen zonder dat er tekst nodig is.
In de tutorial van vandaag laten we je zien hoe je pictogramknoppen kunt ontwerpen met Divi. Maak een pictogramknop in Divi is vrij eenvoudig en leuk om te doen.
Met behulp van de Pictogrammen-module kunnen we kiezen uit honderden pictogrammen en talloze ingebouwde ontwerpopties gebruiken Divi Builder om vrijwel elk type pictogramknop te maken dat u maar kunt bedenken.
We hopen dat dit artikel je helpt om geweldige pictogramknoppen te maken voor je volgende project.
Laten we beginnen!
overzicht
Hier is een kort overzicht van de pictogramknoppen die we in deze zelfstudie gaan maken.
Maak een nieuwe pagina met Divi Builder
Zie ook: Divi: het winkelmandje en de zoekpictogrammen van de module "Fullwidth Menu" aanpassen
Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een nieuwe pagina te maken.
Geef het een titel die voor jou logisch is en klik op Gebruik Divi Builder
klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Maak pictogramknoppen met de Divi Icons-module
Deel 1: Een pictogramknop maken
Laten we om te beginnen een rij met één kolom toevoegen aan de standaard reguliere sectie.
Voeg dan een nieuwe module toe icon naar de kolom.
Pictogram, link-URL en achtergrondkleur
Onder het tabblad Content icon module-instellingen, update het volgende:
- Icoon: Pijl naar rechts (zie screenshot)
- Icon Link-URL: # (voor nu slechts een aanvulling)
- Achtergrond: #3e22ff
Rand en grensradius
Onder het tabblad Design, werk het volgende bij:
- Afgeronde hoeken: 10px
- Randbreedte: 2px
- Randkleur: #7272ff
Schaduw doos
- Box Shadow: Zie screenshot
- Schaduwkleur: rgba(62,34,255,0.48)
Overeenkomende klikbare ruimte met de grootte van de pictogramknop
Momenteel beslaat de pictogrammodule de volledige breedte van de bovenliggende container (of kolom). Dit betekent dat de klikbare ruimte groter is dan de daadwerkelijke pictogramknop.
Om de klikbare ruimte af te stemmen op de grootte van de pictogramknop, kunnen we de module een maximale breedte geven die gelijk is aan de breedte van de pictogramknop.
In dit voorbeeld is de totale breedte van de knop 94 pixels.
Voeg op het tabblad Geavanceerd de volgende aangepaste CSS toe aan het hoofdelement:
max-width: 94px
Hier is het resultaat.
Deel 2: Maak een vierkante pictogramknop
Om onze vierkante pictogramknop te maken, dupliceert u de rij met de eerste pictogramknop die we zojuist hebben gemaakt. Dit geeft ons een dubbele knop in de rij om mee te werken.
Geef het pictogram dezelfde hoogte en breedte terwijl het gecentreerd blijft
De grote verzameling pictogrammen die in de Icon-module kunnen worden gebruikt, omvat zowel Divi-pictogrammen als Fontawesome-pictogrammen. Niet alle pictogrammen hebben echter dezelfde hoogte en breedte. Dit maakt het wat lastiger om de exacte breedte en hoogte van de icoonknop te bepalen.
Om een perfect vierkante knop te maken die het pictogram bij de muisaanwijzer activeert, kunnen we aangepaste CSS toevoegen om een hoogte en breedte voor het pictogram in te stellen en het pictogram te centreren met behulp van de CSS Flex-eigenschap.
Hier is hoe.
Open eerst de dubbele pictograminstellingen. Werk het pictogram vervolgens bij met een nieuwe uit de pictogramkiezer.
Verwijder de opvulling van de pictogrammodule. Dit is niet nodig omdat we een hoogte en een breedte voor het pictogram gaan instellen.
Voeg op het tabblad Geavanceerd de volgende aangepaste CSS toe aan: Pictogramelement :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Nu heeft de pictogramknop een hoogte en breedte van 90 pixels, waardoor het een perfect vierkant is. Ook lijnt de flex-eigenschap het pictogram in het midden van de module uit. Hiermee kunt u eenvoudig de pictogramgrootte in de pictogrammodule bijwerken.
Om deze knop te voltooien, geven we hem als volgt een achtergrondverloop en een witte randkleur:
- Gradiëntstops:
- 0%: #3e22ff
- 100%: #ff2000
- Randkleur: #fff
Hier is het eindresultaat.
Ronde pictogramknop maken
Zodra de pictogramknop een perfect vierkant is, is het eenvoudig cirkelvormig te maken. Maar voordat we u deze eenvoudige truc laten zien, laten we de vorige regel dupliceren om onze ronde pictogramknop te bouwen.
Open nu de instellingen voor ons nieuwe duplicaatpictogram en onder het tabblad Design, werk de randradius (of afgeronde hoeken) als volgt bij:
- Afgeronde hoeken: 50%
En zo hebben we een ronde pictogramknop!
Om het ontwerp een beetje te veranderen, geven we de pictogrammodule als volgt een ander pictogram en een andere achtergrondkleur:
- Icoon: zie screenshot
- Achtergrond: #121212
Hier is het resultaat.
Maak een pictogramknop horizontaal menu
Een populaire trend is het gebruik van pictogrammen om een pictogrammenu te maken dat meestal bestaat uit meerdere naast elkaar geplaatste knoppen. Hiervoor kunnen we de eigenschap flex gebruiken.
Hier is hoe het te doen.
Voeg eerst een nieuwe rij toe aan een kolom op de pagina.
Open de lijninstellingen en werk de gootbreedte bij naar 1.
- Gootbreedte: 1
Open vervolgens de kolominstellingen in de rij en voeg de volgende aangepaste CSS toe aan het hoofdkolomelement:
display:flex;
align-items:center;
Een nieuwe module toevoegen icon naar de kolom.
Onder het tabblad Content pictograminstellingen, selecteer een pictogram en voeg de URL van de pictogramlink toe.
Onder het tabblad Design, werk het volgende bij:
- Pictogramkleur: #3e22ff
- Pictogramgrootte: 40px
- Marge (links en rechts): 10px
- Randbreedte: 2px
- Randkleur: #3e22ff
OPMERKING : De marge zal ruimte creëren tussen aangrenzende knoppen zodra we er later meer toevoegen.
Onder het tabblad Geavanceerd, voeg de volgende aangepaste CSS toe in het veld: Pictogramelement (zoals we eerder deden voor de vierkante pictogramknop):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Wanneer we nu nieuwe pictogramknoppen toevoegen, verschijnen ze naast elkaar. Om dit te illustreren, laten we de bestaande pictogramknop drie keer dupliceren om in totaal vier pictogramknoppen in het horizontale menu te maken.
Daarna kunnen we teruggaan en de pictogrammen bijwerken als dat nodig is.
Hier is het resultaat.
Zweefeffecten toegevoegd aan pictogramknop
Het is moeilijk om over het ontwerp van pictogramknoppen te praten zonder zweefeffecten te noemen. Ze zijn gewoon te leuk om te negeren.
Achtergrondkleur en pictogramkleur wijzigen bij zweven
Het veranderen van knopkleuren is een populair en effectief zweefeffect. We kunnen bijvoorbeeld de achtergrondkleur en de pictogramkleur tegelijkertijd wijzigen wanneer de gebruiker de muisaanwijzer over de knop beweegt.
Open hiervoor de instellingen van de pictogrammodule en schakel de zweefopties voor de achtergrondkleur in en kies een andere kleur voor de zweefstatus. Vervolgens kunt u hetzelfde doen voor het pictogram.
In dit voorbeeld veranderen we de achtergrondkleur van wit in blauw en het icoon van blauw in wit.
Pictogram wijzigen bij zweven
Een ander hover-effect dat u misschien leuk vindt, is om het pictogram volledig te wijzigen. Om dit te doen, kunt u een ander pictogram kiezen voor de zweefstatus wanneer u een pictogram kiest in de pictograminstellingen.
Pictogram knop schaal bij zweven
Een moeilijk te negeren hover-effect is het hover-effect op schaal. Dit vergroot of vergroot de pictogramknop. De beste manier om dit type zweefeffect toe te voegen, is door de transformatie-opties van Divi te gebruiken. Hierdoor kan de knop groeien zonder de elementen eromheen te beïnvloeden.
Om een schaalzweefeffect toe te voegen aan de pictogramknop, opent u de pictograminstellingen en onder het tabblad van Design, zoek naar transformatie-opties. Schakel hover-opties in en wijs vervolgens de volgende transformatieschaal toe aan de hover-status:
- Transformeer Y: 118%
- Transformeer X: 118%
Hierdoor wordt de pictogramknop met 18% groter wanneer de gebruiker eroverheen beweegt.
Pictogramknop draaien bij zweven
Het roteren van zwevende objecten is altijd een leuke micro-interactie. Om een pictogramknop tijdens de hover te draaien, kunnen we de optie Transformeren roteren gebruiken. Maar laten we eerst de knop rond maken, zodat alleen het pictogram lijkt te draaien.
Om het pictogram rond te maken, aangenomen dat de knop een vierkant is, werkt u eenvoudig de instelling voor afgeronde hoeken bij naar 50% op alle vier de hoeken.
Werk vervolgens de transformatieopties bij om de volgende transformatierotatiewaarde op te nemen in de zweefstatus:
- Transformeren Roteren Z: 180deg
Laten we eens kijken naar onze 4 hover-effecten in actie.
Eindresultaat
Laten we eens kijken naar de eindresultaten van onze tutorial.
Lees ook: Divi: Hoe een "Blurb"-module te markeren tijdens het zweven en de andere te vervagen
Dit zijn onze drie pictogramknoppen (standaard, vierkant en rond).
En hier is het horizontale pictogramknopmenu met zweefeffecten.
Download DIVI nu!!!
Conclusie
Weet hoe u pictogramknoppen ontwerpt voor a Site web is essentieel. En, zoals we in deze tutorial hebben gezien, is het niet zo moeilijk met Divi. Divi's Icon Module heeft een heleboel ingebouwde opties die de deur openen naar creatieve ontwerpen van pictogramknoppen.
Hopelijk helpen de technieken in dit artikel je om een deel van de magie van je eigen pictogramknopontwerpen te ontgrendelen.
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, raadpleeg onze gids op 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.
...
