Divi Builder Plugin Documentation

Hur du lägger till, konfigurerar och anpassar Divi-bloggmodulen.

Med Divi är till och med bloggar en modul och din ”blogg” kan placeras var som helst på din webbplats och i olika format. Du kan kombinera bloggmoduler och sidofältsmoduler för att skapa klassisk bloggdesign. Bloggar med 1 kolumn, 2 kolumner eller 3 kolumner kan alla byggas med hjälp av blogg- och sidebar-moduler.

Se en live-demo av den här modulen

Hur du lägger till en bloggmodul på din sida

För att du ska kunna lägga till en bloggmodul på din sida måste du först hoppa in i Divi Builder. När Divi-temat har installerats på din webbplats kommer du att märka en Use Divi Builder-knapp ovanför inläggsredigeraren varje gång du bygger en ny sida. Om du klickar på den här knappen aktiveras Divi Builder, vilket ger dig tillgång till alla Divi Builders moduler. Därefter klickar du på knappen Use Visual Builder (Använd visuell byggare) för att starta byggaren i visuellt läge. Du kan också klicka på knappen Use Visual Builder när du bläddrar på din webbplats i front-end om du är inloggad på din WordPress Dashboard.

När du 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 endast läggas till inuti rader. Om du startar en ny sida ska du inte glömma att lägga till en rad på din sida först. Vi har några bra handledningar om hur du använder Divis rad- och sektionselement.

Lokalisera bloggmodulen i listan över moduler och klicka på den för att lägga till den på din sida. Modullistan är sökbar, vilket innebär att du också kan skriva ordet ”blog” och sedan klicka på enter för att automatiskt hitta och lägga till bloggmodulen! När modulen har lagts till kommer du att mötas av modulens lista med alternativ. Dessa alternativ är indelade i tre huvudgrupper: Innehåll, Design och Avancerat.

Användningsexempel: Lägg till en bloggmodul med en rutnätslayout i ett specialavsnitt med höger sidofält

I det här exemplet lägger jag till en bloggmodul på en bloggsida. Den här bloggsidan har en rubrik med full bredd med en sökmodul under den. Under sökmodulen ska jag lägga till ett specialavsnitt med bloggmodulen på vänster sida och ett sidebaravsnitt på höger sida. Sidofältet till höger har en widget för senaste inläggen, en modul för e-postoptimering och en personmodul.

Här ser exempelsidan ut.

Märk att bloggmodulen är i en rutnätlayout på vänster sida av specialitetsavsnittet.

Vi sätter igång.

Använd den visuella byggaren för att lägga till ett specialavsnitt med följande layout:

Du uppmanas att lägga till antingen en 1-kolumnig eller 2-kolumnig rad på vänster sida. Välj 1 kolumn.

Följ sedan bloggmodulen till raden.

Modernisera blogginställningarna på följande sätt:

Innehållsalternativ

Inläggsnummer: 6
Knapp för att läsa mer: ON
Show Pagination: (Visa sidindelning): NO
Grid Tile Background Color: NO
Grid Tile Background Color: NO: #ffffffff

Designalternativ

Layout: Grid
Använd Dropshadow: ON
Overlay Icon Color: #ffffffff
Overover Overlay Color: rgba(224,153,0,0.51)
Header Font: Default
Header Font Size: 21px
Header Text Color: #33333333
Header Letter Spacing: #333333
Header Letter Spacing: #333333
1px
Header Line Height: 1.2em
Use Border: YES
Borderfärg: #f0f0f0f0
Breddning: 1px
Borderstil: Solid

Avancerade alternativ

Anpassad CSS (Läs mer-knappen):

Den avancerade anpassade CSS:n för Läs mer-knappen skapar ett anpassat utseende som passar designen väl.

På den högra sidebarsektionen i layouten för specialavsnittet måste du lägga till en sidebar-modul som drar in widgeten för de senaste inläggen. Under den måste du lägga till en modul för e-postval. Och under Email Optin måste du lägga till personmodulen med information om författaren.

Det var allt!

Blogginnehållsalternativ

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

Posts Number

Definiera antalet inlägg som du vill visa. Du måste ha gjort inlägg för att något ska kunna visas i den här modulen.

Välj de kategorier som du vill inkludera i inläggsflödet. Alla inläggskategorier som du har skapat visas här så att du kan välja/välja bort dem.

Inkluderade kategorier

Välj vilka kategorier du vill inkludera i flödet.

Meta datumformat

Definiera det datumformat som du vill visa på dina blogginlägg här. Standardlayouten är ett M j, Y-format (6 januari 2014) Se WordPress Codex om datumformat för fler alternativ.

