Hur man gör ett blogg-inlägg

Vy mot åsen, Österlen Syd

Written by Christer Svensson

Christer Svensson, Kåseberga. Medlem i Österlen Syd. Byggde upp hemsidan www.osterlensyd.se 2015/16 och administrerar den sedan dess.

2020-02-01

Översikt

Det är lite krångligt att åstadkomma ett blogg-inlägg. Men med lite träning blir det enklare.
Här går vi igenom de olika stegen som behövs för att komma igång

Scrolla ner till slutet och se hur inlägget presenteras innan du fortsätter följa anvisningarna här!
Början ovan och slutet längst ner läggs till automatiskt via en mall.

OBS! Bilderna här är inte riktigt aktuella. Dels var jag inloggad som ‘admin’ och dels använde jag en äldre Divi Builder. Numera använder vi det som kallas Divi Visual Builder. Dvs man ser hela sidan samtidigt som man kan editera den. Men det här inlägget kan nog vara till hjälp i alla fall.

Förberedelser

För att överhuvudtaget komma åt att göra ett inlägg måste man vara registrerad och inloggad.

Det går däremot att läsa inläggen utan vare sig registrering eller inloggning.

Registrering

Fyll i email-adress, ditt namn och önskat lösenord och klicka på Registrerings-knappen.
Du får efter en stund ett verifikations-email till den angivna adressen.
Där finns anvisningar hur du slutför registreringen.

Inloggning

Skriv in din email-adress och ditt valda lösenord och klicka på Login-knappen.

Du kommer rakt in i WordPress, där du kan göra blogg-inlägg. Du har rättigheter för “Author”, dvs du har bara tillgång till ett begränsat utbud:
Du kan ladda upp bilder mm (“Media”), skriva blogg-inlägg (“Posts”) samt editera och/eller ta bort dina egna blogg-inlägg. Dessutom kan du ändra i ditt “Account”, t ex lägga in en profilbild och en kort beskrivning av dig själv; detta kommer med automatiskt i dina blogg-inlägg.

Kom igång med ett inlägg

Exemplet här har jag gjort på en laptop (MacBook Pro). Skärmbilderna har tagits och editerats med Greenshot, en app som är gratis för Windows och kostar 25 kr för macOS.

Bilderna visar hur man steg för steg använder Divi’s back-end Builder för att få ihop ett blogg-inlägg.

Den svarta listen överst i fönstret är från WordPress och visar att man är inloggad.

OBS! Döp om bilderna före uppladdning. De får inte heta IMG_0382 eller DSC-4289 eller annat intetsägande.
Använd gärna ditt eget eller verksamhetens namn plus något om bildens innehåll, t ex ReunionHome-BlåElefanten.jpg. Det gör det mycket lättare att hålla ordning på dem!

Det finns ett par tusen bilder i arkivet, men du skall med nuvarande rättigheter bara kunna se dina egna!

OBS! Efter att ha klickat på en bild fyller du i rutorna “Alt Text”, “Title” och “Description”. Det går bra att kopiera samma text till alla tre rutorna. I rutan “Caption” skriver du Österlen Syd.
Sökfunktionen letar också i den text du angett här. Det blir mycket lättare att hitta bilderna senare.

Innan du går vidare kan du också i högerkanten fylla i “Categories” och “Tags”, om så önskas.

Nu finns två alternativ:
1. Det enklaste, om man t ex bara vill skriva in text, är att fortsätta med blogg-inlägget i den stora vita editor-rutan med WordPress Classic Editor (se bilden nedan). Notera att det finns två lägen, Text och Visual. I Text-läget skriver man in all text inklusive HTML (se mer om detta längre ner). I Visual-läget ser man bättre hur det färdiga inlägget kommer att se ut. Här finns också hjälpmedel för tillägg av bilder, länkar mm. Man kan skifta fram och tillbaka mellan lägena.

