如何使用 WordPress 和 Elementor 2020 製作電子商務網站

已發表: 2022-07-10

在本教程中，我將教您如何使用可以完全自定義的 WordPress 和 Elementor 2020 製作電子商務網站。

WordPress 是最常用的 CMS 平台，用於構建所有類型的網站，包括電子商務網站。 此外，您將學習使用 Elementor 頁面構建器來創建令人驚嘆的網頁，這是目前 WordPress 排名第一和最受歡迎的頁面構建器。 WordPress 控制著超過 1/3 的互聯網。 大多數大型電子商務公司，如 Sony、Bata、eBay 等，都在使用 if 來開發和維護他們的網站。使用 WordPress 最好的部分是你不需要學習任何類型的編碼語言或任何其他語言製作您的網站的技術術語。 這是一個簡單的拖放平台，它提供了許多內置模板和佈局，有助於創建一個有吸引力的用戶友好型網站。 此外，我將提供預製模板，您可以輕鬆導入這些模板，並在幾分鐘內啟動並運行您的電子商務網站。

只需完成整個教程，您就可以準備好在沒有任何外部幫助的情況下啟動並運行自己的網站。 本教程幫助許多人創建了他們的網站，並讓他們的企業在這個殘酷的電子商務行業的競爭中獲得優勢。 因此，請閱讀這個簡單且不言自明的教程，並獲得一項對您的一生都有幫助的技能。 整個過程以循序漸進的方式進行教學，並提供了所有信息圖形和圖片表示，以使其盡可能易於理解。

因此，讓我們開始使用 WordPress 和 Elementor 2020 製作電子商務網站

電子商務網站簡介

上圖是典型電子商務網站的主頁或登錄頁面的示例。 登陸頁面對於電子商務網站的轉化和銷售非常重要。 因此，登陸頁面應該很有吸引力，包含橫幅和銷售通知、降價通知或新到貨通知，尤其是對於電子商務網站。 要獲得轉化，您需要在著陸頁上強調最暢銷的產品，並提供與這些產品的輕鬆鏈接。 您可以在登錄頁面上顯示您的產品類別並提供指向它們的鏈接。

在頂部，我們有一個標題，其中包含我們的位置、電話號碼、我們在左側和右側的聯繫號碼，我們有 Facebook、Twitter、YouTube 等社交媒體頁面圖標。在下面，我們有一家商店鏈接到我們網站的產品購物頁面的按鈕。 此外，我們有一個帳戶按鈕，單擊哪些用戶可以進入他們自己的個人儀表板來訪問和管理他們的信息和購買。 我們的標題本身也有我們業務的標誌。 在中間，我們有指向我們頁面的鏈接，即。 主頁、關於我們、商店、我的帳戶和聯繫我們。

之後，您將擁有所有產品和橫幅，將在本教程中學習如何創建，以非常吸引人的方式展示。 之後，我們還有一個時事通訊部分，用戶可以在其中訂閱您的網站，而不是關於產品、優惠、優惠券等的通知和郵件。下面是我們的頁腳，提供關於我們的信息和一個電子郵件訂閱按鈕。

正如您在圖片中看到的，商店頁面列出了我們網站上的所有可用產品，用戶可以在其中通過單擊查看任何產品。 在側邊欄，我們有一個價格過濾器、類別列表、評論和我們產品的視頻廣告。 在每個產品下方，還有評論表和相關產品。 接下來，我們有關於我們的頁面，顯示您的業務描述和有關您的團隊的信息。 然後我們有一個聯繫頁面，用戶可以使用聯繫表格與我們聯繫。接下來我們有一個我的帳戶儀表板，它將為每個客戶提供一個個人儀表板，其中包含他們的個人、購買和付款信息。

如圖所示，您可以在購買商品後看到購物車頁面，您可以在其中更改購買詳細信息、查看總金額並繼續付款。 然後訪問者可以通過填寫運輸詳細信息並支付購買費用來結賬。 我們將在本教程中逐步學習創建所有這些頁面，以便您的網站完全準備好開展業務。

獲取託管並安裝 WordPress 和 Elementor

  • 名稱英雄域名購買

製作網站需要做的第一件事是為您的網站獲取域名和託管服務。 您需要選擇好的託管，因為您的整個網站將基於您的託管站點並得到支持，因此您需要根據可靠性、技術支持、空間、證券、設計、SEO 機會等標準檢查和比較各種託管。

市場上有幾家託管服務提供商，其中大多數都有不同的產品。 我已經嘗試了很多，最終我的所有網站都選擇了 NameHero。 我個人使用它並將其與其他 22 個主機進行比較，發現它們是最好的。 正如您在圖片中看到的，它們有 4 個不同的選項，我推薦電子商務網站的 Plus Cloud 選項。 您可以使用我的鏈接獲得折扣。 www.namehero.com/darrelwilson

訂購計劃後，您將可以選擇您的域名，即您的網站名稱。 你可以選擇任何你想要的名字。 您可以根據需要選擇您的域，例如 .net、.biz 等。下一步也是最後一步是填寫有關帳戶和付款詳細信息的信息。 強烈建議在插件複選框中獲取 ID 保護，因為它可以保護您免受垃圾郵件發送者的侵害。 通過單擊下一頁並進入付款流程完成購買。

  • 安裝 WordPress

