Hur man designar WordPress Växla innehåll i Elementor

Vilket är det bästa sättet att visa innehåll som har flera avsnitt eller ger alternativ?

Till exempel kan en prissättningssida innehålla olika typer av prissättningssystem som månads-, års- och livstidserbjudanden. Att visa alla dessa erbjudanden på en sida kan vara besvärligt för kunderna. De måste scrolla långt ner för att konsumera innehållet.

Så, hur ska du sortera detta för att göra sidan ren och minimal samtidigt som du behåller all information och innehåll som krävs?

Det är här växla innehåll kommer till undsättning. Det låter dig skapa interaktivt innehåll med ett smart gränssnitt. 

När det kommer till WordPress finns det många sätt att skapa växlande innehåll. Det enklaste sättet kommer dock med Elementor. Den här artikeln går igenom stegen för att skapa WordPress Toggle Content med Elementor.

Vad är växla innehåll?

Växlingsfunktionen låter användaren kontrollera innehållets synlighet på en webbsida. Växla innehåll används vanligtvis på webbplatser för att visa olika versioner eller delar av innehållet.

Med växlingsinnehållet kommer endast en del av innehållet att vara synligt i visningsporten, medan andra kommer att lindas under en flik eller titel. När användare klickar på en flik kommer innehållet under den bara att vara synligt.

Till exempel en prissida som har två priserbjudanden, månadsvis och årligen. Om du använder ett växlingsinnehåll kommer endast en av erbjudandena, antingen månads- eller årsdealer, att synas på skärmen. 

När användaren klickar på månadsfliken kommer månadserbjudandena att synas. På samma sätt, när den årliga fliken öppnas, visas årliga erbjudanden.

En steg-för-steg-guide för att skapa avancerat Elementor-växlingsinnehåll i WordPress

Även om det finns många WordPress-växlingsplugins tillgängliga, kommer det enklaste sättet att skapa en avancerad Elementor-växlingsknapp på WordPress med ElementsKit!

Advanced Toggle-widgeten från ElementsKit lägger till extra funktionalitet till ditt WordPress-växlingsinnehåll. Det låter dig visa innehåll på ett mer elegant sätt med det högsta antalet anpassningsbara alternativ.

Så här kan du skapa sofistikerat WordPress-växlingsinnehåll med hjälp av ElementsKits Advanced Toggle-widget:

Steg 1: Välj stilar för Elementor-växlingsknappen

För att använda den avancerade växlingswidgeten drar du först och släpper widgeten i din Elementor-design. Efter det kommer du att få ställa in växla innehåll och anpassa deras stilar.

ElementsKit Advanced Toggle-widgeten kommer med två olika stilar av knappar. Inte bara är stilarna olika, men deras funktionalitet är också olika. 

Med Style 1 kan du visa flera flikar. Under dessa flikar kan du lägga till växlande innehåll. När du har flera alternativ att visa kan du välja den här stilen.

Stil 2 är att växla mellan två innehåll med en traditionell växlingsknapp. När du väljer den här stilen, endast de två första flikarna kommer att visas. En typisk växlingsknapp visas som växlar mellan de två innehållen. 

För den här handledningen kommer du att använda stil 1 för att visa dig fler anpassningsbara alternativ.

Steg 2: Lägg till flikar på växlingsmenyn i wordpress

Du kan lägga till flikar med bara ett klick med hjälp av ElementsKit Advanced-växlingswidgeten. För att lägga till en ny flik, klicka på knappen LÄGG TILL OBJEKT. För varje flikinnehåll kan du ställa in Titel, Indikator bakgrundsfärg, Titel färg för Normal och Hover-effekt för varje flik individuellt. Dessutom, om du vill göra en flik synlig som standard, kan du aktivera Håll den här fliken öppen funktion.

Dessutom kan du ställa in Inriktning för Växla flikar till höger, vänster eller mitten. Alternativet att Aktivera Ajax finns också.

Steg 3: Hur lägger jag till WordPress-växlingsinnehåll i Elementor?

Processen för att skapa innehåll gör detta till en "Avancerad” växla widget. Du kan bokstavligen designa innehåll för varje flik utan att lämna Elementor-redigeraren. Detta ger en stor fördel eftersom du kan skapa och anpassa innehållet på samma sida som du redigerar växlingsknappen.

För att skapa växlingsinnehållet, klicka på innehållssektionen under växlingsknappen. A Widgetområde dyker upp på din skärm. I det här gränssnittet kan du designa växlande innehåll med alla Elementor- och ElementsKit-element. Du har möjlighet att skapa din egen design eller använd sparade mallar. Dessutom kan du använda dig av ElementsKit mallbibliotek för att skapa fantastiskt WordPress-växlingsinnehåll.

Steg 4: Anpassa Elementor-växlingsknappen med ElementsKit

Att anpassa Elementor-växlingsknappen är enkelt och flexibelt med ElementsKit. I den Byt containersektion (under fliken Stil) kan du välja bakgrundstyp för växlingsknappar och ställ sedan in stoppning, box skugga stil och gräns-radie.

För brytare, alternativ för att ställa in ramradie och boxskugga är också tillgängliga.

Dessutom, i Innehåll avsnitt får du ställa in Typografi för växlingsflikens titlar.

Detta är det! Växlingsinnehållet är nu klart. Du kan nu lägga till växlingsinnehållet för att göra din webbdesign mer elegant och dynamisk.

För att lära dig mer, läs hela dokumentationen på hur man använder ElementsKit Advanced Toggle-widgeten.

Varför ska du välja ElementsKit för att skapa Elementor-växlingsknappen?

En mycket berättigad fråga du kan ställa är, bland alla WordPress-växlingsplugin som finns tillgängliga, varför skulle du välja ElementsKit? En rad svar skulle vara, det är den avancerade växlingswidgeten med alla avancerade funktioner.

För att utveckla det har ElemensKit en avancerad funktion för att skapa innehåll. De flesta av Elementor-växlingswidgetarna ger möjlighet att växla mellan endast två innehåll. Medan med ElementsKit kan du skapa så mycket växlingsinnehåll du vill med en viss stil. Dessutom kan du skapa en Elementor-växlingsknapp och växlingsinnehållet i samma redigerare. Det gör WordPress att växla innehållsskapande enklare än någonsin. Dessutom kan du använda färdiga mallar också.

Här är varför du ska välja ElementsKit Advanced Toggle Widget för att skapa WordPress växla innehåll i Elementor:

• Avancerat innehållsskapande.
• Lägg till ett obegränsat antal växlande innehåll.
• Skapa en växlingsknapp och designa växlingsinnehåll på ett ställe, utan att behöva lämna redigeraren.
• Designa sofistikerat växlande innehåll med Elementor.
• Gör avsnittet interaktivt för användare.
• Minskar rullningstiden för att förbättra engagemanget.

I ett nötskal

WordPress växla innehåll är ett bra sätt att förbättra användarupplevelsen på din webbplats. Med växlar kan du ändra utseendet och känslan på din webbplats och göra den mer interaktiv. 

Medan du skapar växlande innehåll ger ElementsKit de mest flexibla och avancerade funktionerna. Om du har följt guiden ovan bör du enkelt kunna skapa en Elementor-växlingsknapp.