Icons uit Elementor Library kun je elke kleur en hover geven. Inclusief rand of achtergrond, rond / vierkant. Voor extra icon libraries gebruik plugin, custom icons, bijv. Skyboot. Icon library: pngs for free, svgs 15$ p/m https://icons8.com/icons
Skyboot icons
Aparte plugin nodig. Als je toch meer gebruikt uit plugin Happy Addons kun e ook de icons uit die plugin gebruiken.
Skyboot: icofont
Skyboot: icomoon
Skyboot: thimify icons
Skyboot: ionicons
Happy Addons icons
Eigen icons uploaden
Je kunt je eigen svg icons maken en uploaden in wordpress. icoon uploaden in image library.
Icon als image. je kun het formaat, transparancy, rand aanpassen in de images box
icoon toegevoed als ‘image’ Opties:
Edit opties (zoals bij alle images: grootte, css filters (blur, transparantie, contrast, kleurverzadiging)
Icoon toegevoegd al ‘icon’ opties:
Edit opties: Kleur, hover kleur, rand, backgroundcolor, grootte
Je svg images moeten zwartwit of gray wit zijn. alle andere opties kunnen niet worden bewerkt in kleur en hoverkleur.
svg in grijstinten : geef verschillen weer mbv opacity
Selecteer een grijs vlak.
Zet de kleur op zwart (
#000000).Stel de dekking (opacity) in op de gewenste waarde
Herhaal dit voor alle vlakken.
Exporteer naar SVG.
SVG icons as images (voor aanpassingen grootte gebruik jpegs of pngs. svg zijn er niet gevoelig voor. verder aanpassen: transparantie, helderheid / contrast, kleurtint, rand, afgeronde hoeken, shadow
SVG icons as icons. je kunt grootte aanpassen en rotation. achtergrondkleur, rand.
SVG icons zwart wit. alle parameters aanpasbaar
SVG icons as pngs. Not scalable like pngs. So check original format.
png origineel formaat. 50px
png aangepaste breedte
png origineel formaat 100px
Stap voor stap; hoe maak je SVG's geschikt voor elementor (zodat ook size en color style functies werken.
Illustrator of download online
Bijvoorbeeld van https://www.iconfinder.com.
Export instellingen Illustrator:
– styling: presentation attribues
– font: convert to outlines
– Images:embed
– Object: uitbreiden
– Decimal: 2
Open with code
Gebruik hiervoor:
https://code.visualstudio.com/
Gebruik Alt Z om alle code onder elkaar te zien.
Copieer alle code, en paste deze in SVGOMG
https://svgomg.net/
Open svgomg.net en plak je code.
Laat alle default instellingen staan. inclusief:
- multipass
- precesion (zo laag mogelijk)
- slyle to attributes
- remove rastered images
- prefer viewbox to width height
- remove style elements
- remove script elements
Final clean up in Visual Studio Code
Eenmaal de nieuwe code gekopieerd van svgomg naar visual studio kun je zien dat de formaten er al uit zijn gehaald. N nog de kleuren. Typ boven in het zoekvenster # of FILL en je ziet waar nog kleurcodes zijn; delete deze of vervang met ‘currencolor’
save de file en gebruik in Elementor
Maak je SVG in Illistrator. Open daarna voor cleanup in: https://svgomg.net/
Om geen ruimte om je svg over te houden ga naar: https://svgcrop.com/
let op ruimte om SVG
ruimte om SVG weggehaald mbv https://svgcrop.com/
ook in elementor zelf kun je nog extra ruimte om de icoon weghalen: stijl – op maat gemaakt
SVG code cleanup op: https://svgomg.net/
ruimte om SVG weggehaald mbv https://svgcrop.com/
vorm zonder weghalen ruimte en in kleur; werkt niet
SVG met alleen grijstonen; werkt niet voor kleur
SVG met grijstonen als opacity black. wordt gerasterd, werkt niet. voorlopig alls svg’s zwart
SVG lijnen, verkleurd wel
SVG lijnen, ipv vlakken, werkt niet, geen verkleuring. lijnen omzetten in vlakken: Illustrator – Object – Uitbreiden.
SVG kleuren
Sommige svg’s kan ik in elementor wel een andere kleur kan geven als ik ze inlaad en ander niet, die blijven zwart. Dit is een veelvoorkomend iets als je vanuit Illustrator SVG’s maakt en ze daarna in Elementor (of een andere builder) wilt aanpassen qua kleur. Wat hier gebeurt, hangt vooral af van hoe je de vormen en lijnen in Illustrator hebt opgebouwd en hoe Illustrator de SVG exporteert.
Gebruik géén vaste kleuren in je SVG
Als je in Illustrator bijvoorbeeld een vlak of lijn een vaste kleur geeft (bijvoorbeeld zwart #000000) en die kleur direct in het SVG-bestand wordt geschreven, dan kan Elementor die kleur vaak niet “overschrijven” omdat het “inline” in de SVG-code staat.
Oplossing: Zet in Illustrator je kleuren op “none” (geen kleur) of gebruik in het exportproces de optie om styling “presentational attributes” te gebruiken (dit maakt het makkelijker voor Elementor).
Werk met eenvoudige vormen
Zet alle paden om naar echte paden. Dus: geen groepslagen, geen symbolen, geen effecten zoals schaduwen. Gebruik in Illustrator de optie Object > Expand Appearance om alles om te zetten naar pure paden.
Gebruik strokes en fills correct
Als je wilt dat je in Elementor zowel de lijn (stroke) als het vlak (fill) apart kunt kleuren, zorg dan dat je in Illustrator écht strokes gebruikt (geen lijnen die zijn omgezet naar dichte paden).
Zorg dat het een gewoon pad is:
Ga naar Object > Uitbreiden → vink Stroke en Fill aan → OK.
Illustrator zet de vorm om naar “pure paden” (échte vectorlijnen). De originele instellingen zoals “dit is een lijn van 2pt dik zwart” worden vervangen door een gevuld pad dat eruitziet als een lijn.
De vormen moeten zwart zijn. Om te veel ruimte om de SVG te vermijden moet je in Illustrator het werkveld om de svg heen sluiten. (Object – tekengebieden)
Gebruik de juiste instellingen Bij Bestand Exporteren
Zo voorkom je dat kleuren “hard” worden vastgezet in de SVG-code:
- Beperk opties: Geen illustrator-specifieke data toevoegen.
Responsive: AAN
CSS Properties: Presentation Attributes
SVG 1.1 (of 1.2) is de beste keuze voor de meeste moderne toepassingen (zoals in Elementor).
Dit kun je meestal gewoon op UTF-8 laten staan (standaardinstelling).
- Aantal Decimalen:
Meestal stel je dit in op 2 of 3 decimalen. Dit zorgt voor een goede balans tussen bestandsgrootte en nauwkeurigheid. Meer decimalen zorgen voor een grotere bestandsgrootte, zonder dat je echt winst in kwaliteit ziet.
Samenvatting
Zorg dat alles uit losse paden bestaat.
Geen vaste kleuren meegeven in Illustrator.
Export-instelling: Presentation Attributes kiezen.
Let op gebruik van strokes (lijnen) en fills (vlakken).
Eventueel stroke-diktes licht houden zodat Elementor daar flexibeler mee omgaat.
Multi Color SVG's
SVG’s met meerdere kleuren bewerken kan ook maar is iets complexer. Ipv alle kleur info uit de code te deleten vervang je de kleuren (in de code van Visual Studio) met de blocksy var theme colors of de elementor color codes:
https://webinfo.maydiya.nl/wp-content/uploads/leaves1-01.svg
Leaves1-01. Als losse icoon in container
Complexe SVG. werkt niet altijd goed, veel extra werk in css. in sommige gevallen liever png.
Leaves1-01. Als achtergrond. Zie css hiernaast
/* svg achtergrond container3 */
.svg-bg-container1 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.svg-bg-container1::before {
content: “”;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: url(‘https://webinfo.maydiya.nl/wp-content/uploads/leaves1-01.svg’) no-repeat bottom left;
background-size: cover;
transform: rotate(0deg); /* pas dit aan voor draaiing */
opacity: 1; /* transparantie */
z-index: 0;
}