要在您的主機上安裝 WordPress，請轉到您的主機頁面上的“客戶區”，單擊“雲虛擬主機”。 接下來，您將擁有我的產品和服務，您將在其中看到帶有您的域名的 Plus Cloud 包，單擊它旁邊的“活動”按鈕，如圖所示。 接下來在左側，您將看到“轉到 cpanel”按鈕並單擊它。 如圖所示，在下一頁上，向下滾動到軟件類別，然後單擊“Softaculous 的 WordPress 管理器”。

這將打開一個 WordPress 安裝程序，單擊立即安裝按鈕。 將打開一個設置頁面，其中包含版本、您的域名和目錄，如圖所示。 請刪除寫在目錄下的任何內容。 也在協議上選擇“https：/”。 在站點設置中，您可以更改站點名稱和描述。 我們以後也可以這樣做。 輸入您的管理員詳細信息，例如用戶名、密碼和電子郵件，這將是您的 WordPress 登錄詳細信息。 在下一頁上，向下滾動模板，因為我們不使用這些模板，然後單擊“安裝”。 單擊下一頁上給出的管理 URL 鏈接，您的新 WordPress 就製作完成並在互聯網上運行。 您現在位於 WordPress 儀表板上，如圖所示，您可以在其中編輯您的網站。

  • WordPress 常規設置

在您設計您的網站之前，讓我們學習更改您在 WordPress 儀表板上的設置。 在您的 WordPress 儀表板上，您會在頁面左側看到幾個選項卡，如圖所示。 其中最重要的一項是“設置”選項卡，您可以在其中找到一般的 WordPress 設置。 您應該將永久鏈接從“日期和名稱”更改為“發布名稱”，以使您的網站地址更易於理解。 這對您的 SEO 也非常重要。 WordPress 儀表板上的另一個選項卡是“用戶”，您可以在其中自定義個人資料和 WordPress 儀表板的外觀。 單擊“保存更改”以更新它。

要在註銷後再次登錄 WordPress，您需要在地址欄中輸入您的 URL，然後輸入“/wp-admin”，這將帶您進入 WordPress 登錄頁面，您可以在其中輸入您的用戶名和密碼進行登錄。

創建頁面和菜單

您現在已經創建了一個功能性網站，它還不是一個完整的網站。 現在您需要將頁面添加到您的網站。 在您的 WordPress 儀表板上，單擊“頁面”選項卡並選擇“添加新”選項。 您也可以通過單擊頁面頂部的“添加新”按鈕來執行此操作。 執行此操作時，儀表板將打開一個頁面編輯器，如下圖所示，您可以在其中創建新頁面。 在這裡，您可以放置​​頁面的名稱並設計頁面的佈局。 單擊“發布”按鈕並創建您的網頁。 在本教程中，我們將創建每個網站都需要的基本頁面，例如主頁、關於我們和聯繫方式。 目前，我們不會進入稍後會做的頁面內容。 您可以通過單擊 WordPress 儀表板中頁面名稱下方的視圖來查看這些頁面。

創建單獨的頁面後，您需要創建一個菜單，以便能夠在這些頁面中導航。 使用 WordPress 創建菜單非常容易。 只需導航到您的儀表板，找到“外觀”選項卡，然後單擊“菜單”。 這將打開一個菜單編輯器，您可以在其中創建和命名菜單，如下圖所示。 創建菜單後，您可以將網站的不同頁面分配給菜單。 您始終可以重新分配菜單項的年表，並且可以通過拖放將一個項目放在另一個項目下方來製作下拉菜單。

現在您應該做的是單擊左上角的“自定義”，如圖所示，然後轉到“主頁設置”並將您的主頁更改為“靜態頁面”並選擇您的主頁作為靜態頁面，您必須從下拉列表中選擇。 您這樣做是為了讓每次有人訪問您的網站時，總是會被定向到您的主頁。 直接訪問您的關於我們、聯繫頁面或您的最新帖子等其他頁面對觀眾來說沒有意義。

下載元素

現在我們需要購買我們的頁面構建器 Elementor pro，我們將使用它來構建我們電子商務網站的網頁。 您可以使用我的鏈接購買它。www.darrelwilson.com/elementor。在他們的頁面上，您可以查看各種可用的包。 我們不能使用免費版本，因為我們需要主題構建器和 Woocommerce 構建器服務。 一旦你購買了你的包，它就會打開你的賬戶，如圖所示，你必須點擊“下載插件”，然後下載一個 zip。

接下來，您需要將其上傳到您的 WordPress 網站。 轉到 WordPress 上的儀表板，單擊左側工具欄上的“插件”，單擊“添加新”，您的添加插件將打開，如圖所示。 單擊“上傳插件”並選擇您的 Elementor zip 文件並安裝它。 單擊“激活插件”，您的 WordPress 工具欄上將創建一個新的“Elementor”按鈕。 去那裡並單擊“連接並激活”。

安裝 WordPress 主題

