烏蘭察布高端網站建設:使用Divi的新高級設計設置構建的免費庫包

兩天前我們烏蘭察布高端網站建設介紹Divi 2.4,這是Divi歷史上最大的升級,也是我們最受歡迎的WordPress主題的一次飛躍。在這個更新中有許多很棒的特性需要探索,所以很難在發布的文章中描述它們,這就是為什么我們決定做一個為期兩周的信息博客文章,旨在教你如何充分利用Divi 2.4和它的新選項。在本系列的第2部分中,我們烏蘭察布高端網站建設將探索一些可以使用高級設置的創造性方法,以及如何將保存的項導入/導出到Divi庫中。我們甚至還提供了一個Divi庫包,它包含了這個帖子中的所有元素,這樣您就可以在您自己的站點上使用它們了!

Divi圖書館如何在建設網站的幾個小時內

如果您還沒有瀏覽過Divi2.4,您可能會問自己:“等等,Divi庫是什么?”簡單地說,這是一個新的地方,您可以保存使用DiviBuilder構建的各個模塊、行、部分甚至整個布局。一旦將項保存到庫中,就可以從構建器內部快速訪問它。這些庫項目就像您的新網頁設計工具包中的工具,可以在您的網站上創建新頁面或為您的客戶創建新網站時使用。

如果您在更新之前是Divi用戶,那么您可能熟悉Divi的“保存布局”功能,它過去和現在仍然是一個令人驚嘆的特性,但是有了節省布局的零碎部分的功能,頁面構建速度就會快得多。

現在各節、行和模塊有了自己的一組高級設計設置,烏蘭察布高端網站建設可以花費更多的時間配置頁面上的元素。這也會使高度定制的元素一次又一次地構建。但是感謝Divi庫,您可以將這些復雜的部分保存到庫中,然后可以在另一個頁面上使用,甚至可以在另一個網站上使用。

Divi2.4高級設計設置初探

烏蘭察布高端網站建設盡管每個元素的高級設計設置在每個項目的基礎上都是獨特的,但是有許多設置是他們共享的,并且您應該熟悉這些設置。這不僅會加速事情的發展,而且更重要的是,當你知道什么是可能的時候,它會讓你在夢想你的網站設計時變得更有創造力。

自定義填充和邊距

通過添加自定義填充或邊距,給模塊的內容多一點喘息空間。您可以為模塊的頂部、右側、左側和/或底部定義填充/邊距。

烏蘭察布高端網站建設

海關邊界

在模塊周圍添加邊框就像選擇邊框的重量、樣式和顏色一樣簡單。

design-settings-border

自定義按鈕

除了站點范圍內的按鈕設置外,還可以在每個模塊的基礎上定義自定義按鈕設置。

design-settings-buttons

背景顏色/圖像

現在,烏蘭察布高端網站建設可以向各個模塊添加背景。結合自定義填充,您可以創建一些真正有創意的模塊。

design-settings-bg

文本選項

如果模塊包含文本元素,您將在“高級設置”中找到各種類型的字體設置,如字體、顏色、樣式、大小、行高和字母間距。

design-settings-type

這些只是最基本的!下面我將介紹一些有更多獨特設置的模塊,以向您展示如何使您的網站真正獨特。

創建一個推薦信滑翔機

testimonial-slider

這實際上是一個全寬度滑塊模塊,它利用了新的自定義填充滑塊選項。在滑塊模塊的高級設置中,可以定義任何滑塊的頂部和底部填充。為了實現這種影響,我使用了幻燈片標題作為推薦信內容,屬性的幻燈片正文內容,并減少了滑塊填充相當多,因為證明滑塊的高度通常比普通的頁眉滑塊短。減少填充的另一個原因是,這樣您就可以在滑塊周圍添加更多的元素,如下面的屏幕截圖中的空白。

testimonial-slider2

給你的定價表一個新的外觀

pricing-table-module

Divi的“定價表”模塊可能會為最先進的設置帶來勝利。配置表可能需要一段時間,使這個模塊成為您可以使用Divi Library的完美示例。上面的定價表模塊是Divi的定價表的一個很好的現代樣式,而拆分的背景色只是向您展示您可以將這個模塊導入到您自己的頁面中,并將它添加到任何支持白色文本的背景色上。

烏蘭察布高端網站建設在這里編輯了相當多的內容,但要點是我刪除了默認邊框,將所有文本定制為白色,將按鈕修改為白色,并使表的背景顏色具有透明度。您還可以看到,我已經給特色定價表一個更不透明的背景與模塊的特色表設計設置。

單表控制

