Divi gør det nemt at tilføje billeder hvor som helst på din blog. Alle billeder understøtter progressiv indlæsning og kommer med 4 forskellige animationsstile, der gør det sjovt og engagerende at navigere på dit websted. Billedmoduler kan placeres i enhver kolonne, du opretter, og deres størrelse vil blive justeret, så de passer.
Sådan tilføjes et billedmodul fra Divi
Før du kan tilføje et billedmodul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din hjemmeside, 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 dit websted i forgrunden, hvis du er tilsluttet dit WordPress-dashboard.
Når du har aktiveret Visual Builder, kan du klikke på den grå (+) 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.
Find billedmodulet på listen over moduler, og klik på det for at føje det til din side. Listen over mods er søgbar, hvilket betyder, at du også kan skrive ordet "image" og derefter klikke på enter for automatisk at finde og tilføje billedmod! 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 .
Brug case-eksempel: Tilføjelse af overlappende billeder for at illustrere tjenester på en serviceside
Der er utallige måder at bruge billedmodulet på. I dette eksempel viser jeg dig, hvordan du tilføjer billeder til en serviceside for et mindre virksomhedswebsted. Her vil jeg tilføje billederne. Hver røde cirkel repræsenterer et billede.
Da tilføjelse af et billede til en side er en ret simpel og ligetil proces, vil jeg tilføje noget brugerdefineret styling for at placere mine billeder, så de overlapper, hvilket skaber en stablet effekt.
Lad os starte.
Brug den visuelle builder til at tilføje et standardsektion med et 1/4 1/4 1/2 layout. Tilføj derefter et tekstmodul til højre kolonne 1/2 af din række. Indtast et overskrift og en beskrivelse af tjenesten.
Tilføj derefter et billedmodul til den yderste venstre 1/4 kolonne.
Opdater indstillingerne for billedmodulet som følger:
Indholdsindstillinger
Billed-URL: [indtast URL eller download billedet med dimensionerne 500 × 625]
Design muligheder
Brugerdefineret margen: venstre -60px
Valgmuligheder avancées
Animation: Fra venstre mod højre
Gem indstillinger
Tilføj et andet billedmodul i den anden 1/4 kolonne (eller den midterste kolonne), og opdater billedindstillingerne som følger:
Indholdsindstillinger
Billed-URL: [indtast URL eller download billedet med dimensionerne 500 × 625]
Design muligheder
Brugerdefineret margen: Top 100px, -60px Left
Valgmuligheder avancées
Animation: Fra højre til venstre
Gem indstillinger
Dette tager sig af det første afsnit. Nu til den næste servicesektion kan vi duplikere den sektion, vi lige har oprettet til den første servicesektion. Når sektionen er duplikeret, skal du ændre kolonnestrukturen til et 1/2 1/4 1/4 kolonnelayout (det modsatte af det foregående).
Træk derefter tekstmodulet med overskriften og beskrivelsen af tjenesten i kolonne 1/2 yderst til venstre. Sørg for at skubbe de to billedmoduler for at udfylde hver 1/4 kolonne (nu til højre).
Da billedmodulerne er duplikater, er vi nødt til at uploade de nye billeder til den pågældende servicesektion. Moduler har også altid tilpassede margenindstillinger som de to første billedmoduler, der er oprettet. Lad os ændre det.
Start med billedmodulet i højre 1 / 4-søjle, opdater følgende billedindstillinger:
Indholdsindstillinger
Billed-URL: [indtast URL eller download billedet med dimensionerne 500 × 625]
Design muligheder
Brugerdefineret margen: -60px venstre (kun)
Avanceret fane
Animation: Fra højre til venstre
Endelig skal du opdatere billedindstillingerne for 1/4 søjle billedmodul med følgende:
Indholdsindstillinger
Billed-URL: [indtast URL eller download billedet med dimensionerne 500 × 625]
Design muligheder
Brugerdefineret margen: 100px op, -60px højre
Avanceret fane
Animation: Fra venstre mod højre
Gem indstillinger
Tjek nu siden!
Indstillinger for billedmodulets indhold
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.
Billed-URL
Placer en gyldig webadresse her, eller vælg / upload et billede via WordPress-mediebiblioteket. Billeder vises altid retfærdiggjort i deres kolonner og dækker hele bredden af din kolonne. Dit billede vil dog aldrig være større end dets oprindelige størrelse. Billedets højde bestemmes af billedformatet for dit originale billede.
Åbn i seeren
Her kan du vælge, om dit billede skal åbnes i en fremviser, når du klikker på det. Hvis denne indstilling er aktiveret, "zoomer" dit billede til sin maksimale størrelse, når du klikker i et modalvindue. Det er en fantastisk funktion til tegnebøger.
Link URL
Placer en gyldig web-url i dette felt for at gøre dit billede til et link. Hvis du efterlader dette felt tomt, bliver dit billede som et statisk element.
Åbning af URL
Du kan vælge her, om dit link åbnes i et nyt vindue.
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.
Designmoduler til billedmoduler
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.
Billedoverlay
Hvis denne indstilling er aktiveret, vises en overlayfarve og -ikon, når en besøgende svæver over billedet.
Farveikon overlay
Her kan du indstille en brugerdefineret farve til overlay-ikonet
Cover overlay farve
Her kan du definere en tilpasset farve til overlejringen.
Oversvømmelsesikon
Her kan du definere et tilpasset ikon til overlayet.
Fjern plads under billedet
Denne indstilling påvirker kun billeder, når de er det sidste modul i en kolonne. Når denne indstilling er aktiveret, fjernes afstanden mellem bunden af billedet og det næste afsnit, så billedet kan ramme toppen af det næste afsnit på siden.
Billedjustering
Her vælger du i hvilken retning dit billede flyder i kolonnen. Du kan flyde billedet til venstre, højre eller holde det centreret.
Centrer altid billedet på mobilen
Ofte er små billeder mere behagelige for øjet på mobile enheder, når de er centreret. Når kolonner nedbrydes, bliver billeder, der er justeret til venstre eller højre i mindre kolonner, forældreløse, når kolonnerne nedbrydes og når 100% bredde. Aktivering af denne kolonne med tvungne billeder til at justeres til midten af kolonnen på mobil uden at påvirke billedjusteringen på desktops.
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. Brugertilpassede måleenheder understøttet, hvilket betyder at du kan ændre standardenheden fra "px" til noget andet som em, vh, vw osv.
Grænsestil
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.
Maksimal billedbredde
Som standard er den maksimale billedbredde indstillet til 100%. Dette betyder, at billedet vises i sin naturlige bredde, medmindre billedets bredde overstiger bredden på den overordnede kolonne, i hvilket tilfælde billedet begrænses til 100% af kolonnebredden. Hvis du yderligere vil begrænse billedets maksimale bredde, kan du gøre det ved at indtaste den ønskede maksimale bredde her. For eksempel vil en værdi på 50% begrænse billedets bredde til 50% af bredden af den overordnede kolonne.
Force fuld bredde
Som standard vises billeder i deres oprindelige bredde. Du kan dog vælge at tvinge billedet til at spænde over den fulde bredde af den overordnede kolonne ved at aktivere denne mulighed.
Tilpasset margen
Margenen er det rum, der er tilføjet på ydersiden af dit modul, mellem modulet og det næste element over, under eller til venstre og højre for det. Du kan tilføje tilpassede margenværdier til en af de fire sider af modulet. For at fjerne den tilpassede margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.
Avancerede indstillinger for billedmodul
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 oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i det brugerdefinerede CSS-stilark, som du føjer til din side eller til dit websted ved hjælp af Divi-temaindstillingerne eller Divi Builder-sideindstillingerne.
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.
Animation
Brug denne rullemenu til at angive den dovne belastningsanimation til dit billede. Du kan vælge at få dit billede vist fra højre, venstre, bund eller top.
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.
Alternativ billedtekst
Alt-teksten indeholder alle de nødvendige oplysninger, hvis billedet ikke indlæses, vises korrekt eller i en anden situation, hvor en bruger ikke kan se billedet. Det gør det også muligt at læse og genkende billedet af søgemaskiner.
[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