Elementor – WP TablePress

by
with no comment
ElementorTabeller

Elementor PageBuilder er fantastisk, og desidert den beste PageBuilder jeg har jobbet med. Men den har ingen innebygd widget for å lage tabeller. – Det utgjø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),

Dypetse.no 01_InstallereTablePressInstallere 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.
    dypetse.no 01_Elementor_LagNyTabell

Opprette og redigere en tabell i TablePress

  • Under Tabellinformasjon vises Tabell ID, tabellens kortkode (pkt 1), tabellnavnet (pkt 2), samt 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.
    dypetse.no 02_Elementor_TabellInformasjon

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)
  • dypetse.no 03_Elementor_TabellOversikt

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)
    dypetse.no 05_Elementor_TabellViseSkjuleFunksjoner

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

dypetse.no 06b_Elementor_PhotoshopVeksleWidgetI 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)
    dypetse.no 06_Elementor_PhotoshopPrisTekstfelt copy
  • 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).
    dypetse.no 07_Elementor_PhotoshopPrisTabellID
  • På websiden vil tabellen se ut som angitt under.
    dypetse.no 08_Elementor_Photoshop_Tabell_Web
  • 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.dypetse.no 09_Elementor_Kursinnhold_toTabeller

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).
    dypetse.no 10_Elementor_PhotoshopRyddig

Sette tabellen inn i en ordinær tekstkolonne

  • Legg til en Ny Seksjon (pkt 1).
    dypetse.no 11_ElementorNySeksjon
  • Angi hvor mange kolonner seksjonen skal inneholde (pkt 1
    dypetse.no 12_Elementor_VelgStruktur
  • Sett inn et vanlig tekstfelt (Elementor widget) (pkt 1).
  • Lim inn tabellens kortkode (TableID)
  • Oppdater deretter siden med Elementor PageBuilder og tabellen vises på websiden.
    dypetse.no 13_ElementorTekstfelt

Lykke til med WP Table Press og Elementor Pagebuilder. 🙂

Sissel Klungsøyr etablerte i 1998 Sissels Grafiske AS som drev kurssenter innen grafiske fag i Ålesund (Adobe Photoshop, Indesign, Illustrator, Dreamweaver). Kundelisten har primært vært næringslivet i Møre & Romsdal, samt endel større mediebedrifter. Firmaet var en rekke år også innleid som foreleser i grafiske fag på en rekke høyskoler. - Sissels Grafiske er også leverandør av grafiske tjenester, som annonseutforming, brosjyredesign, samt standardløsninger i Wordpress Webdesign.

Comments are closed.