Sådan oprettes en blogside med Elementor (gratis, ingen pro nødvendig)

Gratis Elementor kan ikke liste dine indlæg. Posts widget, Arkiv Indlæg, Post Titel og resten af indlæg widgets er alle Elementor Pro. På en gratis installation de viser i widget panelet med en hængelås og intet andet. For at opbygge en blog side uden at betale for Pro, installere den gratis Master Addons plugin og brug dens Blog Posts widget, som viser indlæg i gitter, liste eller murværk og fungerer inde i den normale Elementor editor.

Denne vejledning bygger én start til slut, med skærmbilleder fra Elementor 4.2.4 og Master Addons 3.2 på en gratis installation. Den dækker layoutvalgene, forespørgselsfiltrene, kategorifilterfanerne, de fleste selvstudier går glip af, og de to indstillinger, der afgør, om dit gitter ser ryddeligt eller ujævnt ud.

Har Elementor gratis en blog eller indlæg widget?

Nej. Søg widgetpanelet for “post” på en gratis installation, og det er det, der kommer tilbage.

Blog Indlæg og Tidslinje bære den lilla Master Addons badge og er klar til at trække. Indlæg, Post Titel, Post Uddrag, Arkiv Indlæg, Post Kommentarer, Post Navigation og Post Info alle bære en hængelås, som er Elementor reklame Pro inde fra den gratis plugin.

Så du har fire muligheder:

Resten af denne vejledning bruger den gratis Master Addons widget. Hver kontrol vist nedenfor er i det gratis plugin. Intet i Blog Posts widget er låst.

Hvad du har brug for, før du starter

• WordPress med Elementor installeret. Den gratis version er fin.
• Det gratis Master Addons plugin. Installer noter er her hvis du vil have dem.
• Et par publicerede indlæg. Seks eller flere gør layoutet nemmere at bedømme.
• Et fremhævet billede på hvert indlæg. Et indlæg uden et efterlader et hul i gitteret, og ingen layoutindstilling løser det.

Sådan opretter du en Elementor blogside gratis, trin for trin

Trin 1: Opret siden

Gå til Sider → Tilføj ny side, titel det Blog, og klik derefter på Rediger med Elementor. Lad WordPress indholdsområdet være tomt. Alt sker i Elementor lærredet.

Indstil ikke denne side som WordPress Posts-siden under Indstillinger → Læsning. Det overrækker URL'en til dit tema og kasserer Elementor-designet. Der er et afsnit om den rigtige måde at gøre det længere nede.

Trin 2: Tilføj Blog Posts widget

Søg i widgetpanelet efter blog og træk Blog Indlæg på lærredet. Det gengiver dine seneste indlæg med det samme, så du kan se, hvad du ændrer, når du ændrer det.

Trin 3: Vælg et layout

Open Visningsindstillinger. Kontrolelementerne her indstiller sidens form.

De to betjeningselementer, der betyder mest, sidder øverst:

• Blog Layout: Classic eller Cards. Classic sætter teksten på sidebaggrunden. Cards ombryder hvert indlæg i sit eget panel.
• Blog Type: Gitterlayout, Listelayout eller Murværk Layout.

Under dem, sæt Antal kolonner. Det er en responsiv kontrol, så du kan give desktop tre kolonner og mobil en ved at skifte enhed øverst på editoren. Tre er den sikre standard for en blog med billeder.

To mere værd at indstille nu. Titel HTML Tag standard til H2, hvilket er rigtigt for et blogindeks, da sideoverskriften er H1, og hver indlægstitel sidder under den. Og Kilde vælger mellem Seneste indlæg og Aktuel forespørgsel. Lad det ligge på Seneste indlæg for en normal blogside; Aktuel forespørgsel er for arkivskabeloner, hvor widgetten skal følge den kategori eller forfatter, der ses, i stedet for dens egne indstillinger.

Trin 4: Vælg et kort eller en listestil

Indstil Blog Layout til Kort og en Kort Layout kontrol vises med syv designs.

Standard, indholdsoverlapning, Top Left Meta, Højre Juster kort, Center Align Cards, Center Align Gradient BG og Banner Card. Content Overlap og Banner Card sætter teksten over billedet, så de har brug for fotos med plads i dem. Standard og Højre Align Cards er de sikrere valg for et blandet sæt fremhævede billeder.

Skift blogtype til liste, og kortkontrollen erstattes af Listelayouttype, med syv mere.

Dvs. 14 færdige designs i alt, syv til gitter og syv til lister, oven på de tre layouttyper, så du sjældent skal style et kort fra bunden.

Trin 5: Indstil miniaturestørrelsen og svæveeffekten

Open Miniatureindstillinger. En pjaltet blogside plejer at blive rettet her.