現在讓我們在我們的網站上安裝一個 WordPress 主題。 WordPress 提供了大量預先設計的主題供您選擇，用於您網站的外觀。 在 WordPress 儀表板的“外觀”選項卡中，您將找到“主題”按鈕，您可以從中安裝主題。 您可以從可用選項中選擇任何主題。 出於本教程的目的，我們將使用您可以在流行菜單中找到的 Astra 主題。 單擊主題名稱下方的“激活”。 '使用這個主題最好的部分是它包含了網站運行所需的所有基本設置和功能，並且它與 Elementor 頁面構建器非常兼容。

使用 Elementor 編輯頁面

現在讓我們學習如何使用 Elementor 編輯我們的頁面。 轉到您的 WordPress 網站的主頁，然後單擊頂部黑色行上的“編輯頁面”，這將打開頁面編輯器。 首先讓我們更改右側的頁面設置，如圖所示。 將內容佈局更改為“全寬度拉伸”，然後選擇“禁用標題”，因為我們希望該設置用於我們的主頁。

現在單擊“使用 Elementor 編輯”以打開 Elementor 編輯器，如圖所示。 讓我們在這裡有一個 Elementor 編輯器的快速教程。 要向頁面添加新部分，請單擊加號按鈕並選擇所需的列模式。 要添加元素，請單擊左側工具欄上的 9 個點，這將為您提供如圖所示的元素列表。 您可以在頁面上拖放任何您想要的元素並對其進行編輯。

單擊頁面上的任何模塊後，其編輯工具欄將顯示在左側。 在圖像中，我們正在編輯標題，因此出現了包含 3 個選項卡的“編輯標題”。 第一個是內容，它為元素的內容提供了各種選項。 第二個是樣式，您可以在其中設計元素的樣式，例如顏色、大小、字體等。 第三個是高級，您可以在其中放置動畫和其他東西。 同樣，您可以在標題下方以相同的方式添加、編輯和設置文本框的樣式。

您可以添加一個按鈕並提供指向任何其他網站的鏈接，點擊該按鈕即可打開。 您可以將設置更改為“打開新窗口”，這樣用戶就不會離開我們的網站。 您還可以從圖標庫中為您的按鈕選擇一個圖標。 如圖所示，所有這些都將在左側的“編輯按鈕”工具欄中。

現在，我們可以通過單擊 Elementor 上的文件夾圖標來使用預製模板和塊，而不是單獨設計每個元素。 從庫中，您可以選擇整個頁面或特定部分或塊。 根據您的需要，可以使用所有類別的塊。 對於登錄頁面，從英雄類別中選擇任何塊。 我在示例中選擇了未來之聲。

建立主頁

現在讓我們使用這個塊創建一個類似於我們在介紹部分中看到的主頁的頁面。 首先讓我們將背景更改為整個部分。 要編輯整個部分，請單擊該部分頂部的六個點，如圖所示。 現在您將看到“編輯部分”工具欄，您可以在其中使用樣式選項卡來更改背景。 這是您可以在電子商務網站中使用的免費演示圖像的鏈接。 接下來在 Elementor 中上傳這些圖片，然後選擇圖片作為背景。 如果背景看起來很暗，您可以更改背景疊加層。

現在您可以像我們之前所做的那樣編輯塊的元素。 更改文本、顏色、字體、地形等。您可以通過單擊元素右上角的藍色按鈕來使用副本。您可以在文本框之間添加分隔線，並使用“編輯分隔線”按您喜歡的方式設置樣式。 現在根據我們的設計編輯按鈕，例如添加或減少填充以更改其周圍的空間。 我們稍後會將此按鈕鏈接到我們的商店頁面，您也可以為其添加圖標。 當您將鼠標懸停在“編輯按鈕”工具欄下時，您可以更改樣式和動畫，如圖所示。

接下來通過向下滾動元素工具欄來放置 Pro Elements 部分的動畫標題。 如圖所示，您可以使用“編輯動畫標題”工具欄更改標題樣式、形狀、顏色、地形等。 您可以檢查所有元素和样式，並按照您想要的方式進行設計。 找到完美的設計需要大量的試驗和錯誤。 單擊“更新”按鈕將這些更改應用到您的網站。

接下來在登陸頁面上，我們必須創建鏈接到各種類別的部分，如女性部分、男性部分和新品。 添加一個新的 3 列部分，在其中添加標題、文本和按鈕。 您可以創建一個並複制兩次以節省時間和精力。 同樣，您必須像我們對上述部分所做的那樣編輯此部分的文本、樣式、背景等。 您可以使用我提供的圖像作為所有 3 個類別的背景。 在使用文本編輯器時，要結束行並轉到下一行，就像我們在女性部分所做的一樣，使用 <br> 如圖所示。

在這裡，我們在本節中沒有任何模板或塊，因此您必須從頭開始創建每個部分並設置樣式，這第一次看起來可能是一項漫長的任務，但您可以使用所有拖放和復制等技巧複製上面部分中製作的“立即購買”按鈕，只需更改按鈕的樣式或懸停，而不是從頭開始製作。 您必須在編輯工具欄中查看每個元素的所有選項，以找出最適合您口味的選項。 這將是您的藝術感的一個很好的練習。要更改列內內容的間距，請單擊列左上角的編輯列圖標以打開“編輯列”工具欄，您可以在其中更改內邊距高級部分，如下圖所示。

