Elementor Blog Skabeloner: 10 Blog Sidelayouts og 5 Single Post Skabeloner

At designe en blog i Elementor betyder normalt to job: den side, der viser dine indlæg, og layoutet hvert enkelt indlæg bruger. Denne samling dækker begge. Der er 10 Elementor blogskabeloner til indlægslisten og 5 enkelt indlægsskabeloner til selve artiklerne, og hver kommer som en JSON-fil, du kan downloade, en live demo, du kan klikke dig igennem, og en kort guide til at sætte den op.

Alt her er gratis at downloade. Blogsiden layouts falder ind i enhver Elementor side. De enkelte indlæg layouts har brug for et tema bygherre til at anvende dem på dine indlæg, og enkelt indlæg afsnit nedenfor viser, hvordan man gør det, herunder med et tema bygherre du allerede bruger. Hvis du ønsker komplette sider for resten af dit websted også, den Elementor side skabelon bibliotek har mere end 200 af dem i samme format.

Hvad du får i hver gratis download

Hver skabelon downloades som en lille zip-fil. Løsn den først: Elementor har brug for .json fil inde i det. Du vil finde tre ting:

• a preview mappe med to skærmbilleder af designet, desktop-1440.webp og mobile-390.webp, så du kan kontrollere det, før du importerer noget,
• selve skabelonen, en .json fil opkaldt efter designet (ma-blog-mosaic-masonry.json i eksemplet ovenfor), som er den fil, du importerer til dit Elementor-skabelonbibliotek,
• a readme.txt det viser, hvad skabelonen har brug for, og går gennem en grundlæggende import, plus eventuelle indstillinger, der skal ændres bagefter.

Al stylingen til en skabelon bor i én HTML-widget øverst i designet, som er omfattet af denne skabelon. Der er ingen temafarver eller globale skrifttyper at overføre og ingen billeder bagt i filen, så designet ser det samme ud på dit websted, som det gør i demoen. Dine egne indlæg, fremhævede billeder og kategorier udfylder indholdet.

Hvad du har brug for, før du importerer

Blogsidelayoutene er bygget på Master Addons Blog Indlæg widget, hvilket er hvad der trækker dine seneste indlæg ind på siden. De enkelte indlægslayouts bruger Master Addons Dynamic Tags udvidelse for at udfylde overskriften skal du fremhæve billede, indhold, forfatter og dato fra det indlæg, en besøgende læser.

Du skal også et sted at køre WordPress. Hvis du er ved at oprette en ny blog og ikke har hosting endnu, Hostinger er det, vi peger folk på for et første WordPress-websted.

10 gratis Elementor blog side skabeloner til download

Disse er layouts til den side, der viser dine indlæg. Hver enkelt bruger et andet Blog Posts layout og en anden sidestruktur, fra en en-kolonne læseliste til en muret fotovæg.

1. Signal: magasin gitter med en fremhævet indlæg

Et magasin forside. Dit nyeste indlæg kører som et banner i fuld bredde med overskriften sat over billedet, og de næste seks sidder i et tre-kolonne kortgitter under det. Det passer til nyhedssider, magasiner og enhver blog, der udgiver ofte.

Gitteret springer det første indlæg over, så den fremhævede historie aldrig dukker op to gange. Hvis du ændrer, hvor mange indlæg banneret viser, skal du ændre gitterets forskydning, så den passer til.

2. Kolonne: redaktionel en-kolonne liste

En læseliste til forfattere. Hvert indlæg får et lille miniaturebillede til venstre, datoen og kategorien over en stor serif-overskrift og en to-linjers standfirst. Siden er 820px bred, hvilket holder linjer i en behagelig længde. Det fungerer godt til nyhedsbreve, essays og personlige blogs.

3. Mosaik: murværk fotovæg

En murvæg med tre kolonner til billedstyrede blogs. Fotos forbliver gråtoner, indtil du svæver, og hver overskrift sidder i et lille hvidt kort, der overlapper billedet. Mad-, rejse- og fotoblogs får mest muligt ud af det.

