如何使用 Elementor 和 WidgetKit 將 PSD 轉換為 WordPress
已發表: 2019-12-12您是否正在尋找 PSD 到 WordPress 的轉換解決方案？ 想要將您準備好的網站 PSD 轉換為 WordPress，但不知道如何？ 好的，我可以幫你解決這個問題。
您已經知道 WordPress 是最近使用最多、用途最廣泛的 CMS 平台之一。 現在，使用 Elementor 之類的頁面構建器創建一個從 PSD 到 WordPress 主題的全功能網站，而不需要編碼更加舒適。
在本文中，我將逐步向您展示“如何使用 Elementor 和 WidgetKit 將 PSD 轉換為 WordPress” 。
讓我們看看如何。
選擇 PSD 設計
在將 PSD 轉換為 WordPress 主題之前，您需要做的第一件事是選擇網站的 PSD 設計。 簡而言之，PSD 是 PhotoShop Design 的縮寫，它是最流行的設計工具之一，創建了大多數 WordPress 網站設計。
您可以從廣泛的PSDHUB 集合中選擇任何您喜歡的 PSD 設計。
他們為您的網站提供優質的免費 PSD 模板，包括個人和商業用途。 請記住，您選擇的 PSD 設計必須簡單且具有現代感。
在選擇 PSD 設計時檢查以下因素，
- 設計結構：首先要考慮的是設計結構。 設計沒有界限，但編碼有。
- 乾淨優雅的佈局：第三件事是您首選的 PSD 設計必須乾淨優雅。 它可以幫助開發人員從乾淨優雅的佈局中創建一個像素完美的網站。
- 目的實現：第二件事是，設計是否符合您的目的。 假設您需要一個旅遊網站，那麼您的 PSD 設計必須是一個旅遊網站 PSD。
- 複雜性：最後，盡量忽略複雜性，因為 PSD 在設計選擇中也是如此。
這裡我們使用來自 PSDHUB 的 Eventia-Conference 和 Event Management Template。
安裝 WordPress
WordPress以其易於安裝而聞名。 在大多數情況下，安裝 WordPress 是一個非常簡單的過程，只需不到五分鐘即可完成。 要將 PSD 轉換為 WordPress 主題，安裝 WordPress 是要考慮的第二步。
WordPress.org 在其站點的支持頁面上提供了有關“如何安裝 WordPress”的詳細文章。 然而; 這是WordPress安裝的基本說明，
- 首先下載並解壓 WordPress 包。
- 在您的 Web 服務器上為 WordPress 創建一個數據庫，以及一個 MySQL。
- 將 WordPress 文件上傳到您的 Web 服務器上的所需位置：
- 如果要將 WordPress 集成到域的根目錄中，請將解壓縮的 WordPress 目錄的所有內容移動或上傳到 Web 服務器的根目錄中。
- 如果您想將 WordPress 安裝在您網站上自己的子目錄中，請在您的服務器上創建博客目錄，並通過 FTP 將解壓縮的 WordPress 包的內容上傳到該目錄。
- 通過在 Web 瀏覽器中訪問 URL 來運行 WordPress 安裝腳本。
而已！ 現在應該安裝 WordPress。
安裝 Elementor
這篇文章是關於使用 Elementor 將 PSD 轉換為 WordPress 主題的。 因此，我們需要 Elementor 來自定義和編輯 PSD 文件。 那麼讓我們看看如何安裝 Elementor。
Elementor 是在 WordPress 中創建像素完美設計的最佳完整設計平台之一。 它最適合其可擴展的用戶友好設計方法。 Elementor 的安裝過程也是一項簡單的任務。 只需按照一些簡單的步驟，您就可以在 Elementor 頁面構建器中設計您的 PSD。
有兩種方法可以安裝 Elementor 插件。 安裝過程描述如下，
通過 Elementor網站
- 首先去elementor.com並點擊下載。
- 在 WordPress 儀表板中，單擊Plugins > Add New 。
- 單擊Upload Plugin ，然後選擇您為 Elementor 下載的文件。
通過 WordPress 儀表板
- 在儀表板中，單擊插件 > 添加新的。
- 在搜索字段中，輸入Elementor並選擇要安裝的 Elementor 頁面構建器。
- 安裝後，點擊激活。
這就是安裝 Elementor 頁面構建器所需要做的一切。 您也可以按照以下視頻了解更多有關安裝過程的信息。
安裝 WidgetKit
WidgetKit for Elementor-最先進和最強大的 Elementor 插件套件，通過添加更多元素和佈局來增強您的網站構建能力。 在這裡，我們使用它的小部件和元素進行 PSD 到 WordPress 的轉換。
您可以使用 WordPress 和 WidgetKit 從 PSD 創建幾乎任何類型的頁面。 Widgetkit 的安裝就像用它設計一個 PSD 到 WordPress 主題一樣簡單。 在 WordPress 儀表板中，您可以按照一些簡單的步驟輕鬆添加 WidgetKit。 讓我們來看看，
通過 WordPress 儀表板安裝 WidgetKit
- 在儀表板中，單擊插件 > 添加新的。
- 在Search字段中輸入WidgetKit ，然後選擇WidgetKit for Elementor進行安裝。
- 安裝成功後，點擊激活。
WidgetKit 現在可以與 Elementor 一起使用了。 如果您有任何困惑，請按照視頻進行操作。 這也將幫助您了解如何使用 WidgetKit。
將您的 PSD 轉換為 WordPress
安裝部分已經完成。 現在是時候將 PSD 轉換為 WordPress Elementor 和 WidgetKit。 目前有很多 PSD 到 WordPress 的服務提供商正在將 PSD 提供給 WordPress 以及 PSD 到 Joomla 的轉換。 然而; 您可以設計自己喜歡的方式。 在這裡，我們只是展示了一種將 PSD 轉換為 WordPress 的基本方法。
此外，您還可以從我們豐富的 WordPress 主題和插件目錄中選擇任何現成的主題和模板。
在從 PSD 設計佈局時嘗試遵循順序。 這對你有很大幫助，
創建一個新頁面
您要做的第一件事是從 WordPress 儀表板創建一個新頁面。 從 WordPress 儀表板的左上角，單擊頁面 > 添加新的。
然後點擊 Edit with Elementor 進入 Elementor Page Builder。 您將看到一個 Elementor 面板，如下所示。
從 PSD 文件構建您的頁面
要構建頁面或將 PSD 轉換為 WordPress 主題，需要考慮三個主要事項； 部分、列和小部件。 這裡的部分是最大的構建塊，並捕獲了列。 您可以將小部件放置在列內。 通過單擊編輯選項，您可以使用其句柄來控制部分、列和小部件。
添加標題部分
對於此處的標題部分，我們使用 Themexpert 的現有主題 Eventia。 在 WordPress 中，您可以使用現有主題作為設計模板的框架，否則 WordPress 本身會為您添加一個。 然後，您可以使用現有的主題設計或佈局添加徽標和多個頁面。
添加英雄部分
現在我們轉換英雄部分。 首先，我們像 PSD 一樣添加背景圖像，然後將列添加到列中以添加多個內容和圖標。
對於此處的計數器選項，我們使用 WidgetKit 倒計時元素。 輸出和編輯選項如下。
添加內部部分
現在是時候設計內部部分了。 在這裡，我們使用 Elementor 元素在兩列之間添加背景和文本。
這是使用 Elementor 元素編輯的關於此事件部分。 在這裡，我們在部分列中添加一些文本和橫幅圖像。 視圖在下面。
使用 WidgetKit 團隊垂直圖標，我們設計了 PSD 文件的揚聲器部分。 在那裡，我們在帶有名稱和名稱的不同列中添加圖像和社交網站圖標。
在本節中，我們只是從 PSD 中添加一些隨機圖標並給出標題。
我們不能用 Elementor 做所有事情。 這種情況下我們怎麼辦？ 我們使用來自不同主題的插件或為我們自己製作插件。 這在為 WordPress 主題設計 PSD 時很常見。 在這裡，我們使用 Eventia Theme 的 Schedule Addon。
對於博客部分，我們使用 WidgetKit 的博客輪播元素。 使用不同的內容視覺效果，您還可以添加背景甚至閱讀更多按鈕。
對於此處的頁腳部分，我們使用 Themexpert 的現有主題 Eventia，就像我們在頁眉部分之前所做的那樣。 在這裡，我們獲得了多個社交網站圖標和一個訂閱按鈕。
預覽和發布您的頁面
從 PSD 完成頁面設計後，您可以預覽您的工作並發布它。 您還可以編輯Published頁面並將您的工作保存為Draft 。 這意味著您在將作品另存為Draft時不會破壞已發布的頁面。 這是 Eventia PSD 的預覽圖。
最後一句話
這就是今天的全部內容，伙計們。 我希望您會喜歡這篇文章，並對如何使用 Elementor 頁面構建器和 WidgetKit 將 PSD 轉換為 WordPress 有一個清晰的認識。 應用資源，當然，不要忘記在下面的評論部分分享您的經驗和寶貴意見。