您可以復制行列，然後編輯其他兩個類別的男士部分和新品的文本和背景，這樣您就不必再次設置它們的樣式。 您應該對每個部分的背景圖像和文本顏色進行不同的樣式設置，以便每個類別都清晰可見。 如果第一個具有深色背景圖像和淺色文本，則下一個應該是相反的。 所有這些技術，當您開始設計並親自查看這些效果時，您將學習。 使用背景覆蓋強調圖像上方的文本，還可以使用拖放或對齊選項調整文本的位置，使其不會覆蓋背景圖像中的面部。 您還可以像之前一樣使用“編輯列”來更改背景圖像的位置。 單擊部分頂部的藍色按鈕打開“編輯部分”，您可以將部分寬度拉伸到 100%。

接下來，我們將添加圖標。 為此，首先添加一個新部分並從 Elementor 工具欄插入一個圖像框。 為我提供的圖像選擇圖標圖像，如圖所示。 這些圖標框旨在鼓勵購買，以提供有吸引力的標題，例如“免費送貨”，並在下面的文字中寫下描述和條件。 通過從“編輯圖像”工具欄中更改圖像位置、大小、標題和描述以及文本的顏色等，為圖像框設置樣式。 設計後復制它，這樣您就不必重新設計所有圖標。 之後，您可以根據需要編輯每個框的文本。 在高級部分，您可以使用 Padding 添加邊距，這樣頁面看起來不會太擁擠。

您可以為列添加邊框，使其看起來很吸引人。 單擊“編輯列”按鈕，在“樣式”類別下，您可以添加邊框並設計邊框。 您可以選擇邊框類型、寬度、位置、半徑等。您可以僅在一個或多個特定邊上選擇邊框，就像我們在這裡所做的右邊框一樣。 檢查工具欄中可用的所有設計工具並選擇自己。 你自己做的越多，你就會越習慣所有的工具和功能，它對你來說會變得更快、更容易。

接下來，我們將添加“新到貨”部分。 但在我們將在這些行之間添加分隔線之前，它們看起來清晰可區分。 再次添加一個新部分，從 Elementor 工具欄中添加“分隔線”，並使用“編輯分隔線”工具欄進行設計，如圖所示。 在分隔線中添加一個文本“新到貨”，該文本將用作下一部分的標題，因此如圖所示更改大小、字體等，使其看起來更有吸引力。

創建產品

我們現在必須創建要在我們的電子商務網站上銷售的產品。 產品可以是簡單的或可變的，簡單的產品沒有任何選擇，例如尺寸、顏色或款式，而可變產品有多種選擇，例如衣服的尺寸或顏色。 我們將學習創建它們。

電子商務

為了創建產品，我們需要添加一個新插件。 因此，讓我們轉到您的 WordPress 儀表板，單擊工具欄上的“插件”，然後像之前一樣單擊“添加新”。 從插件庫中，搜索“Woocommerce”。 Woocommerce 是我個人經驗中最好的電子商務插件。 單擊“安裝”，然後單擊激活。 現在 Woocommerce 插件將打開，如圖所示。 填寫表格並點擊“繼續”。 接下來選擇您的行業，在本教程中，我們將創建一個時尚和服裝網站。 接下來我們有產品類型，其中有 2 個選項 - 提供物理和下載，選擇兩者並單擊“繼續”。 然後你會得到一些問題，回答它們，然後再次單擊“繼續”。

接下來，您必須為您的插件選擇一個主題，選擇“Astra”主題。 接下來，它將為您提供激活 Jetpack 服務的選項，這將對我們有所幫助，因此請選擇“Yes Please”，這將帶您進入 Jetpack 帳戶頁面，填寫您的詳細信息並創建一個帳戶。 您將被重定向到您的 WordPress 儀表板，但如圖所示，您的工具欄上將提供一個新的“Woocommerce”。所有這些稅收設置，我們將在稍後進行。

現在讓我們開始創建產品。 首先，我們將創建一個簡單的女式綠色襯衫產品，如圖所示。

單擊工具欄上的“產品”，將打開“添加新產品”頁面，如下圖所示。 填寫產品名稱和描述。 在產品數據下方選擇“簡單產品”，首先我們將創建一個簡單產品。 將正常價格和銷售價格放在下面，您可以在下面安排，如下圖所示。 在這些日期，銷售價格將自動適用。

接下來單擊常規下方的“庫存”設置，您可以在其中放置庫存可用性。 您也可以在此處允許或禁止延期交貨，如果您輸入“不允許”，則如果產品缺貨，則不會接受訂單。 設置“低庫存閾值”以在庫存低時得到通知。

接下來在“運輸”類別中，輸入產品的重量和尺寸詳細信息以用於運輸目的。 在“鏈接”產品中，您可以在用戶購買原始產品後顯示相關產品的“追加銷售”和顯示購物車中相關產品的交叉銷售。 添加相關產品，您想在買家購買此特定產品時向他們展示。 在“高級”類別中，您可以給買家備註並激活評論。

