Fullwidth Wallet-modulen i Divi-tema, fungerar precis som den vanliga Portfolio-modulen, förutom att den visar ditt projekt i ett vackert Fullwdth-läge. Den kommer också med några unika nya konfigurationer: Grid och Carousel. Modulen fungerar genom att visa en lista över dina senaste projekt och kan användas av designers och konstnärer som vill visa ett galleri med sina senaste verk.
Så här lägger du till en Portfolio Fullwidth-modul på din sida
Innan du kan lägga till en komplett portföljmodul till din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat 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 Använd Visual Builder när du bläddrar i din webbplats i förgrunden om du är inloggad på din WordPress-instrumentpanel.
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. Vi har bra handledning om hur Divis linje- och sektionselement används.
Leta reda på den filtrerbara plånboksmodulen 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 "filtrerbar portfö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ändningsfall: Lägga till en filtrerbar portföljmodul till en portföljsida
I det här exemplet visar jag dig hur du presenterar en portfölj på en portföljssida som täcker hela sidans bredd.
Låt oss börja.
Använd den visuella byggaren för att lägga till ett avsnitt med full bredd under sidhuvudet. Lägg sedan till en filtrerbar portföljmodul.
Uppdatera de filterbara portföljinställningarna enligt följande:
Innehållsalternativ
Meddelandenummer: 8 Display Pagination: NO
Designalternativ
Layout: Rutnät Zoom Ikon Färg: # 000000 Hover Overlay Färg: #ffffff Titel Teckensnitt: Standard, Fet, Alla Kepsar Titel Teckenstorlek: 14 pixlar Bokstavsavstånd: 1 pixel Metateckenstorlek: 12 pixlar Meta mellanrum bokstäver: 1px
Det är allt!
Innehållsalternativ för portföljmodul
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.
Portfölj titel
Ange en titel som visas ovanför portföljen, eller lämna den tom så att du inte använder en titel.
Inkludera kategorier
Välj de kategorier du vill visa. Projekt från kategorier som inte är markerade kommer inte att visas i projektlistan.
Antal meddelanden
Kontrollera antalet projekt som visas Lämna tom eller använd 0 för att inte begränsa beloppet.
Visa titel
Välj om titeln på varje projekt ska visas eller inte när du håller musen över projektobjektet.
Visa datum
Välj om publiceringsdatumet för varje projekt ska visas när du håller muspekaren över projektobjektet.
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.
Administratörsetikett
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.
Designalternativ med full bredd plånbok
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.
Disposition
Välj layouten du vill använda. "Rutnät" visar alla dina objekt i en multi-kolumn, multi-rad layout. Karusellen visar dina föremål i en enda rad med sida vid sida bilder som glider för att avslöja ytterligare objekt i listan.
Zooma färgikon
När du håller muspekaren över ett objekt i portföljmodulen visas en överläggsikon. Du kan justera färgen som används från den här ikonen med hjälp av färgväljaren i den här inställningen.
Byt färgöverlägg
När du svävar över ett objekt i portföljmodulen visas en överläggsfärg längst upp på bilden och under portföljens titeltext och ikon. Som standard används en halvgenomskinlig vit färg. Om du vill använda en annan färg kan du justera färgen med hjälp av färgväljaren i den här inställningen
Välj muspekaren
Här kan du välja en anpassad ikon som ska visas när en besökare svävar över portföljobjekt i modulen.
Textfärg
Här kan du välja om din text ska vara ljus eller 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.
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.
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.
Metas teckenstorlek
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.
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.
Avancerade portföljalternativ Fullbredd
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.
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-klasser som ska användas för denna modul. 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-barntema eller i den anpassade CSS-stilmall som du lägger till på din sida eller webbplats. webbplats med Divi-temaalternativ eller Divi Builder sidinställningar.
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.
Automatisk karusell
Om karusellayoutalternativet är valt och du vill att karusellen ska glida automatiskt utan att besökaren behöver klicka på nästa knapp, aktivera det alternativet och justera centrifugeringshastigheten nedan om så önskas.
Automatisk karusellhastighet
Här kan du ange karusellens rotationshastighet om alternativet "Automatisk karusellrotation" är aktiverat ovan. Ju högre tal, desto längre paus mellan varje rotation. (Ex. 1000 = 1 sek)
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.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column] /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andra Divi tutorials
- 5 webbplatser för restaurang användning Divi tema
- Så här lägger du till text på en Divi WooCommerce-produkt
- Så här byter du menyfärg mellan Divi-sidor
- Hur du anpassar rutorna på en blogg med Divi
- Hur man använder roll Divi editor på Wordpress
- Hur man skapar en Divi-skjutreglage på full skärm
- Hur man ändrar menyens färg mellan Divi-sidor
- Funktioner du antagligen inte känner till Divi
- Så här använder du Divi Builder på WordPress
- Så här använder du Divi video-rullningsmodulen
- Så här använder du Divi Builder Flip-modulen
- Hur man lägger till en vittnesmodul om Divi Builder
- Så här använder du Divi-textmodulen
- Hur man skapar en reglage på Divi
- Hur man redigerar en Divi-användarroll
- Så här använder du Divi Social Media-modulen
- Hur man använder butikmodulen på temat WordPress Divi
- Så här använder du Divi sidebar-modulen
- Så här använder du Divi Price Table Module
- Hur man använder titelfodulen i Divi-publikationer
- Hur lägger jag till en videomodul av Divi
- Så här använder du artikelnavigationsmodulen
- Så här använder du Divi-sökmodulen
- Så här använder du Divi-plånboksmodulen
- Hur man använder personmodulen på Divi Builder
- Hur man använder plånboksmodulen med Divi-filter
- Hur man använder skjutreglaget med hela bredden
- Så här använder du Divi Builder Image Module
- Så här använder du Divi Builder med fullbredd navigationsmodul
- Hur man använder modulen för bildgalleri
- Så här använder du Divi Builder Full-Width Card Module
- Så här använder du Divi Full Width Portfolio Module
- Hur du använder Divi-modulen med full bredd
- Så här använder du Divi Counter Module
- Hur man använder artiklarna på Divi Builder
- Så här använder du Divi Email Optin-modulen
Hej!
Jag lyckas ha antingen en filtrerbar plånbok eller en plånbok med full bredd men hela bredden kan inte filtreras.
Jag skulle vilja kunna lägga till titeln på det aktuella projektet i mina filtrerbara portföljbilder, vilket är fallet med ”klassiska” portföljer. Vet du hur du gör det?
Hej!
Jag gick precis till Divi och jag snubblade på vägen för att skapa en "Ads" -sida där mina nya annonser skulle visas i små miniatyrer / miniatyrer bredvid varandra som på fastighetsmäklares webbplatser. För information har jag redan skapat min ADVERTISEMENTS-sida och några artiklar (en artikel för en annons) som jag associerar med kategorin ADVERTISEMENTS .... men de visas i stort format. Jag hoppas att jag har förklarat mig bra i min problematik! I väntan på dina förslag tackar jag på förhand för dina förklaringar och råd! Godnatt !! Med vänliga hälsningar - Jerome
Hej, om du använder bloggmodulen måste du lägga till specifik CSS som gäller för den här modulen. Tyvärr erbjuder den här formen inte många anpassningsalternativ.
Hej!
Tack för din mycket fullständiga artikel.
Jag lyckas visa antingen en porftolio i full bredd eller en filtrerbar portfölj men med stora marginaler runt.
Vet du om divi tillåter dig att visa en filtreringsportfölj i full bredd?
Eller för att visa en filtrerbar portfölj utan viktiga marginaler?
tack
Hej Delphine,
Jag har aldrig testat men kommer tillbaka till dig om jag har svar.
Hej, jag tyckte mycket om din artikel men när jag försöker återge den här typen av layout har jag stora mellanrum mellan mina bilder. Jag skulle ha föredragit att bilderna sammanfogades som i ditt exempel. Hur konfigurerar jag modulen för detta?
Tack!
Hej valerie
Har du försökt att inaktivera alla plugins för att se om skärmen förbättras?