Com afegir pestanyes a publicacions i pàgines de WordPress

Les pestanyes són una característica força habitual a molts llocs web, especialment a les botigues de comerç electrònic. Els propietaris de botigues de comerç electrònic normalment utilitzen pestanyes a l’àrea de descripció del producte, on divideixen les ressenyes, la descripció, les especificacions tècniques, etc. en diverses pestanyes..

Tot i així, les pestanyes han trobat ús en molts altres tipus de llocs web, no només en els llocs de comerç electrònic. Fins i tot el lloc web oficial de WordPress.org utilitza pestanyes a les pàgines de descripció del complement. Vegeu la imatge següent per veure les pestanyes ressaltades a WP.org.

Molts altres propietaris de llocs web utilitzen pestanyes en diferents tipus de llocs web. Tot i això, no s’ha de confondre amb les pestanyes acordions, que s’expandeixen per revelar informació. A continuació, observeu com he utilitzat acordions al meu lloc web.

Però a part dels acordions, estem aquí per parlar-ne pestanyes, no perdem el focus; Només necessitava deixar clara la distinció entre fitxes i acordions. Ara, espero que estiguem a la mateixa pàgina ��

En essència, els propietaris de llocs web utilitzen pestanyes per dividir informació que d’altra manera hauria agafat una pàgina o publicació completa. Això vol dir que les pestanyes faciliten la digestió de la informació sense obligar els usuaris a colpejar la roda de desplaçament un milió de vegades.

En altres paraules, les pestanyes milloren la usabilitat del vostre lloc web, especialment en un món de una atenció més curta. Per tant, si voleu mantenir els usuaris al vostre lloc durant més temps sense haver-los de morir amb pàgines llargues, heu de plantejar l’ús de pestanyes.

A la publicació d’avui, us mostrem exactament com afegir pestanyes a les vostres publicacions i pàgines de WordPress. Abans d’acabar aquesta publicació, tindreu totes les instruccions que necessiteu per utilitzar les pestanyes al vostre avantatge. Esperem que us agradi fins al final i, si us plau, no deixeu sense compartir els vostres pensaments a la secció de comentaris. Per descomptat, comencem.

Utilitzeu un creador de pàgines

Si ja teniu un creador de pàgines instal·lat, esteu d’enhorabona, és probable que ja tingueu un mòdul de pestanyes al vostre dit. La majoria dels principals constructors de pàgines ofereixen pestanyes com a part del conjunt principal d’elements del creador de pàgines. A continuació, fem una ullada a dos dels nostres preferits.

Creador de pàgines gratuïtes per Elementor

El popular creador de pàgines Elementor inclou pestanyes com a part de la versió gratuïta del connector. Tot el que heu de fer és inserir un element de pestanya a la pàgina i, a continuació, editar el títol, el contingut, l’estil, etc.!

WPBakery Premium Page Builder

Feu servir un tema premium que inclogui WPBakery Page Builder (com el nostre tema Total)? Genial! Les pestanyes estan integrades i són fàcils d’utilitzar.

El mòdul de pestanyes WPBakery és lleugerament diferent de l’exemple anterior, ja que les pestanyes inicialment es buiden quan les afegiu. Haureu d’inserir elements de pàgina addicionals (àrea de text, imatges, icones, etc.) a les pestanyes per afegir el vostre contingut. Però això us proporciona un munt de llibertat per crear pestanyes com vulgueu (a més de les opcions d’estil integrades). Abans havíem cobert aquest creador de pàgines al bloc, així que si voleu instruccions més detallades, consulteu la nostra guia WPBakery (nota: aquest complement abans es deia Visual Composer, perdoneu per endavant qualsevol confusió).

Instal·leu el complement de WordPress de pestanyes

Si no utilitzeu un creador de pàgines, no cal que n’heu de fer servir només per a pestanyes. Hi ha moltes alternatives fantàstiques, com ara el complement gratuït de WordPress conegut simplement com a Tabs per WP Shop Mart. Tabs és un complement nupcial de WordPress que us ajuda a crear un nombre il·limitat de pestanyes boniques sense haver de suar.