如果向下滾動，則在此設置下方，您會看到圖像中的“產品簡短描述”。 在這裡根據我們的示例產品編寫完整的描述。 您也可以在此處設計描述的字體和样式。 如果您看到圖像，在右側，有一個選項“產品圖像”。 點擊“設置產品圖片”將打開“產品圖片”頁面，您可以在其中選擇並上傳產品圖片。 在“產品圖片”下方是“產品圖庫”，您可以在其中從不同角度放置產品的其他圖片，以便更好地了解查看者，如圖所示。

如圖所示，您在右側工具欄上有“產品類別”。 在這裡您可以對您的產品進行分類。 因此，讓我們通過單擊“添加新類別”來創建一個新類別。 輸入名稱“女性”，然後單擊“發布”。 現在您可以通過單擊“查看產品”按鈕查看您的產品。 它將顯示產品在觀眾點擊時將如何顯示給觀眾。 將打開一個新產品彈出窗口，您可以在其中查看產品，甚至放大圖像以獲得更好的視圖。 您可以再次編輯您想要的任何內容。

如果您不喜歡顯示頁面的樣式和主題，可以使用右側工具欄上的“Astra 設置”進行更改，如圖所示。 例如，如果要刪除側邊欄，請單擊“側邊欄”並選擇“無側邊欄”。 單擊“更新”以保存更改，您可以再次單擊查看產品以查看更改。 所以這是一個如何創建簡單產品的示例。 您可以使用相同的過程添加任意數量的產品和類別。 如果您單擊產品頁面上的類別按鈕，它將打開該類別的新頁面，其中將顯示該類別的所有產品。 在這一點上，這將非常平淡，但稍後我們也會設計這個頁面。

接下來讓我們學習如何創建變量產品。 同樣，我們必須像之前一樣轉到“添加新產品”頁面。 這次讓我們創建一個男士可變產品。 像我們之前所做的那樣給出產品的標題和描述。 請記住，這不是主要描述，而是下面顯示的附加小描述，主要描述將寫在“產品簡短描述”中。 在這裡，我們要將“產品數據”更改為“可變產品”。 所有其他設置，例如庫存、運輸、鏈接產品等，都與我們之前創建的簡單產品類似，因此您可以自行完成這些詳細信息。

現在單擊“屬性”，我們將為我們的產品添加新的屬性或特徵。 單擊“添加”即可。 接下來如圖所示，我們將創建產品的新屬性，例如尺寸、顏色等。首先，讓我們將尺寸放入“名稱”框中。 在“值”框中，先寫小，然後是“|”符號（不帶括號）。 如圖所示，按“Shift”鍵 + Enter 按鈕上方的鍵寫入此符號，然後寫入 Medium，再次寫入相同的符號，然後寫入 Large。 您可以使用該符號添加任意數量的變量，例如 S、M、L、XL 等。 選中“用於所有變體”複選框，然後單擊“保存屬性”。

接下來我們將添加另一個屬性。 再次單擊“添加”按鈕，在“名稱”框和“值”框中輸入“顏色”，添加您想要的顏色名稱，並用我們在“大小”屬性中使用的符號分隔。 在這裡，我們正在編寫“白色|藍色”作為兩個可用選項。 再次選中“用於變體”框並單擊“保存屬性”。

現在，我們將這些屬性應用到我們的產品中。 單擊“屬性”下方的“變體”，然後選擇“從所有屬性創建變體”，然後單擊“開始”。 單擊彈出窗口上的“是”以驗證此選項。 如圖所示，這將打開選項。 您可以看到通過組合 3 種尺寸和 2 種顏色（即小白、小藍、中白、中藍、大白和大藍）添加了 6 種變化。

如圖所示，單擊第一個打開其編輯設置。 首先，我們必須上傳這個變體的圖像。 點擊“上傳圖片”並從圖庫中選擇圖片。 接下來，您必須輸入此變化的正常價格。 這是必填字段，因此即使價格相同，您也必須在此處填寫。 再次，您可以添加銷售價格並像我們在簡單產品中那樣安排它。 您可以像我們在簡單產品中一樣填寫庫存詳細信息和運輸詳細信息。

同樣，您也必須對其他變體執行相同的過程。 所以點擊 Variationname，上傳圖片並輸入價格 Small Blue 等等。 在這裡，我們僅提供所需的所有變體的圖像和價格，但您可以根據自己的條款將所有其他詳細信息放在您的網站上。 在變體名稱上方，您可以看到放置“默認表單值”的選項，您可以在其中選擇當用戶查看產品時哪些變體將作為默認值顯示在產品框中。

Product short description 等其他設置與我們之前做的 Simple Product 類似，請根據您的產品填寫詳細信息。 產品圖片也是如此，您應該將默認變體的圖片放在這裡，因為這將在查看產品時首先顯示給查看者。 您應該將最暢銷的變體作為默認產品。 您不需要為可變產品放置產品庫，因為視圖將能夠看到變體的不同圖像。 創建一個新的“男士”類別並選擇其複選框，就像我們為簡單產品所做的那樣。 單擊發布以在網站上應用這些更改。

