Sådan justeres Billeder Side om side i Teksttryk

Billedjustering er en konstant kamp for Teksttryksbloggeren.

dette indlæg er til alle, der har brugt mere tid, end de ville passe på at indrømme at fikle med billedjustering og positionering i editoren.

de to bedste metoder til at justere billeder

der er to teknikker, du bør overveje for at placere billeder ved siden af hinanden. Jeg vil dele, hvordan man bruger hver enkelt samt fordele og ulemper inkluderet.

Juster billeder med et galleri

den mest pålidelige metode til placering af billeder side om side er at bruge et galleri.

hvis du aldrig har oprettet et galleri før, skal du følge denne vejledning om, hvordan du opretter gallerier.

tricket er at bruge en mellemstor version af billederne og vælge to kolonner, selvom du kun inkluderer to billeder. Resultatet vil se sådan ud:

skærmbillede af et eksempel galleri

skærmbillede af et eksempel galleri

i modsætning til billeder, som du placerer i dit indlæg, har gallerier speciel HTML, der holder billederne ved siden af hinanden. Denne struktur gør det lettere og mindre besvær at justere billederne i rækker/kolonner.

Placer billeder med kolonne kortkoder

hvis du ikke har noget imod at tilføje et nyt plugin til din hjemmeside, kolonne kortkoder er en fantastisk løsning til at tilpasse billeder.

Screenshot af kolonnen kortkoder plugin side

kolonne kortkoder er en af de fantastiske plugins, der ikke fylder din hjemmeside med nye menuer. Faktisk er det eneste, det tilføjer til dit admin dashboard, denne bekvemme knap over editoren.

 knappen tilføjet af kolonne kortkoder

knappen tilføjet af Kolonnekortkoder

for at vise, hvordan det fungerer, opretter jeg en enkelt række med tre billeder.

Sådan bruges Kolonnekortkoder

det første trin er at placere markøren på en tom linje i editoren. Klik derefter på knappen shortcode og vælg en kolonneindstilling.

viser, hvordan du tilføjer en kolonnekort
oprettelse af en række med tre kolonner.

gentag dette trin for at tilføje en anden 1/3 kolonne og gentag derefter en gang mere, men denne gang ved hjælp af en tredjedel (sidste) mulighed. Resultatet er følgende kortkoder tilføjet til editoren.

 kortkoder i editoren

kortkoder i editoren

hvis du aldrig har brugt kortkoder før, kan du følge denne tutorial først.

som du kan se, har hver kortkode et åbnings-og lukkemærke. Nu Kan du sætte et billede inde i hver kortkode, som denne:

billeder i kortkoder i editoren

billeder i kortkoder i editoren

ligner et rod, ikke?

det skyldes, at kortkoderne ikke kan style billederne i editoren, men det er ikke et problem. Når du har set dem på siden, de justeres pænt i kolonner, sådan her:

eksempel på billeder placeret i kolonner

eksempel på billeder placeret i kolonner

Kolonnekort sammenlignet med gallerier

mens kortkoderne ikke vises pænt i editoren som gallerier og kan være mere en udfordring at arbejde med, får du også lidt mere kontrol. For eksempel, gallerier tvinge alle billeder til at linke til:

  • mediefil
  • Vedhæftningsside
  • intet

med plugin kolonner kan Billeder have brugerdefinerede URL ‘ er og hvert link til en anden type side.

du kan også blande og matche kolonnerne. For eksempel kan du placere et billede i en 2/3 kortkode ved siden af et billede med en 1/3 kolonne kortkode.

hvorfor du ikke bør bruge justeringsindstillinger

disse metoder vil producere de layouts, du ønsker uden alle hovedpine.

billedgallerier er den enkleste og nemmeste måde at justere billeder i træk på. Kolonnekortkoder er dog et godt alternativ, der giver mere fleksibilitet.

de fungerer begge så godt, fordi de placerer billeder i en ny HTML-struktur. HTML gør det muligt at opretholde et Side-By-Side layout, uanset hvilken skærm der bruges til at se dem.

er der noget jeg savnede? Har du spørgsmål? Skriv en kommentar nedenfor.

Ben Sibley
Ben Sibley
Ben Sibley er en designer & udvikler og grundlægger af Compete Themes.

Leave a Reply