Majoriteten av användarna av WordPress tillbringar större delen av sin tid med att använda content editor för att skriva posts och skapa pages. WordPress levereras med en intuitiv Gutenberg Block Editor som är mycket lätt att använda.
Som användare kan du dock öka din produktivitet avsevärt genom att lära dig några av de mindre kända knepen. Detta skulle allow you att skapa mycket engagerande content på kortare tid.
I den här artikeln kommer vi att dela med oss av våra experttips för att bemästra WordPress content editor. Dessa tips kommer att lära dig hur du använder WordPress content editor som ett Pro.
1. Lära sig de grundläggande blocken
Block är de viktigaste byggelementen i WordPress content editor, vilket är anledningen till att den ibland kallas block editor.
Varje element i ditt content består av block. Som standard levereras WordPress med massor av vanliga block som stycke, listor, images, galleries med mera.
Du kan använda dessa block för att skapa beautiful layouts för content. Därför är det viktigt att utforska olika block och lära sig hur du kan använda dem i ditt content. Vi kommer också att nämna några av blocken senare i den här artikeln.
2. Börja använda tangentbordsgenvägar
Det är ineffektivt att flytta musen bara för att göra en text fet eller add to en link. I Content Editor finns flera användbara kortkommandon som hjälper dig att utföra vanliga formateringsuppgifter utan att använda musen.
Genom att använda kortkommandon sparar du tid och blir en snabbare skribent. Kolla in vår guide om de mest tidsbesparande kortkommandona i WordPress.
3. Enkelt och dubbelt radavstånd
Många användare på nybörjarnivå tycker att det är svårt att räkna ut hur man skapar stycken och radbrytningar i WordPress.
För att add a new paragraph i content editor behöver du bara trycka på Enter. WordPress lägger till ett nytt stycke med dubbelt radavstånd.
Men om du bara vill ha en enda radbrytning måste du trycka på tangenterna Shift + Enter samtidigt.
Kontrollera vår guide om hur du lägger till enkelt/dubbelt radavstånd i WordPress.
4. Omarrangera vyn Edit
Content Editor är i grunden en ren duk med en övre stapel och en column till höger. Detta ger dig ett rent användargränssnitt för att skapa dina posts.
Editorn visar en toolbar högst upp i det block som du redigerar. Du kan flytta toolbaren genom att clicka på menyn med tre punkter högst upp till höger på vyn.
Du kan också visa och dölja Column Settings genom att clicka på gear icon högst upp.
WordPress gör det också enkelt att växla till Spotlight-läget som gör blocket du befinner dig i mer notice genom att dämpa resten av innehållet.
Behöver du mer vitt utrymme på vyn? Byt till helskärmsläget som ger dig en ren duk med bara toolbaren högst upp.
5. Ändra storleken på fonten i WordPress Visual Editor
Vi förstår att typografi spelar en mycket viktig roll i webbinnehåll. Du kanske vill använda olika fontstorlekar för att fånga din publiks uppmärksamhet eller markera olika sections i en lång artikel.
Välj bara det block där du vill ändra storleken på fonten, så ser du alternativet för fontstorlek i blockinställningarna till höger.
6. Add to headings i dina artiklar
Headings spelar en viktig roll för att förbättra läsbarheten. Det är därför sökmotorer som Google också tycker att headings är viktiga för sökmotorsoptimering. Om du använder dina keywords (ord som användare använder för att göra sökningar) i headings hjälper du search engines att förstå vikten av dessa keywords.
I content editor är det enkelt att add to headings i dina artiklar. Välj bara ett block med head och välj sedan storlek på head och textjustering från blockinställningarna.
You can also add a link to your heading, make it bold, or italicize it.
7. Lägga till Column i dina posts
WordPress content editor kommer med ett built-in column block, som allow you to add content into columns. Detta gör det enkelt att ge din text ett utseende som gillar magasin.
Välj helt enkelt och add ett block med Column till din editor. Du kan välja antalet columns du vill add to i blockets inställningar.
Varje Column kommer automatiskt att innehålla ett block med ett stycke. Du kan enkelt lägga till andra block som du vill ha i varje column. Till exempel blockcitat, images, stycken med mera.
Men om du vill add to en image bredvid en text, då ska du kontrollera nästa tips.
8. Lägga till en image bredvid text
I äldre versioner av WordPress var det ganska svårt att lägga till en image bredvid en text med rätt justering. Detta problem fixades med Media & Text block.
Det allow you to add a image next to the text block. Det justerar automatiskt bredden och avståndet mellan de två blocken.
Du kan göra blocket full width och använda alternativen för format för textblocket.
9. Lägga till YouTube videoklipp i WordPress
Du kan uppladare videoklipp till din WordPress site. WordPress är dock inte gjord för streaming och de flesta webbhotell för WordPress kan inte servera stora filer på ett tillfredsställande sätt.
Om du vill veta mer om detta kan du läsa vår artikel om varför du aldrig ska ladda upp videoklipp till din WordPress site.
Istället rekommenderar vi att du uploadar dina videoklipp till YouTube eller andra webbplatser för streaming och sedan embedar dem i dina posts och pages i WordPress.
Du kan använda YouTube-blocket för att helt enkelt klistra in URL:en till det videoklipp du vill add to, och WordPress kommer automatiskt att embedda det åt dig.
Du kan också klistra in URL:en till videoklippet i ett stycke eller ett annat textblock, och WordPress konverterar det automatiskt till YouTube-blocket.
10. Skapa tabeller i WordPress Posts
Post Editor kommer också med ett block för att enkelt add to tabeller i dina WordPress-poster och pages.
Lägg bara till tabellblocket och välj sedan antalet Column och Row som du vill add. Oroa dig inte, du kommer alltid att kunna add to fler columns och rows senare efter behov.
Efter det kommer du att se en vanlig tabell. You can add to content to table cells and choose table colors / style from the block settings.
WordPress table block är bra för grundläggande tabeller, men det saknar många funktioner. Du kan till exempel inte selecta header row, göra columns sorterbara, markera rader med mera.
Det är därför vi rekommenderar att du använder TablePress. Det är ett gratis plugin som tillåter dig att skapa beautiful tabeller och add to your WordPress posts and pages.
För att lära dig mer, se vår guide om hur du enkelt lägger till tabeller i WordPress-poster.
11. Lägga till knappar i WordPress Posts och Pages
Knappar spelar en viktig roll när du vill add to en call-to-action i dina WordPress posts eller pages.
Content Editor levereras med ett grundläggande knappblock som gör att du snabbt kan lägga till en knapp i ditt content.
Knappen har tre stilar: Square, rundad och med en kant. You can also select the background, text color and align the button to centrerat, vänster eller höger.
12. Add Cover Images i WordPress Posts
Du kanske har sett cover images som används i mitten av en artikel på populära publikationer som New York Times. En cover image är helt enkelt en image som placeras i mitten av en artikel, ibland med en överlägg text.
Syftet med en cover image är att göra ditt content mer engagerande. Det ger också dina användare en paus från att Läsa texten och titta på en image för att genomföra deras uppmärksamhet.
Content Editor gör det enkelt att add to cover images i dina posts. Lägg bara till ett Cover Image-block och ladda sedan upp den image du vill använda. Imagely bör det vara en större bildfil som ser bra ut i det breda formatet.
För mer detaljer, se vår artikel om cover image vs featured image och hur du använder dem på din blogg.
13. Ändra styckefärger
Ett annat snyggt trick som ofta går obemärkt förbi är möjligheten att ändra färgerna. De flesta vill hålla sin text konsekvent genom hela artikeln.
Men om du ibland använder färger kan det hjälpa dig att redirecta användarens uppmärksamhet och lyfta fram viktiga delar av en artikel.
Content Editor visar dig färgalternativ i den högra colonnen, du kan välja vilka färger du vill. Se bara till att den kombination av bakgrundsfärg och textfärg som du väljer är lätt att läsa.
14. Add Widgets till dina posts
Widgetar är ganska lika blocken. De tillåter dig att lägga till webbelement till din WordPress site utan att lägga till kod.
Widgetar används vanligtvis i sidebar eller footer area på en website. Du kan dock även add to vissa widgetar till content area, t.ex. kontaktformulär.
Leta bara efter Widgets section under knappen add blocks. Härifrån kan du använda de vanligaste widgetarna i dina posts och pages.
15. Adding Custom HTML in WordPress Posts
Editorn för content i WordPress är en helt visuell WYSIWYG-editor. Du kan dock fortfarande add to HTML-kod om du behöver det.
Det enklaste sättet att göra detta är genom att lägga till blocket Custom HTML i din post. Efter det kan du helt enkelt klistra in den HTML-kod som du vill add to.
16. Få ordantalet och annan statistik för dina poster
När du arbetar med en lång artikel kanske du vill se den snabba översikten över artikeln, hur många ord den har och hur allt är placerat.
I toolbaren för content editor finns det två knappar för detta högst upp. Först är det knappen Info som visar ordantal, stycken, block och artikelns disposition baserat på de headings du har använt.
Strax intill den finns knappen för navigation av block. Den visar dig alla block som du har använt i din artikel och du kan clicka på ett block för att hoppa direkt till det.
För att få mer detaljerade data kan du läsa vår guide om hur du får statistik över ordräkning i WordPress.
Vi hoppas att den här artikeln hjälpte dig att upptäcka new tips för att bemästra WordPress content editor. Du kanske också vill läsa vår guide om hur du skapar ett nyhetsbrev via email och får mer trafik till bloggen.
Om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress video tutorials. Du kan också hitta oss på Twitter och Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Mrteesurez says
Nice post.
I didn’t see any way to see word count, number of paragraphs,l and others in block before, I used to switch to Classic editor to do it.
This post just teach me with block editor. Their are many things we still need to know about WordPress and blogging generally.
Thanks.
WPBeginner Support says
You’re welcome, glad we could share how to do this in the block editor
Administratör
Kadir says
This is a really complete guide. Thanks
WPBeginner Support says
You’re welcome
Administratör
Khalid says
I cannot find the heading block in my editor. Is it that I have inadvertently deleted it. How can I have it back.
WPBeginner Support says
Your theme’s header is decided by your theme, not the post/page editor. For changing it you would normally go under Appearance>Customize.
Administratör
Sanavi says
Very helpful for beginners. Bookmarking this article. I will surely implement these tips in my blog.
WPBeginner Support says
Glad you found our article helpful
Administratör
Michael Torres says
Very helpful for new blogger like me. Basics are very important.
WPBeginner Support says
Glad our article could be helpful
Administratör
Bob says
Good article, looks to be a great tool for beginners like me, are there
any video tutorials as I like to be shown what to do?
WPBeginner Support says
For that, you would want to take a look at our video section here: https://videos.wpbeginner.com/
Administratör
Abhijit Bangal says
I was trying to use the new gallery plugin for testing how it’d work with new blocks, which are now more flexible than before. But I stumbled upon the columns thing and tried out a few combinations. I think, to an extent, I’ll use less of the gallery plugin and more of columns. Of course, the columns cannot be everything that a gallery plugin can do/does. But to me, it’s helped me save a lot of time and energy.
Extremely helpful! Thanks team!
WPBeginner Support says
Thanks for sharing how you’re using the block editor, while it won’t have all the features it can help those looking for a custom gallery setup
Administratör
Kurt says
Single line break…Shift + Enter…sweet. Wish I had known about that before now.
WPBeginner Support says
Glad we could teach you something new and hope this trick helps with your content
Administratör
Michael Walther says
Very good article about the Gutenberg editor. However, I am still not convinced. For me, the Gutenberg editor stays what it is – an excellent answer to a question that I did not ask. Like a huge SUV to drive my daughter to kindergarten. Don’t get me wrong, shiny huge SUVs are a fine thing, but I am just a wordpress author. I’ll stick with my trusty Toyota (ie the ’old’ WP editor via plugin) as long as I possibly can.
WPBeginner Support says
Understandable, as the block editor improves it should become more useful for new WordPress users and have tools that those who have used the classic editor want to use
Administratör
Mohamed Hassan says
Thanks, an informative useful post.
WPBeginner Support says
You’re welcome, glad our post could be helpful
Administratör
Valentin Born says
Nice overview … but
`By default, WordPress visual editor allows you to change the font size into paragraph text, headings, etc.`
This is incorrect (and implies terrible advice)—don’t use “paragraph“, “heading“ etc. for font-sizes (… but for marking up paragraphs and headings)! While you offer a slightly better option in your mentioned article on how to change font sizes (namely, adding a font-sizes dialog, e.g. using TinyMCE Advanced), only at the very bottom of that article do give the important advice:
`Note: If you want to change the font size of all paragraphs (i.e the entire post content), then DO NOT use the TinyMCE advanced. Rather, you would need to adjust the styling in your style.css file.`
This should even be expanded upon: “If you ever want to change the font-size of a piece of content for purely stylistic purposes, create a class for that and add it to that element“ (perhaps with the help of a plugin)—otherwise you will manually have to crawl through every post and page, readjusting those manually set font-sizes, every time you change your theme’s base font-size.
Pawan Singh says
Hi Admin, would you please tell all your readers which editor you use. i’m impressed with the styling of text.
Amanda says
Great article! I learned some very helpful things, and was reminded of other helpful things I’ve learned from you! Thanks so much!
Bob Diebel says
Thanx much! much learned, much appreciated!
kittkatt123 says
Is there a keyboard shortcut to switch between the text editor and the visual editor? Or do I have to click every time?
Rick Teisan says
I asked how to add a visual to the media library. I was directed to thispage. There isnothing about adding a visual to the library. SUCKS. 39 MINUTES JUST TRYING TO ADD A PHOTO TO THE LIBRARY TO PUT IT IN THE BLOG POST.
MAKE IT EASY
!!!!!!
WPBeginner Support says
Hi Rick,
On the post edit screen you will see a button labeled ’Add Media’ you can click on it and then upload your photo.
You can also add a photo to your WordPress library by visiting Media > Add New page in your WordPress admin area.
Let us know if this solved your issue.
Administratör
Hamid says
thanks for sharing such valuable tips.
Nadeem says
Thanks so much for this easy and simple explanation of all the necessary suggestions for writing an article on wordpress. Keep posting such amazing articles.
Rufus B says
One of the best news letters yet from you guys. The links to other recommended articles was super helpful.
Ahmed says
Great tips, thanks
jagmohan singh negi says
hi syed , its my first landing page of my secrch in google and i dont think i have to go to other sourses to find any information about wprdpress ,blog ,adsense etc.
really nice post with complete information and presentaion is 10/9 in my view.
WPBeginner Staff says
WordPress themes are responsible for handling all things related to the visual appearance of your content. Having said that, since each WordPress theme is different, the Visual Editor can not automatically guess what styles to use. To solve this issue, it is a standard practice to add an editor stylesheet in WordPress themes. It seems like your theme does not have one. You can ask your theme developer for support. Or you can create your own editor-style.css file and copy the rules from your theme’s main stylesheet.
Gary Neal Hansen says
Thanks for the great tips. At the beginning you say the visual editor is a WYSIWYG environment — but I don’t see what I type in its proper format and font until I hit the ”preview” button. Is there a setting to have the editor function as true WYSIWYG?
Chris Finnegan says
Excellent roundup, I’ll be using the keyboard shortcuts for headings from now on!
WPBeginner Staff says
You are confusing ”Paste as Text” button with ”Paste From Word” button which is no longer available since 3.9.
Dave Porter says
Yep, you are quite correct!
Derek Wyatt says
When switching from HTML to Visual editor and vice versa, how do you keep the html information from stripping away? I haven’t noticed a pattern as to how this happens, it just springs up when I least want it to…
As a safety measure, I just stick to the HTML editor because I don’t want to lose my formatting. Unless someone knows a way to prevent this?
Dave Porter says
Hi Derek, check out Tiny MCE Advanced
https://wordpress.org/plugins/tinymce-advanced/
And checkout the settings – there is an option to not strip out html like and
John Mauldin says
I must say that anyone who doesn’t know about all the wonderful information your site supplies is really missing out on a Great opportunity. I love the fact that you present the information in direct, no b.s., format and written in easily understandable language most anyone can digest. Keep up the GREAT work! JM
Roger Lill says
Hi, Thanks for the summary, that should save some time.
Dave Porter says
isn’t #13 obsolete with WP 3.9 ?![:)](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
And ’TinyMCE Advanced’ is worth a mention
Dave