Som standard holder widgetten hvert fremhævet billede i sit eget forhold, så et portrætfoto i en række landskaber skubber det kort ned på siden. Drej Brugerdefineret højde tænd og indstil min og max til den samme værdi, omkring 200 til 240px, og hver miniature beskærer til den samme boks. Miniature Fit set to Cover forhindrer afgrøden i at knuse noget.

Under det, Hover Animation bruger Elementors egne animationer, og Farveeffekt tilføjer en af seksten overlejringseffekter: zoom ind og ud, roter og zoom, slide, gråskala, sløring, sepia, de to sløringskombinationer, to opacitetsfadere, rødmen, glans og cirkel. Miniature Former tilføjer fem rammer på toppen: Indrammet, Diagonal, Bordered, Gradient Bordered og Squares.

Vælg én effekt og brug den overalt. Tre forskellige på tværs af en side læses som støj.

Trin 6: Vælg hvilken meta der skal vises

Open Indlæg Indstillinger og sluk for alt, hvad læseren ikke har brug for.

Uddrag Længde standard til 55 ord, hvilket er langt for et kort. Slip det til 15 til 25, så gitteret forbliver scanbart, og klikket går til indlægget i stedet for resuméet. Læs Mere Tekst er fritekst, så “Læs guiden” fungerer såvel som “Læs mere”.

Skifterne nedenfor kontrolposttitel, forfatteravatar, forfatternavn, dato, kategorier, tags og kommentar tæller uafhængigt. Drejning Vis kategorier? on er normalt det værd, da det giver læserne en anden vej ind i relaterede indlæg.

Trin 7: Filtrer hvilke indlæg der vises

Open Avancerede indstillinger. Dette er forespørgselssektionen.

• Filtrer efter kategori, Filtrer efter tag og Filter Efter Forfatter indsnævr forespørgslen. Hver accepterer flere værdier.
• Indlæg til Ekskluder dropper specifikke indlæg ved navn, hvilket er, hvordan du holder en fastgjort meddelelse ude af hovedgitteret.
• Offset Post Count springer de første N indlæg over. Indstil en fremhævet widget over gitteret for at vise de seneste tre, og forskyd derefter gitteret med tre, og der vises ikke noget indlæg to gange.
• Links i New Tab gør, hvad der står.

Trin 8: Offentliggør og kontroller resultatet

Hit Udgiv og åbne siden i en normal browser fane. Her er det færdige gitter: tre kolonner, kort, ensartede miniaturebilleder, kategori faner på tværs af toppen.

Den samlede tid, når du ved, hvor kontrollerne er, er under ti minutter.

Tilføj kategorifilterfaner til blogsiden

Filterfanerne på tværs af toppen af det skærmbillede er gratis, og de er den del, folk savner. Læsere kan indsnævre gitteret efter kategori uden at forlade siden.

Tænd Kategori Filter Tabs i Avancerede indstillinger. Vælg derefter de kategorier, du vil have som faner i feltet Filter By Category. Fanerne er bygget ud fra det valg, ikke fra kategorierne af indlæggene på siden. Lad feltet være tomt, og du får en enkelt All-fane og intet andet, som ser ødelagt ud, men fungerer som designet.

Alle Tekst omdøber den første fane, og Justering flytter rækken til venstre, midt eller højre. Filterfaner og karrusellen udelukker hinanden, så hvis du aktiverer karrusellen stopper fanerne med at gengive.

Gitter, liste eller murværk: hvilket layout der skal bruges

Gitter er standard og passer til de fleste blogs. Lige kort, tre på tværs, kan scannes. Brug den med en brugerdefineret miniaturehøjde, så rækkerne er på linje.

List sætter ét indlæg pr. række med miniaturebilledet ved siden af teksten. Indstil Antal kolonner til 1 kolonne, når du skifter til liste, eller du får tre listeelementer proppet side om side.

List giver uddraget plads til at trække vejret, så det virker for blogs i essaystil, hvor resuméet sælger.

Murværk beholder kolonnerne, men dropper den faste rækkehøjde, så kortene stables efter indhold, og hullerne lukkes.

Murværk er det ene tilfælde, hvor du bør forlade Custom Height off, da de ujævne højder er det, der får det til at fungere. Det passer til foto-ledede blogs og falder fra hinanden, når hvert fremhævet billede har samme form.

Gør bloggitteret til en karrusel

Den samme widget fungerer også som en postkarrusel, hvilket er det, du ønsker på en startside frem for på selve blogsiden.

Switch Aktiver Karrusel? til og sektionen Karruselindstillinger åbnes: autoplay og autoplay hastighed, pause på hover, slides til at rulle pr. enhed, center slide, grab markør, træk fri tilstand, loop, og animation hastighed. Layout kontrol tilbyder også en coverflow effekt med sin egen rotate, stræk, modifikator og dybde indstillinger.

