Elementor系列之三:針對特定頁面客製化頂部(Header)

情境

有些時候在特定的頁面會需要以不同的形式呈現頂部(Header),可能是要不同的外觀設計,或是不同的LOGO,也可能是要不同的選單。在FirstHatch一起孵服務過的客戶中,就遇到了需要客製化首頁頂部的需求,需要達到的目標共有以下2點。

  1. 首頁Header的LOGO需與其他頁面不同。
  2. 首頁Sticky header的LOGO需置換成另一個樣式。(見Elementor系列之四:針對特定頁面的Sticky header設置不一樣的LOGO

本篇文章將先針對第一點說明當時的解決辦法。

使用到的外掛

  1. Elementor
  2. Elementor pro

解決方法

首先,透過Elementor pro的主題建構器新增頂部版型。

Elementor系列之三:針對特定頁面客製化頂部(Header) 1

接著,依照一般操作方法,從元素區中,將適合的網站元素(例如:導航選單、搜尋表單等)拉到編輯區中。

Elementor系列之三:針對特定頁面客製化頂部(Header) 2

LOGO的部分,則可以使用基本元素的圖片元素。比較需要注意的是,透過圖片元素插入LOGO後,需要對圖片設置連結。此時,選擇客製URL,點擊動態,再選擇網站連結URL。透過這樣的設定方式,即使未來網域換了也不需要回來修改URL。

Elementor系列之三:針對特定頁面客製化頂部(Header) 3

最後,在發布之前,需要透過顯示條件,決定要顯示的位置。本次的目標是要客製化首頁的頂部,因此選擇簞頁首頁

Elementor系列之三:針對特定頁面客製化頂部(Header) 4

Elementor系列之三:針對特定頁面客製化頂部(Header) 5

分享至:

發佈留言