Gå till innehållet

Så här använder du bloggmodulen 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]

Med Divi är även blogging en modul och din "blogg" kan placeras var som helst på din webbplats och i olika format. Du kan kombinera moduler för blogg och sidofält för att skapa klassiska bloggdesigner. 1 kolumn, 2 kolumner eller 3 kolumner kan skapas med hjälp av blogg- och sidofältsmodulen.

förhandsgranskning blog divi module blog.png

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

Innan du kan lägga till en bloggmodul 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 inläggsredigeraren när du skapar en ny sida. Genom att klicka på den här knappen kommer du att kunna aktivera Divi Builder, vilket ger dig tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn 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 module blog divi.png

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, glöm inte att lägga till en rad på din sida först. Vi har bra handledning om hur du använder elementen i linjer och sektioner av Divi.

lägg till bloggmodul divi builder.png

Leta reda på bloggmodulen 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 ordet "blogg" och sedan klicka på Enter för att automatiskt hitta och lägga till bloggmodulen! När modulen har lagts till hälsas du med listan över modulalternativ. Dessa alternativ är indelade i tre huvudgrupper: Innehåll , Conception et advanced .

Använd fallet för bloggmodulen med en rutnätlayout 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 fullständig rubrik med en sökmodul nedan. Under sökmodulen lägger jag till ett specialavsnitt med bloggmodulen på vänster sida och ett sidofält till höger. Sidofältet till höger innehåller en ny widget för inlägg, en e-postoptimodul och en personmodul.

Så här ser exempelsidan ut.

Exempel på sida divi.jpg

Observera att bloggmodulen finns i en rutnätlayout på vänster sida av specialavsnittet.

Låt oss börja.

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

layout specialitet divi.png

Du kommer att uppmanas att lägga till en kolumn eller en tvåkolumnrad till vänster. Välj rad 1 kolumn.

seletion zone divi builder.png

Lägg sedan till bloggmodulen till raden.

använd blog.png-modulen

Uppdatera blogginställningarna enligt följande:

Innehållsalternativ

Inlägg Antal: 6
Läs mer Knapp: ON
Visa pagination: NEJ
Grid bakgrundsfärg: #ffffff

Designalternativ

Layout: Grid
Använd Dropshadow: ON
Överlägg färgikon: #ffffff
Hover Overlay Color: rgba (224,153,0,0.51) Header
polis:
Teckensnittsrubrikhuvud: 21px
Rubrik Textfärg: # 333333
Bokstavsavstånd: 1px
Rubrikradhöjd: 1.2 em
Border: JA
Färg på gränsen: # f0f0f0
Breddens bredd: 1px
Gränsstil: Solid

Alternativ avancées

Anpassad CSS (Läs mer-knappen):

färg: # e09900;
betraktningsblock;
text-align: center;
marginal-topp: 10px;
gränsen: 1px solid #ccc;
vaddering: 5px;
Text Transformation: Kapitalisera;
brevavstånd: 1px;

blogginställningar divi.png

Den avancerade anpassade CSS-knappen för Läs mer-knappen skapar ett anpassat utseende som matchar designen.

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]

blockera designartiklar divi.jpg

I det högra sidofältet i specialsnittslayouten måste du lägga till en sidofältmodul som infogar den senaste inläggswidgeten. Nedan måste du lägga till en e-postoptin-modul. Och sedan under Email Optin måste du lägga till Person-modul med författarinformation.

Det är allt!

Alternativ för blogginnehåll

På fliken Innehåll hittar du allt innehåll 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.

bloggmodul divi.png

Artikelnummer (antal artiklar)

Ställ in antalet meddelanden som du vill visa. Du måste ha meddelanden för allt som visas i den här modulen.

Välj de kategorier som du vill inkludera i inläggsflödet. Alla meddelandekategorier du skapade visas här för att du ska välja / avmarkera.

Kategorier ingår

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

Metadatumformat

Ställ in det datumformat som du vill visa i dina blogginlägg här. Standardlayouten är M j, Y-format (6 januari 2014) Se WordPress codex på datumformat för fler alternativ.

Innehåll

Att visa fullständigt innehåll kommer inte att trunka dina inlägg på indexsidan. Visa kodavsnittet visar bara din kodavsnittstext.

Offsetnummer

Välj antalet meddelanden du vill kompensera. Om du till exempel kompenserar med tre inlägg kommer de tre första inläggen i ditt bloggflöde inte att visas.

Visa utvald bild

Med det här alternativet kan du välja om du vill att miniatyrer ska visas i din bloggmodul.

Läs mer knappen

Här kan du ställa in om länken "läs mer" ska visas efter kodavsnittet eller inte.

Visa författare

Välj om du vill visa författaren till varje blogginlägg i metafältet för inlägg under inläggstiteln.