關于定價表模塊中的高級設置,最后要注意的一點是,您可以對整個模塊中的表進行自定義,但也可以在每個表的基礎上定制這些表。例如,您可以給每個表自己的背景色,使每個產品真正脫穎而出。

無溝行

gutterless-row

沒有排水溝的行是您可以在Divi2.4中創建的最酷的東西之一。我們將在即將發布的文章中更多地介紹新的行選項,但我想將其包括在內,以便為我們的讀者創建一個Divi庫包。您在這里看到的是一個兩列行,它是完全寬度的,在它的列之間沒有空格。下面的設置說明了這種配置。

gutterless-row-settings

咖啡圖像實際上是一個列背景圖像,列將始終保持完全相同的高度與Divi的新的等列高度設置。庫包中還包括這一行,但圖像位于左側。將這兩個結果結合在一起,形成一個很好的交替布局。

gutterless-rows

如果下載庫包并將這些行放置到自己的布局中,調用操作模塊將繼承主題的排版和按鈕樣式。請繼續關注Divi的所有新主題定制選項的更深入的文章。

盒式Blurb模塊

boxed-blurbs

相鄰的blurb模塊有時會發生沖突。如果你覺得他們需要更多的分離,在他們周圍添加一個邊框可能是一個很好的解決方案。在Divi2.4之前,您必須使用自定義CSS來完成這個任務,但是現在您可以通過簡單地使用模塊邊框選項來做到這一點。在添加邊框時,您需要添加一些自定義填充,這樣您的內容就不會崩潰到邊框中。在上面的例子中,我使用了40 px填充,這在所有斷點上都是一個很好的值,所以您的盒裝模塊在移動上看起來仍然很棒。

考慮到邊界模塊的相同概念,并將其添加到具有自定義填充的部分,您可以通過使用與上述模塊幾乎相同的模塊來實現一個全新的外觀。這是一個很好的例子,說明這些新的高級設置如何打開世界的設計機會。

blurb-section

透明接觸形式

transparent-contact-form

新的聯系人窗體設置允許您控制諸如“形成背景色”、“邊框樣式”、“文本顏色”和“窗體字段圓角”之類的內容。在上面的模塊中,我選擇了透明的背景色、白色邊框和圓角。所有這些設置都是完全可自定義的。您可以選擇半透明的背景顏色,選擇您的邊框厚度,甚至定義一個自定義圓角半徑。

全屏標頭

fullscreen-header

divi的全寬度頭模塊現在我可以做‘全屏’。這樣,不管您的瀏覽器大小如何,它都會填充屏幕并垂直集中內容。在上面的示例中,我將Divi徽標上傳到新的Logo字段,并添加了兩個操作按鈕調用。全寬度標頭模塊還使您能夠添加一個“滾動”圖標,如果點擊,將順利向下滾動到下一節。有11個預先制作的圖標,你可以選擇與能夠定義它的大小和顏色。我最喜歡的另一個功能是這個模塊的背景色疊加。你在這里看到的背景實際上是一個非常明亮和飽和的圖像,有一個半透明的暗覆蓋,幫助文本脫離繁忙的圖像。

fullscreen-header-settings

將您自己的項目保存到Divi庫

烏蘭察布高端網站建設在DiviBuilder中創建或編輯新模塊、行或部分時,您將注意到設置窗口底部有一個全新的保存按鈕,名為“Save&Add to Library”。這是伴隨著標準的“保存和退出”按鈕在右邊。當您單擊“保存&退出”按鈕時,您的模塊設置將保存在當前頁面上,并關閉設置彈出。當您單擊“Save&Add to Library”時,模塊仍然保存在您的頁面上,但它也會添加到您的Divi庫中。

add-to-library

將庫項目添加到頁面中

一旦將項保存到庫中,就可以在向頁面添加新模塊、行或部分時單擊“Add from Library”按鈕,將其添加到Divi Builder中的任何新頁中。

add-libarary-item

下載本篇文章中描述的圖書館項目

點擊下面的鏈接下載在這篇文章中描述的項目。要將它們導入庫,請導航到Tools>Import。選擇導入類型列表底部的WordPress鏈接,您將被提示上傳該文件。然后,您將可以訪問這些模塊,供您自己使用。上傳之前,一定要解壓縮文件!只能導入XML文件。

import-library





二維碼
ipad qq麻将玩法
世界主要的股票指数 农村神婆很赚钱 重庆幸运农场 福彩3d内部人员卖号 今日头条赚钱背后的 如今比较赚钱的行业 关于竞技网游的电视剧 真人压龙虎技巧公式 黄金基金金价涨了就赚钱吗 重庆快乐十分计划安卓 大富豪棋牌游戏上下分 篮球保龄球赚钱