Observatør skulle være Ja, hvis karrusellen sidder inde i en fane, en harmonika eller andet skjult på sidebelastning, ellers måler den sig selv ved nul bredde og gengives som en stak.

Viser den ændrede dato i stedet for den offentliggjorte dato

Blog Posts-widgetten kan sort efter ændret dato: indstillet Bestil Af til Sidst ændret i Displayindstillinger og nyligt opdaterede indlæg stiger til toppen. Alene det er ofte, hvad folk rent faktisk ønsker, fordi det holder opdateret indhold synligt.

Visning af den ændrede dato som den synlige tekst er anderledes. Widgetten udskriver den offentliggjorte dato i kortet, mens den underliggende <time datetime> attribut bærer den ændrede dato. Søgemaskiner læser attributten, så dine opdaterede datoer bliver offentliggjort, selv når kortet siger noget andet, men en læser ser den oprindelige dato.

For at vise den ændrede dato som tekst skal du bruge Elementor Pros dynamiske tags, hvor Post Date-tagget har en Modified-indstilling, der bruges inde i en Pro Posts eller Loop Grid-widget. Der er ingen gratis Elementor-ækvivalent, fordi dynamiske tags er en Pro-funktion i første omgang. Alternativet gratis er et lille uddrag, der filtrerer get_the_time til din blogskabelon.

Blogside eller indlægsside? Indstil det korrekt

WordPress har sin egen indlægsside, sat under Indstillinger → Læsning. Siden du lige har bygget er en almindelig side, og de to opfører sig forskelligt.

Hvis du tildeler din Elementor-side som siden Indlæg i Indstillinger → Læsning, overdrager WordPress URL'en til temaets arkivskabelon, og dit Elementor-design ignoreres. Det er den mest almindelige årsag til, at en færdig blogside viser temaets standardliste i stedet.

To måder at gøre det ordentligt på:

• Hold det en normal side. Lad Indstillinger → Læsning være og tilføj din Blog side til menuen under Udseende → Menuer. Siden gengiver dit Elementor design, som er det du ønsker.
• Byg det rigtige arkiv. Hvis du vil have selve WordPress-arkivwebadressen til at bruge dit design, skal du bygge en arkivskabelon i Master Addons Theme Builder og indstil Blog Posts-widgettens Kilde til Aktuel forespørgsel, så den følger det arkiv, der ses.

Master Addons Blogindlæg vs Elementor Pro Posts widget

Elementor Pro vinder på dynamiske tags, load-mere og uendelig rulle. Den gratis Master Addons widget vinder på layout sort, hover effekter, filter faner og den indbyggede karrusel. Hvis popups, formularer og tema bygning allerede trækker dig mod Pro, købe Pro. Hvis bloggen side er den eneste grund til, at du overvejede det, dette dækker det for ingenting, og den Master Addons licens er kun et kig værd, hvis du vil have Pro-widgets andre steder.

Syv rettelser til et bloglayout, der ser forkert ud

1. Pjaltede korthøjder. Slå Brugerdefineret højde til i Miniatureindstillinger, og indstil min og max til samme værdi. Dette er rettelsen ni gange ud af ti.
2. Et tomt rektangel i gitteret. Det indlæg har ikke noget fremhævet billede. Tilføj en, selv en almindelig mærket grafik.
3. Uddrag, der sluger kortet. Drop Uddrag Længde fra 55 til omkring 20 ord.
4. Tre listeelementer side om side. Liste layout behov Antal kolonner sat til 1 kolonne.
5. Filterfaner, der kun viser alle. Vælg kategorierne i Filter By Category. Fanerne kommer fra det felt.
6. Alt stablet på mobil i én lang kolonne. Det er normalt korrekt. Tjek det med enhedsomskifteren og indstil mobile kolonner bevidst i stedet for at overlade det til tilfældighederne. Vores guide til Elementor brudpunkter dækker resten.
7. Langsom blogside. Kontroller størrelsen af dine fremhævede billeder, før du giver widgeten skylden. Komprimer dem først; se vores billedoptimerings-roundup og noterne på fremskyndelse af Elementor-websteder.

Ofte stillede spørgsmål

Relateret læsning

• Blog Indlæg widget, funktionssiden med hver indstilling, der er anført
• Blog element dokumentation
• Sådan oprettes en klæbrig overskrift i Elementor
• Sådan redigerer du sidefoden i WordPress ved hjælp af Elementor
• Master Addons skabelon bibliotek, hvis du hellere vil importere en færdig side
• Master Addons på WordPress.org