Elementor är den mest använda och mest anpassningsbara sidbyggaren för WordPress. Det finns dock vissa saker som användarna inte hittar ett direkt alternativ för att ändra vid någon tidpunkt.
Till exempel är innehållet i dragspelswidgeten öppet som standard. Många vill att den ska vara stängd, men de hittar inte alternativet för att stänga den.
Så, hur håller du dragspelet stängt som standard i Elementor?
För att hålla dragspelsobjekt stängda som standard i Elementor, gå till dragspelswidgetens Fliken Innehåll >> Interaktion. Använd “Standardtillstånd” >> “Alla kollapsade”-alternativet, sedan Publicera.
Så här ger jag 3 enkla metoder för hålla dragspelet stängt som standard i Elementor.
Så låt oss komma igång!
Tillförlitliga sätt att hålla dragspelsföremål stängda eller hopvikta
Vid användning av Elementor:s widget för dragspel, den “första punkten”, eller “första bilden”, i dragspelet är öppet som standard. Och sammanhanget är läsbart. Men detta kanske inte är din preferens.
Som vi har lärt oss tillhandahåller Elementor inte några inställningar för att stänga eller kollapsa dragspelsbilden som standard.
Men oroa dig inte, för det var de gamla dagarna. Nu kan du stänga eller öppna dragspelet som du vill. Elementor tillhandahåller nu en inbyggd inställning.
Efter att ha försökt och testat hittade jag också ytterligare två enkla metoder.
Du kan stänga eller öppna dragspelet med hjälp av de 3 metoderna nedan.
- Metod 1: Använd Elementor: s inställningar (gratis metod)
- Metod 2: Använda en enkel CSS-kod (kräver Elementor PRO)
- Metod 3: Använda JavaScript-kod (för avancerade användare men gratis)
Metod 1: Använd Elementor:s inställningar
Detta är den enklaste lösningen för att hålla Dragspelsobjekt stängt eller hopfällt. Den är tillgänglig från Elementor:s inbyggda inställningar. Det är också en kodningsfri nybörjarmetod. Detta är för gratisanvändare av Elementor.
Låt oss komma igång genom att följa stegen här:
- Öppna din sida i Elementor-redigeraren, där du har dragspelssektionen.
- Välj ett objekt i dragspelswidgeten.
- I det vänstra sidofältet går du till Fliken Innehåll >> Interaktion.
- Ställ in standardtillståndet till Alla kollapsade.
- Publicera ...nu.
Och det är allt!
Tips: Ställ in Max Items Expanded till 1 (valfritt). Det rekommenderas starkt för en renare användarupplevelse. Anpassa gärna animationshastigheten och ikonstilarna så att de passar din design.
Nu, den stora frågan! Fungerar detta med gratisversionen av Elementor?
Ja, det gör det! Så länge du använder den senaste versionen. Den här funktionen är tillgänglig i Elementor Free.
Metod 2: Använda en enkel CSS-kod (kräver Elementor PRO)
Om du arbetar med äldre webbplatser eller mallar där den inbyggda växlingen inte är tillgänglig (före uppdatering), erbjuder CSS en snabb lösning utan omdesign. Så du kan följa den här metoden för att hålla Dragspelsobjekt stängt eller kollapsad. Detta gäller dock endast för Elementor Pro-användare.
- Öppna din sida i Elementor-redigeraren, där du har dragspelssektionen.
- Välj widgeten för dragspel.
- I det vänstra sidofältet går du till Fliken Innehåll >> Layout.
- Duplicera det allra första dragspelsobjektet (Observera - duplicera det första objektet, inte hela widgeten).
- Kopiera någon av de nedan angivna CSS-koderna
.elementor-accordion .elementor-accordion-item:first-of-type {
display: ingen;}
.elementor-ackord {
border-top: 1px solid #D4DFF2C7;
}- Gå till fliken Avancerat i dragspelswidgeten.
- Bläddra sedan nedåt och klistra in CSS-koden i fältet Custom CSS.
- Nu, publicera sidan.
Efter att ha uppdaterat sidan genom att klistra in CSS, kommer den första duplicerat dragspelsobjekt kommer att döljas, medan de återstående objekten kommer att kollapsas som standard, precis som du ville.
Metod 3: Använda JavaScript-kod
Om du missade den första metoden på grund av versionsproblem och den andra metoden på grund av att du inte har Elementor Pro, följ sedan den här fria metoden.
Allt du behöver göra i den här metoden är att lägga till en HTML-widget och en liten kod som hjälper dig att stänga dragspelet. Så här gör du för att göra det.
- Öppna din sida i Elementor-redigeraren, där du har dragspelssektionen.
- Precis ovanför din dragspelswidget placerar du en “HTML Widget” från elementpanelen.
- Kopiera nedanstående JavaScript-kod.
- Klistra in den ovan angivna JavaScript-koden i HTML-koden.
- När du är klar kan du publicera sidan och se den i realtid.
- Nu kommer du att upptäcka att ditt första dragspel börjar stängt.
Proffstips: Använder du flera dragspelswidgets på din webbplats och vill använda samma funktionalitet överallt? Lägg bara till JavaScript-snippet till Elementor > Anpassade koder. Detta gör att det fungerar konsekvent på alla sidor och i alla inlägg.
Bonus: 4 premiumdragspelsmallar - redo att användas
Varför använda Elementor:s grundläggande dragspel när du enkelt kan få funktionsrika, vackert designade dragspelsmallar?
Visst, Elementor: s standardwidget får jobbet gjort. Men om du siktar på en mer dynamisk, visuellt tilltalande upplevelse behöver du något mer avancerat.
Och Elementor Förpackning dragspelsmallar erbjuder dig mycket mer. Som avancerad styling, ikonintegrering, animeringskontroll och layoutflexibilitet. De kommer omedelbart att förbättra din innehållspresentation.
Oavsett om du skapar vanliga frågor, serviceuppdelningar eller interaktiva innehållsavsnitt sparar dessa premiummallar tid och ger ett snyggt utseende utan besväret med manuell anpassning.
Här är 5 premiumklara dragspelsmallar från Element Pack:
Dragspel 01: Den är till för att organisera innehåll med ett modernt, responsivt dragspel, vanliga frågor eller en Spoiler.
Dragspel 02: Detta är en ren och responsiv dragspelslayout för bättre läsbarhet.
Dragspel 03: Visa vanliga frågor eller spoilerinnehåll på ett snyggt sätt med ett responsivt dragspel.
Dragspel 04: Enkel innehållshantering med hjälp av moderna dragspelswidgets.
Dragspel 05: Ge användaren sömlös navigering genom att aktivera Hash-baserade webbadresser som direkt öppnar specifika dragspel eller flikar vid sidladdning.
VANLIGA FRÅGOR
Q1. Ska dragspelsobjekt vara öppna eller stängda som standard?
Det är helt upp till din designpreferens. Många kreatörer väljer att hålla det första dragspelsobjektet stängt för att uppmuntra användarinteraktion. Medan andra föredrar det öppet för att lyfta fram viktigt innehåll. Det finns ingen strikt regel. Utforma den så att den passar din publik och dina layoutmål.
Q2. Vad är skillnaden mellan Toggle- och Accordion-widgetar i Elementor?
Båda widgetarna erbjuder liknande funktioner. De beter sig olika vid sidladdning.
– Elementor Växla widget: Alla objekt förblir kollapsade som standard.
– Elementor dragspelswidget: Den första posten utökas, medan resten förblir stängda.
Dessutom tillåter dragspelswidgets bara att ett objekt är öppet åt gången. Med en toggle-widget kan användaren öppna flera objekt samtidigt.
Q3. Kan jag kollapsa Elementor dragspelsobjekt utan att använda kod?
Ja! Med de senaste Elementor-uppdateringarna kan du helt enkelt aktivera alternativet “All Collapsed” under Layout >> Interaktioner, ingen kodning krävs.
4. Vad är ett bilddragspel i Elementor?
En Image Accordion visar flera bilder i ett hopfällbart format. Förbättrad med svävningseffekter och smidiga animationer. Det är en visuellt engagerande widget som ger interaktivitet och känsla till din design.
Sista ordet
Om du arbetar med den senaste versionen av Elementor. Elementor:s inställning Default State är det enklaste och mest effektiva sättet att hålla alla Accordion-objekt stängda som standard.
Denna metod, med bara några få klick, säkerställer en ren upplevelse. Ingen anpassad kod krävs. Denna inbyggda funktion är idealisk för skapare som vill ha snabba resultat utan tekniska justeringar.
Men om du använder en äldre version av Elementor. Du behöver mer finkornig kontroll över hur dina Accordions beter sig. Såsom att rikta in sig på specifika widgetar, anpassa animationer eller ignorera temakonflikter. Då kan det vara bättre att använda ett JavaScript- eller CSS-baserat tillvägagångssätt.
Och om du vill hoppa över manuell styling helt och hållet finns det ett annat smart alternativ. Du kan använda de färdiga dragspelsmallarna som finns i Element Pack Pro.
Dessa mallar är professionellt utformade, fullt responsiva och byggda med tanke på användbarhet i den verkliga världen. Oavsett om du skapar vanliga frågor, serviceuppdelningar eller interaktiva innehållsavsnitt. Dessa förbyggda layouter sparar tid och ger smidiga resultat.
