Divi 5的20個Flexbox頁腳(免費下載!)

已發表: 2025-09-09

Flexbox比以往任何時候都更容易創建看起來很乾淨的頁腳,非常適合不同的屏幕尺寸,並且在Divi 5中易於自定義。在此免費包裝中,您會發現20種獨特的Flexbox頁腳設計,每個設計都使用Divi 5的Flex Layout System構建,以進行精確的對齊和響應式控制。無論您是要使用網站現有的全球樣式還是從現成的設計開始,您都可以在此處找到兩個選項。

目錄
  • 1預覽
  • 2下載20個flexbox頁腳5
  • 3免費下載
  • 4包括什麼(42個出口)
  • 5如何安裝佈局
    • 5.1 1。將佈局導入到Divi庫中
    • 5.2 2。創建一個新的頁腳模板
    • 5.3 3。上傳頁腳佈局
  • 6默認值與PRESTY:您應該選擇哪個?
  • 7定制頁腳
    • 7.1 1。選擇一個自定義的模塊
    • 7.2 2。調整flexbox設置以進行佈局控件
    • 7.3 3。在必要時添加鏈接
  • 8使用Divi 5今天建立頁腳

預覽

讓我們看一下此包中的所有20個Flexbox頁腳。此包可以免費下載帖子。

https://youtu.be/xutcua0rccs

訂閱我們的YouTube頻道

Divi 5的Flexbox頁腳

下載20個Divi 5的Flexbox頁腳

免費獲取所有20個Flexbox頁腳,包括默認版本和PRESTY版本。每個頁腳都可以隨時導入您的Divi庫,並在主題構建器中使用。只需下載並開始建造即可。

下載文件
免費下載

免費下載

加入Divi新聞通訊,我們將向您發送終極Divi著陸頁佈局包的副本,以及大量其他驚人和免費的Divi資源,提示和技巧。跟進,您將立即成為Divi大師。如果您已經訂閱,則只需在下面的電子郵件地址中輸入您的電子郵件地址,然後單擊下載即可訪問佈局包。

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲取免費的每週Divi佈局包!

包括什麼(42個出口)

下載並解壓縮文件夾後,您會發現所有42個佈局出口將整齊地組織為默認版本,並作為單個頁腳作為單個頁腳和完整的“所有頁腳”包裝。

默認值 - 單個頁腳(20)→使用您的全局樣式。
默認 - 使用您的全局樣式的所有頁腳(1)→完整包。

prestesty-單個頁腳(20)→包括即時,現成的外觀的內聯樣式。
prestestion-所有頁腳(1)→完整的包裝,並使用內聯樣式。

Divi 5的Flexbox頁腳

如何安裝佈局

保持下載文件夾封閉,以開始將其導入到Divi網站。

1。將佈局導入到Divi庫中

轉到Divi→Divi庫。

Divi 5的Flexbox頁腳

到達那里後,單擊導入和導出按鈕以安裝文件。

Divi 5的Flexbox頁腳

查找Flexbox頁腳佈局(ALL)文件,然後單擊以導入它。

Divi 5的Flexbox頁腳

2。創建一個新的頁腳模板

轉到Divi→主題構建器。

Divi 5的Flexbox頁腳

創建一個新的頁腳模板或打開現有的模板。

Divi 5的Flexbox頁腳

3。上傳頁腳佈局

一旦您進入頁腳區域,就可以使用Divi庫選擇您選擇的頁腳佈局。單擊主題構建器左上角的“添加佈局”按鈕

Divi 5的Flexbox頁腳

選擇保存的佈局

Divi 5的Flexbox頁腳

單擊要添加到主題構建器的頁腳佈局。

Divi 5的Flexbox頁腳

單擊使用此佈局按鈕加載頁腳。

Divi 5的Flexbox頁腳

確保保存您的新頁腳和主題構建器的更改。

默認vs prestyle:您應該選擇哪個?

當您打開下載文件夾時,您會看到每個頁腳的兩個版本:**默認**和** PRESTY **。它們以完全相同的方式構建,區別在於它們如何處理樣式。