Comencem mitjançant la instal·lació del complement Tabs WordPress. Com que està disponible al repo oficial del complement de WordPress, podeu instal·lar el complement directament des del vostre tauler d’administració de WordPress.

Utilitzem la versió gratuïta, però hi ha una versió premium disponible si més endavant voleu actualitzar les funcions addicionals.

Instal·lació de pestanyes Plugin de WordPress

Inicieu la sessió al vostre tauler de control de WordPress i navegueu a Complements> Afegir nou i introduïu “pestanyes wpshopmart” al quadre de cerca de les paraules clau. Un cop trobeu el complement adequat, premeu el botó Instal · lar ara com es mostra a continuació.

Després d’això, feu clic a la tecla Activa botó. I és que, el vostre complement de WordPress amb pestanyes està a punt per utilitzar. Ara, creem un parell de pestanyes per descobrir què ofereix aquest complement.

Configureu el connector de WordPress responsive de les pestanyes

L’activació del complement afegirà un nou element al menú d’administració de WordPress. Per crear noves pestanyes, aneu a Pestanyes Sensible> Afegir pestanyes noves com detallem a la pantalla de sota.

En fer-ho, us dirigireu al fitxer Responsive Tabs, que és completament complet de totes les funcions que necessiteu per crear fitxes boniques com un cap. Consulteu la imatge de sota per veure què espereu.

Un desplaçament no és així? Bé, podeu trobar la majoria de les funcions a la barra lateral dreta. Tingueu en compte també que les pestanyes individuals tenen la seva configuració. Fins i tot podeu utilitzar els editors de WYSIWYG a les pestanyes, el que significa que teniu molt de control sobre les pestanyes.

Ara, creem un parell de pestanyes d’exemple i les mostrem en una pàgina o publicació.

Afegir Títol

Comenceu per donar a les vostres pestanyes un títol descriptiu (igual que ho faci amb els vostres menús de navegació) tal com es mostra a la imatge de dalt. D’aquesta manera, més endavant podeu identificar les vostres pestanyes al tauler d’administració de WordPress per si necessiteu editar qualsevol cosa. Per als propòsits d’aquest tutorial, vaig batejar les meves pestanyes “Pestanyes de la prova de casa”.

Trieu plantilla de disseny de pestanyes

Com es veu a la captura de pantalla de dalt, el següent pas consisteix en triar una plantilla de disseny que voldríeu utilitzar per a les vostres pestanyes. La versió gratuïta del complement Tabs WordPress només ofereix una plantilla de disseny, però sempre podeu actualitzar a la versió premium per a 19 més. Xerrada de llibertat de disseny.

Afegeix pestanyes

A continuació, afegiu tantes pestanyes com vulgueu, tal com es mostra a continuació.

Hem creat una llista numerada detallant què podeu fer al programa Afegeix pestanyes secció mostrada anteriorment. Els nombres corresponen a cada àrea.

1. Títol de la pestanya – Afegiu el títol de la fitxa en aquest camp, p. Descripció, especificacions, detalls, etc.
2. Fitxa Descripció – Afegiu aquí la descripció de la vostra fitxa. Aquest camp us permet afegir el contingut de la vostra pestanya. La millor part és que podeu utilitzar l’editor WYSIWYG (que es mostra al número 3 següent) per afegir contingut ric a les vostres pestanyes, incloses imatges, música i vídeos.
3. Utilitzeu WYSIWYG – Si voleu utilitzar el familiar Wbarret-Iou-SÉs a dir-Jos-Wbarret-Iou-Gi editor per crear el contingut de la vostra pestanya, no dubteu en prémer aquest botó per iniciar la finestra emergent
4. Icona de pestanya – Aquest camp us ajuda a triar una icona a la vostra pestanya. El complement Tabs de WordPress us ofereix accés a tones d’icones de tipus Font fantàstiques per crear les vostres pestanyes com un professional
5. Visualització de la icona a sobre – Si voleu mostrar el títol de la pestanya al costat de la icona, us agradarà aquesta funció. A més, us permet desactivar la icona sense tocar el títol de la pestanya
6. Suprimeix – Feu clic en aquest botó per suprimir una pestanya específica
7. Afegiu pestanyes noves – Feu clic en aquest botó per afegir més pestanyes
8. Eliminar tots – Cansat de totes les pestanyes? Només has de tocar el botó Eliminar tots botó per restablir-ho tot

