Webnode: Ako vložiť na web tabuľku z Google Drive

05.09.2022

Občas sa však stane, že sa tabuľke nedá vyhnúť. Alebo patríš k milovníkom Excelu. Tento návod je pre teba. 
Aktuálny editor Webnode zatiaľ neumožňuje vkladať tabuľky z rôznych rozumných dôvodov, ale dá sa to elegantne obísť kódom. Riešením je responzívny iframe alebo vnorené okno, v ktorom sa dokument z Google Drive načíta.

Ako vložiť na Webnode responzívne vnorené okno

1. V editore otvoríme stránku, na ktorú budeme vkladať tabuľku. 

V hornej lište klikneme na Stránky, potom danú stránku > SEO nastavenia a nájdeme HTML hlavičku

Ak máš projekt vo verzii nižšej ako Štandard, kód vlož priamo na stránku pomocou obsahového prvku HTML.

2. Tam šupneme tento kód:

<style>

.container {

position: relative;

height: 400px; /* výška okna v pixeloch. túto hodnotu uprav podľa potreby */

overflow: hidden;

}

.responsive-iframe {

position: absolute;

top:0;

left: 0;

width: 100%;

height: 100%;

}

</style>

3. Okno so stránkami môžeme zatvoriť a ideme ďalej.

4. Pre veľký úspech sa vrátime na stránku, na ktorej bude tabuľka. Prejdeme presne na miesto, kam chceme tabuľku vložiť. 

Myškou zobrazíme čierne plus naľavo pre vloženie nového obsahového prvku a zvolíme prvok HTML.

5. Do okna skopírujeme tento kód:

<div class="container">

<iframe class="responsive-iframe" src="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></iframe>

</div>

6. Klikneme na OK.

7. V prehliadači si otvoríme nové okno a v ňom dokument na Google Drive. 

Dokument dáme zdieľať a skopírujeme odkaz:

⚠️ Pozor! Ak to nejde, skontroluj nastavenia súkromia daného dokumentu. ⚠️

8. Prejdeme naspäť do editora a otvoríme vložený HTML kód. 

Odkaz z Google Drive, ktorý je uložený v schránke, dosadíme za XXXXXXXXX v HTML kóde.

9. A máme hotovo. Môžeme publikovať zmeny. 

Tabuľka sa objaví až na publikovanom webe.

Výsledok:

*Ja viem, že to tak nevyzerá, ale toto je naozaj dokument z Google Drive.

Návody pre Webnode weby a e-shopy

Návody, tipy, triky a kódy zadarmo

Vo Webnode je možné vybrať jednu zo systémovo predvolených farieb, ktorá sa bude zobrazovať napríklad v menu, v zoznamoch, nadpisoch a ďalších grafických prvkoch. Ale tento výber je veľmi obmedzený a je veľmi nepravdepodobné, že v ňom nájdete presne ten odtieň, ktorý vám odporučil grafik v manuále značky. Vďaka kódom ho však môžete nastaviť...

Tento návod sa hodí, ak chceš akúkoľvek záložku z menu presmerovať mimo svoj web. Napr. na inú tvoju stránku/e-shop, do inej služby, kde máš profil (Instagram, Facebook) a podobne.

V pôvodnom oranžovom editore Webnode fungovali tzv. katalógy. Niektorým pamätníkom chýbajú, preto som pripravila tento článok s postupom, ako si katalóg vytvoriť aj v aktuálnej verzii Webnode 2.0.

Pomohol ti tento návod? Zdieľaj ho!