Murværk vakler kun, når dine fremhævede billeder kommer i forskellige former. Hvis hvert foto er den samme afgrøde, ligner væggen et almindeligt gitter.

4. Kiosk: kategori hub med filter faner

Et kortgitter med kategorifaner på tværs af toppen, så læserne kan indsnævre siden til ét emne uden at forlade det. Hvert kort bærer et datomærke på billedet og en kategorimærke under det. Vælg det, hvis du udgiver på tværs af flere emner.

Fanerne kommer fra widgetens Filter By Category indstilling, ikke fra de kategorier, dine indlæg tilfældigvis bruger. Efter import skal du åbne Blog Posts widget, gå til Avancerede indstillinger og vælge dine egne kategorier der. Hvis du lader det være tomt, får du en enkelt “Alle” fane.

5. Marquee: featured karrusel

Et roterende banner med fire fremhævede indlæg øverst, med autospil og pile, derefter to kolonner med kort, hvis tekst løfter sig over billedet. Det fungerer som en blogside eller som postsektionen på en hjemmeside.

Der er en anden, en-line HTML widget direkte over karrusellen. Det holder resten af siden inde i sin beholder, så lad det være på plads.

6. Broadsheet: klassisk blog med en sidebar

Layoutet de fleste mennesker billede, når de siger “blog side”. Et feed af vandrette indlæg løber ned til venstre, og en klæbrig sidebjælke til højre holder et søgefelt, seneste indlæg, emne links og et abonnementskort. Søgefeltet er Master Addons Search widget.

Emnelinkene er pladsholdere. Peg hver enkelt på en af dine kategorisider, og peg på knappen abonner på din tilmeldingsformular.

7. Midnat: mørkt kort blog

Et mørkt kortlayout med to kolonner med kort i glasstil, en blød glød bag overskriften og en mint accentfarve. Det blev lavet til produkt-, udvikler- og bureaublogs og til changelogs, der gerne vil ligne en del af produktet.

Siden sætter sin egen mørke baggrund, så den fungerer selv på et lyst tema. Hvis dit tema tilføjer en lys sidehoved og sidefod omkring den, skal du indstille sidelayoutet til Elementor Canvas.

8. Ledger: videnbase liste

Et kompakt hjælpecenterlayout: en søgelinje, understregede emnefaner og derefter en kort række pr. artikel med en Læs-knap til højre. Brug den til dokumentation, udgivelsesbemærkninger eller et ressourcebibliotek, hvor læserne scanner en liste over titler for at finde den, de har brug for.

Ligesom Kiosk kommer fanerne fra Filter By Category, så vælg dine egne kategorier efter import.

9. Frost: fuld-bredde funktion rækker

Et indlæg pr. række. Hver får et bredt 430px-billede med et hvidt billedtekstkort løftet over sit nederste venstre hjørne. Det giver hver historie et slot i fuld bredde, som passer til studier, porteføljer og langformsskrivning, hvor du udgiver sjældnere, og hvert stykke fortjener pladsen.

10. Almindelig: minimal to-søjle

Et stille, centreret to-kolonne indeks på en blød papir baggrund. Hvert kort viser et 4:3 foto, en dato og en serif overskrift, uden grænser, knapper eller kategori etiketter. Det er den, der skal vælges, når dit tema allerede er minimal, og bloggen skal matche det.

Sådan opretter du en blogside med en Elementor-skabelon

Blogsideskabelonerne fungerer på enhver Elementor-side. Trinnene er de samme for alle ti.

1. Download lynlåsen og lynlås den på din computer. Elementor importerer .json fil; a .zip importeres kun, når indstillingen Aktiver ufiltrerede filuploads er slået til under Elementor > Indstillinger > Avanceret.
2. I dit dashboard skal du gå til Skabeloner > Gemte skabeloner og klikke på Importer skabeloner.
3. Vælg den .json fil og klik på Importer nu. Skabelonen vises på din gemte skabelonliste.
4. Opret en ny side, kald den Blog (eller hvad du nu kan lide), og åbn den med Elementor.
5. Klik på mappeikonet, åbn fanen Mine skabeloner, og klik på Indsæt ud for skabelonen.
6. Udgiv siden og tilføj den til din menu.

