Infogram 線上製作漂亮動態的資訊頁面,崁入在網頁上更加有特色又美觀
大家好,我是豬油先生!
前幾天逛網站時,看到有人的網站崁入了漂亮的活動頁面,心想要特別製作一個這樣的頁面也太累了吧?後來細看才發現原來是透過一個叫做 Infogram 的線上平台工具來完成的,竟然有這麼有趣又方便的工具。今天就來和大家分享一下,只要透過這網站就可以輕鬆將一些想要表達的圖表資訊,透過動態的方式呈現在網頁上唷!
網站名稱:Infogram
建立帳號
》step 1
Infogram 需要先註冊登入帳號後才可以使用,請先到右上角【Log In】。
》step 2
選擇習慣的社群媒體來登入。
任意選擇。
任意選擇。
價目表
》step 3
我們使用【Free】來操作。
模板分類
Infogram 提供了非常多的模板樣式,並依據功能型態分類好了。
建立專案
》step 4
首先來到控制台,先按下【Create a Project】來建立一個新專案。
》step 5
選擇一款喜歡的模板來使用。
》step 6
每個模板都可以先預覽看看它的樣式,但由於我們是【Free的帳號】,並不是所有的模板可以使用唷!
》step 7
瀏覽後覺得不錯,就可以按下【Use this template】使用這個模板。
》step 8
選擇【Public on the web】,建立專案。
內容建置修改
》step 9
雙擊【文字】即可修改文字,如要調整字體大小、顏色可以透過要右邊的進階功能來設定。
》step 10
雙擊【圖表】會出現 Excel 表格,圖表會依據所設定的數值自動調整。
》step 11
圖表顏色也可以隨喜好調整。
功能
文字
圖表
地圖
列表
圖標/照片
形狀圖形
其他社群
圖層
Layers 每個元件可以透過滑鼠拖曳移動排序。
網格
開啟 Grid 網格模式後,面板會出現紅色的對齊線,這樣調整元素與元素之間的位置將更加精準。
下載 / 分享
》step 12
點擊右上角的【Download】進入下載頁面。
分別為:PNG、JPG、PDF、GIF、MP4,但需要付費升級才擁有此功能。
》step 13
分享功能,可透過連結分享這個動態頁面給朋友觀看。
》step 14
如果是需要崁入在網頁上的朋友們,可使用【Embed】將程式碼貼在網頁上即可。
網頁崁入範例
心得
- 無須寫程式就可輕鬆製作一個動態頁面
- 圖形化操作
- 可以崁入網頁之中