Visa datum

Välj om du vill visa det datum varje artikel skapades i rutan Objektmeta under meddelandetitel.

element för att visa divi-modul blog.png

Visa kategorier

Välj om du vill visa inläggskategorierna i inläggets meta-område under publiceringens titel.

Visa antalet kommentarer

Välj om du vill visa antalet kommentarer i inläggets meta-ruta under inläggets titel.

Visa paginering

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

Administrationsetikett

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.

Blogg designalternativ

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.

designalternativ divi builder module blog.png

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]

Disposition

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

Överlagrad bild

Om det här alternativet är aktiverat visas en färg och en överläggsikon när en besökare svävar över den valda bilden i ett meddelande.

Färg på överläggsikonen

Här kan du ställa in en anpassad färg för överläggsikonen.

Däckfärg svävar

Här kan du definiera en anpassad färg för överläggningen.

Hover Icon Picker

Här kan du definiera en anpassad ikon för överläggningen.

Textfärg

Om din blogg placeras på en ljus bakgrund bör textfärgen ställas in på "Mörk". Visa, om din blogg placeras på en mörk bakgrund bör textfärgen ställas in på "Ljus".

Rubrik teckensnitt

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

Rubrikstorlek

Här kan du justera storleken på rubriktexten. Du kan dra intervallreglaget för att öka eller minska storleken på din text, eller du kan direkt ange önskat textstorleksvärde 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" beroende på din storlek för att ändra enhetstyp.

Rubriktextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din rubrik väljer du den färg du vill ha i färgväljaren med det här alternativet.

Rubrikbokstavsavstånd

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i rubriktexten, använd intervallreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

konfigurationsavstånd header divi.png

Rubrikrad Höjd

Radhöjden påverkar utrymmet mellan varje rad i rubriktexten. Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Kroppsfont

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

Kroppstypstorlek

Här kan du justera storleken på din text. Du kan dra intervallreglaget för att öka eller minska storleken på din text, eller du kan direkt ange önskat textstorleksvärde 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" beroende på din storlek för att ändra enhetstyp.

Kroppstextfärg

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

Spacing av kropps bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din kroppstext, använd intervallreglaget för att justera mellanslag eller ange önskad avståndsstorlek 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" beroende på din storlek för att ändra enhetstyp.

Höjd på kroppslinjen

Radhöjd påverkar utrymmet mellan varje rad i brödtexten. Om du vill öka utrymmet mellan varje rad, använd intervallreglaget för att justera mellanslag eller ange önskad avståndsstorlek 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" beroende på din storlek för att ändra enhetstyp.

Metas teckensnitt

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

avsnitt metadata diiv builder.png

Metas teckenstorlek

Här kan du justera storleken på din metatekst. Du kan dra intervallreglaget för att öka eller minska storleken på din text, eller du kan direkt ange önskat textstorleksvärde 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" beroende på din storlek för att ändra enhetstyp.

Textfärg för meta

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

Avstånd mellan metabrev

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din metatekst, använd intervallreglaget för att justera mellanslag eller ange önskad avståndsstorlek 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" beroende på din storlek för att ändra enhetstyp.

Meta Line Höjd

Radhöjd påverkar utrymmet mellan varje rad i din metatekst. Om du vill öka utrymmet mellan varje rad använder du skjutreglaget för att justera mellanslag eller anger storleken på det avstånd du vill ha i fältet till höger om markören. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Använd gränsen

Om du aktiverar det här alternativet placeras en gräns runt din modul. Denna kant kan anpassas med följande villkorliga parametrar.

Färg på gränsen

Det här alternativet påverkar färgen på din kant. Välj en anpassad färg från färgväljaren för att tillämpa den på din kant.

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]

Bredden av gränsen

Som standard är gränserna 1 pixel breda. Du kan öka detta värde genom att dra områdesreglaget eller ange ett anpassat värde i inmatningsfältet till höger om reglaget. Stödda anpassade måttenheter, vilket innebär att du kan ändra standardenheten från "px" till något annat t.ex. em, vh, vw etc.

Gränsstil

Gränser stöder åtta olika stilar, inklusive: solid, prickad, prickad, dubbel, spår, ås, insats och start. Välj den stil du vill ha i rullgardinsmenyn för att tillämpa den på din gräns.

Avancerade bloggalternativ

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 tillämpa 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.

avancerat avsnitt i modulen blog.png

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 en anpassad CSS-stil eller för att länka till vissa delar av din sida.

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.

Denna artikel innehåller 1 kommentar

  1. Hej!
    Vet du hur man vänder sidans riktning? Jag skulle vilja presentera mina artiklar från de senaste till de äldsta.
    Tack för ditt svar.
    Manolita

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
10 aktier
del4
tweet2
Enregistrer4