Hvis du ikke har importeret en Elementor-skabelon før, skal vejledning til import af Elementor skabeloner går gennem hver af disse skærme. Når du har lavet designet til dit, kan du gem siden som skabelon og eksporter den som JSON at genbruge det på et andet websted.

Indstil det ikke som WordPress “Posts page”

WordPress har en Indlæg side mulighed under Indstillinger > Læsning. Lad det være tomt for den side, du lige har bygget. Når en side er indstillet som Posts side, WordPress erstatter det med dit tema eget arkiv, og din Elementor design aldrig viser. Udgiv skabelonen som en normal side og link til det fra din menu i stedet. Vores tutorial om, hvordan man opret en blogside med Elementor forklarer hvorfor nærmere.

Indstillinger, der er værd at kontrollere, efter du har importeret

• Indlæg pr. side og bestil live i Blog Posts-widgetens Visningsindstillinger. Hver skabelon leveres med mellem 4 og 10 indlæg pr. widget.
• Kiosk og Ledger har brug for dine egne kategorier i Filter By Category, før deres faner giver mening.
• Antal kolonner skal forblive på 1 kolonne på listelayoutene (kolonne, broadsheet, hovedbog og frost), eller listen bliver til et gitter.

Tænder paginering

Du vil ikke se sidetal under indlæggene i vores live demoer. Vi skiftede paginering off der med vilje, for at holde hver demo til én skærm af indlæg. På dit eget websted kan du tænde det i et par klik, og style det til at matche den skabelon, du valgte.

1. Klik på widgetten Blogindlæg, og bliv på fanen Indhold.
2. I Indstillinger for visning skal du skifte sideinddeling til Ja. Indlæg pr. side indstiller derefter, hvor mange indlæg der vises på hver side.
3. Skift tekst på næste side og tekst på forrige side, hvis du vil have forskellige etiketter, og vælg en justering.

For at ændre hvordan sidetallene ser ud, skal du åbne fanen Stil og udvide afsnittet Sideinddeling. Du får typografi, separate farver for den normale, svævende og aktive side, plus kant, radius, polstring og afstand. I skærmbilledet nedenfor bruger den aktive side Signals rustaccent, og de andre er hvide med en tynd kant, så tallene blander sig med kortene.

På Signal og Marquee, slå paginering på for den anden Blog Posts widget kun, gitteret under de fremhævede indlæg. Den fremhævede banner og karrusellen øverst er beregnet til at forblive den samme på hver side, så lad paginering off for dem.

At få dine kategorisider til at matche

En blogsideskabelon styler den side, den sidder på. Din kategori, dit tag og dine forfatterarkiver er separate sider, og de beholder dit temas arkivdesign, medmindre du erstatter det. For at give dem det samme udseende skal du bygge en arkivskabelon i en temabygger, indsætte det samme design og indstille Blog Posts-widgetens Kilde til Aktuel forespørgsel, så den følger den kategori, der vises. Den arkivskabelonvejledning dækker Master Addons Theme Builder-siden af det.

5 gratis Elementor enkelt indlæg skabeloner

Disse styrer, hvad en læser ser, når de åbner et af dine indlæg. Hvert felt er fyldt med Dynamic Tags, så en skabelon styler hver artikel på webstedet. De levende demoer nedenfor er fyldt med en prøveartikel, så du kan se dem med ægte indhold; overførslen indeholder den dynamiske version, der trækker i dine egne indlæg.

Fordi felterne er Dynamic Tags, som kommer med det gratis Master Addons plugin, tager det omkring et minut at importere en skabelon. Bare rolig, hvis den ser halvtom ud lige efter importen, med grå bokse, hvor overskriften, billedet og artiklen skal være (som skærmbilledet ovenfor). Skabelonen viser intet, før den har et rigtigt indlæg at læse fra, så du har brug for mindst et offentliggjort indlæg med en titel, et fremhævet billede og noget indhold. Når du har anvendt det i din temabygger, skifter hvert enkelt indlæg på din blog automatisk til det nye design. Trinene er i Sådan oprettes en enkelt postskabelon i Elementor, lige efter de fem designs.

