如何使用Elementor的文章發布功能
從本節課開始，Jack老師要和同學們一起學習Elementor編輯器的高級功能教程。相比之前的普通教程，Elementor高級功能中的元素功能具有更多的選擇和自定義屬性，這樣的好處就是能夠讓我們有更多網頁設計的發揮余地，做出更出彩的前端網頁內容去吸引訪客。為了方便同學們了解和掌握Elementor編輯器的高級功能，Jack老師和往常一樣按照Elementor編輯器內置的元素順序進行講解，所以今天要講的就是 如何使用Elementor的文章發布功能 。廢話不多說，我們直接來看具體的操作過程。
第一步：將posts元素添加到內容編輯版塊區域
還是老規矩，鼠標左鍵點擊Posts元素不松開，然后拖動到上圖右邊的內容編輯版塊中，等到內容編輯版塊出現藍色的邊框線的時候再松開，這樣就完成了將Elementor元素或者說對應功能添加到內容編輯版塊的操作。
第二步：對文章發布元素進行主體功能設置
從上圖中我們可以看到，Elementor編輯器的文章發布功能選項中主體功能有三大版塊，分別是“Layout（布局）”、“Query（查詢）”和“Pagination（文章分頁設置）”。所以下面的課程內容，我們將重點對這三大版塊內容進行分析和講解。
2.1“Layout”：布局
“皮膚”：指的是每一篇文章在前端頁面上的排布效果，Elementor編輯器給出了三種不同的樣式，分別是“classic經典”、“cards卡片”和“full content全寬內容”。下圖是這三種排布樣式的具體效果：
“Columns”：指的是文章分幾列排布在前端頁面上進行展示，你可以選擇1列到6列之間的數值，但是要注意，當你選擇全寬內容樣式的時候是沒有這個功能選項的
“Posts Per Page”：指的是當前整個頁面允許發布的文章數量，理論上講是從1到正無窮
“Image Position”：指的是圖片出現在某一篇文章中的位置，這個圖片是不在Elementor編輯器的文章發布功能中進行添加的，而是在我們寫文章的時候添加的特色圖片。在經典布局樣式中，Elementor編輯器提供了圖片居頂，居左，居右和沒有圖片四種效果。但是在卡片樣式中就沒這么多選項了，只有顯示或者不顯示兩種選擇，如果選擇顯示，那么特色圖片是固定在文章頂部。而全寬內容樣式根本連圖片出現的機會都沒有。
“Masonry（石匠）”：也有人稱呼為磚石建站。這個功能和圖片的masonry功能是一樣的，我會在那個元素的專題文章中進行講解，這里不展開贅述
“圖像尺寸”：指的是文章的特色圖像顯示大小，除了Elementor編輯器自帶的幾個常用圖片尺寸規格外，還有圖片完整尺寸大小功能。Jack老師建議大家都用圖片完整尺寸大小來設置。有的同學可能會說，那這樣操作的話圖片不是太大了嗎？別急，在Elementor編輯器中還提供了圖像尺寸修改功能讓我們進行操作。
“Image Ratio”：指的是將文章特色圖像保持寬度不變，高度進行任意變化的操作。這里要吐槽一下，干嘛不用image height來替代ratio呢？果然是咖喱味的英語
“Image Width”：指的是將文字特色圖像保持高度不變，寬度進行任意變化的操作
“Title”：指的是文字的標題，這里建議點亮圖標以正常顯示文章標題
“Title HTML Tag”：指的是將該頁面上所有的文章標題設置成H系列標題中的哪一個，我個人喜歡用H2，Elementor編輯器給的是H3
“Excerpt”：指的是文章摘要，一般都會選擇文章的開頭段落進行截取，文字的長度可以由我們自己進行設置
“Excerpt Length”：指的就是文章摘抄的文章長度，單位是文字個數，在方框內填入自己需要的文章摘抄長度即可
“Meta Data”：指的是文章的相關信息，包括作者、日期、時間、評論和最新修改日期（一般建議用作者信息就夠了，設置日期的話有些不是很好的影響因素，比方說客戶會看你2年前寫的文章嗎？ ）
“Read More”:指的是在文章摘抄結尾之后加上一個Read more的錨文本，點擊之后可以直接跳轉到該文章所在的正式頁面進行查看完整的文章。當然你可以替換這個文字（個人不建議替換）
“Open in new window”：指的是點擊該文章版塊之后，文章是在全新的瀏覽器頁面中打開還是在當前頁面打開。
講完了Layout布局部分，我們來看看第二個主體功能設置—Query引用/查詢
“Source”：指的是文章內容的引用來源，Elementor編輯器設置了5種不同的文章來源，分別是“文章”、“頁面”、“manual selection手動選擇”、“Current query當前查詢”和“Related相關文章”。一般情況下，我們選擇文章選項就可以了。
選擇好文章來源為文章內容之后，我們看到有一個“Include”和“Exclude”選項，他們的意思是包含和排除某些具體的特定文章。原則上我們選擇Include以方便后續的操作
“Include by”：這里需要設置你想出現的文章，如果沒有額外的特殊設定你可以不用去管。但是有些網站的文章系統中同學們默認設置了好幾個文章分類目錄，那么我們就可以根據不同的文章分類目錄來進行選擇分類，如下圖所示：
為了更好的進行實操演示講解，Jack老師事先寫了6篇空白文章，分別是示例文章1-示例文章6，其中，1-3是歸屬于news分類目錄，4-6歸屬于blog分類目錄。所以當我在左邊選擇“blog”的時候只會出現文章4-6；而選擇“news”的時候，只會出現示例文章1-3。這樣的操作就有效的避免了不同文章類目下的文章內容引用！
具體操作步驟就是：在include by中選擇“Term”而不是“Author”，然后在下面的“Term”中選擇自己預設好的文章分類目錄名稱（備注：自己手動輸入，等Elementor給出藍色字條的時候再選擇）
“Date”：文章發布日期作為展現在當前網頁文章版塊的一個選擇引用范圍條件
“Order By”：文章引用后展現在頁面上的順序，有4種選擇，分別是日期、標題、菜單順序和隨機順序
“Order”：這是SQL數據庫的語句，作用是對數據進行排列。里面有兩個選項：ASC和DESC。ASC是升序排列，DESC是降序排列
“Ignore Sticky Posts（忽略黏貼）”：默認選擇開啟即可，不用去管它
“Give your Query a custom unique id to allow server side filtering”：為你的查詢提供一個自定義的唯一id，以允許服務器端篩選。不用去管它，留空即可。
講完了Layout布局部分，我們來看看第三個主體功能設置—Pagination/分頁功能
分頁功能有四種選項，分別是沒有分頁，數字分頁，上一頁和下一頁，數字和上下翻頁功能，我個人比較喜歡第4種（備注說明一下，我用的Elementor Pro插件是破解版的，設置了分頁功能之后好像不能夠正常跳轉，正常購買的版本是沒問題的）
到此為止，Elementor編輯器的內容發布功能主體部分算是講完了，因為時間和篇幅的關系我沒有將全部的內容展開詳細的講解。接下來我們要對它的樣式功能進行操作和講解
第三步：對文章發布元素進行樣式功能設置
layout布局中只有三個選項，“Columns Gap”指的是文章列與列之間的寬度調節，“Rows Gap”指的是文章行與行之間的寬度調節?！癆lignment”指的是每個文章中標題和其他相關信息的顯示位置為居左、居中和居右的調節。
接下來是Card選項（因為之前的主體設置中有經典布局、卡片布局和全寬布局，不同的布局方式在樣式功能設置中是有不一樣的功能的，因為我個人更喜歡卡片布局樣式沒所以這里只選擇它的布局樣式來進行講解說明，其他的留給同學們自己去研究）
“Background Color”：背景顏色，不建議進行特殊設置，默認留白即可
“Border Color”：邊框線顏色，也是不建議進行特殊設置，默認留白即可
“Border width”和“Border Radius”指的是邊框線的粗細和邊框線的圓邊角，如果你沒有專門設置邊框線顏色，那么這兩項設置也可以不用去操作了
“Horizontal Padding”：指的是單篇文章版塊的橫向的內部間距調整
“Vertical padding”：指的是單篇文章版塊的縱向的內部間距調整
“Box shadow”：盒子陰影效果，這個建議開啟，視覺效果會更加好看
“Hover Effect”：懸停效果，選擇gradient即可
“Meta Border Color”：元描述邊框線顏色，這個可以不用設置，個人感覺Elementor編輯器默認的顏色已經很好看了
講完了card樣式的調整，我們最后看一下“content”的樣式調整：
很簡單每個版塊都是差不多一樣的設置，color不用說了就是顏色的更改，排版功能在每個元素的樣式功能中基本都會遇到，這里也不再贅述，spacing就是間距調整，同學們自己去操作就好。
好了，以上就是本章關于?如何使用Elementor的文章發布功能?的全部內容，一不小心又4000左右字數了，還是將的比較簡單的情況下。說明這個章節內容比較重要，而且文章發布功能幾乎是每個網站都會遇到的，希望同學們能夠引起重視，認真的去嘗試操作每一個選項和功能。
如果還有不理解的地方，請使用百度或者谷歌瀏覽器搜索關鍵詞--“Jack外貿建站”，排名首頁首位的就是我的網站，網站上有更多外貿建站、谷歌SEO優化、外貿客戶開發等實操干貨內容在等著你哦!
來源：Jack SEO
來源：喜運達
加入賣家交流群
快速對接各種平臺優質資源
標簽：發貨去曼谷中國發泰國的物流海外倉的總結南京海運運輸跨境電商物流特征有跨境電商服務平臺分類跨境海外倉怎么做越南海運上海到馬來西亞海運德州海外倉