Sådan føjes faner til WordPress-indlæg og -sider

Sådan føjes faner til WordPress-indlæg og -sider

Faner er en forholdsvis almindelig funktion på mange websteder, især e-handelsbutikker. Ejere af e-handel bruger normalt faner i produktbeskrivelsesområdet, hvor de deler anmeldelser, beskrivelse, tekniske specifikationer og så videre i flere faner.


eksempel på faner i handling på et e-handelswebsted

Stadig har faner fundet brug i mange andre forskellige typer websteder, ikke kun e-handelswebsteder. Selv det officielle WordPress.org-websted bruger faner på plugins-beskrivelsessider. Se billedet nedenfor for at se de fremhævede faner på WP.org.

faner på wordpress.org plugins beskrivelse side

Mange andre webstedsejere bruger faner på forskellige typer websteder. Faner er dog ikke at forveksle med harmonikaer, som udvides til at afsløre information. Nedenfor kan du observere, hvordan jeg har brugt trekkspil på min hjemmeside.

trekkspil på vistamedia.xyz

Men trekkspil til side, vi er her for at tale om faner, så lad os ikke miste vores fokus; Jeg havde bare brug for at gøre sondringen mellem faner og harmonika klar. Nu håber jeg, at vi er på den samme side ��

I det væsentlige bruger webejere faner til at opdele oplysninger, der ellers ville have taget en hel side eller et indlæg. Det betyder, at faner gør information meget lettere at fordøje uden nødvendigvis at tvinge brugerne til at slå rullehjulet en million gange.

Med andre ord forbedrer faner brugen af ​​dit websted, især i en verden af kortere opmærksomhed spænder. Så hvis du gerne vil have brugere på dit websted længere uden at kede dem ihjel med lange sider, skal du overveje at bruge faner.

I dagens indlæg viser vi dig nøjagtigt, hvordan du tilføjer faner til dine WordPress-indlæg og sider. Inden udgangen af ​​dette indlæg har du alle de instruktioner, du har brug for for at bruge faner til din fordel. Vi håber, du nyder helt til slut, og lad dig ikke forlade det uden at dele dine tanker i kommentarafsnittet. Lad os komme i gang.

Brug en Page Builder

Hvis du allerede har installeret en sidebygger, er du heldig – du har sandsynligvis allerede et faneblad modul ved dine fingerspidser. De fleste af de store sidebygere tilbyder faner som en del af deres kernesæt af sidebyggerelementer. Her er et hurtigt kig på to af vores favoritter.

Elementor gratis sidebygger

Faneblad for Elementor Page Builder

Info & DownloadSe demoen

Den populære Elementor sidebygger inkluderer faner som en del af den gratis version af plugin. Alt hvad du skal gøre er at indsætte et faneelement på din side og derefter redigere titlen, indholdet, stilen osv. Det er det!

WPBakery Premium Page Builder

Faner med WPBakery Page Builder

Brug du et premium-tema, der inkluderer WPBakery Page Builder (f.eks. Vores eget Total-tema)? Store! Faner er indbyggede og lette at bruge.

Tabulatormodulet WPBakery er lidt anderledes end det foregående eksempel, da fanerne oprindeligt er tomme, når du tilføjer dem. Du skal indsætte yderligere sideelementer (tekstområde, billeder, ikoner osv.) I fanerne for at tilføje dit indhold. Men dette giver dig masser af frihed til at oprette faner, hvordan du vil have dem (ud over de indbyggede stylingindstillinger). Vi har dækket denne sidebygger på bloggen før, så hvis du vil have mere detaljerede instruktioner, tjek vores WPBakery-guide (bemærk – dette plugin blev tidligere kaldet Visual Composer, så undskyld på forhånd for forvirring).

Installer fanerne WordPress Plugin

Faner Gratis WordPress-plugin

Hvis du ikke bruger en sidebygger, er der ingen grund til at bruge en kun til faner. Der er masser af gode alternativer, som det gratis WordPress-plugin, der blot kaldes Tabs af WP Shop Mart. Tabs er et flot WordPress-plugin, der hjælper dig med at oprette et ubegrænset antal smukke faner uden at svække sved.