您現在可以單擊查看產品以查看查看者將如何查看它。 如圖所示，產品將打開。 由於這是一個可變產品，您將在其下拉框中獲得屬性列表及其值。 您可以單擊這些框來查看該產品的各種變體。 當您單擊它們時，您將看到您為變體設置的圖像和價格。 同樣，如果您不喜歡使用 Astra 設置，您也可以更改產品頁面的主題。 讓我們更改設置並刪除側邊欄並將內容佈局更改為全寬，就像我們對單個產品所做的那樣以保持一致性。 您可以根據需要製作盡可能多的可變產品，但您必須像我們在此處所做的那樣填寫每個變體的詳細信息。 因此，隨著屬性越多，它們的值越多，您將有更多的變化。 需要注意的一點是，產品的價格顯示為一個範圍，因為它將最低價格變化的價格和最昂貴的變化顯示為一個範圍。 所以我們現在已經學會瞭如何創建簡單產品和可變產品。

現在讓我們將這些產品添加到我們的主頁。 轉到您的主頁，然後單擊“使用 Elementor 編輯”。 向下滾動到我們創建 New Arrivals 分隔符的末尾。 在右側的 Elementor 工具欄上，單擊“搜索小部件”欄並輸入產品。 選擇 Product 元素並將其拖放到頁面上 New Arrivals 分隔符下方的框中，您將在那裡看到產品。

如圖所示，在“編輯產品”工具欄中，您擁有要在此處顯示的產品的列數和行數，因此並非所有產品都顯示在此頁面中。 您還可以使用樣式類別來更改圖像的列間距和行間距、對齊方式、邊框。 您也可以在此處設置產品名稱的標題樣式，如顏色、字體、間距、地形等。評級星星也是如此，無論是填充的還是空的。 同樣對於價格，您可以更改常規價格和銷售價格的字體、顏色、地形等。 接下來是按鈕，您可以隨意設計按鈕，例如背景顏色、文本顏色、邊框顏色等。 使用 Elementor，使所有這些編輯變得如此簡單。 您只需使用所有可用的編輯工具並使用它，所有結果都會在您的眼前。

您還可以設計“促銷快閃”選項，以便在促銷時顯示，當產品促銷時，它會在您的產品上方顯示一個 Flash 橫幅。 當他們訪問您的主頁時，使用它來吸引您的產品的客戶。 所有的設計選項都與我們迄今為止所學的相似，因此您可以通過所有這些選項來成長並選擇最適合您的設計。

在查詢選項中，您可以選擇要在此部分中顯示的產品。 例如，如果您只想在此部分中顯示女性產品，則在來源框中，選擇“最新產品”，因為它是下拉框中的新品部分，然後單擊“包含”。 然後在“包括依據”框中，寫下術語並選擇術語選項，這將是術語框。 如圖所示，在術語框中，填寫“女性”並選擇“產品類別：女性”。 單擊更新以在您的網站上生效。 通過這種方式，您可以在網站的任何部分創建產品展示部分。

Elementor電子商務模板

我已經為您提供了我們剛剛準備好的電子商務網站的模板，我們在此鏈接上免費在我的網站上準備了佈局https://darrelwilson.com/product/elementor-ecommerce-template-package。 Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

主題定制器

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

插件

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

  • Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

  • Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

  • Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

  • Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

  • 定制產品頁面

現在我們將使用相同的技術自定義我們的產品頁面。 如果您現在單擊任何產品，它將以我們在創建產品時看到的默認主題顯示產品頁面。 再次，轉到 Elementortheme 構建器並通過單擊旁邊的 + 圖標添加一個新的 Single Product 主題。 您可以使用此處提供的模板，但我們將為本教程從頭開始構建一個。 因此，首先添加一個 2 部分部分並單擊元素選項卡。 在這裡，您可以看到專門為產品製作的所有元素，如圖所示，我們在構建頁面時看不到這些元素。

首先添加一個類似於產品分類的麵包屑。 現在您可以使用工具欄編輯麵包屑的樣式，如顏色、大小、填充等，如圖所示。 在右側，從側邊欄中添加“產品標題”元素，並像之前一樣使用工具欄設計其樣式。 接下來讓我們以相同的方式添加產品圖像。 單擊產品圖像元素並使用工具欄編輯其樣式。 接下來類似地添加簡短描述。 您可以在標題和描述之間添加分隔線。 接下來我們要放產品類別。 為此，選擇“產品元”元素並將其放在描述和样式下。 接下來在其下方添加“價格”元素，您也可以再次更改其樣式。 接下來在價格下方放置一個“添加到購物車”按鈕。 由於它是可變產品，它會自動提供變體選項。 接下來，您可以添加社交圖標和評論表單、附加信息等您想要的元素。 在您的產品頁面上添加和設計您想要的元素後，單擊“發布”。 在顯示頁面的條件中，包括“所有產品”，以使該模闆對您創建的所有產品生效。 如果需要，您可以為不同的產品類別創建不同的主題，您只需更改條件以將其僅包含在該特定類別中。 當我們將其應用於所有產品時，我們所有的產品頁面都將更新為此模板。

  • 自定義結帳和購物車頁面