默認頁腳從您的全球樣式繼承了外觀。您的品牌顏色,字體和按鈕樣式將自動應用。如果您已經設置了全球樣式,則默認值是將這些頁腳添加到網站並立即匹配設計的最快方法。

Prodestled的頁腳配備了所有樣式:顏色,字體和按鈕設計是內聯的。它們看起來完全像開箱即用的預覽。如果您要構建快速演示,測試想法,或者想在屏幕截圖中看到的確切設計而不觸摸變量,這真是太好了。

簡而言之,如果您希望頁腳與現有的站點樣式無縫融合,請使用默認值。如果您想要預覽中顯示的現成外觀,請選擇Prosestle。

定制頁腳

Divi 5的Flexbox佈局系統為您提供了強大的工具來調整佈局,同時保持所有響應速度。這是自定義這些頁腳以適合您網站的樣式的方法。

1。選擇一個自定義的模塊

在主題構建器中,將懸停在佈局上,然後單擊要編輯的模塊,例如文本模塊,社交媒體關注模塊或按鈕。模塊的設置面板將打開,使您可以修改內容,設計或高級選項。

例如,您可以單擊文本模塊並更改模塊的內容,或使用Divi AI來幫助寫入內容以吸引訪客注意力。

Divi 5的Flexbox頁腳

在“模塊的設計”選項卡中,您可以調整字體,顏色和更多設置以匹配您的品牌。

Divi 5的Flexbox頁腳

每個Flexbox頁腳都是完全可自定義的,包括圖像,背景顏色,字體等,使您可以調整設計以匹配您的視野。

2。調整flexbox設置以進行佈局控件

每個頁腳均使用Divi 5的Flexbox佈局系統設計,這意味著您可以使用廣泛的Flexbox控件更改佈局,對齊項目的方向或包裹它們。在主題構建器中,單擊要自定義的部分或行。例如,如果您想調整設計元素之間的空間,請選擇“行”中的列,導航到“設計”選項卡,然後選擇“佈局下拉菜單”。

Divi 5的Flexbox頁腳

您可以調整垂直間隙字段中的值以控制間距。

佈局方向選項使您可以更改佈局的方向。例如,在一排的設置中,您可以在行(水平),行反向,列(垂直)或列反向中顯示所有設計元素。

為了控制沿主軸的Flex項目(列,行或部分)的對齊,您可以調整合理的內容設置。可用的選項包括將項目對齊到開始,中心,末端,空間,周圍或空間之間的空間。這些設置取決於容器的彈性方向。例如,如果將Flex方向設置為行,則水平為行,如果將其設置為列,則垂直方向。

Divi 5的Flexbox頁腳

對齊項目字段中,您可以將容器中的設計元素與起點,中心,結束或拉伸對齊。

Flex包裝設置控制容器中的Flex項目是在一條線上停留在一條線上還是在沒有足夠的空間沿主軸上安裝它們時將其包裹在多條線上。當選擇不包裝時,即使它們溢出容器,所有Flex項目都被迫留在一條線上。

包裝可確保Flex項目在無法安裝時將其自動包裹在其他線條上,並以相反順序包裝反向包裝內容。

Divi 5的Flexbox頁腳

3。在必要時添加鏈接

儘管每個頁腳佈局都可以開箱即用,但您仍然需要添加鏈接。在此示例中,您將添加到社交媒體的鏈接遵循模塊或隱私政策。單擊以展開模塊的設置。單擊“內容”選項卡中的第一個項目以顯示其設置。

Divi 5的Flexbox頁腳

擴展鏈接下拉列表,然後將鏈接添加到您的帳戶鏈接URL字段中的帳戶或頁面。

Divi 5的Flexbox頁腳

在退出主題構建器之前,請務必保存您的頁腳。

Divi 5的Flexbox頁腳

立即使用Divi 5用於建立頁腳

這20個Flexbox頁腳是一種快速加快Divi 5構建的方法,無論您是從已建立的全球樣式工作還是從預先設計的外觀開始。下載它們,將它們放入主題構建器中,然後將它們製成自己。 FlexBox處理對齊方式,以便您可以專注於設計。

下載Divi 5learn更多有關Divi 5的信息