Gå till innehållet

Så här använder du kodmodulen på Divi Builder

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Kodmodulen är en tom duk som låter dig lägga till kod på din sida, till exempel plugin-kortkoder eller statisk HTML-kod. Om du vill använda ett tredjeparts-plugin, till exempel ett tredjepartsreglage-plugin, kan du helt enkelt placera plugin-kortets kortkod i en standard- eller fullbreddskodmodul för att visa elementet obundet.

Så 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 komma åt Divi Builder. När Divi-temat har installerats på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför utgivaren varje gång du skapar en ny sida.

Genom att klicka på den här knappen aktiverar du Divi Builder, vilket ger dig tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatoren i visuellt läge.

Du kan också klicka på knappen Använd Visual Builder när du surfar på din uppströmswebbplats om du är inloggad på din WordPress-instrumentpanel.

knappen divi builder modul blogg divi

När du väl har gått in i Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att först lägga till en rad på din sida.

Sätt i divi-kodmodulen

 

Leta reda på kodmodulen i listan över moduler och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva in ordet "kod" och sedan trycka på enter för att automatiskt hitta och lägga till kodmodulen! När modulen har lagts till hälsas du med listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Använd fall genom att lägga till ett tråkigt formatmall för att animera innehåll på en enskild sida

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

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Lägg bara till ett vanligt avsnitt och en rad i full bredd (kolumn 1) och lägg till kodmodulen.

Divi-byggarkod

Lägg till kodavsnittet i textrutan innehåll.

Lägg till animate.css-kodavsnittet

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

I inställningarna för knappmodul, på fliken Avancerat, anger du de två klasserna "animerad" och "studsar" i textrutan CSS-klass.

Lägg till en css animeringsklass

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Nu studsar knappen när sidan laddas.

Animering av divibyggarknappen

Tips: Ibland kommer kod med radbrytningar att leda till att koden slutar fungera. Det är bättre att skapa din kod i en textredigerare och klistra in den i kodmodulen.

Kod innehållsalternativ

På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul kommer alltid att finnas på den här fliken.

Divi-byggarkodsparametrarInnehåll

Du kan placera valfri HTML-, CSS- eller JavaScript-kod där som du vill visa på sidan på den aktuella platsen. Endast redaktörer och administratörer har tillåtelse att posta ofiltrerad HTML, vilket innebär att kod kan tas bort från modulen om den används av en författare eller bidragsgivare. Du kan också placera kortkoder i modulen. Dessa kurskoder (kortkoder) visas i föräldrakolumnen utan ytterligare Divi-modulomslag.

Administration etikett

Detta ändrar moduletiketten i generatorn för enkel identifiering. När du använder WireFrame-vyn i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.

Koddesignalternativ

På fliken Design hittar du alla modulstilalternativ, som teckensnitt, färger, storlek och avstånd. På den här fliken kan du ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att justera nästan vad som helst.

Alternativ design modul kod divi byggareMaximal bredd

Alla värden som anges här begränsar bredden på innehåll som återges i kodmodulen till det inställda värdet. Om du till exempel anger 50% i inmatningsfältet minskar kodmodulens innehåll till 50% av kolumnen som innehåller den.

Kod Avancerade alternativ Kod

På fliken Avancerat hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.

Avsnitt förskott modul kod divi byggare

CSS ID

Ange ett lättanvänt CSS-ID för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

CSS klass

Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi Child-tema eller i anpassad CSS som du lägger till på din sida eller webbplats med Divi-temalternativen eller Divi Builder-sidinställningarna.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och alla modulens interna element. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till CSS direkt till varje element. CSS-posterna i dessa inställningar är redan inbäddade med stiltaggar. Så du måste bara ange CSS-regler åtskilda av semikolon.

synlighet

Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter eller om du vill förenkla mobildesignen genom att ta bort några element från sidan.

Det är det för denna handledning.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
2 aktier
del2
tweet
Enregistrer