現在我們將設計定制的結帳和購物車頁面。 結帳和購物車頁面不使用主題構建器，因此我們將使用 Elementor 對其進行編輯。 轉到購物車頁面，然後單擊使用 Elementor 編輯。 就像任何其他頁面一樣，您可以使用 Elementor 元素以您想要的方式對其進行編輯和設置樣式。 您現在可以自己編輯文本、圖標、優惠券按鈕等並設置字體、顏色、地形等樣式。 但是使用 Elementor 無法編輯實際主題的部分，例如此處的標題 Cart。 要編輯它，您必須在 WordPress 本身中對其進行編輯，因此單擊“編輯頁面”並在右下角，選擇禁用部分下的“禁用標題”複選框，如圖所示，就像我們之前在設計wordpress 的主題。

您可以編輯和設計結帳頁面並以相同的方式使用。 同樣，您可以設計客戶的“我的帳戶”頁面，因為該頁面的默認主題不是很好看。 您可以使用 Elementor 對其進行編輯。 而且我之前還提供了一個鏈接，其中我還將所有這些頁面的模板的 zip 文件放在其中，供您快速設計。

Woocommerce 設置

您現在已經學會瞭如何使用 Elementor 和 Theme Builder 創建頁面，並且您的網站建設已經完成。 現在我們必須了解 Woocommerce 設置以使該網站運行。 轉到 WordPress 儀表板，單擊 Woocommerce 並選擇“設置”，這將打開 Woocommerce 的常規設置選項卡，如圖所示。

  • 通用設置

在這裡，您可以輸入您的地址並選擇您要銷售的國家/地區、啟用稅收、啟用優惠券代碼。 選中所有這些框以啟用它們。 在此之下，您可以根據您所在的國家/地區更改您的貨幣。

  • 產品標籤

下一個選項卡是設置頂行的產品選項卡，您會在其中找到許多設置，其中大部分設置非常具體，我們不會使用，除了評論部分，您可以在其中啟用產品評論和星級評分，如圖所示，您還可以在評論中向真實買家顯示經過驗證的用戶標籤。 您還可以輸入產品的運輸詳細信息，例如重量、尺寸等。

  • 稅收選項卡

接下來在稅收選項卡中，您可以在其中啟用或禁用自動稅收計算。 根據您所在的國家和業務，稅收計算可能非常複雜，因此自動計算可能不適合您。 但是，您可以選擇根據購物車項目為不同的送貨地址設置稅費。 我已經提供了 www.taxjar.com 的鏈接，您可以在其中獲得免費和付費服務來幫助您計算稅款。 您還可以選擇在各個點顯示含稅或不含稅的價格，例如在商店中，您應該顯示不含稅的價格，在購物車和結帳中，通常應該是含稅的。

  • 運輸標籤

下一個標籤是“運輸”。 首先單擊“添加運輸區域”，添加區域名稱、區域的特定區域，並在各種運輸方式下設置您的運費，如圖所示。 在這裡，我們使用了統一費率方法，其中我們設置了 5 美元的統一費率，另一種是免費送貨方式。 單擊下面的編輯按鈕以添加最低訂單金額或優惠券要求的條件。 在這裡，我們選擇了最低 50 美元的訂單要求。 您可以為每個區域添加多個區域和多種運輸方式和費率。 對於您的任何區域未涵蓋的位置，您也有一個默認值，我們沒有給出任何具體的費率。 所以在這裡，我們默認為這些區域設置了 10 美元的默認費率。

  • 帳戶和隱私選項卡

“帳戶和隱私”選項卡，您可以在其中選擇在購買前創建客戶帳戶的選項，或允許他們先在沒有帳戶的情況下購買，然後在結帳時創建帳戶，以及創建其他各種選項用戶名，密碼等帳戶，您可以自行檢查，因為它們非常不言自明。 您也可以在此處添加法律要求的隱私政策。 您還可以選擇在個人數據保留下刪除用戶個人數據的時間。

  • 電子郵件選項卡

此外，我們還有“電子郵件”選項卡，其中設置了您將從網站接收並發送給客戶的所有自動電子郵件，例如新訂單或取消訂單。 您可以在此處編輯在所有此類情況下您將收到或發送給客戶的電子郵件格式。 您可以為此添加插件以接收質量更好的電子郵件。 轉到插件並安裝“Kadence Woocommerce 電子郵件設計師”，然後。 使用此插件，您可以使用其自定義樣式設計電子郵件內容、頁眉、頁腳、文本等，這些樣式可在此處通過轉到 Woocommerce 側邊欄中的插件進行編輯，如圖所示。

  • 付款

現在我們將轉到“付款”選項卡，我們可以在其中選擇允許客戶使用的付款方式。 有許多選項可供選擇，但我們將在此處通過單擊啟用按鈕啟用“條紋”和“貝寶”，如下圖所示。

  1. 貝寶

現在讓我們先設置 PayPal 的付款設置，所以點擊“設置”打開 PayPal 設置頁面，您可以在其中輸入付款框的標題、描述和您的 PayPal 電子郵件帳戶，然後點擊“保存更改” ' 將您的網站與 PayPal 集成。 如果您沒有 PayPal，您可以通過訪問他們的網站並免費註冊來創建一個。 如圖所示，您只需使用將放入 PayPal 郵箱的電子郵件地址進行註冊。 它是可用的最流行的付款方式之一。

  1. 條紋