11. Folio: klassisk redaktionel

Den pålidelige magasinartikel. En kategorilinje, en serif-overskrift, en standfirst og en byline med forfatterens foto sidder over et bredt fremhævet billede. Nedenfor kommer en “I denne artikel” indholdsboks, indlægget i en 748px-læsekolonne, et forfatterkort og tre relaterede indlæg. Indholdsboksen er Master Addons Indholdsfortegnelse widget.

12. Immersiv: fuldblodshelt

Det fremhævede billede fylder det meste af skærmen med overskriften, kategorien og byline over. Artiklen sidder derefter på et hvidt panel løftet over billedet, med deleknapper, der forbliver ved siden af teksten, mens du ruller. Et mørkt abonnerende bånd og to relaterede indlæg lukker siden. Brug det til funktioner og historier med stærk fotografering.

Deleknapperne bygger deres X-, Facebook- og LinkedIn-links fra sideadressen, når den indlæses, og den fjerde knap kopierer linket. Der er ikke noget tredjeparts script involveret.

13. Manual: klæbrig sidebar tutorial

Et dokumentationslayout uden fremhævet billede. Et kategorimærke og en “opdateret” dato sidder over en ren overskrift, og en klæbrig indholdsskinne til venstre fremhæver det afsnit, du læser. Kodeblokke, inline-kode og callout-bokse styles til teknisk skrivning. Siden slutter med en “Var denne artikel nyttig?” række og en kort liste over, hvad du skal læse næste gang.

14. Stille: tekst-første essay

Ingen billeder overhovedet: en serif overskrift, en grå standfirst, en drop cap og en 660px kolonne sæt i en serif ansigt. Træk citater er centreret og kursiv. Efter artiklen er der en lille forfatter sign-off, et abonnementskort og en tekst-only liste over yderligere læsning. Det passer til essays, meningsindlæg og nyhedsbreve, der bor på nettet.

15. Casefile: visuelt casestudie

Bygget til bureauer og studier, der udgiver deres arbejde som indlæg. Overskriften sidder til venstre og et projektfaktakort til højre, efterfulgt af et bredt forsidebillede, opskrivningen, et galleri med tre kolonner, en opfordring til handling og yderligere to casestudier.

Faktakortet læser tre brugerdefinerede felter på hvert indlæg: client, year og service. Galleriet viser de billeder, der er knyttet til indlægget, hvilket betyder dem, der er uploadet inde fra det indlægs redaktør. Readme forklarer begge dele.

Sådan oprettes en enkelt postskabelon i Elementor

En enkelt postskabelon giver kun mening inde i en temabygger. Faldet ned på en almindelig side ville de dynamiske tags vise sidens egen titel og et tomt billede, fordi en side ikke er et indlæg. En temabygger er det, der fortæller WordPress at bruge dit design, hver gang en besøgende åbner et indlæg.

Med Master Addons Theme Builder

Sådan blev de fem skabeloner bygget og testet. Skabelontypen Enkelt i Master Addons Tema Bygherre er en del af Master Addons Pro.

1. Importer .json fil under Skabeloner > Gemte skabeloner, på samme måde som en blogsideskabelon.
2. Gå til Master Addons > Theme Builder, klik på Tilføj ny, og vælg Single som skabelontype.
3. Rediger den nye skabelon med Elementor, åbn mappeikonet, gå til Mine skabeloner og indsæt designet.
4. Indstil visningstilstanden til Inkluder > Ental > Indlæg. Hvis du vil bruge et layout kun til én slags indhold, f.eks. casestudier, skal du vælge disse indlæg i tilstanden i stedet for alle indlæg.
5. Gem, og åbn derefter ethvert indlæg på dit websted for at kontrollere det.

The enkelt skabelon dokumentation viser hver af disse skærme, og den Elementor tema bygherre guide forklarer, hvordan de andre skabelontyper (overskrift, sidefod, arkiv med mere) passer sammen.

