Indholdsfortegnelse
Har du brug for at placere tekst omkring billedet på en elegant måde? Lær, hvordan du nemt gør det uden kodning og designerfaring. Gutenberg-editoren giver flere muligheder for at pakke tekst rundt om tekst i WordPress.
Du kan opnå en flot hjemmeside og en nem redigering af indhold på samme tid. Hvis du vælger Gutenberg-editoren til din WordPress-hjemmeside, får du det bedste værktøj på lang sigt. Du får flere muligheder for at ombryde tekst omkring billeder på forskellige måder. Gutenberg giver mange fordele som mere overskuelig kildekode til hjemmesiden, hastighed, sikkerhed og brugervenlighed.
Hvordan ombrydes tekst omkring et billede i WordPress?
Gutenberg-editoren og -blokkene gør hjemmesidens indhold lettere, moderne og letlæseligt. Vi viser dig flere måder, hvorpå du kan ombryde tekst omkring billedet i WordPress-sider, indlæg og brugerdefinerede indlægstyper. Der er forskellige blokke, og du kan også bruge dem i kombination, som et sæt af dele og funktioner, der giver dig yderligere muligheder for ombrydning.
Du kan vælge blokken til den indpakkede tekst omkring billedet i henhold til undersiden og dens indholdstype. Du kan vælge én stil til præsentationssiden og en anden til et blogindlæg. Overvej også, hvilken type indhold der repræsenterer billedet. Er det et beskrivelsesbillede eller et mere repræsentativt eller sælgende medie?
Ombryd tekst omkring billede - blokerer valg
Der er 4 blokke, du kan bruge til at ombryde en tekstblok omkring et billede. Vi beskriver dem alle:
- Billedblok og afsnitblok, se mere nedenfor
- Medie- og tekstblok find mere nedenfor
- Kolonne-blok i individuelt indlæg
- Klyngeblok i individuelle indlæg (funktionen er kun tilgængelig med Citadela Pro-plugin)
Ombryd tekst og billede for en bedre læseoplevelse
Der er flere grunde til, at du bør bruge denne blok. Du vil sætte mest pris på den, hvis du skriver blogindlæg. Billeder er en integreret del af historien. Det er ligegyldigt, om du skriver en rejseblog eller et magasin om IT-nyheder. Så når du tilføjer fotos i dit indhold, skal du tænke på billedjustering. Læserne vil bedre kunne forstå, hvad du skriver om.
I mange tilfælde er det nødvendigt at indsætte billede og tekst side om side. Hvad er vigtigt?
- Det skal give mening. Billedet skal være ved siden af den rigtige tekst.
- Den skal være pænt justeret.
- Det skal passe til hele hjemmesidens layout.
Billed- og afsnitsblokke
Mens du er i Klassisk redaktør Du kunne også placere tekst ved siden af billedet, men du kunne ikke tale om en pæn justering. Især hvis billedet var lille, og man satte mere tekst ved siden af det. Teksten overskyggede billedet, og det så ikke pænt ud.
Gutenberg-editor og dens Image-blok har en fantastisk funktion - ændring af billedstørrelse. Træk prikker rundt om billedet for automatisk at ændre dets størrelse og tekstjustering.
Medie- og tekstblok - WordPress justerer tekst ved siden af billede
- Ombryd tekst og billeder med Media & Text-blokken
- Sådan tilføjer du medie- og tekstblokke i editoren
- Sådan fungerer denne blok
- Indstillinger for medie- og tekstblokke
- Hvad betyder "Stak på mobilen" middel
- Bonus: Sådan retfærdiggør du tekst i WordPress
Hvordan justeres tekst ved siden af et billede?
Kom i gang nu
Kom i gang nu med en risikofri prøveperiode. Der kræves ikke kreditkort.
Media & Text-blokken er en fantastisk funktion. Media & Text-blokken løser dette problem og sikrer perfekt tilpasning af tekst til billedet uden at forstyrre komposition og layout. Det er grunden til, at du bør bruge denne blok.
Det forbedrer også hjemmesidedesignet på mobile enheder. Denne indpakningsblok hjælper WordPress-temaet med at dække forskellige mobile layouts. På en smartphone skal alle dele af hjemmesiden være tydeligt synlige og læsbare. Hvordan vil Media & Text-blokken se ud på mobiltelefoner, og tabellen håndterer funktionen "Stack on mobile", som vi vil se på nedenfor.
Om kort tid vil du kunne bruge Media & Text-blokken i vores nye WordPress-tema kaldet Citadela. Læs mere om Citadela-temaet i en separat artikel.
Hvordan tilføjer man medie- og tekstblokke i blokeditoren?
At tilføje Media & Text-blokken er lige så nemt som at tilføje enhver anden blok. Det er en kerneblok, hvilket betyder, at du ikke behøver at downloade eller installere noget.
Brug "+"-ikonet i det øverste panel eller hvor som helst i editoren, og vælg Media & Text-blokken.
Sidste mulighed er at skrive "/" og skrive "media" bagefter. WordPress vil automatisk vise dig udvalgte blokke, der matcher det, du søgte efter.
Hvordan fungerer Media & Text-blokken?
Media & Text-blokken grupperer grundlæggende 2 forskellige typer indhold i én. Den første er et medie, f.eks. et billede eller en video, som du kan tilføje via:
- Upload
- Mediebibliotek
- Træk og slip
Den anden er plads til tekstindhold. Her kan du skrive tekstafsnit, punktlister eller titler. Du kan også tilføje Knapblok som vi talte om tidligere.
Media & Text-blokken justerer altid billede og tekst side om side, uanset hvor meget tekst du skriver. Hvordan fungerer det? Billedet justerer automatisk sig selv baseret på indholdets højde i tekstkolonnen.
Indstillinger for medie- og tekstblok
Generelle blokindstillinger
1. Øverste værktøjslinje
Værktøjslinjen over blokken tilbyder flere muligheder. Hvis dit aktive tema understøtter det, kan du indstille Media & Text-blokken som bred eller fuld bredde. Du kan også vælge, hvor du vil placere billede eller video ved at klikke på:
- Vis medier til venstre
- Vis medier til højre
I den øverste værktøjslinje er der også et ikon til redigering af medier, hvor du kan angive Alt Text, Title, Caption eller Description. Læs mere om redigering af billeder i vores artikel Arbejde med WordPress' billedblok.
2. Højre sidepanel
Højre sidebjælke tilbyder yderligere indstillinger for Media & Text-blokken. Her er det muligt at tilføje alternativ tekst, indstille baggrundsfarve eller tilføje yderligere CSS-klasse. Du kan også aktivere funktionen "Stack on mobile".
Takket være denne funktion vises billede og tekst pænt på mobile enheder. Hvis du deaktiverer "Stack on mobile", vil billede og tekst blive stående side om side, og det vil være svært at læse i den responsive version.
Hvis du aktiverer denne funktion, vil indhold på venstre side blive vist over indhold på højre side på mobiltelefonen.
Justering af tekst
En del af Media & Text-blokken er sammen med billede eller video også tekstindhold. Det kan være en af følgende indholdstyper:
1. Paragraf
I øverste værktøjslinje kan du indstille tekstjustering, gøre tekst fed, kursiv eller tilføje URL-link.
I sidepanelet til højre kan du vælge skriftstørrelse, skriftfarve eller afsnitsfarve. En interessant funktion er "Drop Cap", som fremhæver det første tegn i teksten. Det er en god funktion i blokindlæg for at gøre teksten mere interessant.
2. Overskrift
Overskrift minder meget om afsnit. Du kan også konfigurere dens udseende, gøre den fed eller kursiv og indsætte et URL-link. Forskellen er, at du kan vælge overskriftstype - H2, H3, H4.
Andre overskriftsstørrelser og justeringsindstillinger er tilgængelige i sidepanelet i højre side.
3. Liste
Hvis du tilføjer en listeblok til dit indhold, kan det være punktopstillinger, nummererede lister eller lister i flere niveauer. Du kan også gøre teksten fed, kursiv og tilføje URL-link.
4. Knap-blok
Denne blok, som tilføjer en knap til indholdet, kan tilpasses hjemmesidens design. Knapfarve og -stil eller baggrundsfarve kan konfigureres i sidepanelet i højre side.
Glem ikke at læse artiklen om Knapblok.
Skift mellem bloktyper
I Media & Text-blokken er det muligt at konvertere en type indholdsblok til en anden. Du kan også ændre Media & Text-blok til Image-blok, og tekstdelen vil blive slettet.
I tekstindhold er det muligt at ændre Paragraph-blok til Heading- eller List-blok.
Bonus: Sådan retfærdiggør du tekst i WordPress
At bruge retfærdiggjort tekst har sine fordele og ulemper. Man kan normalt finde retfærdiggjort tekst i bøger eller aviser, men det bruges ikke længere på hjemmesider. Hvorfor ikke?
For flere år siden blev Justify-funktionen integreret direkte i WordPress Classic-editoren. Justificeret tekst plejede at forårsage synlighedsproblemer i forskellige browsere eller mobile enheder. Det er også relateret til vanskelig læsbarhed af retfærdiggjort tekst. Denne funktion blev derfor forældet og fjernet.
Denne særlige funktionalitet findes heller ikke i den nye block-editor (Gutenberg).
Så hvordan retfærdiggør du tekst, hvis du virkelig vil?
Løsningen er at tilføje simpel CSS-kode i få trin:
- Der er en indstilling for yderligere CSS-klasse for afsnitsblokken i sidepanelet i højre side.
- Skriv klassens navn "retfærdiggøre"
- Udgiv side eller artikel
- Hvis du ser en forhåndsvisning, skal du klikke på Tilpas i den øverste hovedbjælke
- I venstre side er der en ny sidebar med indstillinger.
- Klik på Yderligere CSS
- Indsæt følgende CCS-kode:
p.justify {
text-align: justify;
}
Det er gjort. Fra nu af er tekst i din Media & Text Block berettiget.
WordPress er blevet mere brugbart uden tredjeparts sidebyggere takket være Gutenberg-editoren. Den har en fremragende værdi for din hjemmeside set fra et langsigtet synspunkt, og når du opretter eller redesigner en hjemmeside. Gutenberg-blokke giver et stort udvalg af stilarter, men du kan finde hånd WordPress-kode til indpakning af tekst omkring billeder.
Hvad er din mening om Media & Text-blokken? Har du allerede brugt den? Hvordan kan du lide at arbejde med den? Fortæl os det i kommentarerne nedenfor.
Generelt kan jeg godt lide bloksystemet, men medmindre jeg overser noget, er dette et skridt tilbage. I øjeblikket forsøger jeg blot at flyde et billede til venstre eller højre og få teksten til at ombrydes, da det virkelig burde være så let at gøre, men det ser ud til, at WordPress bare ikke ønsker, at det skal ske. Hvorfor ikke? Brug af medie- og billedblokken fungerer kun, hvis teksten har den rigtige længde. En side som denne skal f.eks. ikke laves om med en mærkelig afstand mellem afsnittene, hvis teksten ikke har præcis den rigtige længde i forhold til billedets størrelse.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Hej med dig,
Mange tak for din feedback. Det lyder som en rigtig god idé, derfor vil jeg gerne bede dig om at give os et minut af din tid til at besvare 4 enkle spørgsmål: https://aitthemes.typeform.com/to/vc7arn der kan hjælpe vores team med at lave bedre produkter med unikke funktioner hurtigere.
Tusind tak for din tid og forståelse.
Med venlig hilsen!
Zlatko
AIT-team
Ja, jeg kan ikke få teksten til at ombrydes. Disse kombinationer af tekstblokke ser ud til at være ubrugelige.
Denne idé er elendig som den eneste måde at indsætte billeder i en blog på - jeg kan ikke få teksten til at pakke pænt ind, og den har ikke samme størrelse, uanset hvad jeg gør. God idé til VISSE situationer, men ikke til alt. Nogle gange vil man bare have et billede med afsnittene pakket ind omkring det, i stedet for at sige noget om billedet.
Hvordan man tilføjer wrapper og bruger indhold i fuld bredde yar alvorligt, hvordan man dækker fuld med derefter tage container i det... bygherre er meget forvirrende, hvordan man tilføjer container wrap meget dårlig editor yar
Hej med dig,
Tak for dine komplimenter. Du er velkommen til at tjekke vores blogside https://www.ait-themes.club/blog/, hvor du finder mange nyttige tips til, hvordan du skriver attraktive og nyttige indlæg.
Med venlig hilsen!
Zlatko
AIT-team
Hej, Abdur,
Tusind tak for din feedback, den er meget værdsat af vores team!
Med venlig hilsen.
Zlatko
AIT-team
Jeg har de samme problemer som flere andre i denne tråd. Tidligere kunne jeg nemt ombryde tekst omkring et billede som på vores "om os"-side, hvor vi har billeder og biografier. måske brugte jeg den gamle editor. Men nu prøver jeg at opdatere vores side med nye billeder og biografier, og jeg kunne ikke finde en måde, hvorpå jeg nemt kunne ombryde tekst som på vores tidligere bio/billede-kombinationer. Jeg prøvede at skifte til den klassiske editor, men siden advarede mig om, at jeg havde "new block editor"-sektioner, og jeg var nødt til at blive i den nyere redigeringstilstand. kan du fortælle mig, hvordan jeg får vores nye biografier og billeder til at se ud som vores tidligere indlæg? tak.
Hej med dig,
Hvis du ønsker at deaktivere Gutenberg og fortsætte med den klassiske WordPress-editor, skal du overveje et plugin fra WordPress-kerneteamet, som giver dig mulighed for at gøre det med "Classic Editor Plugin".
Med venlig hilsen!
Zlatko
AIT-team
Hvis du bare vil have en simpel tekstindpakning omkring billedet, kan du gøre det ved at indsætte den klassiske tekstblok (baseret i den første del af blokkene, når du klikker på Gennemse. Du kan bruge den klassiske editor i en enkelt blok, og ja, det giver dig mulighed for at indsætte et billede og derefter vælge ombrydningsindstillingen. Problemet er løst 🙂.
TAK London SEO Guy!!! En enkel løsning, men jeg havde overset den!
Og så... skal du bare bruge indstillingen Konverter til blokke.
Da dette virker, har Block Editor muligheden, men jeg kan ikke finde ud af, hvordan man indstiller det korrekt. I mellemtiden virker denne fudge.
Samme problem her. Denne nye version er forfærdelig - ingen måde at ombryde tekst ordentligt eller endda gøre billedet mindre, medmindre du bare vil beskære.
Jeg er i stand til at pakke min tekst omkring et billede i WordPress' blokeditor. Det ser ud, som jeg gerne vil have det i "Preview". Men når jeg udgiver min blog, og WordPress e-mailer den til mine følgere, modtager de den med billedet øverst og teksten under billedet. Det sker også på stationære computere, ikke kun på små mobiltelefoner. Jeg vil have det pakket ind, ikke stablet.
Hej med dig,
Tak, fordi du skrev. Blokken vil ikke ombryde teksten omkring billedet i WordPress, som du ville forvente. Se venligst følgende instruktioner, da du måske vil finde dem nyttige: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
Med venlig hilsen!
Zlatko
AIT-team
Jeg gør alt det, og min blog er perfekt pakket ind i Preview. Når jeg udgiver den, ser den godt ud på min blogside. Men når WordPress e-mailer den til mine følgere, og de åbner e-mailen, kan de ikke se, at den er pakket ind. Billederne ligger oven på teksten. Det ser meget uprofessionelt ud. Det problem havde jeg aldrig med den gamle Classic Editor. Nu, hvor jeg bruger Block Editor, vil den ikke lade mig gå tilbage til Classic Editor, selvom der er en Classic-mulighed at klikke på.
Hej med dig,
Tak, fordi du skrev.
Vi vil gerne bede dig om at tjekke vores vidensbase og/eller dokumentation med videovejledninger:
https://www.ait-themes.club/ait-themes-documentation/
Eller du er velkommen til at stille tekniske spørgsmål direkte i vores dedikerede support ticket-system. Log venligst ind på din konto på https://system.ait-themes.club/support/add-question.
Kundesupport ydes på hverdage fra kl. 8.00 til 17.00 mellemeuropæisk tid.
Derudover er der et plugin, der lader dig bruge den tidligere editor. Du skal installere og aktivere "Classic editor".
Med venlig hilsen!
Zlatko
AIT-team
Jeg er ikke enig i, at dette er bedre end klassisk redigering, fordi mulighederne er mere begrænsede. Jeg synes, at denne blok er visuelt forstyrrende, fordi den bruger forskellige skrifttyper og er bredere end en tekstblok. Når man kan omslutte et billede med tekst og samtidig beholde den samme skrifttype, størrelse og margen, bliver det mere professionelt som på en magasinside. Dette er blot ét eksempel på, hvorfor jeg er dybt skuffet over denne version af wordpress.
Hej Terence
Tak for din mening. Har du prøvet vores prøveversion af Citadela? Vi har nogle unikke blokke, som måske kan hjælpe dig med at justere tekst og billeder. Under alle omstændigheder kan du teste den fulde version - alle funktioner, gratis.
Hav en god dag.