接下來，我們將使用條紋設置付款。 所以點擊它旁邊的“管理”按鈕。 與 PayPal 設置方法相同，首先為支付框設置標題、描述。 接下來，您將擁有測試可發布密鑰和測試密鑰。 您可以訪問 www.stripe.com 並在那裡創建一個免費帳戶，只需要有一個銀行帳戶即可創建一個帳戶。 創建免費服務後，您可以將您的條帶帳戶集成到您的網站。 為此，在登錄您的條帶帳戶後，單擊“開發人員”並選擇“API 密鑰”，如圖所示。 將您網站上出現的可發布密鑰複製到可發布密鑰框中，並將密鑰複製到密鑰框中。 點擊“保存更改”，現在您的網站已準備好以極低的交易費用接受來自世界各地的信用卡付款。 在這裡我們這樣做了，我們仍然在我們的條帶帳戶和 Woocommerce 設置頁面上啟用了查看測試數據按鈕，我們已經選中了“啟用測試模式”框，但是當您準備好使用您的支付系統時，禁用它.

您現在可以通過下訂單和購買東西來測試您的網站，還可以通過付款來檢查一切是否正常。在我的帳戶頁面上，客戶將擁有自己的個人儀表板，他們可以在其中檢查、編輯或取消他們的訂單，編輯他們的送貨和賬單地址，設置他們的付款方式和他們的帳戶詳細信息。 他們所有過去的訂單視圖也顯示在他們的訂單列表中以及他們的狀態。

針對移動設備進行優化

移動優化意味著使網站看起來對移動設備用戶友好。 移動優化在當今的場景中非常重要，因為 a) 很多人使用移動設備上網，b) 根據新的 Google 算法，如果您的網站沒有經過移動優化，那麼他們會降低您的排名，這對您來說可能是災難性的網站流量和搜索引擎優化。

使用 Elementor 編輯器進行移動優化非常簡單。 讓我們再次回到 Elementor 儀表板。 在工具欄的底部，您將找到“響應模式”按鈕，單擊該按鈕將打開一個下拉列表，其中顯示 3 個選項，即。 台式機、平板電腦和移動設備。 到目前為止，我們一直在根據桌面瀏覽器的外觀設計我們的網站。 現在單擊“平板電腦”以預覽它在平板電腦瀏覽器上的外觀。 同樣，您也可以檢查它是否為“移動”模式。 如果網頁看起來有問題或沒有視覺吸引力，您可以編輯該網頁。

如圖所示，第一個標題對於平板模式來說太大了，而“50% OFF”太小了，所以你必須調整它。 檢查頁面的所有元素，看看是否需要重新設計。 當您單擊更新時，所有這些更改都將適用於平板電腦模式。同樣適用於移動模式。 調整標題文本的大小、按鈕、橫幅和標題的對齊方式。

如果您認為這對他們不重要，您可以禁用移動或平板電腦版本上您需要的一些部分。 為此，選擇要隱藏的部分，轉到“編輯部分”工具欄上的高級類別，單擊“響應”，在可見性下，您可以選擇在桌面、平板電腦或移動版本上隱藏該部分，如圖所示圖像。您可以對其他部分或元素執行相同的操作。 您可以為平板電腦或移動模式設計所有不同的東西，例如背景圖像、字體大小或任何東西。

聯繫表

現在讓我們繼續前進，學習如何創建一個“聯繫”頁面，訪問者可以在其中填寫聯繫信息，並將其直接發送到您的電子郵件。 頁面的基本設計，您可以使用 Elementor 編輯器或 Theme Customizer 自行完成。 唯一重要的是如圖所示的聯繫表格。 因此，您在 Elementor 工具欄上搜索表單並將其拖放到該部分，您可以使用“編輯表單”工具欄編輯文本和表單設計，我認為您現在可以自己完成。 編輯表單工具欄中有許多高級設置，這裡沒有介紹，但您可以創建的基本表單。

優惠券

要將優惠券添加到您的網站，請單擊自定義按鈕旁邊頂部欄上的“+ 新”，然後選擇優惠券。 如圖所示，WordPress 側工具欄上的優惠券位於“營銷”部分下。 在這裡，您可以添加新的優惠券代碼，選擇折扣類型為百分比折扣、固定購物車折扣或固定產品折扣，輸入折扣的金額或百分比以及優惠券的有效期。 在“使用限制”下，您可以設置最低消費、個人使用或與其他優惠券一起使用等條件，在優惠券中包含或排除產品或產品類別。 在使用限制下，您可以選擇此優惠券的使用次數或限制特定產品的使用次數，並限制單個客戶的使用。 單擊發布以在網站上應用此優惠券並在購物車頁面上通過在購買時應用優惠券代碼對其進行測試。

我真的希望這些教程對讀者有所幫助，現在您可以自己從頭開始創建網站。 如果您需要任何幫助，可以訪問我的網站和我的 Facebook 頁面並發表評論。 我有大量關於網站建設和使用 Elementor 的其他資源，您可以查看這些資源。 感謝您閱讀本教程，隨時歡迎您的反饋和查詢。