Fullwidth Wallet-modulen til Divi-tema, fungerer akkurat som den vanlige Portfolio-modulen, bortsett fra at den viser prosjektet ditt i en vakker Fullwdth-modus. Den kommer også med noen unike nye konfigurasjoner: Grid og Carousel. Modulen fungerer ved å vise en liste over de siste prosjektene dine, og kan brukes av designere og kunstnere som ønsker å vise et galleri med deres siste arbeid.
Slik legger du til en portefølje Fullwidth-modul på siden din
Før du kan legge til en full porteføljemodul på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på din nettstedet Web, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Bruk Visual Builder når du surfer på din nettstedet Web i forgrunnen hvis du er logget på WordPress-dashbordet.
Når du har kommet inn i Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først. Vi har gode veiledninger om bruk av Divis linje- og seksjonselementer.
Finn den filtrerbare lommebokmodulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive inn ordet "filtrerbar portefølje" og deretter klikke "Enter" for automatisk å finne og legge til den filtrerbare porteføljemodulen. Når modulen er lagt til, blir du møtt av listen over modulalternativer. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert.
Eksempel på brukstilfelle: Legge til en filtrerbar porteføljemodul på en porteføljeside
I dette eksemplet viser jeg deg hvordan du presenterer en portefølje på en porteføljeside som dekker hele bredden på siden.
La oss begynne.
Bruk den visuelle byggeren til å legge til en fullbreddseksjon under sideoverskriften. Deretter legger du til en filtrerbar porteføljemodul.
Oppdater filtrerbare porteføljeinnstillinger som følger:
Innholdsalternativer
Meldingsnummer: 8 Vis paginering: NEI
Designalternativer
Oppsett: Rutenett Zoom Ikon Farge: # 000000 Hover Overlay Color: #ffffff Tittelskrift: Standard, fet, Alle Caps Tittel Fontstørrelse: 14px Tittel Letter Avstand: 1px Meta Font Størrelse: 12px Meta Avstand bokstaver: 1px
Det er alt!
Innholdsmulighet for porteføljemodul
I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din, vil du alltid finne i denne fanen.
Portefølje tittel
Skriv inn en tittel som vises over porteføljen, eller la den være tom, slik at du ikke bruker en tittel.
Inkluder kategorier
Velg kategoriene du vil vise. Prosjekter fra kategorier som ikke er valgt, vises ikke i listen over prosjekter.
Antall meldinger
Kontroller antall viste prosjekter. La stå tom eller bruk 0 for ikke å begrense beløpet.
Vis tittel
Velg om tittelen på hvert prosjekt skal vises når du holder musepekeren over prosjektelementet.
Vis dato
Velg om publiseringsdatoen for hvert prosjekt skal vises når du holder markøren over prosjektelementet.
Bakgrunnsfarge
Definer en egendefinert bakgrunnsfarge for modulen din, eller la den være tom for å bruke standardfargen.
Bakgrunnsbilde
Hvis dette er angitt, vil dette bildet brukes som bakgrunn for denne modulen. For å fjerne et bakgrunnsbilde, bare fjern URL-en fra innstillingsfeltet. Bakgrunnsbilder vises øverst på bakgrunnsfargene, noe som betyr at bakgrunnsfargen ikke vil være synlig når et bakgrunnsbilde blir brukt.
Administratormerke
Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.
Designmuligheter med bred bredde lommebok
I kategorien Design finner du alle stilalternativene for modulen, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å endre hva som helst.
Disposisjon
Velg oppsettet du vil bruke. "Rutenett" viser alle elementene dine i en flerkolonne, flerradsoppsett. Karusellen viser elementene dine i en enkelt rad med flislagte bilder som glir for å avsløre flere elementer i listen.
Zoom fargeikon
Når du holder markøren over et element i porteføljemodulen, vises et overleggsikon. Du kan justere fargen som brukes fra dette ikonet ved å bruke fargevelgeren i denne innstillingen.
Hover Color Overlay
Når du holder markøren over et element i porteføljemodulen, vises en overleggsfarge øverst på bildet og under porteføljens titteltekst og ikon. Som standard brukes en semi-gjennomsiktig hvit farge. Hvis du vil bruke en annen farge, kan du justere fargen ved å bruke fargevelgeren i denne innstillingen
Svever ikonvelger
Her kan du velge et tilpasset ikon som skal vises når en besøkende svever over porteføljeposter i modulen.
Tekstfarge
Her kan du velge om teksten skal være lys eller mørk.
Tittel skrifttype
Du kan endre fonten til tittelteksten ved å velge ønsket font fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.
Tittel skriftstørrelse
Her kan du justere størrelsen på tittelteksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Titteltekstfarge
Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre tekstfargen på tittelen din, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.
Spacing av tittel bokstaver
Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i tittelteksten, bruker du glidebryteren for å justere mellomrommet eller angir ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Høyde på tittellinjen
Linjehøyde påvirker mellomrommet mellom hver linje i tittelteksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Meta Font
Du kan endre skrifttypen til metateksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.
Metas skriftstørrelse
Her kan du justere størrelsen på metateksten. Du kan dra rekkevidde glidebryteren for å øke eller redusere størrelsen på teksten eller direkte angi ønsket tekststørrelsesverdi i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Metatekstfarge
Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på metateksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.
Metabrevetavstand
Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i metateksten, bruker du glidebryteren for å justere mellomrommet eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Meta Line Høyde
Linjehøyde påvirker mellomrommet mellom hver linje i metateksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Bruk grensen
Aktivering av dette alternativet vil plassere en kant rundt modulen din. Denne rammen kan tilpasses ved hjelp av følgende betingede parametere.
Farge på grensen
Dette alternativet påvirker fargen på grensen din. Velg en egendefinert farge fra fargevelgeren for å bruke den på grensen din.
Bredde av grensen
Som standard er kantene 1 piksel brede. Du kan øke denne verdien ved å dra områdeglidebryteren eller angi en egendefinert verdi i inndatafeltet til høyre for glidebryteren. Tilpassede målenheter støttes, noe som betyr at du kan endre standardenheten fra "px" til noe annet som em, vh, vw etc.
Border Style
Kanter støtter åtte forskjellige stiler: solid, prikket, prikket, dobbelt, spor, møne, overlegg og start. Velg ønsket stil fra rullegardinmenyen for å bruke den på grensen din.
Avanserte porteføljealternativer Fullbredde
I den avanserte fanen finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og IDer til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.
CSS ID
Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.
CSS klasse
Skriv inn de valgfrie CSS-klassene som skal brukes for denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet ditt eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt. nettstedet Web ved å bruke Divi-temaalternativer eller Divi Builder-sideinnstillinger.
Tilpasset CSS
Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene atskilt med semikolon.
Automatisk karusell
Hvis karuselloppsettalternativet er valgt, og du vil at karusellen skal gli automatisk uten at den besøkende trenger å klikke på neste knapp, aktiverer du det alternativet og justerer sentrifugehastigheten nedenfor hvis ønskelig.
Automatisk karusellhastighet
Her kan du indikere karusellens rotasjonshastighet, hvis alternativet "Automatisk karusellrotasjon" er aktivert ovenfor. Jo høyere tall, jo lengre er pausen mellom hver rotasjon. (Eks. 1000 = 1 sek)
synlighet
Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere visse elementer fra siden.
[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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LAST 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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]
Andre divisjoner
- 5 nettsteder for restaurant bruk Divi tema
- Slik legger du til tekst på et Divi WooCommerce-produkt
- Slik endrer du menyfargen mellom Divi-sider
- Hvordan tilpasse rutenettene til en blogg med Divi
- Hvordan bruke rollen Divi editor på WordPress
- Hvordan lage en Divi-glidebryter på fullskjerm
- Hvordan endre farge på menyer mellom Divi-sider
- Funksjoner du sannsynligvis ikke kjenner til Divi
- Slik bruker du Divi Builder på WordPress
- Slik bruker du Divi video-rullemodulen
- Slik bruker du Divi Builder Flip-modulen
- Hvordan legge til en attestmodul på Divi Builder
- Slik bruker du Divi-tekstmodulen
- Hvordan lage en glidebryter på Divi
- Hvordan redigere en Divi-brukerrolle
- Slik bruker du Divi Social Media-modulen
- Hvordan bruke butikkmodulen på temaet WordPress Divi
- Slik bruker du Divi sidebar-modulen
- Slik bruker du Divi Price Table Module
- Slik bruker du tittelmodulen til Divi-publikasjoner
- Hvordan legge til en videomodul av Divi
- Slik bruker du artikkelen navigasjonsmodulen
- Slik bruker du Divi-søkemodulen
- Slik bruker du Divi-lommebokmodulen
- Slik bruker du personmodulen på Divi Builder
- Slik bruker du lommebokmodulen med Divi filter
- Slik bruker du skyvemodulen med full bredde
- Slik bruker du Divi Builder Image Module
- Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
- Slik bruker du bildegalleriemodulen
- Slik bruker du Divi Builder Full-Width Card Module
- Slik bruker du Divi Full Width Portfolio Module
- Hvordan bruke Divi-modulen i full bredde
- Slik bruker du Divi-tellermodulen
- Slik bruker du glidebryteren for artikler på Divi Builder
- Slik bruker du Divi Email Optin-modulen
Bonjour,
Jeg klarer å ha enten en filtrerbar lommebok eller en lommebok i full bredde, men full bredde kan ikke filtreres.
Jeg vil gjerne kunne legge til tittelen på det aktuelle prosjektet i mine filtrerbare porteføljebilder, slik det er tilfelle med "klassiske" porteføljer. Vet du hvordan du gjør det?
Hei!
Jeg dro til Divi og snublet på vei for å lage en "Ads" -side der de nye annonsene mine ville vises i små miniatyrbilder / miniatyrer ved siden av hverandre som på eiendomsmeglernettsteder. For informasjon har jeg allerede opprettet siden ADVERTISEMENTS og noen artikler (en artikkel for en annonse) som jeg forbinder med kategorien ADVERTISEMENTS…. men de vises i stort format. Jeg håper å ha forklart meg godt i min problematiske! Mens jeg venter på dine forslag, takker jeg på forhånd for forklaringer og råd! God natt !! Vennlig hilsen - Jerome
Hei, hvis du bruker bloggmodulen, må du legge til spesifikk CSS som gjelder for denne modulen. Dessverre tilbyr denne formen ikke mange tilpasningsalternativer.
Bonjour,
Takk for din helt komplette artikkel.
Jeg klarer å vise enten en porftolio i full bredde eller en filtrerbar portefølje, men med store marginer rundt.
Vet du om divi lar deg vise en filtrerbar portefølje i full bredde?
Eller å vise en filtrerbar portefølje uten viktige marginer?
takk
Hei Delphine,
Jeg har aldri testet, men kommer tilbake til deg hvis jeg har svar.
Hei, jeg likte artikkelen din veldig godt, men når jeg prøver å reprodusere denne typen layout, har jeg store mellomrom mellom bildene mine. Jeg hadde foretrukket å ha bildene sammen som i eksemplet ditt. Hvordan konfigurerer du modulen for dette?
Takk skal du ha!
Hei Valerie,
Har du prøvd å deaktivere alle plugins for å se om skjermen forbedres?