Anpassa koden för ditt Extra-tema

Procédure

Introduktion

LWS erbjuder dig 3 premiumplugins från Elegant Themes (Divi, Bloom och Monarch). Dessa uppdateras regelbundet. När du är kund hos LWS får du fri tillgång till dessa plugins genom att välja distributionen "Divi Builder" när du installerar Wordpress CMS med vår Auto-Installer.

Om du har ett cPanel-paket eller redan har installerat Wordpress med denna distribution, men inte har tillgång till alla teman eller uppdateringar, vänligen meddela oss genom att ge oss åtkomstuppgifterna för administrationsområdet på din Wordpress-webbplats så att en tekniker kan uppdatera licensen.

Observera: du måste teckna en Elegant Themes-licens för att kunna dra nytta av supporten. LWS tillhandahåller inte support för dessa produkter.

Anpassa koden i ditt Extra-tema

I modulen Code kan du lägga till egna HTML-koder och/eller WordPress-kortkoder i layouterna. I exemplet ovan har vi lagt till ett opt-in-formulär för e-post med hjälp av en kortkod som tillhandahålls av opt-in-plugin-programmet för e-post, Bloom.

Så här lägger du till en kodmodul på din sida

Innan du kan lägga till en kodmodul på din sida måste du först byta till Divi Builder. När Extra-temat har installerats på din webbplats kommer du att märka en Use Divi Builder-knapp ovanför inläggsredigeraren varje gång du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder, vilket ger dig tillgång till alla dess moduler. Klicka sedan på knappen Use Visual Builder för att starta byggaren i visuellt läge. Du kan också klicka på knappen Use Visual Builder när du surfar på din webbplats på framsidan om du är inloggad på din WordPress-instrumentpanel.

När du har kommit in i Visual Builder kan du klicka på den grå +-knappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du startar en ny sida, glöm inte att först lägga till en rad på din sida.

Leta reda på kodmodulen i listan över moduler och klicka på den för att lägga till den på sidan. Modullistan är sökbar, vilket innebär att du även kan skriva in ordet "kod" och sedan klicka på enter-knappen för att hitta och automatiskt lägga till kodmodulen! När modulen har lagts till visas en lista med olika alternativ för modulen. Dessa alternativ är indelade i tre huvudgrupper: Innehåll, Stil och Avancerat.

Exempel på användningsområde: Lägga till en extern stilmall för att animera innehållet på en enskild sida

I det här exemplet ska jag lägga till ett länkskript för att importera Animate.css för att lägga till animeringseffekter på sidelementen. Eftersom filen Animate.css innehåller mycket kod är det vettigt att bara ladda den på den sida jag behöver.

Lägg bara till en vanlig sektion och en fullbreddsrad (1 kolumn) och lägg till modulen Code.

I textrutan för innehåll lägger du till kodsnutten.

Nu är allt du behöver göra att lägga till några CSS-klasser för att animera alla element på din CSS-klasssida till din sida. I det här exemplet ska jag få knappen att studsa när sidan laddas.

I knappmodulens inställningar, på fliken Avancerat, anger du de två klasserna "animerad" och "studsa" i textrutan CSS-klass.

Nu studsar knappen när sidan laddas!

Slutsats

Tack för att du följde denna handledning!

Använd kodmodulen för att placera anpassad kod på din sida, till exempel HTML och JS, eller ange korta koder från tredje part.

Vi ses snart för en annan handledning ;)

Om du vill veta mer om Extra-temat och hur du använder det

Skapa en blogg med Extra-temat

Textmodulen Extra

> Se vår hjälpavdelning för Extra-temat