När man vill kontrollera resultatet används Preview uppe till höger. Det öppnas då ett nytt fönster med det “färdiga” blogg-inlägget. För att fortsätta klickar man sig tillbaka till Edit-fönstret. Vid nästa Preview måste man själv klicka sig till fönstret med visningen. När allt ser ut som det skall trycker man på Publish.
Sedan är det klart och man kan logga ut.

2. Men om man vill ha mer möjligheter att designa inlägget så rekommenderas användning av Divi Builder: Klicka på “Use The Divi Builder”.

Men observera att man måste hålla sig till ett av alternativen 1 eller 2. Försöker man byta, t ex från Classic Editor till Divi Builder, nollställs sidan och det man redan gjort försvinner.

Insert Row Här väljer du hur skärmen skall delas in i kolumner. Enklast är att börja med full bredd.

Vill man variera sig kan man lägga in flera olika Rows (grönt plustecken), och sedan i var och en fylla på med text och bilder.

Tips: På en mobil kommer raderna att visas i ordning, dvs rad1-kolumn1, rad1-kolumn2, etc och sedan rad2-kolumn1, rad2-kolumn2 etc.

Lite om formattering av text med html
HTML betyder HyperText Markup Language.

Man skriver text som vanligt, men med hjälp av “taggar” markerar man text som skall behandlas speciellt.

Det finns flera olika storlekar på rubriker. De kallas h1, h2, h3, h4, h5, h6. Den största är h1 och h6 är minst. På varje sida får det bara finnas en h1 och det är titeln högst upp, men du kan använda h2 till h6.

Den text som skall bli en rubrik inramas med taggar så här: <h6>En “lagom” rubrik?</h6> och presenteras så här

En “lagom” rubrik?

Det är mycket viktigt att de här taggarna används rätt, annars kan resultatet på inlägget bli katastrofalt.

<h6> är ett startmärke och </h6> ett slutmärke.
Här är några andra:
<strong>Fet stil</strong> kommer att se ut så här: Fet stil
<em>Kursivt</em> blir så här: Kursivt

<p>text</p> markerar en paragraf/ett stycke. Det formatteras med lite extra mellanrum ovanför och under stycket. Just det här stycket omges av de märkena, men för övrigt har jag använt en extra radframmatning till formattering av den här texten.

En lista sätts upp så här:
<ul>
<li>Första </li>
<li>Andra </li>
<li>Tredje </li>
</ul>

…och ser ut så här:

  • Första
  • Andra
  • Tredje

Märket <ul> står för “unordered list”. Om man istället använder <ol> för “ordered list” får man en löpande numrering istället för prickarna. <li> och </li> inramar listelementen.

Vill man ha med en bild, så är det enklast att spara texten och klicka på det svarta plustecknet och välja en Image-modul. HTML-koden ser annars ut så här i sin enklaste form för en bild i vårt bildarkiv (från februari 2018):
<img src=”https://www.osterlensyd.se/wp-content/uploads/2018/02/backagarden1-300×268.jpg” />
och resultatet ser ut så här:

Här är ett exempel på en länk till en extern hemsida:
<a href=”https://www.elnakarin.se” target=”_blank” rel=”noopener noreferrer”>912 Kåseberga</a>
och resultatet ser ut så här: 912 Kåseberga

Det finns mycket information om HTML på nätet, t ex den här sidan.

…Och här fortsätter blogg-hjälpen
Klicka på fönstret med “Edit Post”!!

Efter “Publish” är inlägget ute på bloggen och kan läsas av medlemmarna!

Du kan själv editera det efteråt. Öppna sidan med “Edit” och lägg ut den efter uppdatering med “Publish”.

You may also like…

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Vi använder cookies på vår webbplats. Vissa behövs för att sidorna skall fungera.
Andra har du möjlighet att stänga av, t ex statistik- och profileringscookies.
Webbplatsen fungerar bäst med alla cookies!
Integritetspolicy & Cookies