線上工具

Infogram 線上製作漂亮動態的資訊頁面,崁入在網頁上更加有特色又美觀

大家好,我是豬油先生!

前幾天逛網站時,看到有人的網站崁入了漂亮的活動頁面,心想要特別製作一個這樣的頁面也太累了吧?後來細看才發現原來是透過一個叫做 Infogram 的線上平台工具來完成的,竟然有這麼有趣又方便的工具。今天就來和大家分享一下,只要透過這網站就可以輕鬆將一些想要表達的圖表資訊,透過動態的方式呈現在網頁上唷!

網站名稱:Infogram

網址:https://infogram.com/

建立帳號

》step 1

Infogram 需要先註冊登入帳號後才可以使用,請先到右上角【Log In】。

db8d3511ea4ae8fa351d539951fc4773.jpg


》step 2

選擇習慣的社群媒體來登入。

3cc52aaa3cc358c27b8e5197c56ac011.jpg

102c976402e64dc2b93142d6b0a93573.jpg

任意選擇。

8044b62047f91b848ccc08130458c355.jpg

任意選擇。

7c1077533d93e48ec15142299b414c97.jpg


價目表

》step 3

我們使用【Free】來操作。

f9ed0ba38760f6d912a277530dde31cf.jpg


模板分類

Infogram 提供了非常多的模板樣式,並依據功能型態分類好了。

b72d1af3c01008f124732f7f752f3bf5.jpg


建立專案

》step 4

首先來到控制台,先按下【Create a Project】來建立一個新專案。

84439c9b666c702ffbb54529bf523d3a.jpg


》step 5

選擇一款喜歡的模板來使用。

b034bd6b3991b66a0c564f5938bf9228.jpg


》step 6

每個模板都可以先預覽看看它的樣式,但由於我們是【Free的帳號】,並不是所有的模板可以使用唷!

36b8f405de57a2aa152ed0d521bdad57.jpg


》step 7

瀏覽後覺得不錯,就可以按下【Use this template】使用這個模板。

193d5214d975441b3b01c442596915c0.jpg


》step 8

選擇【Public on the web】,建立專案。

04d525337f4a3560543b56ad605e6857.jpg


內容建置修改

》step 9

雙擊【文字】即可修改文字,如要調整字體大小、顏色可以透過要右邊的進階功能來設定。

1b2903cf122b037d66b9e4c4dd8c7858.jpg


》step 10

雙擊【圖表】會出現 Excel 表格,圖表會依據所設定的數值自動調整。

239de059caaef022e49cb186a9bbe95b.jpg

c3b5c0a03f39c3331a8cd704166c35f3.jpg


》step 11

圖表顏色也可以隨喜好調整。

478da60e4e969b3e138d5aea1d012ea2.jpg


功能

文字

4e630d8a9a7735363a616937a36570fe.jpg


圖表

c8d2febbdea8b6f47f810ffb45a1dc30.jpg


地圖

e50155667183cc89bed56ec132e5df98.jpg


列表

ede55b4eadc037c3fa9ab09fee1b19e0.jpg


圖標/照片

f77442cb61dc05d67f5d98176dd272b4.jpg


形狀圖形

f9d98db83317cab28375d382ba4a5423.jpg


其他社群

fac45613dff4dd33d22f58f35d752b6e.jpg


圖層

Layers 每個元件可以透過滑鼠拖曳移動排序。

e5281e6d9326727ddaa58574c830b2ce.jpg


網格

開啟 Grid 網格模式後,面板會出現紅色的對齊線,這樣調整元素與元素之間的位置將更加精準。

b38bc61ea1079020e93fb7fd2340bd11.jpg

8d178756aed0f52ff9d1a7c56f18b75a.jpg


 

下載 / 分享

》step 12

點擊右上角的【Download】進入下載頁面。

e22f3779aeee92a0830bbcb868fe61fd.jpg

分別為:PNG、JPG、PDF、GIF、MP4,但需要付費升級才擁有此功能

522a7292a662ca69d9ee801aec60810d.jpg


》step 13

分享功能,可透過連結分享這個動態頁面給朋友觀看。

b78a32716fb700418ab95662a3772e83.jpg


》step 14

如果是需要崁入在網頁上的朋友們,可使用【Embed】將程式碼貼在網頁上即可。

360881964b6573ff95a560dbf790ccd0.jpg


網頁崁入範例

 


心得

  • 無須寫程式就可輕鬆製作一個動態頁面
  • 圖形化操作
  • 可以崁入網頁之中

豬油先生

大家好!我是豬油先生 ~ 我喜歡吃,吃是享受,是生活,因它的美,我記錄,偶爾寫點小教學。 我享受我的生活,並分享它存在的價值。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


Back to top button