有許多方法來創 WordPress 建網站，Photoshop 是其中之一。本文說說如何製作 WooCommerce 獨立站網頁設計？如何使用 Photoshop 設計網站。
1 、下載並安裝 Photoshop
2 、在您的個人計算機上開啟您的 Photoshop 版本，並建立一個新的檔案，其高度和寬度設定為您選擇的（正常寬度為 800px-900px，正常高度為 1200px-1500px）。您可以命名資料夾（可選）。
3 、為您的網站（從現有圖片或從頭開始）建立標題，並在其中嵌入您的網站徽標。
4 、建立您網站的選單按鈕（形狀和顏色，它們之間的空間，作為上選單，底部選單，右側或左側選單或兩組或三組選單的組合等）
5 、建立內容區域，頁尾區域，放置橫幅的地方，照片庫的地方等等，直到您完成了您的網站的一般外觀。
6 、現在的困難的部分：在 Photoshop，切片和匯出您完成的網站，透過在匯出之前給所有切片命名（例如：用切片工具標記該標題的區域，並將其命名為 “標題”，標記區域 的主頁按鈕，並將其命名為 “主頁按鈕”，以此類推到網站的每個單獨的部分）。
7 、建議將內容區域保留為空，因為您只將其儲存為影像切片，文字將顯示為影像的一部分，當為空時，可以單獨新增每個頁面的內容。
8 、將其匯出到桌面上的新檔案中，匯出將建立一個 HTML 檔案（它將是您的網際網路頁面，尚未居中且沒有內容），一個 CSS 檔案以及一個包含所有不同切片和影像的 Images 資料夾 。
9 、使用 OneNote 或記事本開啟 HTML 檔案，並在 HTML 中進行更改（將整個頁面居中，將整個頁面設定為背景顏色，將內容放在內容圖片所在的 div 標籤中，或者使用 div 標籤中的 P 標籤，建立關鍵字，內容等的後設資料…）。
10 、複製並貼上與您所擁有的網頁數量相同的 HTML 網頁，但請務必將其重新命名為相關網頁（即 Home.html，aboutUs.html，ContactUs.html 等）。）。
11 、為 HTML 檔案中的頁面建立內部連結（或者在建立更多頁面之前進行建立，以便不必重複），其中按鈕影像程式碼是透過建立 div 並提供按鈕連結地址。
12 、將完成的網站檔案上傳到主機。