Astra Pro模組教學指南-Custom Layouts Module客製版型模組設定

Custom Layouts Inside Pages/Posts 頁面/文章內的自訂排版

Astra Pro官方的Custom Layout模組提供了在Gutenberg Page / Post插入任何內容的選項。
你可以設計自訂排版,並將其顯示在選定的Gutenberg古騰堡頁面/文章上的特定位置。
使用此功能,你可以在一個網頁設計排版,並將其顯示在多個頁面/文章上。

當你希望在文章/頁面上顯示一些資訊以吸引使用者時,此功能很有用。
像行動呼籲 Call To Action (CTA)一樣,在網路行銷的銷售過程中提供誘人的優惠、特殊折扣、重要資訊等等。
你可以完全讓網站設計自訂排版,並輕鬆地將其放在選定位置的任何頁面/文章上。

讓我們看這個選項是如何工作的:
在開始之前,請確保已啟用Astra Pro模組。

步驟1 –在控制台中,訪問外觀> Astra Options,然後啟用Custom Layouts。
然後導到 Custom Layouts 設定。

步驟2–設計一個你希望在Gutenberg頁面/文章上顯示的排版。
你可以使用區塊編輯器、Elementor或Beaver Builder來設計網站部分。

步驟3 –從 Custom Layout Settings中,選擇Layout內的Inside Post/Page Content 。

步驟4–你將在Location on post/page下看到兩個選項

After certain number of blocks
此選項將允許你在Gutenberg頁面/文章上選定相對數量的區塊之後顯示自訂排版。

此外,你還可以選擇輸入–Block Number
在這裡,你可以設定自訂排版可以顯示在第幾個區塊。

例如:
如果將 Block Number 設定為3,則Custom Layout將在所選頁面/文章的第3個區塊之後顯示。

Before certain number of Heading blocks–此選項將允許你在頁面/文章上選定數量的標題欄之前顯示自訂排版。

請注意,這僅支援本機有裝古騰堡標題區塊和UAG外掛新增的標題。

此外,你還可以輸入- Heading Block Number
在這裡,你可以設定自訂排版可以顯示在其第幾個標題區塊之前。

例如:
如果將 Heading Block Number 設定為2,
則Custom Layout將在所選頁面/文章的第二個標題欄位之前顯示。

步驟5 –在上述步驟中,你可以在Gutenberg頁面/文章上設定自訂排版的確切位置。
但是要從所有可用頁面/文章中選擇確切的頁面/文章,
你需要設定 Display on 顯示在 和 User Rules 使用者規則 。

Display On 選項下,你可以選擇確切的頁面/文章。
點擊下拉列表,然後選擇所需的顯示位置。

如果你希望僅將此自訂排版的可見性限制為某些使用者角色,
則可以使用 User Roles 選項來實現。

步驟6-設定Responsive Visibility響應式顯示。
通過此選項,你可以選擇要在其中顯示自訂排版的裝置。
只需選中所需裝置(桌機,平板電腦和手機裝置)的確認框即可。

步驟7 –設定Time Duration持續時間–你可以設定排版顯示的開始時間和結束時間。
設定排版的日期和持續時間。

在選定的持續時間內,排版將可見。

延伸閱讀:
了解有關行銷網站中常用的購物車系統,
WooCommerce電子商務與Astra整合概述的更多資訊
Astra Pro 通過WooCommerce模組擴展網站商店選項。


Custom Layouts新增修訂版

Custom Layouts 是Astra Pro  Addon 外掛提供的一項網站設計進階功能 。
要使用這些專業功能,你需要在網站上安裝Astra主題以及Astra Pro外掛。

如果你希望在Astra Custom Layouts中顯示修訂資訊,請使用以下自訂代碼:

add_filter( 'astra_advanced_hooks_supports', 'astra_add_revision_cl' );
 
/**
 * Add revisions support to the Custom Layout.
 *
 * @param array $defaults Default values to the `support` param.
 *
 * @return array
 */
function astra_add_revision_cl( $defaults ) {
	$defaults[] = 'revisions';
	return $defaults;
}

小提醒:將以上代碼新增到 子主題的functions.php文件中

在下圖中,你可以看到修訂在 Custom Layouts 部分中的顯示方式–


如何使用WPML翻譯Custom Layouts?

要使用WPML翻譯自訂排版,請按照以下步驟操作:

步驟1 –從WordPress控制台,導到WPML > Translation Management

步驟2 –從頂部的水平欄中,選擇 Multilingual Content Setup -> Post Types Translation  

步驟3 –選擇Custom Layouts (astra-advanced-hook)為Translatable並Save 。

這將設定所有要翻譯的Custom Layouts。
儘管在創建新的Custom Layouts時,請按照以下步驟操作-

步驟1 –從 視窗上方選項 中啟用 Multilingual Content Setup

步驟2-Save Custom Layout。打開Multilingual Content Setup -> Show system fields 
將所有具有ast 前綴的自訂欄位設定為Copy,然後點擊 Apply應用 。

