Gå till innehållet

Divi tutorial: Så här använder du full bredd plånbok modulen

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]

Den filtrerbara portföljen på Divi låter dig visa dina senaste projekt i rutnät eller standardläge. Den filtrerbara portföljen liknar den vanliga portföljmodulen, förutom att den laddar nya projekt med en Ajax-begäran och innehåller alternativ för att filtrera projektlistan efter kategorier. När en viss kategori väljs återskapas projektlistan omedelbart med en ny lista över projekt från den valda kategorin.

full breddportfölj divi.png

Lägga till en filtrerbar portföljmodul på din sida

Innan du kan lägga till en filtrerbar portföljmodul 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 knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få 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 Aktivera Visual Builder när du surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.

använd divi byggare

När du har angett 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.

fullskärm plånbok divi.png

Leta reda på den filtrerbara portföljmodulen 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 "fullskärmsportfölj" och sedan klicka på "Enter" för att automatiskt hitta och lägga till den filtrerbara portföljmodulen! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Exempel på användning: Lägga till en filtrerbar portföljmodul till en portföljsida

I det här exemplet visar jag dig hur du lägger till en filtrerbar portföljmodul till en portföljsida.

delbar portfölj divi builder.jpg

Låt oss börja.

Använd den visuella byggaren för att lägga till ett vanligt avsnitt med en rad med full bredd (1 kolumn) under sidhuvudet. Lägg sedan till en filtrerbar portföljmodul i raden.

Uppdatera de filterbara portföljinställningarna enligt följande:

Innehållsalternativ

Antal artiklar: 8

Designalternativ

Layout: Rutnät Zoom Ikon Färg: #ffffff Hover Overlay Färg: rgba (224,153,0,0.58) Titel Teckensnitt: Standard, fetstil, versaler Titel Teckenstorlek: 14 pixlar Titel Bokstavsavstånd: 1 pixel Teckensnittsfilter: Standard, Fet, versal Filtertypstorlek: 14px Filterbokstavsavstånd: 1px Meta Fontstorlek: 12px Meta Letter-avstånd: 1px

Avancerade alternativ (anpassad CSS)

Aktivt portföljfilter: färg: # e09900; Portföljens titel: text-align: center; Portföljmeddelande Meta: text-align: center; Sidans aktiva sida: färg: # e09900! Viktig;

portföljmodul fullwith divi.png

Det är allt!

Alternativ för filtrerbar portföljinnehåll

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 hittas alltid på den här fliken.

modul divi filterbar portfölj full screen.png

Antal meddelanden

Välj hur du vill visa de inlägg du vill visa innan listan pagineras.

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]

Inkludera kategorier

Välj de kategorier som du vill visa. Inlägg från kategorier som inte är markerade visas inte i listan över genererade inlägg.

Visa titel

Ange en titel, om så önskas, som kommer att placeras ovanför projektlistan.

Visa kategorier

Välj om kategorin ska visas under varje artikel i metadataområdet eller inte.

Visa paginering

Det här alternativet aktiverar / inaktiverar paginering. Om paginering är inaktiverad visas bara en projektsida för varje kategori.

Bakgrundsfärg

Definiera en anpassad bakgrundsfärg för din modul eller lämna tom för att använda standardfärgen.

Bakgrundsbild

Om den är inställd kommer den här bilden att användas som bakgrund för denna modul. För att ta bort en bakgrundsbild tar du bara bort webbadressen från inställningsfältet. Bakgrundsbilderna visas ovanpå bakgrundsfärgerna, vilket innebär att bakgrundsfärgen inte kommer att synas när en bakgrundsbild appliceras.

Administrationsetikett

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

Filtrerbara portföljdesignalternativ

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

portföljmodul fullbredd divi section design.png

Disposition

Välj layoutstil för din portfölj. "Fullbredd" visar ett meddelande per rad, medan "Rutnät" visar dina projekt i ett kaklat rutnät med flera projekt per rad.

Textfärg

Här kan du välja om din text ska vara ljus eller mörk. Om du arbetar med en mörk bakgrund bör din text vara ljus. Om din bakgrund är ljus bör din text vara mörk.

Titel typsnitt

Du kan ändra typsnittet i titeltexten 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 fetstil, kursiv, versaler och understrykningsalternativ.

Titel teckenstorlek

Här kan du justera storleken på din titeltext. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller 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å ditt storleksvärde för att ändra enhetstyp.

Titeltextfärg

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

Spacing av titelbokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i titeltexten, använd skjutreglaget 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å ditt storleksvärde för att ändra enhetstyp.

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]

portföljmodul divi.png

Höjd på titellinjen

Radhöjd påverkar utrymmet mellan varje rad i titeltexten. 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å ditt storleksvärde för att ändra enhetstyp.

Filter typsnitt

Du kan ändra typsnittet för din filtertext genom att välja önskat typsnitt i 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 fetstil, kursiv, versaler och understrukna alternativ.

Filtreringsstorlek

Här kan du justera storleken på din filtertext. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller 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å ditt storleksvärde för att ändra enhetstyp.

Filtrera textfärg

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

Filtrera bokstavsavstånd

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din filtertext använder du avståndsreglaget för att justera utrymmet eller anger ö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å ditt storleksvärde för att ändra enhetstyp.

Filterlinjens höjd

Radhöjd påverkar utrymmet mellan varje rad i din filtertext. Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera utrymmet 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å ditt storleksvärde för att ändra enhetstyp.

Meta Font

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 Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrykningsalternativ.

Meta fontstorlek

Här kan du justera storleken på din metatekst. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller 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å ditt storleksvärde för att ändra enhetstyp.

Metatekstfärg

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.

Metabrevavstånd

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din metatekst, använd skjutreglaget 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å ditt storleksvärde för att ändra enhetstyp.

Meta Line Höjd

Linjehöjd påverkar utrymmet mellan varje rad i din metatekst. 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å ditt storleksvärde för att ändra enhetstyp.

meta portfolio module full screen divi.png

Använd gränsen

Om du aktiverar det här alternativet placeras en kant 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.

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. Anpassade måttenheter stöds, vilket innebär att du kan ändra standardenheten från "px" till något annat som em, vh, vw etc.

Gränsstil

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

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]

Avancerade filterbara portföljalternativ

På den avancerade fliken 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.

avsnittet förväg modulen portfolio fullwidth.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-underordnade tema eller i det anpassade CSS-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna å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 eliminera vissa element från sidan.

Andra Divi tutorials

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
14 aktier
del8
tweet2
Enregistrer4