Het hamburgermenupictogram is een essentieel element voor mobiele navigatie op moderne websites. Maar het standaardpictogram van Divi mist persoonlijkheid. Met SVG-afbeeldingen kunt u de schakelaar van uw hamburgermenu eenvoudig aanpassen met een mooi geanimeerd pictogram dat bij uw merk past.
Een aangepaste SVG-hamburgeranimatie kan wonderen doen voor differentiatie. Uw bezoekers zullen het extra vleugje creativiteit waarderen wanneer ze door het menu van uw site bladeren op telefoons en tablets. Het aangepaste pictogram communiceert onmiddellijk de stijl van uw merk.
In deze zelfstudie laat ik zien hoe u een aangepast geanimeerd SVG-hamburgerpictogram in Divi uploadt en implementeert. In slechts een paar eenvoudige stappen kunt u een unieke geanimeerde hamburgermenuschakelaar implementeren die uw algehele website-ervaring naar een hoger niveau tilt. Laten we beginnen!
Divi Mobile- en SVG-hamburgerpictogrammen
Door u te voorzien van de beste en meest gevraagde functies, ontwikkelt Divi Mobile zich voortdurend om u te helpen geweldige Divi-websites te maken. De optie om SVG-hamburgerpictogrammen toe te voegen is zo'n veelgevraagde functie, en met Divi Mobile v1.6.4+ kunt u nu SVG-code rechtstreeks vanuit de Divi-thema-aanpasser uploaden.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nuWaarom SVG-code gebruiken? omdat u klassen kunt toepassen op de verschillende paden in de SVG-code om elk aspect van uw SVG-afbeelding met CSS te wijzigen.
In deze zelfstudie gebruiken en wijzigen we een fragment dat we online hebben gevonden om Divi-hamburgermenu's met SVG-pictogrammen te maken en deze compatibel te maken met Divi Mobile.
Laten we aan de slag gaan, omdat dit vereist dat we enkele klassen in de huidige code toevoegen en mogelijk bijwerken.
De SVG-pictogramcode toevoegen
Dit is heel eenvoudig, omdat we alleen maar de HTML-code van de openende en sluitende svg>-elementen hoeven te kopiëren om de SVG-code uit onze voorbeeldcode hierboven te genereren. Daarna gaan we verder met het toevoegen aan de instellingen van Divi Mobile.
Laten we beginnen met het openen van de code-editor en het kopiëren van de code van het HTML-tabblad.
Door naar de Divi Mobile-instellingen in de Divi-thema-aanpasser te navigeren, kunnen we deze SVG-code toevoegen aan ons Divi-hamburgermenu.
Ga naar de Burger Menu-pagina door naar Divi > Thema-aanpasser > Divi Mobile te gaan.
Divi Mobiele instellingen
- Burgermenustijl: aangepaste SVG-code
- Aangepaste SVG-pictogramcode: plak hier de gekopieerde SVG-code
Sla het nu op en publiceer het.
En uw pictogram zou lijken op de vreemde wirwar die hieronder wordt weergegeven als u de SVG-code zou gebruiken die we hebben gekozen. Dit komt door de manier waarop deze code is geschreven en niet door de manier waarop Divi Mobile het pictogram weergeeft. Maar maak je geen zorgen, we zullen dit in de volgende stap behandelen.
Om dit op te lossen, voegt u de volgende SVG-code toe.
<svg width="100" height="100" viewBox="0 0 100 100"> // Increase the size with the width and height property
<path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
<path class="line line2" d="M 20,50 H 80" />
<path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
</svg>Je zult zien dat er klassen zijn gegeven aan de paden in deze SVG-code, maar dat is niet altijd het geval. Om elk pad met CSS-code te kunnen wijzigen, moet je af en toe klassen toevoegen zoals line, line 1, line 2 en line 3. En nee, we hebben het niet op die manier over je giftige ex; we hebben het eerder over het animeren van de paden om hippe geanimeerde hamburgermenupictogrammen te produceren.
Nu hoeven we alleen nog maar de CSS-code over te zetten naar onze Divi-website.
Animatie CSS-code
We moeten wat CSS toevoegen, wat verstandig in het voorbeeld werd gegeven, om de zaken een beetje op één lijn te brengen en onze pictogrambeweging toe te voegen. Eerst voegen we de gewijzigde CSS toe, en in het laatste deel van deze Divi-tutorial bespreken we de aanpassingen die we hebben aangebracht om alles harmonieus te laten samenwerken.
Er zijn drie manieren waarop we onze CSS kunnen toevoegen, en deze zijn als volgt:
Divi-thema-opties
Navigeer eenvoudigweg naar Divi > Themaopties vanuit het WordPress Dashboard en plaats vervolgens de CSS-code in het vak Aangepaste CSS. Hierdoor kan de CSS tijdens uw Divi-installatie worden gebruikt.
Thema-aanpasser
Navigeer eenvoudigweg naar Divi > Thema-aanpasser of Uiterlijk > Aanpassen vanuit het WordPress Dashboard en plaats vervolgens de CSS-code in het vak Aangepaste CSS. Vergelijkbaar met hoe het de CSS toegankelijk maakt vanaf elke plek in uw Divi-installatie.
Codemodule
Voeg eenvoudigweg een codemodule toe, open enkele openings- en sluitingsscripttags en plak de CSS-code op de pagina die we eerder hebben gemaakt. Hierdoor wordt de CSS beperkt tot alleen toegang op die pagina.
We moeten voor deze les techniek 1 of 2 gebruiken, omdat het hamburgermenu globaal is. De CSS-code uit onze voorbeeldcode van hierboven kan nu worden gekopieerd. Alleen de CSS voor onze SVG-pictogramklassen, regel, regel 1, regel 2 en regel 3, die we al kennen, is vereist.
Je ziet ook een geopende klasse, waarin wordt beschreven hoe het pictogram verschijnt nadat erop is geklikt. Maak je er nog geen zorgen over; wij zorgen ervoor als we de code voor Divi Mobile wijzigen.
Ga naar Divi > Thema-opties vanuit het Divi-dashboard nadat u onze CSS hebt gekopieerd.
Divi-thema-opties
Hier is de code die u moet plakken.
.divi-mobile-menu .line {
fill: none !important; /* overwrite Divi Mobile setting to add color to the path */
stroke: black; /* Change this color for the icon */
stroke-width: 6; /* Increase the line thickness */
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.divi-mobile-menu .line1 {
stroke-dasharray: 60 207;
stroke-width: 6; /* Increase the line thickness */
}
.divi-mobile-menu .line2 {
stroke-dasharray: 60 60;
stroke-width: 6; /* Increase the line thickness */
}
.divi-mobile-menu .line3 {
stroke-dasharray: 60 207;
stroke-width: 6; /* Increase the line thickness */
}
.show-menu .divi-mobile-menu .line1 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6; /* Increase the line thickness */
}
.show-menu .divi-mobile-menu .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
stroke-width: 6; /* Increase the line thickness */
}
.show-menu .divi-mobile-menu .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6; /* Increase the line thickness */
}De CSS compatibel maken met Divi Mobile
U bent op de juiste plek als u niet voor de makkelijke weg kiest en extra codefragmenten voor uw SVG-pictogrammen wilt aanpassen, omdat we snel alles zullen doornemen wat we moesten veranderen om dit probleemloos te laten werken met Divi Mobile.
In onderstaande tabel kunt u het fragment vergelijken met de aangepaste code die geschikt is voor Divi Mobile. Eigenlijk hoeven we slechts 3 aanpassingen door te voeren.
Methode voor het vullen van pictogrammen: we moeten toevoegen omdat deze CSS het pictogram weergeeft met een lijn in plaats van met een vulling. Het is van cruciaal belang dat we de Divi Mobile CSS op regel 2 van deze code overschrijven.
Specificiteit verhogen: Om problemen te voorkomen, moeten we de specificiteit van de CSS verbeteren, omdat deze verschillende vrij algemeen gebruikte klassennamen gebruikt. Om dit te doen, krijgt elke lijnklasse de klasse.divi-mobile-menu, die het hamburgerpictogram omringt. Probeer deze klasse toe te voegen vóór klassen die zich mogelijk in de gekopieerde CSS bevinden als u problemen ondervindt met een ander fragment.
Wijzig de aangeklikte statusklasse: de klasse.opened, die aan het pictogram wordt toegevoegd wanneer op het hamburgerpictogram wordt geklikt, wordt gebruikt op de regels 20, 25 en 30. Dit geeft CSS-ninja's zoals jij de mogelijkheid om het uiterlijk van het hamburgerpictogram te wijzigen wanneer dit gebeurt komt voor. Een probleem is dat Divi Mobile deze klassenaam niet gebruikt, maar dit is eenvoudig op te lossen. Vervang eenvoudigweg de klasse.show-menu door degene die de andere ontwikkelaar gebruikte om de aangeklikte status van het hamburgerpictogram weer te geven.
Dit einde van de weg is hier!
Afsluiten
En dat is het! Met slechts een paar eenvoudige stappen heeft u met succes een aangepast geanimeerd SVG-hamburgerpictogram in uw Divi-website geïmplementeerd. Deze kleine aanpassing kan een grote bijdrage leveren aan het verbeteren van uw mobiele navigatie-ervaring. Uw nieuwe pictogram communiceert onmiddellijk de persoonlijkheid van uw merk en zorgt voor een overzichtelijke menuschakeling.
Terwijl u de rest van uw Divi-website uitbreidt, zoekt u naar andere gebieden waar u aangepaste SVG-afbeeldingen en -animaties kunt opnemen. Met een bibliotheek met SVG-afbeeldingen tot uw beschikking zijn de mogelijkheden voor unieke illustraties en geanimeerde interacties werkelijk eindeloos. Uw bezoekers zullen deze subtiele, merkaccenten waarderen terwijl ze uw inhoud verkennen.