Innehåll

Den som visar det fullständiga innehållet kommer inte att förkorta dina inlägg på indexsidan. Om du visar utdraget visas endast utdragstexten.

Offset Number

Välj hur många inlägg du vill förskjuta med. Om du till exempel förskjuter med 3 inlägg kommer de tre första inläggen i ditt bloggflöde inte att visas.

Show Featured Image

Med detta alternativ kan du välja om du vill att miniatyrbilder ska visas i din bloggmodul eller inte.

Läs mer-knappen

Här kan du definiera om du vill visa ”läs mer”-länken efter utdraget eller inte.

Visa författare

Välj om du vill visa författaren till varje blogginlägg i inläggets metaområde under inläggstiteln eller inte.

Visa datum

Välj om du vill visa det datum då varje inlägg skapades i metaområdet för inlägg under rubriken för inlägget.

Visa kategorier

Välj om du vill visa kategorier för inlägget i metaområdet för inlägget under rubriken för inlägget.

Show Comment Count

Välj om du vill visa antalet kommentarer i metaområdet för inlägget under rubriken för inlägget.

Show Pagination

Välj om du vill visa paginering för det här flödet eller inte. För att aktivera numrerad paginering måste du installera insticksprogrammet WP Page Navi.

Admin Label

Detta ändrar etiketten för modulen i byggaren för enkel identifiering. När du använder WireFrame-vyn i Visual Builder kommer dessa etiketter att visas i modulblocket i Divi Builder-gränssnittet.

Bloggdesignalternativ

I designfliken hittar du alla modulens stylingalternativ, till exempel typsnitt, färger, storlek och avstånd. Det är den här fliken du kommer att använda för att ändra hur din modul ser ut. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att ändra nästan vad som helst.

Layout

Du kan antingen välja att visa dina blogginlägg i ett rutnät eller i en layout med full bredd.

Featured Image Overlay

Om det är aktiverat visas en överlagringsfärg och en ikon när besökaren håller muspekaren över den presenterade bilden i ett inlägg.

Overlay Icon Color

Här kan du definiera en egen färg för överlagringsikonen.

Hover Overlay Color

Här kan du definiera en egen färg för överlagringen.

Hover Icon Picker

Här kan du definiera en egen ikon för överlagringen.

Text Color

Om din blogg placeras på en ljus bakgrund ska textfärgen ställas in på ”Dark”. Omvänt, om bloggen placeras på en mörk bakgrund ska textfärgen ställas in på ”Ljus”.

Font för rubriken

Du kan ändra fontet för rubriktexten genom att välja önskat font från rullgardinsmenyn. Divi levereras med dussintals fantastiska typsnitt som drivs av Google Fonts. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med hjälp av alternativen fet, kursiv, versaler och understrykning.

Header Font Size

Här kan du justera storleken på din headertext. Du kan dra i reglaget för intervallet för att öka eller minska textens storlek, eller så kan du ange önskat värde för textstorleken direkt i inmatningsfältet till höger om reglaget. Inmatningsfälten har stöd för olika måttenheter, vilket innebär att du kan ange ”px” eller ”em” efter ditt storleksvärde för att ändra enhetstypen.

Färg för rubriktext

Som standard visas alla textfärger i Divi som vit eller mörkgrå. Om du vill ändra färgen på din rubriktext väljer du önskad färg från färgväljaren med det här alternativet.

Header Letter Spacing

Letter spacing påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din rubriktext använder du intervallreglaget för att justera utrymmet eller anger önskad storlek på utrymmet i inmatningsfältet till höger om reglaget. Inmatningsfälten har stöd för olika måttenheter, vilket innebär att du kan ange ”px” eller ”em” efter storleksvärdet för att ändra enhetstypen.

Header Line Height

Linjehöjden påverkar utrymmet mellan varje rad i rubriktexten Om du vill öka utrymmet mellan varje rad använder du skjutreglaget för att justera utrymmet eller anger önskad storlek på utrymmet i inmatningsfältet till höger om reglaget. Inmatningsfälten har stöd för olika måttenheter, vilket innebär att du kan ange ”px” eller ”em” efter ditt storleksvärde för att ändra enhetstypen.

Font för brödtext

Du kan ändra brödtextens typsnitt genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska typsnitt som drivs av Google Fonts. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med hjälp av alternativen fet, kursiv, versaler och understrykning.

Förlagets teckenstorlek