Un parell de consells per ajudar-vos a sortir. Primer, podeu arrossegar i deixar anar les pestanyes per ordenar-les i ordenar-les com vulgueu.

Segon: no oblideu colpejar-lo Guardar l’esborrany botó una o dues vegades durant la creació de les vostres pestanyes per assegurar-vos que no perdeu cap canvi per si navegueu lluny del creador de pestanyes per accident..

Finalment, si necessiteu suport, hi ha un gran blau Obteniu assistència just a sota del botó Afegeix pestanyes a la secció (i a la majoria de les pàgines del complement) que us dirigeix ​​al fòrum oficial de suport de pestanyes a WordPress.org. No dubteu en prémer el botó d’assistència si necessiteu ajuda en qualsevol moment.

Pestanys Shortcode

A continuació, trobareu el codi curt de Pestanyes que feu servir per afegir i mostrar les vostres pestanyes a qualsevol pàgina o publicació que vulgueu. Per exemple, el nostre codi curt és [TABS_R id = 443]. Per mostrar les pestanyes en una pàgina, simplement copiaré enganxar el codi curt anterior a la pàgina en concret.

Widget de pestanyes

Voleu afegir les vostres pestanyes a una àrea de widgets del vostre lloc web? Si això és rotund, sí, us encantarà el suport de widget que inclou el complement Tabs WordPress.

Colpejant la Clica aquí l’enllaç de la imatge de dalt us porta a la pantalla de widgets de WordPress, on no podreu afegir les pestanyes a qualsevol lloc on tingueu una àrea de widgets al vostre tema..

CSS personalitzat

Si bé el complement Tabs WordPress ofereix moltes opcions de personalització de pestanyes (només cal fer una ullada a la barra lateral dreta; està ple d’opcions d’estil!), Podeu afegir els vostres propis estils CSS personalitzats, tal com es mostra a continuació.

A més, podeu configurar la configuració personalitzada com a configuració predeterminada de totes les pestanyes noves simplement fent clic a Actualitzar la configuració predeterminada com es mostra a la imatge de dalt.

La barra lateral dreta

La barra lateral dreta que destaquem a la imatge de dalt porta el dia realment real. Teniu totes les opcions que necessiteu per adaptar les pestanyes al contingut del vostre cor. Les opcions notables inclouen:

• Color de fons de la pestanya
• Color del tipus de pestanya
• Família i estil de la lletra
• Opcions de visualització del títol i de la icona de la pestanya
• Alineació de la posició de la icona de la pestanya, és a dir, abans o després del títol de la pestanya
• Bordes de la pestanya
• Animacions a la descripció de diverses pestanyes
• I molt més

Afegiu les vostres pestanyes a una pàgina o publicació de WordPress

Un cop afegiu el contingut de les fitxes i les opcions d’estil, desplaceu-vos cap amunt i feu clic a l’opció Publicar com es mostra a continuació.

En aquest moment, les vostres pestanyes estan llestes. Simplement, heu d’afegir les pestanyes a una pàgina o publicació de WordPress. N’hi ha prou amb copiar el codi curt de les pestanyes que vam veure anteriorment. La nostra és [TABS_R id = 443].

Inicieu el vostre editor de publicacions (encara que esteu fent servir Gutenberg) i enganxeu el codi curt a la vostra publicació / pàgina. Després d’això, toqueu el botó Publicar com es mostra a continuació.

Al cap d’uns 5 minuts d’entablir les coses; Estic fent servir el tema Vint-catorze i un munt de Lorem Ipsum, vaig obtenir el següent resultat.

Tingueu en compte que no he personalitzat els colors ni res. Digue’m el que penses; no va ser tan fàcil?

Afegir pestanyes a les vostres pàgines i publicacions de WordPress és cosa de quarts nivells. No crec que tingueu cap problema, sobretot si utilitzeu un complement com Tabs by WP Shop Mart.

Com afegir pestanyes a les vostres pàgines i publicacions de WordPress? Quina és la vostra pestanya favorita del complement de WordPress? Per favor, comparteixi els seus pensaments en els comentaris. Feliç creació!