Redaktör vs. kompositör! Enkel WYSIWYG-textredigerare vs. drag’n’drop-plugin

Visuella kompositörer är en av trenderna i WordPress. Alla som vill skapa sidor och artiklar i innehållshanteringssystemet WordPress är beroende av den integrerade WP-redigeraren. WP-Editor är kort sagt en WYSIWYG-redigerare, dvs. en ”vad du ser är vad du får”-redigerare. Det vill säga, i likhet med det välkända kontorsprogrammet Word från Microsoft, ser du alltid ändringarna live. Att göra ett ord fet är fet. Understryk ett ord och det är understruket. Det är precis så här WordPress-redigeraren fungerar, det du gör är vad du ser. För mindre onlineprojekt, webbplatser och bloggar är den här funktionen helt tillräcklig. Men i takt med att WordPress har blivit mer populärt har allt större webbplatser implementerats med systemet. Många webbdesigners och medieansvariga ville dock inte nöja sig med enkla textfält utan ville försköna sidornas individuella layout. Genom individuella ikoner, individuella bakgrunder, skjutreglage, stora bilder och mycket mer.

Klassisk WordPress Editor eller Composer?

För en professionell person är detta inget problem alls, han skriver några rader kod med HTML och CSS och så är det klart. Principen för ett innehållshanteringssystem är dock att hantera stora mängder data och helst göra dem lättillgängliga, redigerbara och raderbara för användarna. Därför är det lämpligt att ha ett trevligt användarvänligt gränssnitt som är lätt att arbeta med även utan större teknisk kunskap.

Princip, design med kortkoder

För att kunna styla sidor på ett relativt enkelt sätt kom idén om att använda kortkoder upp. Dessa kortkoder kombinerar mer komplicerad kod till enkla taggar som sedan kan användas av användaren. Ett enkelt exempel är att linda in en snygg rubrik i en kortkod:

[ rubrik ]Här är rubriken[ /rubrik ].

… elementet får då en särskild färg, en särskild position, kanske ett annat typsnitt, en annan typsnittstyrka och mycket mer. Innan vi börjar skriva komplicerade HTML- och CSS-egenskaper är det smart att använda begreppet rubrik. Och det är precis så principen med kortkoder fungerar: du packar in mer komplicerade, långa koder i enkla små stycken. Problemet med denna princip är att det krävs mycket visuell fantasi, eftersom användaren ser kod och inte en snyggt formaterad rubrik. Föreställ dig nu att vi ökar komplexiteten en aning och inkluderar tabeller med exakt samma avstånd, som också färgas i bakgrunden, en gång för en, en gång blått, en gång gult och en gång orange. Det är här kortkoder når sina gränser, åtminstone för icke-tekniker.

Nytt: Komposition i WordPress-redigeraren

För att innehållet ska kunna placeras mycket enkelt och vara direkt synligt, i ungefärlig position och form, finns det sedan en tid tillbaka olika alternativ till WP:s standardredigerare: Composer. Du kan ladda ner dessa helt enkelt, installera dem i ditt WordPress-system och börja jobba. Du hittar alla viktiga nedladdningar här och i slutet av artikeln.

I det första steget installerar du kompositören som du vill som ett vanligt plugin i din WordPress-instrumentpanel. I ytterligare ett steg aktiverar du insticksprogrammet som vanligt. Vad har förändrats nu? Sidor och inlägg. Låt oss först ta en ny titt på din WordPress-instrumentpanel, här hittar du alla viktiga punkter för dig på en gång, från blogginlägg till media, kommentarer och tillägg. För vår uppgift i dag är sidor och inlägg relevanta. I princip skiljer sig sidor och inlägg bara genom att du kategoriserar och tidsbestämmer inlägg på samma sätt som i en klassisk blogg. Sidor är alla statiska sidor, t.ex. användarvillkor, kontaktsidor eller ”Om oss”, men även startsidan osv.

Den viktigaste WP-instrumentpanelen för din webbplats:

wordpress-dashboard-grundelemente-erklaerung

Aktivera WP Composer

I följande exempel använder vi layoutredigeraren i WordPress-temat Enfold (finns här). Oavsett om du använder Layout Editor eller Visual Composer i WP Bakery hittar du nu en blå knapp på varje enskild sida eller inlägg som leder dig till Composer eller ändrar läget från WP Editor till Composer.

wordpress-dashboard-theme-editorauswahl-03

Många fördelar, stor flexibilitet

Låt oss först ta en titt på de otaliga fördelarna med Composer. För det första har vi den responsiva sammanställningen av innehåll för datorer och mobila enheter. Composer gör det möjligt att visa kolumner och rader som enskilda element och att anpassa dem till skärmens storlek, dvs. dator, surfplatta eller smartphone. Dessutom har du ett visuellt gränssnitt, du behöver inte HTML, CSS eller kortkoder för att skapa starka element som videobakgrunder. Alla element på sidorna eller inläggen kan flyttas enkelt och intuitivt med hjälp av dra och släpp. Strukturen för de enskilda elementen är definierad och alltid densamma, vilket ger din webbplats ett enhetligt utseende och användarorientering och därmed färre störningar under besöket.

Andra fördelar:

  • Elementen kan placeras fritt – även utan kunskap om HTML, CSS och
  • Media, bilder etc. är lätta att integrera
  • Vi kan skapa layouter som mallar

wordpress-dashboard-theme-editor-drag-n-drop-01

Kolumner, celler och struktur

Låt oss nu ta en titt på bild 4. Där hittar du avslutningen på den lilla introduktionen till att arbeta med visuella redigerare i WordPress. Detta är också det sista steget i mina workshops, eftersom arbetet med en kompositör är mycket intuitivt och bäst kan man lära sig genom att prova sig fram. Det tar inte heller mycket tid, eftersom det vanligtvis bara finns tjugo element. Med självständig träning blir det lättare och snabbare att förstå hur kompositören fungerar. Resultatet blir snabbt mycket bra, eftersom tillämpningen är mycket enkel med lite vägledning och fantasi:

wordpress-dashboard-editor-composer-elemente-aufbau-01

Mitt tips: Håll det enkelt

Titta på strukturen i bild 4. Ofta behövs inga särskilda rubriker, utan det räcker med ett textfält. Skapa ett avsnitt eller arbeta med en kolumn, placera ett textelement här och se vad som händer. Med hjälp av förhandsgranskningen (uppe till höger på redigeringssidan) kan du se resultatet i en ny flik i webbläsaren. Gå nu lite längre och placera en linje i vårt första textfält. Gör en rubrik av textfältet och placera ett nytt textfält i slutet. Uppfyllt. Du kan helt enkelt kopiera dessa fält i en kompositör och direkt skapa tre, fyra eller fem stycken. På så sätt kan du snabbt skapa en layout och även snabbt utbilda nya medarbetare och visa dem hur effektiv innehållshantering fungerar.

Om du har frågor om innehållshantering, innehållsmarknadsföring, WordPress eller workshops för att utbilda dina anställda är du välkommen att ringa oss. Vi har effektiva och starka workshopkoncept som vi har testat många gånger i nära samarbete med våra kunder och klienter. Du kan också dra nytta av vår erfarenhet och vårt kunnande som entreprenörer och konsulter på nätet.

Jag vill dock varna dig för att använda Composer endast för en handfull sidor på ett mycket fokuserat sätt för att inte förlänga laddningshastigheten i onödan.