Här kan du justera storleken på din text i kroppen. Du kan dra i reglaget för intervallet för att öka eller minska storleken på din text, eller så kan du ange önskat värde för textstorleken direkt i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange ”px” eller ”em” efter ditt storleksvärde för att ändra dess enhetstyp.

Kroppstextfärg

Som standard visas alla textfärger i Divi som vit eller mörkgrå. Om du vill ändra färgen på din kroppstext väljer du önskad färg från färgväljaren med det här alternativet.

Body Letter Spacing

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din brödtext använder du intervallreglaget för att justera utrymmet eller anger önskad storlek på utrymmet i inmatningsfältet till höger om reglaget. Inmatningsfälten har stöd för olika måttenheter, vilket innebär att du kan ange ”px” eller ”em” efter storleksvärdet för att ändra enhetstypen.

Body Line Height

Linjehöjden påverkar utrymmet mellan varje rad i din brödtext Om du vill öka utrymmet mellan varje rad använder du skjutreglaget för att justera utrymmet eller matar in önskad storlek på utrymmet i inmatningsfältet till höger om reglaget. Inmatningsfälten har stöd för olika måttenheter, vilket innebär att du kan ange ”px” eller ”em” efter ditt storleksvärde för att ändra enhetstypen.

Meta Font

Du kan ändra teckensnittet för din metatext genom att välja önskat teckensnitt från rullgardinsmenyn. Divi levereras med dussintals fantastiska typsnitt som drivs av Google Fonts. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med hjälp av alternativen fet, kursiv, versaler och understrykning.

Meta Font Size

Här kan du justera storleken på din metatext. Du kan dra i intervallreglaget för att öka eller minska storleken på din text, eller så kan du ange önskat värde för textstorleken direkt i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange ”px” eller ”em” efter ditt storleksvärde för att ändra enhetstypen.

Metatextfärg

Som standard visas alla textfärger i Divi som vit eller mörkgrå. Om du vill ändra färgen på din metatext väljer du önskad färg från färgväljaren med det här alternativet.

Meta Letter Spacing

Letter spacing påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din metatext använder du intervallreglaget för att justera utrymmet eller anger önskad storlek på utrymmet i inmatningsfältet till höger om reglaget. Inmatningsfälten har stöd för olika måttenheter, vilket innebär att du kan ange ”px” eller ”em” efter storleksvärdet för att ändra enhetstypen.

Meta Line Height

Linjehöjden påverkar utrymmet mellan varje rad i din metatext Om du vill öka utrymmet mellan varje rad använder du skjutreglaget för att justera utrymmet eller anger önskad storlek på utrymmet i inmatningsfältet till höger om reglaget. Inmatningsfälten har stöd för olika måttenheter, vilket innebär att du kan ange ”px” eller ”em” efter ditt storleksvärde för att ändra enhetstypen.

Use Border

Aktiverar du det här alternativet placeras en ram runt din modul. Denna ram kan anpassas med hjälp av följande villkorliga inställningar.

Border Color

Detta alternativ påverkar färgen på din ram. Välj en anpassad färg från färgväljaren för att tillämpa den på din ram.

Border Width

Som standard har ramar en bredd på 1 pixel. Du kan öka det här värdet genom att dra i intervallreglaget eller genom att ange ett anpassat värde i inmatningsfältet till höger om reglaget. Anpassade måttenheter stöds, vilket innebär att du kan ändra standardenheten från ”px” till något annat, t.ex. em, vh, vw etc.

Border Style

Border har stöd för åtta olika stilar, bland annat: solid, dotted, dashed, double, groove, ridge, inset och outset. Välj önskad stil i rullgardinsmenyn för att tillämpa den på din kant.

Blogg avancerade alternativ

I den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan finna användbara, till exempel anpassad CSS och HTML-attribut. Här kan du tillämpa anpassad CSS på alla modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID:n på modulen, som kan användas för att anpassa modulen i ditt undertemas style.css-fil.

CSS ID

Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa anpassad CSS-formgivning eller för att skapa länkar till vissa delar av sidan.

CSS-klass

Ange valfria CSS-klasser som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-formgivning. Du kan lägga till flera klasser, separerade med ett mellanslag. Dessa klasser kan användas i ditt Divi Child Theme eller i den anpassade CSS som du lägger till på din sida eller din webbplats med hjälp av Divi Theme Options eller Divi Builder Page Settings.

Custom 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 anpassad CSS direkt till varje element. CSS-inmatning i dessa inställningar är redan förpackade i stiltaggar, så du behöver bara ange CSS-regler separerade med semikolon.

Visibility

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

Lämna ett svar

Din e-postadress kommer inte publiceras.