Med Elementor Pro eller en anden temabygger

Hvis du allerede bruger Elementor Pro's Theme Builder, eller en anden temabygger, der lader dig designe single post layoutet i Elementor, kan du også bruge disse skabeloner der. Opret en ny Single Post skabelon i din bygherre, indsæt designet fra Mine skabeloner, og indstil det til at gælde for dine indlæg.

Hold Master Addons installeret og aktive. Felterne overskrift, billede, indhold og forfatter kommer fra Master Addons Dynamiske tags, og indholdsboksen og relaterede indlæg kommer fra Master Addons widgets. Uden plugin'et ville disse dele være tomme. Vi testede skabelonerne i Master Addons Theme Builder; hvis noget ser ud i en anden builder, er readme-noterne det første sted at kontrollere.

To detaljer at lade være på plads

• Artiklen krop widget i Folio, Immersive, Manual, Quiet og Casefile bærer en CSS klasse kaldet entry-content. Indholdsfortegnelse widget ser for overskrifter inde i det element, så fjerne klassen tømmer indholdet boks.
• HTML-widgetten øverst i hver skabelon indeholder typografiarket, og i Folio og Manual et kort script, der udfylder indholdslisten, hvis widgetten ikke allerede har gjort det. Rediger typografierne der, men slet ikke widgetten.

Tilpasning af farver og skrifttyper

Hver skabelon holder sine farver i en håndfuld CSS-variabler øverst i sit stylesheet: blæk til overskrifter, brødtekst til afsnit, slået fra for datoer og accent for links og etiketter. Åbn HTML-widgetten, skift disse værdier, og hele designet følger. Skrifttyper er indstillet i det samme stylesheet, så det er en ændring på én linje at bytte Georgien til dit brand serif.

Hvis du hellere vil arbejde sektion for sektion, løber den samme tilgang gennem vores gratis Elementor sektion skabeloner, som passer godt sammen med disse bloglayouts, når du bygger resten af webstedet.

Fejlfinding

“Ugyldigt indhold i fil” ved import

Du uploader selve zip'en, eller en fil, der ikke er en Elementor-eksport. Fjern zip'en for download'en og importér den .json file.

Blogsiden er tom

Blog Posts widget har brug for offentliggjorte indlæg med fremhævede billeder. På Kiosk og Ledger betyder et tomt gitter normalt Filter By Category stadig punkter på kategorier, der ikke findes på dit websted. Åbn widget og vælg din egen.

Designet ser anderledes ud end demoen

Dit tema kan være at tilføje sin egen sidehoved, sidefod eller sidebredde rundt om skabelonen. Indstil sidelayoutet til Elementor Canvas eller Elementor Full Width i sideindstillingerne.

Skabelonen med enkelt indlæg vises ikke på mine indlæg

Tjek tre ting i din temabygger. Skabelontypen skal være Single, visningstilstanden skal indeholde dine indlæg, og kun én Single skabelon skal matche de samme indlæg. I Master Addons Theme Builder, når to aktive skabeloner matcher, vinder den nyeste. Rydning af dit cache-plugin efter lagring hjælper også.

Karrusellen kollapser inde i faner eller en harmonika

Swipers måler deres bredde, når siden indlæses. Hvis du flytter Marquees karrusel ind i en skjult fane eller et harmonikapanel, skal du indstille Observer til Ja i dens Karruselindstillinger.

Ofte stillede spørgsmål

Vælg et layout og byg din blog

Start med Elementor blog skabelonen, der matcher hvordan du udgiver: Signal eller Marquee hvis du poster ofte og ønsker en forside, Kolonne eller Stille hvis ordene betyder mest, Mosaik eller Frost hvis billederne gør, og Ledger eller Manual til dokumentation. Download JSON, importér den, og peg den på dine egne indlæg.

Når bloggen er færdig, fungerer de samme importtrin for hver anden side på dit websted, fra hjemmesiden til kontaktformularen.

“Få hosting” links i dette indlæg er henvisning links. Hvis du køber hosting gennem en, kan vi tjene en kommission uden ekstra omkostninger for dig.