步驟3 –在右側欄中,點擊 Language選擇語言。
轉換排版就像使用WPML翻譯任何文章一樣。


無法編輯Custom Layouts/出現404錯誤的Custom Layouts?

嘗試編輯Custom Layouts時出現404錯誤?

如果你正在使用Astra Pro附帶的 Custom Layouts 模組。
當你嘗試對其進行編輯時,所有排版均顯示404錯誤。請重改WordPress永久連結

如何重設WordPress永久連結?

註冊新的文章類型後,需要刷新它們。

  • 從WordPress控制台導至 設定 > 永久連結。
  • 點擊 儲存設定 。

如果仍然遇到問題,
請清除瀏覽器的快取,因為有時瀏覽器會呈現已保存在內存中的較舊版本頁面。


Custom Layout – Hooks

本節是有關Astra Pro的 Custom Layout 模組中的 Hooks 部分。
在繼續進行操作之前,請確保首先閱讀 Custom Layout模組概述 。

使用自訂排版模組新增Hooks的快速步驟:

步驟1:確保已安裝並啟用Astra Pro Addon外掛。
步驟2:WordPress控制台 > 外觀 > Astra Options下啟用模組
步驟3:訪問自訂 [ 外觀 > Astra Options > Custom Layouts ]以編輯模組設定

Custom Layout – Hooks選項使你可以輕鬆地將自訂代碼或內容插入各種官方 Hooks 設定位置

從Custom Layout中選擇 Hooks下拉選單後,你將獲得以下選項-

Action位置– 
Action基本上是將代碼或自訂內容注入的位置。
要查看Astra提供的所有操作及其位置,請 訪問此頁面

Priority優先權–
如果為一個特定的動作新增了多個項目,則優先權決定哪個項目先執行。
數字越小,優先權越高。

Spacing間距–
如果你需要在自訂內容的上方/下方新增一些Padding,請使用此選項。

新增自訂代碼?你有一個代碼編輯器!

此選項啟用代碼編輯器,這有助於新增自訂代碼。

以下是一些範例:

<?php
/* Add Your PHP Code here. */
?>
<script type="text/javascript">
/* Add Your Java Script Code here. */
</script>
<style type="text/css">
/* Add Your CSS Code Here. */
</style>

你也可以使用Page Builder頁面編輯器

你可以使用頁面編輯器來創建排版,然後將其註入到任何Hooks位置。
例如,你可以使用頁面編輯器來設計網路行銷常用的行動呼籲用語;
或電子報訂閱表單,並自動將其顯示在所有部落格文章的內容下方。

提醒:

  1. 對Beaver Builder:確保頁面編輯器啟用了Custom Layouts文章類型。
    例如,Beaver Builder具有該設定
  2. 對Elementor:確保頁面編輯器啟用了Custom Layouts文章類型。
  3. 如果你在為諸如此類的任何 自訂文章類型 頁面編輯器時遇到問題,請重新整理 控制台>設定>永久連結設定 頁面,然後重試。

Display Rules 顯示規則

你可以使用 Display On 選項選擇自訂排版,以顯示在整個網站上或特定頁面/文章上。
你甚至可以通過將特定頁面/文章新增 排除規則 來排除它們。

此外,Astra還提供了User Roles 選項;因此你可以選擇代碼應針對哪些使用者執行。

例如:
如果你想在整個網站上投放號召性用語;除404頁外和登出使用者

你需要設定以下選項:

  • Display On:Entire Website整個網站
  • Add Exclusion Rule新增排除規則 並設定 Do Not Display On不顯示:404 Page
  • User Roles使用者角色:Logged Out登出者

Responsive Visibility響應式顯示

通過此選項,你可以選擇要在其中顯示自訂排版的裝置。
只需選中所需裝置(桌機,平板電腦和手機裝置)的確認框即可。

Time Duration持續時間

你可以設定排版顯示的開始時間和結束時間。設定排版的日期和持續時間。
在選定的持續時間內,排版將可見。


自訂Header頁首

你可以使用Astra Pro隨附的 Custom Layout 模組設計自訂Header。
選擇頁首排版將用自訂排版內容替換當前網站頁首。
在這種情況下,其他任何設定都不會應用於自訂頁首。

你可以使用任何頁面編輯器設計Header,
並使用顯示規則在整個網站或特定頁面/文章上設定它們。

頁首排版可用的選項:

  • Stick固定–你可以選擇自訂頁首是否固定網頁頂端。
  • Shrink縮排–如果將頁首設定為停留在頁面頂部,則可以決定是否縮小。
    啟用收縮效果將移除頁首中的所有頂部和底部空間。
  • Stick On固定裝置-你可以選擇在桌機和/或手機裝置上固定頁首。

Display On and User Roles 顯示和使用者角色

你可以使用Display On選項選擇要顯示在整個網站上或特定頁面/文章上的自訂頁首。
你甚至可以通過將特定頁面/文章新增排除規則來排除它們。
你可以決定應該顯示其自訂頁首的使用者角色

