Elementor – TablePress – WordPress Webdesign

Elementor PageBuilder er fantastisk, og desidert den beste PageBuilder jeg har jobbet med. Men den har ingen innebygd widget for å lage tabeller. – Det ugjør ikke noe problem, så lenge det finnes et utall fantastiske utvidelser (plugins) som kan installeres som tillegg til WordPress.

I dette eksempelet ønsker jeg å vise hvor enkelt det er å opprette og vedlikeholde tabeller ved hjelp av WP TablePress utvidelse (plugin).

Istallere WP Table Press – utvidelse (plugin)

I kontrollpanelet velger du Utvidelser (Plugin) > Legg til Ny (Add New)
Som Nøkkelord skriver du WP Tablepress. Se bildet til høyre. Du kan evt. klikke på bildet for større versjon
Du får opp en rekke alternativer. Velg TablePress (pkt. 1)som vist på bildet til høyre
Klikk på Installer nå, deretter på Aktiver (pkt 2)
I menyen til Kontrollpanelet, får du automatisk et nytt valg (se pkt 3)

Opprette en ny tabell i TablePress

Velge TablePress > Legg til ny tabell (Add New Table) (pkt 1)
Dialogboksen under kommer frem, og du bør gi tabellen et navn. (pkt 2)
Deretter angir du antall rader og kolonner tabellen skal inneholde (pkt 3 og 4)
Når du har satt inn ønsket informasjon, velger du Legg til tabell.

Opprette og redigere en tabell i TablePress

Under Tabellinformasjon vises Tabell ID, tabellens kortkode (pkt 1), tabellnavnet (pkt 2), antall rader og kolonner du anga (pkt 3).
Sett inn ønsket informasjon i alle cellene. Bruk tabulator-tasten til å hoppe fra celle til celle.
Om du ønsker å legge til/slette eller duplisere rader og kolonner, gjøres dette under Tabellmodifisering (pkt 4)
Trykk Lagre endringer når du er ferdig.
Kopier også kortkoden dersom du skal sette tabellen inn i et wordpress-dokument. Fremgangsmåten vises senere i blogginnlegget.

Table Press – Oversikt over alle tabeller

Eksempelet under viser en oversikt over tabellene jeg har laget med TablePress på dypetse.no.

VelgTablePress > Alle tabeller (pkt 1), får du oversikt over tabeller du har laget, de står listet numerisk med eget navn (pkt 2)
Ved å føre musepekeren over de forskjellige tabellnavnene, får du frem de vanlige WordPress-valgene, dvs. mulighet til å redigere, kopiere, eksportere, slette tabellen eller se kortkoden (tabell-ID) (pkt 2)

Angi hvilken tilleggsinformasjon tabellen skal ha på websiden

Under Alternativer har du mulighet til å velge hvorvidt tabellnavnet skal vises over/under tabellen (pkt 1)
Under Funksjoner fra DataTables Javascript-biblioteket angir du om besøkende skal ha mulighet til å sortere innholdet, om de kan søke på et bestemt produkt, hvor mange rader som skal vises på siden m.m. (pkt 2)
Dette er en liten tabell på 3 linjer, og jeg har derfor slått av disse valgene.
Husk å alltid Lagre endringer når tabellen er ferdig (pkt 3)

Sette tabellen inn på en WordPress-side med Elementor PageBuilder

I eksempelet under har jeg valgt å sette tabellen inn i et Veksle-felt (Elementor-widget) med en expand/collapse-funksjon. – Disse modulene (widgets) er svært funksjonelle dersom man har mye tekst på en webside. Expand/collapse-widgets bidrar til at sideinformasjonen blir oversiktlig, og besøkende slipper å scrolle så langt ned på siden. Veksle feltet åpnes/lukkes ved å klikke på piltastene.

Husk å kopiere Tabellens kortkode, samt Lagre endringene før du forlater TablePress.
Når du legger inn en widget, får du automatisk en overskrift, med tilhørende standardtekst.
Marker all standardteksten (pkt 1)
Standardteksten vises også i selve vekslefeltet (pkt 2)

Lim inn tabellens kortkode (Table ID) slik at den erstatter opprinnelig standardtekst. – I eksempelet under har jeg valgt å vise innholdsfeltet til Kursinnhold, der jeg har lagt inn 2 tabeller Pkt 1 og 2).

På websiden vil tabellen se ut som angitt under.

Tabellene for kursinnhold. Når man er logget inn som WordPress-administrator, kan man klikke på Redigere (pkt 1 og 2), og man blir tatt direkte til WP TablePress der man kan foreta ønskede endringer. – Om en og samme tabell står på flere sider, vil alle sidene bli oppdatert når tabellen lagres i WP TablePress.

En ryddig og oversiktlig sidevisning

Vi leser aldri all informasjonen som står på en Webside. De fleste av oss skummer raskt gjennom sidens innhold på jakt etter det vi ønsker å finne svar på. De færreste av oss liker å lese lange tekster. Ryddighet og struktur, med korte overskrifter, er derfor svært viktig (pkt 1).