Elementor入門(mén) [07] 創(chuàng)建“我們的菜單”頁(yè)面

時(shí)間：2023-07-24 19:27:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-24 19:27:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

Elementor入門(mén) [07] 創(chuàng)建“我們的菜單”頁(yè)面：

https://www.zhihu.com/video/1596830245587554305上節(jié)課我們學(xué)習(xí)了 Elementor 中的響應(yīng)式編輯，針對(duì)設(shè)備優(yōu)化了首頁(yè)，并在 WordPress 中指定了首頁(yè)。
在本課中，我們將創(chuàng)建“我們的菜單”頁(yè)面、學(xué)習(xí)新的小部件并復(fù)習(xí)一些新技術(shù)，以幫助您立即成為專(zhuān)業(yè)人士！
如果您還沒(méi)有看過(guò)本課程之前的課程，我強(qiáng)烈建議您觀(guān)看它們，因?yàn)槲覀儗⒃谥八鶎W(xué)的基礎(chǔ)上進(jìn)行構(gòu)建。
好的，讓我們開(kāi)始吧！我們將從英雄部分開(kāi)始，正如您從我們的設(shè)計(jì)中看到的那樣，它包括兩個(gè)標(biāo)題、一個(gè)文本編輯器小部件和一個(gè)間隔小部件……
等一下！我們之前不是設(shè)計(jì)過(guò)類(lèi)似這樣的版塊嗎？我們肯定有！主頁(yè)的最后一部分具有與本部分相同的小部件。
如果您的網(wǎng)站上有非常相似的部分，則無(wú)需從頭開(kāi)始重新設(shè)計(jì)。
我將分享一些工作流程方法，幫助您在 Elementor 中構(gòu)建網(wǎng)站時(shí)節(jié)省時(shí)間。
好的，為了重用我提到的那個(gè)部分，我們需要重新打開(kāi)主頁(yè)。您可以點(diǎn)擊鍵盤(pán)上的 Escape 按鈕，然后單擊此處退出儀表板。
另一種快速退出編輯器的方法是鍵入Command 或 Control E，這會(huì)打開(kāi)查找器。
Finder 可幫助您輕松找到您的內(nèi)容并立即在 WordPress 中導(dǎo)航！
只需鍵入“主頁(yè)”一詞，主??頁(yè)就會(huì)顯示出來(lái)。然后按住Command 或 Control鍵并單擊鏈接，以在新選項(xiàng)卡中將其打開(kāi)。
在上一課中，我們復(fù)制了元素并將它們粘貼到整個(gè)頁(yè)面的不同部分。現(xiàn)在我們將使用相同的方法從該頁(yè)面復(fù)制，并粘貼到我們的菜單頁(yè)面！
打開(kāi) Navigator，右鍵單擊 Our Story 部分，然后單擊 Copy?，F(xiàn)在返回我們的菜單頁(yè)面。右鍵單擊、粘貼或使用鍵盤(pán)快捷鍵Command 或 Control V。
奇跡般有效。
好的，現(xiàn)在讓我們自定義它。單擊副標(biāo)題，并更新文本。在風(fēng)格上，將顏色更改為羅勒?，F(xiàn)在選擇第二個(gè)標(biāo)題。
添加您的文本，并在樣式中更改顏色。接下來(lái)，將文本編輯器小部件拖到分隔符下方，然后鍵入您的文本。在樣式中，將顏色更改為羅勒。
選擇間隔物，然后在“高級(jí)”選項(xiàng)卡中選擇一個(gè)新的背景圖像。
右鍵單擊社交圖標(biāo)，然后將其刪除，因?yàn)榇隧?yè)面不需要它們。
從小部件中，將圖標(biāo)小部件拖放到文本編輯器下。您可以上傳自己的圖標(biāo)，或者像我們的例子一樣，從圖標(biāo)庫(kù)中選擇一個(gè)。在搜索中鍵入“人字形”，選擇可用的人字形之一，然后將其插入。在風(fēng)格上，改變顏色。將大小更改為 20。
現(xiàn)在選擇該部分，然后在高級(jí)中添加 5% 的邊距……太棒了！英雄部分已準(zhǔn)備就緒。
這個(gè)部分，包括它的小部件和樣式，將在我們網(wǎng)站的其余部分再次使用，所以讓我們好好利用它。
重用部分的另一種方法是將其另存為模板。
為此，請(qǐng)右鍵單擊該部分，然后選擇另存為模板。給它一個(gè)好記的名字，然后點(diǎn)擊保存。
以后要訪(fǎng)問(wèn)您的模板，您可以通過(guò)單擊此處的灰色文件夾圖標(biāo)找到它們。這會(huì)打開(kāi)模板庫(kù)，在“我的模板”中，您會(huì)找到所有自己保存的模板。然后將鼠標(biāo)懸停在模板上，然后單擊插入，將其添加到您的頁(yè)面。
正如您剛剛看到的，復(fù)制元素并將它們保存為模板可以節(jié)省寶貴的時(shí)間，我鼓勵(lì)您將這些過(guò)程合并到您的工作流程中。
讓我們繼續(xù)下一節(jié)。創(chuàng)建一個(gè)包含一列的新部分。正如我們之前所做的那樣，我們將為這些部分命名，以便我們可以在整個(gè)頁(yè)面中快速導(dǎo)航。打開(kāi)導(dǎo)航器，命名 Hero 部分……以及 Starters 部分。
現(xiàn)在關(guān)閉導(dǎo)航器，并從小部件菜單中搜索分隔線(xiàn)小部件，并將其拖到該部分中。
分隔線(xiàn)小部件在各個(gè)部分之間創(chuàng)建了一種有組織且美觀(guān)的分隔，帶有可自定義的線(xiàn)條，您可以將其與圖標(biāo)甚至文本結(jié)合使用。
要將文本添加到分隔線(xiàn)，請(qǐng)單擊此處，然后鍵入您的文本。
我們暫時(shí)看不到它，因?yàn)樗哪J(rèn)顏色與背景顏色相同。
讓我們處理一下，這樣我們就可以看到我們正在處理什么。轉(zhuǎn)到“樣式”選項(xiàng)卡并更改分隔線(xiàn)的顏色。
在文本中，選擇 basil 作為字體顏色...并將排版全局樣式...設(shè)置為 Section。偉大的！
從小部件菜單中，將內(nèi)部部分拖放到分隔線(xiàn)下方。右鍵單擊此處...并選擇添加新列。
我們將繼續(xù)創(chuàng)建我們提供的菜單的第一項(xiàng)。
正如我們?cè)谏弦徽n中所做的那樣，首先為第一列逐個(gè)添加小部件并為其設(shè)置樣式。
從小部件菜單中，將圖像小部件拖放到第一列中。
選擇一個(gè)圖像，然后在樣式中調(diào)整寬度。
返回小部件菜單，將標(biāo)題小部件拖到圖像下方。鍵入您的文本，并將 html 標(biāo)記更改為 H3?，F(xiàn)在將它對(duì)齊到中心。在樣式中，將顏色更改為羅勒色，并將排版設(shè)置為全局樣式“菜單標(biāo)題”。
從小部件中，拖入文本編輯器小部件，然后鍵入您的文本。
現(xiàn)在右鍵單擊標(biāo)題，然后選擇復(fù)制。
將它拖到其他小部件下方，然后更改文本。
將其 HTML 標(biāo)記設(shè)置為 H4，然后在樣式、排版中，
選擇……嗯。這里沒(méi)有什么是有效的。因此，讓我們?yōu)閮r(jià)格文本設(shè)置另一種全局字體樣式。
選擇鉛筆圖標(biāo)以設(shè)置自定義字體樣式，并更改字體大小。將其權(quán)重設(shè)置為 600。然后在轉(zhuǎn)換中，通過(guò)將其設(shè)置回默認(rèn)值來(lái)刪除大寫(xiě)?，F(xiàn)在單擊加號(hào)圖標(biāo)，輸入名稱(chēng)...并將其另存為全局字體。完美的！
選擇列，然后在高級(jí)選項(xiàng)卡中，將單位更改為百分比，取消鏈接值，并添加一些填充，以便為小部件提供更多空間。偉大的！
現(xiàn)在我們了解了使用不同的小部件創(chuàng)建每個(gè)部分是多么容易，讓我們談?wù)勗?Elementor 中構(gòu)建的更優(yōu)化方法。
當(dāng)您熟悉 Elementor Editor 并獲得更多經(jīng)驗(yàn)時(shí)，您會(huì)發(fā)現(xiàn)自己想出了簡(jiǎn)化和優(yōu)化網(wǎng)站構(gòu)建過(guò)程的方法。
例如，像圖標(biāo)框……以及圖像框這樣的小部件……包括一個(gè)圖像、一個(gè)標(biāo)題和一個(gè)描述，所有這些都在一個(gè)地方。以正確的方式使用它們將減少小部件的數(shù)量，甚至可以用來(lái)從中創(chuàng)建整個(gè)部分。以這種方式設(shè)計(jì)不僅可以提高性能，還可以減少頁(yè)面的加載時(shí)間。雙贏(yíng)！
要查看其工作原理，讓我們以更優(yōu)化的方式重新創(chuàng)建此菜單項(xiàng)。
將圖像框小部件拖動(dòng)到列的頂部。
添加圖像……然后輸入標(biāo)題……最后輸入文本……
在樣式中，有很多選項(xiàng)可以設(shè)計(jì)和定位每個(gè)元素?；c(diǎn)時(shí)間，繼續(xù)嘗試所有選項(xiàng)！
讓我們稍微改變一下圖像寬度。在內(nèi)容下，將標(biāo)題的顏色設(shè)置為羅勒色。對(duì)于排版，選擇全局樣式、菜單標(biāo)題。其他一切看起來(lái)都很棒。
右鍵單擊，然后刪除之前的圖像、標(biāo)題和描述。并且只留下價(jià)格。
極好的！我們實(shí)現(xiàn)了相同的設(shè)計(jì)，但小部件更少！
現(xiàn)在我們繼續(xù)，將列復(fù)制兩次.. 并刪除多余的列.. 單擊圖像框，替換標(biāo)題和文本。單擊價(jià)格，并更改其內(nèi)容。
太棒了！
對(duì)第三部分重復(fù)最后一次，我們就完成了！
有時(shí)，小部件中存在的文本量會(huì)導(dǎo)致不同的部分高度，從而在小部件的位置之間造成不平衡，就像這里的價(jià)格一樣。
保持原樣并沒(méi)有錯(cuò)，但如果您希望所有價(jià)格都處于準(zhǔn)確位置，則有一個(gè)簡(jiǎn)單的解決方法。
選擇內(nèi)部部分，在垂直定位下，您會(huì)發(fā)現(xiàn)不同的選項(xiàng)，使您能夠控制小部件在部分內(nèi)的位置。
選擇“Space between”，顧名思義，它會(huì)在元素之間創(chuàng)建空間，將第一個(gè)元素定位在列的頂部，將最后一個(gè)元素定位在列的底部?，F(xiàn)在看價(jià)格，都在一個(gè)高度！這是一種超級(jí)簡(jiǎn)單但經(jīng)常被忽視的方法，可以使像素完美。
返回小部件，拖入一個(gè)間隔小部件。將其高度設(shè)置為 300 像素并在“高級(jí)”選項(xiàng)卡中，取消選中這些值，并添加一些邊距。
接下來(lái)，展開(kāi)背景選項(xiàng)卡并選擇一個(gè)圖像。
將附件設(shè)置為 Fixed，將背景設(shè)置為 Cover，這樣圖像就可以很好地覆蓋墊片。
偉大的。
現(xiàn)在，還記得我們?cè)谟⑿鄄糠謩?chuàng)建的箭頭圖標(biāo)嗎？
讓我們創(chuàng)建一個(gè)錨鏈接，將圖標(biāo)連接到這個(gè)部分，這樣當(dāng)有人點(diǎn)擊它時(shí)，它會(huì)直接滾動(dòng)到 Starters！
選擇該部分，然后在“高級(jí)”選項(xiàng)卡中，輸入 ID 名稱(chēng)“start”。
現(xiàn)在向上滾動(dòng)找到按鈕，然后單擊它。在鏈接下，鍵入井號(hào)或主題標(biāo)簽，以及該部分的 ID。同樣，請(qǐng)務(wù)必鍵入與 ID 名稱(chēng)完全相同的名稱(chēng)。
讓我們測(cè)試一下。而且，瞧！
讓我們繼續(xù)主電源。右鍵單擊該部分并復(fù)制。
選擇第二部分后，轉(zhuǎn)到“高級(jí)”選項(xiàng)卡。您會(huì)注意到 CSS ID 是空的。正如我之前提到的，CSS ID 應(yīng)該在您的頁(yè)面上只出現(xiàn)一次，因此重復(fù)的元素不會(huì)復(fù)制 ID ......
ID 名稱(chēng)必須是唯一的，因此在創(chuàng)建多個(gè)錨鏈接時(shí)請(qǐng)記住使用不同的名稱(chēng)！
現(xiàn)在打開(kāi)導(dǎo)航器，并將該部分的名稱(chēng)更改為“Mains”。很好
選擇分隔線(xiàn)，并更改其文本。在樣式中，將分隔線(xiàn)的全局顏色設(shè)置為葡萄色，以及文本的顏色。
選擇圖像框，然后為 Mains 選擇一個(gè)圖像。更改標(biāo)題和描述。
然后轉(zhuǎn)到樣式選項(xiàng)卡，在內(nèi)容下，為標(biāo)題和描述選擇全局顏色葡萄。
現(xiàn)在選擇標(biāo)題。更改價(jià)格和風(fēng)格。將顏色也設(shè)置為葡萄。
我們將為下一個(gè)項(xiàng)目重復(fù)這些步驟……。
還有下一個(gè)……
現(xiàn)在選擇墊片，然后在“高級(jí)”選項(xiàng)卡中，為電源選擇合適的圖像。
快好了！只剩一節(jié)了！右鍵單擊該部分，然后復(fù)制它。
甜點(diǎn)時(shí)間到了！打開(kāi)導(dǎo)航器并將該部分命名為“甜點(diǎn)”?，F(xiàn)在，選擇分隔線(xiàn)……并更新文本。在樣式中，將分隔線(xiàn)和文本的全局顏色都設(shè)置為覆盆子色。
選擇圖像框，然后為甜點(diǎn)選擇圖像。
更改標(biāo)題和說(shuō)明。然后轉(zhuǎn)到“樣式”選項(xiàng)卡，在“內(nèi)容”下，將標(biāo)題和描述的全局顏色設(shè)置為覆盆子色。
選擇標(biāo)題。更改價(jià)格和樣式。同時(shí)設(shè)置覆盆子色。
對(duì)下一列和下一列重復(fù)這些步驟。
現(xiàn)在剩下的就是更改間隔圖像。選擇它，然后在“高級(jí)”選項(xiàng)卡的背景下，使用您選擇的圖像。
偉大的。讓我們看一下頁(yè)面?？雌饋?lái)很好吃！所以我們完成了，對(duì)吧?。亢冒伞槐M然
該頁(yè)面在桌面上看起來(lái)確實(shí)很棒，但以響應(yīng)模式預(yù)覽每個(gè)頁(yè)面非常重要，以確保它們?cè)谒幸暱谥姓_顯示。
使用鍵盤(pán)快捷鍵Command Shift M以響應(yīng)模式直接進(jìn)入平板電腦視圖。它看起來(lái)不錯(cuò)，但就我個(gè)人而言，我更愿意減少列之間的空間量。單擊第一個(gè)，然后在高級(jí)選項(xiàng)卡中，將填充設(shè)置為 10%。
我們將使用我們之前學(xué)到的熱鍵，將此樣式快速?gòu)?fù)制并粘貼到其他列。
鍵入Control 或 Command C以復(fù)制樣式。選擇下一個(gè)，然后按住Control 或 Command Shift V粘貼樣式。對(duì)其他列也重復(fù)這些步驟。
也很簡(jiǎn)單……餡餅！現(xiàn)在讓我們看看該頁(yè)面在移動(dòng)設(shè)備上的外觀(guān)。
向下滾動(dòng)，該頁(yè)面在移動(dòng)設(shè)備上看起來(lái)很完美。來(lái)得正是時(shí)候，因?yàn)樵O(shè)計(jì)這個(gè)令人垂涎欲滴的頁(yè)面讓我餓了！單擊更新，并預(yù)覽頁(yè)面?？雌饋?lái)很棒，如果我自己這么說(shuō)的話(huà)。
好的，我們現(xiàn)在已經(jīng)完成了“我們的菜單”頁(yè)面，了解了新的小部件，并向我們的保留曲目中添加了更多技術(shù)。
在下一課中，我們將創(chuàng)建“聯(lián)系我們”頁(yè)面，這是我們網(wǎng)站的最后一頁(yè)。我們將深入研究“高級(jí)”選項(xiàng)卡，以了解有關(guān)構(gòu)建網(wǎng)站時(shí)的優(yōu)化和最佳實(shí)踐的更多信息。所以去吃點(diǎn)甜點(diǎn)，然后點(diǎn)擊繼續(xù)觀(guān)看！

請(qǐng)?jiān)L問(wèn)我的主頁(yè)https://wpeyes.com，找到更多文章與教程。