例如:
如果你要在整個網站上顯示所有登入使用者並且除了404頁以外的自訂頁首,

則需要設定以下選項:

  • Display On顯示在:Entire Website整個網站
  • Add Exclusion Rule新增排除規則 並設定 Do Not Display On不顯示在:404頁
  • User Roles使用者角色:Logged In登入

Responsive Visibility 響應式顯示

通過此選項,你可以選擇要在其中顯示自訂排版的裝置。
只需選中所需裝置(桌機,平板電腦和手機裝置)的確認框即可。

Time Duration 持續時間

你可以設定排版顯示的開始時間和結束時間。設定排版的日期和持續時間。
在選定的持續時間內,排版將可見。

小提醒:持續時間結束後,設定為自訂排版的頁首將隱藏,原本Astra設計的頁首將顯示出來。


自訂404頁面

你可以使用Astra Pro隨附的 Custom Layout 模組設計自訂404頁面。
選擇404頁面排版會將當前的404頁面內容替換為Custom Layout內容。
你可以使用任何頁面編輯器來設計404頁面。

404頁面排版可用的選項:

  • Disable Primary Header停用主頁首
  • Disable Footer Bar停用頁尾欄

User Roles 使用者角色

你可以決定一個使用者角色,讓其自訂404頁面排版可見。
你可以使用 Add User Role 按鈕新增多個使用者角色。

Responsive Visibility 響應式顯示

通過此選項,你可以選擇要在其中顯示自訂排版的裝置。
只需選中所需裝置(桌機,平板電腦和手機裝置)的確認框即可。

Time Duration 持續時間

你可以設定排版可見性的開始時間和結束時間。設定排版的日期和持續時間。
在選定的持續時間內,排版將可見。


自訂Footer頁尾

你可以使用Astra Pro隨附的 自訂排版 模組設計自訂頁尾。
選擇頁尾排版將用自訂排版內容替換當前網站的頁尾。
在這種情況下,來自自訂的任何設定都不會應用於自訂頁尾。

你可以使用任何頁面編輯器來設計頁尾,
並在整個網站或具有顯示規則的特定頁面/文章上進行設定。

頁尾排版可用的選項:

  • Stick 固定–你可以選擇自訂頁尾是否固定。
  • Stick On 固定裝置-在啟用 Stick 後,你可以選擇在頁面和/或手機裝置上固定頁尾。

 Sticky Footer固定頁尾 選項在你的內容較少且無法覆蓋頁面長度時很有用。
無論你的內容長度是多少,固定頁尾都將停留在頁面底部。

Display On and User Roles 顯示和使用者角色

你可以選擇 自訂頁尾,以顯示在整個網站或特定頁面/文章上,並帶有 Display On 選項。
你甚至可以通過將特定頁面/文章新增排除規則來排除它們。
你可以決定應該顯示其自訂頁尾的使用者角色
對於排除的使用者,帶有自訂選項的頁尾設定將可見。

例如:
如果你要在整個網站上顯示所有登入使用者除了404頁以外的自訂頁尾,則需要設定以下選項:

  • Display On顯示於:Entire Website整個網站
  • Add Exclusion Rule新增排除規則 並設定 Do Not Display On不顯示在:404頁
  • User Roles使用者角色:Logged In登錄

Responsive Visibility 響應式顯示

通過此選項,你可以選擇要在其中顯示自訂排版的裝置。
只需選中所需裝置(桌機,平板電腦和手機裝置)的確認框即可。

Time Duration 持續時間

你可以設定排版可見性的開始時間和結束時間。設定排版的日期和持續時間。
在選定的持續時間內,排版將可見。

小提醒:持續時間結束後,設定為頁尾的Custom Layout將隱藏,原本Astra自訂內設定的Footer將顯示為頁尾。 


Custom Layouts自訂排版 總概述

Custom Layouts自訂排版是Astra Pro中提供的功能非常強大的模組。
使用此模組,你可以在各種Hooks位置上創建完全自訂的頁首、頁尾、404頁以及自訂內容或代碼。

如何使用 Custom Layouts 模組創建自訂排版的快速步驟:

步驟1:確保已安裝並啟用了Astra Pro Addon外掛。
步驟2:WordPress控制台 > 外觀 > Astra Options下啟用 Custom Layouts 模組
步驟3:訪問控制台 [ 外觀 > Astra Options > Custom Layouts ]以編輯自訂排版設定

啟用模組後,點擊  Settings 選項以開始使用。

現在,你可以在 外觀 選項下看到一個新的 Custom Layouts 選單
Add New新增排版後,你將看到以下選項:

從下拉選單中選擇選項,將在其中新增自訂排版。
整理以下的專用功能,以了解Custom Layouts可用的設定:

  • Header
  • Footer
  • 404 Page
  • Hooks
  • Inside Post/Page Content

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security