GutenKit Accordion-blocket är den perfekta lösningen för att ge din publik enkel tillgång till långformat innehåll. Det lägger till en hopfällbar sektion till din WordPress-webbplats tillsammans med funktioner för att älska dragspelssektionen i både aktiva och inaktiva stadier.

I den här dokumentationen kommer vi att visa hur man skapar dragspelssektioner på Gutenbergs standardredigerare.

Hur man lägger till dragspelsblock på Gutenbergs webbplats #

För att starta processen måste du installera insticksprogrammet GutenKit. När du är klar följer du bara stegen nedan.

Steg 1: Lägg till GutenKit Accordion Block #

Från din WordPress-instrumentpanel, 

• Följ Sidor > Lägg till ny sida eller börja redigera en befintlig sida.
• För att lägga till ett nytt block klicka på "+”-ikonen överst på blockredigeringsskärmen.
• Sök efter GutenKit dragspel.
• När den visas klickar du på ikonen eller drar och släpper den.

Steg 2: Lägg till dragspelsföremål #

Öppna blockinställningarna, där du lägger till din dragspelstitel, beskrivning och ikon.

Dragspel: #

Som standard laddas dragspelsblocket med tre objekt. Klicka på valfritt objekt för att redigera titel och beskrivning text. Det finns en "Håll den här bilden öppen”-alternativet, om du aktiverar det kommer detta reglage eller objekt alltid att vara öppet för dina besökare.

Klicka vidare på "Lägg till ny”-knappen för att lägga till ett nytt dragspelsobjekt. Du kan också kopiera ett redan anpassat objekt genom att klicka på "Klona objekt"-ikonen. Och om du inte vill behålla ett föremål, tryck bara på "X" knapp.

Välj Stil: Välj önskad dragspelslayout bland 5 förgjorda stilar.

Ikon: #

• Ikon Position: Definiera placeringen av din ikon mellan vänster och höger. Eller så kan du visa ikoner på båda sidor.
• Visa loopräkning: Aktivera den här växlingsknappen för att visa antal räkningar med dragspelsobjekt. Observera att om du väljer alternativet "Båda sidor" i föregående inställning kommer denna inställning att försvinna.
• Höger/vänster ikon: Lägg till en indikatorikon så att besökare kan öppna dragspelsreglaget.
• Höger/ Vänster ikon aktiv: Visa en ikon för det aktiva dragspelsreglaget.

*Förutom att välja från ikonbiblioteket kan du också ladda upp en SVG-ikonfil från din egen enhet.

Steg 3: Style dragspelstextinnehåll #

Titel: #

• Typografi: Använd det här inställningsområdet för att tillämpa alla typografianpassningsalternativ som teckensnittsfamilj, storlek, vikt, stil, dekoration, linjehöjd, etc.

Därefter är följande alternativ tillgängliga för båda Öppen och Stängd alternativ. Det betyder att du kan anpassa titeltexten separat för aktiva och inaktiva stadier.

• Färg: Ställ in en färg för titeltexten.
• Bakgrundstyp: Välj mellan en enfärgad och en gradientbakgrund för titelbakgrunden.

• Gräns: Styr bredden, ange färg och stil för titelramen.
• Gränsradie: Definiera rubrikens rundhet.
• Box Shadow: Använd dessa kontroller för att ställa in boxskugga runt titelkanten.
• Stoppning: Justera utfyllnaden för dragspelsobjektets titel.
• Marginal Botten: Använd skjutreglaget eller lägg till ett anpassat värde för att ställa in gapet mellan dragspelsobjekt.

Beskrivning: #

• Färg: Välj din textfärg för beskrivning av dragspel.
• Typografi: Här hittar du alternativ för att ändra beskrivningstextens teckensnittsfamilj, storlek, vikt, stil, avstånd och mer.
• Bakgrundstyp: Välj en bakgrundstyp mellan enfärgad och övertoning.
• Gränsradie: Definiera rundheten för beskrivningsområdets kant.
• Stoppning: Justera det inre utrymmet i beskrivningsområdet.

Steg 3: Anpassad dragspelskant och ikon #

Gräns: #

I likhet med titelalternativet kan du också anpassa gränsen separat för båda Öppen och Stängd lägen.

• Gräns: Styr bredden, ange färg och stil för dragspelsobjektets kant.
• Gränsradie: Definiera rundheten för dragspelsobjektets kant.
• Box Shadow: Använd dessa kontroller för att få skuggeffekter runt dragspelsobjektets kant.
• Inaktivera kantlinje för sista element: Aktivera den här växlingsknappen för att inaktivera gränsen för det sista dragspelsobjektet.

Ikon: #

