Redaktør vs. komponist! Simpel WYSIWYG-teksteditor vs. træk og slip-plugin

Visuelle komponister” er en af tendenserne i WordPress. Alle, der ønsker at oprette sider og artikler i WordPress Content Management System, er afhængige af den integrerede WP-editor. WP-Editor er kort sagt en WYSIWYG-editor, med andre ord en “what you see is what you get”-editor. Det vil sige, at du i lighed med den velkendte kontorsoftware Word fra Microsoft altid kan se ændringer live. Gør et ord fed er fed. Understreg et ord, og det bliver understreget. Det er præcis sådan WordPress-editoren fungerer, og det du gør er det, du ser. Til mindre onlineprojekter, websites og blogs er denne funktion helt tilstrækkelig. Men efterhånden som WordPress er blevet mere populær, er større og større websteder blevet implementeret med systemet. Mange af webdesignerne og mediecheferne ville imidlertid ikke nøjes med simple tekstfelter, men ønskede at udsmykke sidernes individuelle layout. Gennem individuelle ikoner, individuelle baggrunde, sliders, store billeder og meget mere.

Klassisk WordPress Editor eller Composer?

For en professionel er det ikke noget problem, han skriver et par linjer kode med HTML og CSS, og så er det klaret. Princippet i et indholdsstyringssystem er imidlertid at håndtere store mængder data og ideelt set at gøre dem let tilgængelige, redigerbare og sletbare for brugerne. Derfor er det tilrådeligt at have en god brugervenlig grænseflade, som er let at arbejde med, selv uden stor teknisk viden.

Princip, design med shortcodes

For at kunne style siderne på en relativt enkel måde, kom ideen om at bruge shortcodes frem. Disse shortcodes kombinerer mere kompliceret kode til enkle tags, som brugeren kan bruge. Et simpelt eksempel er at pakke en flot overskrift ind i en shortcode:

[ overskrift ]Her er overskriften[ /overskrift ].

… elementet får så en særlig farve, en særlig placering, måske en anden skrifttype, skriftstyrke og meget mere. Inden vi begynder at skrive komplicerede HTML- og CSS-egenskaber, ville det være smart at bruge begrebet overskrift. Og det er præcis sådan, princippet bag shortcodes fungerer: du pakker mere komplicerede, lange koder ind i enkle, små tekststykker. Problemet med dette princip er, at du har brug for en masse visuel fantasi, fordi brugeren ser kode og ikke en pænt formateret overskrift. Forestil dig nu, at vi øger kompleksiteten en smule og inddrager tabeller med nøjagtig samme afstand, som også farves i baggrunden, en gang blå, en gang gul, en gang orange. Det er her, shortcodes når deres grænser, i hvert fald for ikke-teknikere.

Nyhed: Sammensætning i WordPress-editoren

For at indhold kan placeres meget nemt og også er direkte visuelt synligt, i sin omtrentlige position, i sin omtrentlige form, har der i nogen tid været forskellige alternativer til standard WP-editoren: Composer. Du kan downloade dem som regel, installere dem i dit WordPress-system og så kan du gå i gang. Du kan finde alle de vigtige downloads her og igen i slutningen af artiklen.

I det første trin installerer du den valgte composer som et normalt plugin i dit WordPress-dashboard. I et andet trin aktiverer du plugin’et som sædvanligt. Hvad har ændret sig nu? Sider og indlæg. Lad os først tage et kig på dit WordPress dashboard, her finder du alle vigtige punkter for dig igen på et øjeblik, fra blogindlæg til medier til kommentarer og udvidelser. Relevant for vores opgave i dag er sider og indlæg. I princippet adskiller sider og indlæg sig kun ved at du kategoriserer og tidsangiver indlæg som i en klassisk blog. Siderne er alle statiske sider som f.eks. dine vilkår og betingelser, kontaktsider eller “Om os”, men også startsiden osv.

Det vigtigste WP-dashboardelement til dit websted:

Aktiver WP Composer

I det følgende eksempel bruger vi layout-editoren i WordPress-temaet Enfold (kan findes her). Uanset om du bruger Layout Editor eller Visual Composer i WP Bakery, vil du nu finde en blå knap på hver enkelt side eller indlæg, der fører dig til Composer eller skifter tilstanden fra WP Editor til Composer.

Mange fordele, stor fleksibilitet

Lad os først tage et kig på de utallige fordele, som Composer giver dig. For det første har vi den responsive sammenstilling af indhold til computere og mobile enheder. Composer gør det muligt at se kolonner og rækker som individuelle elementer og tilpasse dem efter skærmstørrelsen, dvs. desktop, tablet eller smartphone. Desuden har du en visuel grænseflade, og du behøver ikke HTML, CSS eller shortcodes for at skabe stærke elementer som videobaggrunde. Alle elementer på siderne eller indlæggene kan flyttes nemt og intuitivt via træk og slip. Strukturen af de enkelte elementer er defineret og altid den samme, hvilket giver dit websted et ensartet udseende og brugerorientering og dermed færre forstyrrelser under besøget.

Andre fordele:

• Elementer kan frit placeres – selv uden kendskab til HTML, CSS og
• Medier, billeder osv. er nemme at integrere
• Vi kan oprette layouts som skabeloner
• …

Kolonner, celler og struktur

Lad os nu tage et kig på billede 4. Her finder du afslutningen på den lille introduktion til arbejdet med visuelle editorer i WordPress. Dette er også det sidste trin i mine workshops, fordi arbejdet med en komponist er meget intuitivt og bedst kan læres ved at prøve sig frem. Det tager heller ikke lang tid, fordi elementerne normalt er begrænset til tyve. Med selvstændig træning er det nemmere og hurtigere at forstå brugen af komponisten. Resultaterne bliver hurtigt meget gode, da anvendelsen er meget enkel med lidt vejledning og fantasi:

Mit tip: Hold det enkelt

Se på strukturen i billede 4, ofte er det ikke nødvendigt med nogen af de særlige overskrifter, et tekstfelt er nok. Sæt et afsnit eller arbejd med en kolonne, placer et tekstelement her, og se, hvad der sker. Ved at bruge forhåndsvisning (øverst til højre på redigeringssiden) kan du se resultatet i en ny browserfane. Gå nu lidt længere og placer en linje i vores første tekstfelt. Lav en overskrift ud af tekstfeltet, og placer et nyt tekstfelt helt til sidst. Færdig. Du kan simpelthen kopiere disse felter i en composer og direkte oprette tre, fire eller fem afsnit. På denne måde kan du hurtigt oprette et layout og også hurtigt oplære nye medarbejdere og vise dem, hvordan effektiv indholdsstyring fungerer.

Hvis du har spørgsmål om content management, content marketing, WordPress eller workshops til uddannelse af dine medarbejdere, er du velkommen til at ringe til os. Vi har effektive og stærke workshopkoncepter, som vi har afprøvet mange gange i tæt samarbejde med vores kunder og klienter. Du kan også drage fordel af vores erfaring og knowhow som online iværksættere og konsulenter.

• Download: Visual Composer
  fra CodeCanyon

På dette tidspunkt vil jeg dog gerne advare dig om kun at bruge Composer til en håndfuld sider på en meget fokuseret måde for ikke at forlænge indlæsningshastigheden unødigt.