Lad os starte med at installere fanerne WordPress-plugin. Da det er tilgængeligt i det officielle WordPress-plugin-repo, kan du installere plugin direkte inde i dit WordPress admin-kontrolpanel.

Vi bruger den gratis version, men der er en premium version tilgængelig, hvis du vil opgradere til ekstra funktioner senere.

Installation af faner WordPress Plugin

Log ind på dit WordPress admin dashboard og naviger til Plugins> Tilføj nyt og indtast “faner wpshopmart” i søgeordsfeltet med nøgleord. Når du har fundet det rigtige plugin, skal du trykke på Installer nu knappen som vist nedenfor.

installation af fanerne wordpress plugin

Klik derefter på Aktiver knap. Og det er det, dit fanebladende WordPress-plugin er klar til brug. Lad os nu oprette et par faner for at finde ud af, hvad dette plugin har at tilbyde.

Konfigurer fanebladets responsive WordPress-plugin

Aktivering af plugin tilføjer et nyt element til din WordPress admin menu. For at oprette nye faner skal du navigere til Faner Responsive> Tilføj nye faner som vi detaljerede i screengrab nedenfor.

tilføjelse af nye faner ved hjælp af fanerne responsive wordpress plugin

Dette fører dig til Tabs Responsive Builder, der er fyldt med alle de funktioner, du har brug for for at oprette smukke faner som en boss. Se billedet herunder for et glimt af, hvad du kan forvente.

faner lydhøre WordPress plugin fanebygger

Helt en rulle er det ikke? Nå, du kan finde de fleste af funktionerne på højre sidebjælke. Bemærk også, at individuelle faner har deres indstillinger. Du kan endda bruge WYSIWYG-redaktører på fanerne, hvilket betyder, at du har masser af kontrol over dine faner.

Lad os nu oprette et par eksempler faner og vise dem på en side eller et indlæg.

Tilføj titel

tilføj fanebladets titel

Start med at give dine faner en beskrivende titel (ligesom med dine navigationsmenuer) som vist på billedet ovenfor. På denne måde kan du let identificere dine faner i WordPress admin dashboard senere, hvis du har brug for at redigere noget. Med henblik på denne vejledning døbt jeg mine faner “Test hjemmefaner.”

Vælg fanebladets designskabelon

vælg fanebladets designskabelon

Som det ses på skærmbillede ovenfor, involverer dit næste trin valg af en designskabelon, som du gerne vil bruge til dine faner. Den gratis version af fanebladene WordPress-plugin tilbyder kun én designskabelon, men du kan altid opgradere til premiumversionen til 19 mere. Tal om designfrihed.

Tilføj faner

Tilføj derefter så mange faner, som du ønsker, som vist nedenfor.

tilføjelse af nye faner

Vi har oprettet en nummereret liste med detaljer om, hvad du kan gøre på Tilføj faner afsnit vist ovenfor. Tal svarer til hvert område.

  1. Fanenavn – Tilføj din fanetitel i dette felt, f.eks. Beskrivelse, specifikationer, detaljer, etc.
  2. Fanebeskrivelse – Tilføj din fanebeskrivelse her. Dette felt giver dig mulighed for at tilføje indholdet på din fane. Det bedste er, at du kan bruge WYSIWYG-editoren (vist i nummer 3 nedenfor) til at tilføje rig indhold til dine faner, herunder billeder, musik og videoer
  3. Brug WYSIWYG – Hvis du gerne vil bruge det velkendte What-You-See-jegs-What-You-Get editor for at oprette dit faneindhold, tryk let på denne knap for at starte pop op-vinduet
  4. Fanen Ikon – Dette felt hjælper dig med at vælge et ikon, du vil bruge på din fane. Fanerne WordPress-plugin giver dig adgang til tonsvis af Font Awesome-ikoner for at jazze dine faner som en professionel
  5. Vis over ikonet – Hvis du gerne vil vise fanetitlen ved siden af ​​ikonet, vil du elske denne funktion. Desuden giver det dig mulighed for at deaktivere ikonet uden at berøre fanebladets titel
  6. Slet – Tryk på denne knap for at slette en bestemt fane
  7. Tilføj nye faner – Klik på denne knap for at tilføje flere faner
  8. Slet alt – Træt af alle faner? Bare tryk på Slet alt for at nulstille alt