Nedanstående ikonstilsinställningar gäller för båda Stängd ikon och Öppna ikonen. 

• Ikonstorlek: Definiera storleken på ikoner.
• Färg: Använd färgväljaren för att lägga till färg på ikonen.
• Bakgrundstyp: Välj en bakgrundstyp mellan solid färg och övertoning.

• Gräns: Använd det här inställningsområdet för att tillämpa kantfärg, stil och bredd runt ikonen.
• Gränsradie: Denna inställning kommer att definiera ikonkantens rundhet.
• Stoppning: Justera utfyllnaden av ikonen.
• Marginal: Justera marginalen runt ikonen.

Steg 4: Avancerade inställningar #

Från fliken Avancerade inställningar kan du konfigurera dragspelsblockets layout, bakgrund, kantstilar och kontrollera dess synlighet.

Layout: #

• Marginal: Definiera utrymmet runt blocklayouten. Det hjälper till att ställa in gapet mellan ett annat block.
• Stoppning: Ange ett värde för att ställa in utrymmet runt blocket i dess layout.
• Bredd: Förutom att behålla standardlayoutbredden.
  • Full bredd: Om du väljer detta kommer layouten att sträcka sig över hela skärmens bredd.
  • Inline (Auto): Att applicera det kommer att ha samma bredd som blockelementet.
  • Beställnings: Om du väljer det här alternativet visas ett skjutreglage för att definiera det horisontella utrymmet för blocklayouten.
• Z-index: Använd skjutreglaget för att specificera stapelordningen för blocket med andra block.

Placera: #

Under rullgardinsmenyn ser du tre alternativ: Standard, Absolut, och Fast. 

• Absolut: Om du väljer det här alternativet får du en absolut position för blocket, vilket betyder att element passar in i sin behållare.
• Fast: Alternativet Fixed position låter elementet passa in i hela visningsporten eller skärmen.

Båda, Absoluta och Fixade alternativen har liknande inställningar som nedan:

• Horisontell orientering: Välj positioneringsriktning mellan vänster och höger.
• Offset: Använd skjutreglaget eller ställ in ett värde manuellt för att justera den horisontella placeringen av blocket.
• Vertikal orientering: Välj positioneringsriktning mellan uppåt eller nedåt.
• Offset: Använd skjutreglaget eller ställ in ett värde manuellt för att justera den vertikala placeringen av blocket. 

Bakgrund: #

• Bakgrund: Välj ett bakgrundsalternativ mellan enfärgad, övertoning eller bild.

Under alternativet Hover:

• Bild: Om du väljer bildalternativet öppnas följande alternativ:
  • Bild: Välj en bild från mediebiblioteket eller ladda upp din egen.
  • Bildstorleke: Välj bildstorlek mellan Thumbnail, Medium, Large eller Full.

• Placera: Välj positionen för de 10 olika alternativen.
• Anknytning: Ange den fasta eller rullande bakgrundsbildens relation med resten av webbläsarskärmen.
• Upprepa: Välj ett alternativ för att ställa in hur bakgrundsbilder ska upprepas.
• skärmstorlek: Välj en skärmstorlek från fyra olika alternativ.

• Övergångsperiod: Använd skjutreglaget för att justera bakgrundsövergången från Normal till hovringsläge.

Gräns: #

• Gräns: Under det här inställningsalternativet får du gränsinställningar som bredd, stil och färg.
• Gränsradie: Ställ in gränsens rundhet genom att ange ett värde.
• Box Shadow: Få alla inställningar som färg, horisontell/vertikal, oskärpa, spridning och mer för att ge skuggeffekter till kanten. 

Under svävningsalternativet:

• Övergångsperiod: Du kan lägga till ett värde manuellt eller använda skjutreglaget för att ställa in tiden för att ändra kantdesignen i hovringsläget.

Synlighet: #

Synlighetsmodulen låter dig styra visningen av blockdesigner beroende på enhetstyp. Det kommer att finnas tre enhetsalternativ (dator, surfplatta, mobil) med en växlingsknapp. Slå på växlingsknappen för att dölja blockdesignen för den enheten.

Du kan dock fortfarande se det i redigeringsvyn.

Avancerad: #

• Blocknamn: Ge ett namn för att identifiera detta block unikt medan du länkar eller skriptar för att stila blocket.
• HTML-ankare: Lägg till en URL för att länka en webbsida.

• Ytterligare CSS-klasser: Tilldela ytterligare CSS-klasser till blocket som låter dig stila blocket som du vill med anpassad CSS. 

OBS!: Du kan lägga till flera klasser separat med mellanslag.

Det är allt. Vi hoppas att den här guiden hjälpte dig att lära dig hur du lägger till dragspelsdesign på en WordPress-webbplats.