# 組件類型

在平時設計網頁的時候，有一些設計組件經常被重複使用。WebFlow把這些組件提前組合好，在使用的時候可以提高效率。

**現在WebFlow上共有11個組件：**

1. Tab選項卡
2. 導航欄
3. 下拉選單
4. 輪播圖
5. 燈箱
6. 地圖
7. 視頻背景
8. Facebook
9. Twitter
10. Google
11. 內嵌代碼

### Tab選項卡

<img src="https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FPXjl7HkjtnYlCeYnvkKi%2Fimage.png?alt=media&#x26;token=9d6dd177-af54-47c5-a28d-19958064da3d" alt="" data-size="original">

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FRoaNZrNziyHVLHqYW1Gg%2Fimage.png?alt=media\&token=dcdfa2a7-a94f-4b62-888e-34a5ff9c419d)

### 導航欄

全站頂部的導航欄

<img src="https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FoIubRA2OcOSXarYgxbo1%2Fimage.png?alt=media&#x26;token=288deaef-dfb6-45c3-b079-82cb47c53d85" alt="" data-size="original">

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fw9UA0yyIP23D9LIEZQfD%2Fimage.png?alt=media\&token=c5aae5e3-2c52-4efc-b30d-0111ffc953dd)

### 下拉選單

<img src="https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FrzZUU5LPxm0IAWvWxrP8%2Fimage.png?alt=media&#x26;token=e498a29e-287d-4fb1-9f2e-341f03f2fa04" alt="" data-size="original">

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FZ8nYVw6kjeRppEo65oLX%2Fimage.png?alt=media\&token=cb5fd809-5963-4c4a-abe8-97d04d3dbf22)

### 輪播圖

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FTuldnPlY24L9pzLnzEzW%2Fimage.png?alt=media\&token=31351bdf-8a1d-4d92-a97b-fcc8ad51e26d)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FqWlMZ45yXzzqoy8lnvCq%2Fimage.png?alt=media\&token=9496f5ec-d785-45c4-ae46-a1711c91a799)

### 燈箱

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FFGc2oJMID7bt7iK9EuM1%2Fimage.png?alt=media\&token=43fecda9-48db-4f30-bb4d-cc678ed08fd6)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FD1KwUh321sMubTcZgEBd%2Fimage.png?alt=media\&token=95694d29-ffd3-4c1f-b49a-30c8327c9109)

### 地圖

用這個組件可以在頁面上嵌入Google地圖

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FfvVdjaWx5hXFYcClx5jI%2Fimage.png?alt=media\&token=29ea531c-0ffc-4f4d-8666-2900125c5a03)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FbZ2vnI16PqHbGvqK6CTf%2Fimage.png?alt=media\&token=6c54e9f9-e92e-4182-b22d-4c77f851082d)

### 視頻背景

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fpc0IrTovRKwnguaRAmMm%2Fimage.png?alt=media\&token=c75a2a70-b4a6-4f88-be18-2361134dbeeb)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FJ0tyZwoJGDA6fyyYVhjh%2Fimage.png?alt=media\&token=c3070dc9-5d96-457a-ac35-a30a30918c5c)

### Facebook

可以把Facebook的信息嵌入到頁面上，用戶可以直接看到Facebook頁面的更新。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F7UmUKgv9HMoZYsglCDOX%2Fimage.png?alt=media\&token=66e83fdf-453a-4301-9a13-f596bbbcbe5f)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fpu4GQJT5IFZZFdkkSTd1%2Fimage.png?alt=media\&token=308e0755-6b9a-45ba-9f84-f89d71d6397d)

### Twitter

可以把Twitter帳號的信息嵌入到頁面上，用戶可以直接看到Twitter時間線的更新。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F4CmpAhHSeuUegoNkX2i8%2Fimage.png?alt=media\&token=e00bd6da-4fdf-4a26-ae5d-11a7012cac84)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FfRbtPoEtYjYyHErLMWGp%2Fimage.png?alt=media\&token=0652ec3c-3a6c-4920-95f7-bc4b69869ce0)

### Google +

可以把Google+頁面的信息嵌入到頁面上，用戶可以直接看到Google+頁面的更新。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fz0B8vn6WZ7077FE4DJjg%2Fimage.png?alt=media\&token=a7e41bff-6cda-4c47-b60c-a6f4e70a9282)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FEjxN7phchGN5N9eQ02JJ%2Fimage.png?alt=media\&token=2160fcf1-9be7-47fc-bb89-d9b4fb8034d2)

### 內嵌代碼

可以嵌入第三方代碼。\
對應HTML 標簽

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FV0vaOHAzJ3HWNnSBtTuw%2Fimage.png?alt=media\&token=4b5de7f3-e7e4-4b51-b875-f2ded6994da1)