架站勤拿手

[欣賞]Footer版型

前言

有時候在設計時真的一時沒有靈感，可多參考他人的網站以求靈感激發或模仿變化。

版型搜集

[欣賞]首頁

前言

有時候在設計時真的一時沒有靈感，可多參考他人的網站以求靈感激發或模仿變化。

版型搜集

這邊不論何種網站，整體風格或佈局，我只要覺得可以參考我就搜集進來。

【錨點】二種錨點的用法

前言

「錨點」，也是一種「連結」，主要用來點擊之前可以快速到達頁面的指定區塊位置，幾乎任何網站都會用得到的一種小技巧，你也可以把它想成是一種「錨點連結」。

應用範圍

主選單、按鈕、甚至一般的文字連結，都可以加上「錨點」。

有些網站右下有一個「回到上方 」的按鈕，那個也是錨點的應用。

錨點種類

實作

1、置入錨點

在想要到達的網頁的某區塊段落，拉一個「選單錨點」至右邊該區塊的上方。

2、錨點命名

注意，同一頁中，錨點的名稱不可以重覆，否則會因重覆而讓錨點失效。

下例，在 「最新消息」的區塊上方拉一個新的選單錨點，任意命名為「new」。

3、錨點連結

要使用一頁式錨點或跨頁式錨點，則視需求而定 。

可以在主選單、或是網頁中置入按鈕或連結方式來加入錨點，此處以主選單為例，

用「自訂連結」來建立一個「錨點連結」，下圖，網址處直接輸入「#new」(#字號加上錨點名稱)，再加上一個中文選項名稱(可隨意自訂)即可。

此處用的是一頁式錨點，因錨點前方沒有加上該頁的網址，故它是「一頁式錨點」，只有同一頁中點擊才有立即連到該段落的效用。

不過因「主選單」是網站中每一頁都看得到主選單，所以這個「最新消息」的錨點，有可能在不同頁面時被點擊，但當在其它頁面時點擊此錨點，是無法連到指定段落的，因剛剛所用的是「一頁式錨點」，所以我們就要把它改成「跨頁式錨點」，修改方式很簡單，把此錨點的前面，加上此錨點所在頁面的頁面網址即可，例如剛剛拉一個新的選單錨點時，這個錨點是在「首頁」中，那就如下圖，加上首頁的網址即可。

結論

以上是錨點的基本用法，務必先玩熟，因這個會很常用，未來若有需求，可以再學習其它錨點的變化使用(甚至錨點的命名或數量都可以影響SEO)。

09_Container相關設定細項列表

簡介

「Container」(容器)尚有許多設定須先摸熟，例如:高度、寬度、換行、背景、框線、陰影、內外距、回應式隱藏、響應式參數…，這些若摸熟後，未來在Elementor中的任何的「元素」的設定就等同也會設定了，所以這邊的練習就非常重要了!

運用範圍

外層Containe或內層Container，都須做基本設定。

各細部說明

以上為一個Container容器的基本需要去設定的地方。

總結

以上的設定，在「元素」工具也會有，例如標題、按鈕、圖片…，所以上面所述一定要摸熟搞懂。

10_如何切出垂直區塊與水平區塊

簡介

「Container」是基本的網頁框架區塊，內部可以再視需求置入更多的小Container區塊，並且決定它是水平或垂直排列。

運用範圍

每一頁。

範例

略 。

原理與思路

提示 : 須利用「右鍵 / 再製」。

實作

1、切出垂直區塊 

其實它預設排列方式就是垂直排列，不用經過特別處理。

假設要切出垂直的4個區塊，總共需要產生1個外層與4個內層的Container。

• 外層 : 須設定排列方向為「↓」。
• 內層 : 用「再製」方式來產生。

動手練習看看。

2、切出水平區塊 

假設要切出水平的4個區塊，總共需要產生1個外層與4個內層的Container。

• 外層 : 須設定排列方向「→」。
• 內層 : 用「再製」方式來產生。

原理與垂直區塊的作法一樣，只差在「外層」的排列方向是設定成水平(橫向箭頭)。

3、其它對齊方式

利用「Container」可以控制Container本身內部元素的對齊方式，例如垂直置上、垂直置中、垂直置下、靠左、靠中、靠右，如下圖。

這個對齊方式非常重要，未來要控制容器內部之小容器或元素都得靠這個方式來讓它對齊。

動手練習看看。

總結

掌握上述法則，就可以進階做出水平區塊中有垂直區塊，或是垂直區塊中有水平區塊，達到複雜排版的需求，當然這一切仍要「視素材文案的量」而決定。

接下來，就可以在切好的大小區塊中，置入「元素」了，例如圖片、按鈕…。

08_切版工具Container之置入方式

簡介

使用「Contaner」工具可以把網頁切出不同大小的水平或垂直區塊。

運用範圍

每一頁。

範例

略。

原理與思路

先用Container建立外層大區塊，再度拉Container至大區塊中建立適當數量的小區塊。

利用大區塊包小區塊的方式來切割出該頁所需要的框架。

實作

1.如何新增區塊？

三種方式，都可選用 。

從左邊拖拉Container
從右邊當下的區塊去增加
從右邊下方的虛線去增加

2.如何大區塊包小區塊？

當已產生一個空白Container區塊後，再從左邊拖拉Container工具至右邊空白Container區塊中，就形成大區塊包小區塊的效果，這也是初步的切版。