Et par bonustips til at hjælpe dig. Først kan du trække og slippe fanerne rundt for at sortere og arrangere dem, som du ønsker.

For det andet – glem ikke at ramme Gem udkast en eller to gange, mens du opretter dine faner for at sikre, at du ikke mister ændringer, hvis du ved en fejltagelse navigerer væk fra fanebyggeren.

Til sidst – hvis du har brug for støtte, er der en stor blå Få hjælp knappen lige under Tilføj faner sektion (og på de fleste af plugins sider), der fører dig til det officielle forum for faner support på WordPress.org. Tøv ikke med at trykke på supportknappen, hvis du har brug for hjælp til enhver tid.

Faner Kortkode

faneblad kortkode

Derefter finder du tabskortkoden, som du bruger til at tilføje og vise dine faner på enhver side eller indlæg, du ønsker. For eksempel er vores kortkode [TABS_R id = 443]. For at få vist fanerne på en side, ville jeg blot kopiere og indsætte ovenstående shortcode på den pågældende side.

Faner-widget

understøttelse af faner widget

Leder du efter at tilføje dine faner i et widget-område på dit websted? Hvis det er et rungende ja, vil du elske widget-understøttelsen, der følger med fanebladet WordPress-plugin.

Rammer Klik her linket på billedet ovenfor fører dig til WordPress widgets-skærmen, hvor du er fri til at tilføje dine faner hvor som helst, hvor du har et widgetområde i dit tema.

faneblade

Tilpasset CSS

Mens fanebladet WordPress-plugin kommer med masser af valgmuligheder for fanatilpasning (bare kig på det højre sidebjælke; det er fuld af stylingindstillinger!), Kan du tilføje dine egne tilpassede CSS-stilarter som vist nedenfor.

faner wordpress plugin brugerdefineret css

Yderligere kan du indstille dine tilpassede indstillinger som standardindstillinger for alle nye faner ved blot at klikke på Opdater standardindstillinger knappen som vist på billedet ovenfor.

Højre sidebjælke

faner wordpress plugin stylingindstillinger

Den højre sidebjælke, som vi fremhæver på billedet ovenfor, bærer dagen for jer virkelig. Det er fyldt med alle de muligheder, du har brug for for at style dine faner til dit hjerte indhold. Bemærkelsesværdige indstillinger inkluderer:

  • Fanen baggrundsfarve
  • Farve på fanebladet
  • Skrifttype og stil
  • Vis indstillinger for fanenavn og ikon
  • Fanen ikon placering justering, dvs. før eller efter fanen titel
  • Fanen rammer
  • Flere fanebeskrivelsesanimationer
  • Og så meget mere

Føj dine faner til en WordPress-side eller -indlæg

Når du har tilføjet indstillingerne for faneindhold og stil, skal du rulle op og klikke på Offentliggøre knappen som vist nedenfor.

På dette tidspunkt er dine faner klar. Du skal blot tilføje fanerne til en WordPress-side eller -indlæg. Kopier blot fanebladets shortcode, vi så tidligere. Vores er [TABS_R id = 443].

Start din indlægseditor (selvom du bruger Gutenberg) og indsæt kortkoden i dit indlæg / side. Derefter rammer du Offentliggøre knappen som vist nedenfor.

Efter ca. 5 minutters opsætning af ting; Jeg bruger temaet Twenty Seventeen og masser af Lorem Ipsum. Jeg kom med følgende resultat.

Bemærk, at jeg ikke tilpassede farverne eller noget. Fortæl mig hvad du synes; var ikke så let?


Tilføjelse af faner til dine WordPress-sider og indlæg er tingene fra 4. klassinger. Jeg forventer ikke, at du får problemer, især hvis du bruger et plugin som f.eks. Tabs af WP Shop Mart.

Hvordan tilføjer du faner til dine WordPress-sider og indlæg? Hvilke er dine foretrukne faner WordPress-plugin? Del dine tanker i kommentarerne. Glad at skabe!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map