Fullwidth Wallet-modulet i Divi-tema, fungerer ligesom det normale Portfolio-modul, bortset fra at det viser dit projekt i en smuk Fullwdth-tilstand. Den kommer også med nogle unikke nye konfigurationer: Grid og Carousel. Modulet fungerer ved at vise en liste over dine seneste projekter og kan bruges af designere og kunstnere, der ønsker at vise et galleri med deres seneste værker.
Sådan tilføjes et Portfolio Fullwidth-modul til din side
Før du kan tilføje et komplet porteføljemodul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din Websted, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Brug Visual Builder når du gennemser din Websted i forgrunden, hvis du er logget ind på dit WordPress-dashboard.
Når du har indtastet Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du huske at føje en række til din side først. Vi har gode tutorials om brug af Divis linje- og sektionselementer.
Find det filtrerbare tegnebogmodul på listen over moduler, og klik på det for at tilføje det til din side. Listen over moduler kan søges, hvilket betyder, at du også kan skrive ordet "filtrerbar portefølje" og derefter klikke på "Enter" for automatisk at finde og tilføje det filtrerbare porteføljemodul. Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret.
Eksempel på anvendelse: Tilføjelse af et filtrerbart porteføljemodul til en porteføljeside
I dette eksempel viser jeg dig, hvordan du præsenterer en portefølje på en porteføljeside, der dækker sidens fulde bredde.
Lad os starte.
Brug den visuelle builder til at tilføje en sektion med fuld bredde under sideoverskriften. Tilføj derefter et filtrerbart porteføljemodul.
Opdater de filtrerbare porteføljeindstillinger som følger:
Indholdsindstillinger
Meddelelsesnummer: 8 Skærmpaginering: NEJ
Design muligheder
Layout: Grid Zoom Ikon Farve: # 000000 Hover Overlay Farve: #ffffff Titel Skrifttype: Standard, Fed, Alle Caps Titel Skriftstørrelse: 14 px Titel Letterafstand: 1 pix Meta skriftstørrelse: 12 pix Meta afstand bogstaver: 1px
Det er alt!
Indholdsfortegnelse for porteføljemodul
I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid findes på denne fane.
Porteføljens titel
Indtast en titel, der vises over porteføljen, eller lad den være tom, så du ikke bruger en titel.
Medtag kategorier
Vælg de kategorier, du vil vise. Projekter fra kategorier, der ikke er valgt, vises ikke på listen over projekter.
Antal beskeder
Kontroller antallet af viste projekter Efterlad tom eller brug 0 for ikke at begrænse beløbet.
Vis titel
Vælg, om titlen på hvert projekt skal vises, når du holder musen over projektelementet.
Vis dato
Vælg, om udgivelsesdatoen for hvert projekt skal vises, når du holder markøren over projektelementet.
Baggrundsfarve
Definer en brugerdefineret baggrundsfarve til dit modul, eller lad den være tom for at bruge standardfarven.
Baggrundsbillede
Hvis indstillet, bruges dette billede som baggrund for dette modul. For at fjerne et baggrundsbillede skal du bare fjerne URL'en fra indstillingsfeltet. Baggrundsbillederne vises oven på baggrundsfarverne, hvilket betyder, at baggrundsfarven ikke vil være synlig, når der anvendes et baggrundsbillede.
Administratormærke
Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.
Fuld bredde tegnebog design muligheder
Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.
Disposition
Vælg det layout, du vil bruge. "Gitter" viser alle dine varer i et layout med flere kolonner og flere rækker. Karrusellen viser dine emner i en enkelt række med flisebelagte billeder, der glider for at afsløre yderligere emner på listen.
Zoom farveikon
Når du holder markøren over et element i porteføljemodulet, vises et overlay-ikon. Du kan justere den anvendte farve fra dette ikon ved hjælp af farvevælgeren i denne indstilling.
Hover Color Overlay
Når du holder markøren over et element i porteføljemodulet, vises en overlayfarve øverst på billedet og under porteføljens titeltekst og ikon. Som standard bruges en semi-gennemsigtig hvid farve. Hvis du vil bruge en anden farve, kan du justere farven ved hjælp af farvevælgeren i denne indstilling
Valg af musepeket
Her kan du vælge et brugerdefineret ikon, der skal vises, når en besøgende svæver over porteføljeposter i modulet.
Tekstfarve
Her kan du vælge, om din tekst skal være lys eller mørk.
Titel skrifttype
Du kan ændre skrifttypen på din titeltekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, stor bogstav og understregningsmuligheder.
Titel skriftstørrelse
Her kan du justere størrelsen på din titeltekst. Du kan trække skyderen for rækkevidde for at øge eller formindske størrelsen på din tekst eller direkte indtaste værdien for den ønskede tekststørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Titel tekst farve
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre tekstfarven på din titel, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Spacing af titel breve
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din titeltekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Højde på titellinjen
Linjehøjde påvirker afstanden mellem hver linje i din titeltekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i afstanden placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Meta Font
Du kan ændre skrifttypen på din metatekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.
Metas skriftstørrelse
Her kan du justere størrelsen på din metatekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Metatekstfarve
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din metatekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Meta Letter afstand
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din metatekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Meta Line Højde
Linjehøjde påvirker mellemrummet mellem hver linje i din metatekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfeltet placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Brug grænsen
Aktivering af denne mulighed placerer en kant omkring dit modul. Denne kant kan tilpasses ved hjælp af følgende betingede parametre.
Farve på grænsen
Denne indstilling påvirker farven på din kant. Vælg en brugerdefineret farve fra farvevælgeren for at anvende den på din kant.
Bredden af grænsen
Som standard er kanterne 1 pixel brede. Du kan øge denne værdi ved at trække områdeskyderen eller indtaste en brugerdefineret værdi i indtastningsfeltet til højre for skyderen. Understøttede brugerdefinerede måleenheder, hvilket betyder at du kan ændre standardenheden fra "px" til noget andet som em, vh, vw osv.
Border Style
Grænser understøtter otte forskellige stilarter: solidt, prikket, prikket, dobbelt, rille, ryg, overlay og start. Vælg din ønskede stil i rullemenuen for at anvende den på din kant.
Avancerede porteføljemuligheder Fuldbredde
På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.
CSS ID
Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.
CSS klasse
Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at skabe brugerdefineret CSS-styling. Du kan tilføje flere klasser, adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-barnetema eller i det tilpassede CSS-stylesheet, du tilføjer til din side eller hjemmeside. Websted ved at bruge Divi-temaindstillinger eller Divi Builder-sideindstillinger.
Tilpasset CSS
Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.
Automatisk karrusel
Hvis karrusellayout-indstillingen er valgt, og du vil have karrusellen til at glide automatisk uden at den besøgende behøver at klikke på den næste knap, skal du aktivere denne mulighed og justere centrifugeringshastigheden nedenfor, hvis det ønskes.
Automatisk karruselhastighed
Her kan du angive karrusellrotationshastigheden, hvis indstillingen "Automatisk karrusellrotation" er aktiveret ovenfor. Jo højere tallet er, jo længere er pausen mellem hver rotation. (Eks. 1000 = 1 sek.)
synlighed
Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne 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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD 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”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andre Divi tutorials
- 5 websteder, der bruger Divi restaurant tema
- Sådan tilføjer du tekst på et Divi WooCommerce-produkt
- Sådan ændres menuen farve mellem Divi sider
- Sådan tilpasses tavlerne på en blog med Divi
- Sådan bruges rolle Divi redaktør på WordPress
- Sådan opretter du en Divi-skyder på fuld skærm
- Sådan ændres menuenes farve mellem Divi-sider
- Funktioner, som du sandsynligvis ikke kender til Divi
- Sådan bruger du Divi Builder på WordPress
- Sådan bruges Divi-video-rullemodulet
- Sådan bruges Divi Builder Flip-modulet
- Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
- Sådan bruges Divi-tekstmodulet
- Sådan opretter du en skyder på Divi
- Sådan redigeres en Divi-brugerrolle
- Sådan bruges Divi Social Media-modulet
- Sådan bruges butikmodulet med temaet WordPress Divi
- Sådan bruges Divi sidebar modul
- Sådan bruges Divi Price Table Module
- Sådan bruges titelmodulet i Divi-publikationer
- Sådan tilføjes et videomodul til Divi
- Sådan bruges artikelnavigationsmodulet
- Sådan bruges Divi-søgemodulet
- Sådan bruges Divi wallet-modulet
- Sådan bruges personmodulet på Divi Builder
- Sådan bruges tegnebogen modulet med Divi filter
- Sådan bruges glidemodulet i fuld bredde
- Sådan bruges Divi Builder Image Module
- Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
- Sådan bruges billedgallerimodulet
- Sådan bruges Divi Builder Fuldbredde-kortmodul
- Sådan bruges Divi Full Width Portfolio Module
- Sådan bruges Divi-modulet i fuld bredde
- Sådan bruges Divi Counter Module
- Sådan bruges artikelskyderen på Divi Builder
- Sådan bruges Divi Email Optin-modulet
Hej,
Det lykkes mig enten at have en filtrerbar tegnebog eller en tegnebog i fuld bredde, men den fulde bredde kan ikke filtreres.
Jeg vil gerne kunne tilføje titlen på det pågældende projekt til mine filtrerbare porteføljebilleder, som det er tilfældet med "klassiske" porteføljer. Ved du, hvordan du gør det?
Hej!
Jeg gik lige til Divi, og jeg snublede på vejen for at oprette en "Ads" -side, hvor mine nye annoncer ville blive vist i små miniaturer / miniatyrer ved siden af hinanden som på ejendomsmæglerwebsteder. For information har jeg allerede oprettet min ADVERTISEMENTS-side og nogle artikler (en artikel til en annonce), som jeg forbinder med kategorien ADVERTISEMENTS…. men de vises i stort format. Jeg håber at have forklaret mig godt i min problematiske! Mens du venter på dine forslag, tak på forhånd for dine forklaringer og råd! Godnat !! Med venlig hilsen Jerome
Hej, hvis du bruger blogmodulet, skal du tilføje specifik CSS, der gælder for dette modul. Desværre tilbyder denne form ikke mange tilpasningsmuligheder.
Hej,
Tak for din meget komplette artikel.
Det lykkes mig at vise enten en porftolio i fuld bredde eller en filtrerbar portefølje, men med store margener omkring den.
Ved du, om divi kan vise en filtrerbar portefølje i fuld bredde?
Eller for at vise en filtrerbar portefølje uden de vigtige margener?
Tak
Hej Delphine,
Jeg har aldrig testet, men vil vende tilbage til dig, hvis jeg har et svar.
Hej, jeg nød din artikel meget, men når jeg prøver at gengive denne type layout, har jeg store mellemrum mellem mine billeder. Jeg ville have foretrukket at få billederne tilsluttet som i dit eksempel. Hvordan konfigureres modulet til dette?
Tak!
Hej Valerie,
Har du prøvet at deaktivere alle plugins for at se, om skærmen forbedres?