国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 或 在線咨詢 在線咨詢
18143453325 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 外貿(mào)建站教程：如何用Astra主題免費建外貿(mào)網(wǎng)站

外貿(mào)建站教程：如何用Astra主題免費建外貿(mào)網(wǎng)站

時間：2022-08-30 07:21:01 | 來源：網(wǎng)站運營

時間：2022-08-30 07:21:01 來源：網(wǎng)站運營

超詳細10000+字的外貿(mào)建站教程，圖文、視頻兼?zhèn)?。除了域名和主機，WordPress主題、插件通通是免費版，零經(jīng)驗的你也能建個靠譜的外貿(mào)網(wǎng)站，只要肯花點時間照著步驟做就能行~我選用了大牌的Astra主題，速度快、質(zhì)量有保證，配套的功能插件也都是選擇了用戶多、評價好的插件，對起步階段的Soho外貿(mào)人很有幫助~

原文首發(fā)地址：https://loyseo.com/create-business-website-with-astra/

花了一周碼字，對你有用的話，還請點贊、喜歡、收藏三連擊喲~（比心

本教程的外貿(mào)建站要花多少錢？

建站基礎(chǔ) – 選購域名和主機

在用Astra主題建外貿(mào)站之前，先按照如下步驟逐一操作，點擊鏈接可以查看對應(yīng)教程。

  1. 注冊域名
  2. 購買WordPress托管主機，詳見主機價格與配套一覽對比。
    1. 購買Siteground的WordPress主機的注意事項 ——大品牌，可信用卡/paypal支付
    2. 購買GreenGeeks的Wordpress主機的注意事項 —— 價格在三者中最便宜，但只支持信用卡支付
    3. ChemiCloud主機測評、選購要點、建外貿(mào)網(wǎng)站教程 —— 價格在三者中是第二，可信用卡/paypal支付，它家不定期有優(yōu)惠券（coupon），可以在買之前聯(lián)系在線客服要一下最新優(yōu)惠券哦~能要到優(yōu)惠券的話，價格與GreenGeeks差不多。



Siteground是WordPress官方推薦主機之一，品牌和用戶規(guī)模比GreenGeeks、ChemiCloud大，他們的五星好評都是90%+。

具體選誰？看你的預(yù)算啦，我一般選購1-2年，主機續(xù)費一般也會有一些優(yōu)惠政策。

注：還有一些其他主機，譬如hostgator（用戶評分2.5）、hostinger（用戶評分4.3）、bluehost（用戶評分1.6），因為評價不達4.5被淘汰了，Dreamhost、Kinsta、WPXhosting等因為價格比較貴也不推薦了。（Dreamhost有便宜的套餐，但速度性能不過關(guān)，做PBN倒是合適，做外貿(mào)網(wǎng)站就不合適了）。

最后，值得一提的是，Chemicloud和GreenGeeks比Siteground在網(wǎng)站速度評測時還略勝一籌。

下面是GreenGeeks與Siteground的實測數(shù)據(jù)對比，我用本站的B2B外貿(mào)模板站，分別在siteground和greengeeks上進行了部署，在未開啟CDN的情況下，使用fastorslow進行了全球多節(jié)點多次測評，結(jié)果如下圖：

Chemicloud測試結(jié)果

GreenGeeks測試結(jié)果

Siteground測試結(jié)果




前往Siteground
前往GreenGeeks
前往ChemiCloud

買完主機后，去主機上安裝WordPress和SSL證書，教程如下

  1. Siteground主機
    1. 如何在Siteground中創(chuàng)建Wordpress網(wǎng)站
    2. 如何在Siteground中給WordPress網(wǎng)站安裝SSL證書



  1. GreenGeeks主機
    1. 如何在GreenGeeks創(chuàng)建WordPress網(wǎng)站
    2. 如何在GreenGeeks中給Wordpress網(wǎng)站安裝SSL證書
    3. 如何在GreenGeeks給網(wǎng)站開啟Cloudflare CDN



  1. ChemiCloud主機測評、選購要點、建外貿(mào)網(wǎng)站教程



  1. WordPress安裝完成后，你可以用賬號密碼登錄網(wǎng)站后臺，這里還有登錄網(wǎng)站后臺的4種方法
  2. 安裝完SSL后，還需要檢查下url是否都改為了https，請看：將網(wǎng)站中的http改為https（2種方法）
  3. 在網(wǎng)站完成以前，設(shè)置“建議搜索引擎不收錄”。
好啦~接下來我們便可以開始安裝Astra主題，開始搗鼓網(wǎng)頁啦~

安裝Astra主題免費版

Astra主題是知名的輕量主題，也就是說它的體積小、網(wǎng)站打開會比較快。網(wǎng)站打開速度慢，用戶就都溜了溜了~

1.進入WordPress后臺的Appearance 》themes頁面，點擊Add New按鈕

2.在添加主題頁面中，搜索Astra，找到對應(yīng)主題后，點擊Install按鈕

3.安裝完astra后，點擊Activate激活主題，接下來我們導(dǎo)入網(wǎng)站模板

相關(guān)教程：如何安裝wordpress主題（3種方法）

Astra免費版主題如何一鍵導(dǎo)入網(wǎng)站模板

Astra免費版依舊提供了50+套免費的網(wǎng)站模板（真良心！），網(wǎng)站模板里會包含一個網(wǎng)站常用的必要頁面。

進入Appearance 》 Astra option頁面，找到右側(cè)的install importer plugin，點它安裝導(dǎo)入模板的插件

安裝完成后，我們將看到如下界面，讓我們選擇網(wǎng)站模板的頁面編輯器，這里我們選擇Elementor，因為它是時下最熱門最好用的Wordpress page builder（頁面編輯器）。

接下來我們看到了模板列表，篩選出免費的模板列表，請根據(jù)你的喜好選擇模板，我們以下圖中的organic store為講解示例，這是一個電商的網(wǎng)站模板，我們會將它改造為B2B的網(wǎng)站。

選中模板后，我們可以去預(yù)覽一下，也可以直接點擊import complete site按鈕導(dǎo)入所有頁面及內(nèi)容

在導(dǎo)入設(shè)置中，默認會自動安裝必要的插件，你可以不導(dǎo)入樣式設(shè)置（customizer setting）、widgets（小工具，通常用于側(cè)邊欄）、content（內(nèi)容，譬如文章、產(chǎn)品），但對新手而言，我的建議是保持默認設(shè)置，點擊Import。

若是你想更換模板，為了不引起內(nèi)容混亂，再次導(dǎo)入時，記得勾選下圖中的delete previously imported site，以便刪除已有模板的內(nèi)容和設(shè)置。

接下來我們靜靜等待網(wǎng)站導(dǎo)入，不要關(guān)閉頁面，導(dǎo)入完成后將看到下圖。

若是導(dǎo)入失敗，系統(tǒng)會給與原因提示及解決辦法。

若是導(dǎo)入成功，但網(wǎng)站依舊不是模板的樣子，那么請二次導(dǎo)入試一試。

此外，部分服務(wù)器（譬如WPXhosting）因為安全策略原因，不允許做導(dǎo)入動作，或是導(dǎo)入完成后，依舊還是導(dǎo)入前的老樣子，此時，你就需要聯(lián)系主機商的客服來解決了。

導(dǎo)入完成后，我們查看一下網(wǎng)站，大功告成。

由于過多的插件會影響網(wǎng)站的速度和安全，所以用不上的插件就禁用并刪除掉。見下圖標紅的插件：

設(shè)置網(wǎng)站Logo、Icon、名稱

網(wǎng)站模板導(dǎo)入完成后，我們開始設(shè)置網(wǎng)站的logo、icon（顯示在瀏覽器頁卡中的小圖標）、網(wǎng)站名稱（site title）及標語（tagline）。

如下圖所示，在appearance 》 astra option頁面中，點擊upload logo進入





進入后將看到左圖，我們依次：


  1. 上傳logo，最好用透明的png格式圖片，不超過20K。
  2. 設(shè)置logo的寬度，在圖中我們能看到一個小電腦圖標，點擊它可以切換到平板、手機設(shè)備上的logo寬度設(shè)置
  3. 上傳網(wǎng)站圖標，要求正方形512px，5K左右







我們繼續(xù)設(shè)置網(wǎng)站的標題和標語
網(wǎng)站標題一般會展示在每個頁面的標題中，而tagline一般展示在首頁的頁面標題中。
當你打開網(wǎng)站，把鼠標放在瀏覽器標簽頁中時，就能看到它們，具體如下圖所示。










相關(guān)教程：WordPress安裝后必須要做的10件事

修改導(dǎo)航菜單

相關(guān)教程：如何在WordPress中制作導(dǎo)航菜單（7個功能點），你可以按照這個片教程給菜單內(nèi)容進行增加、修改、刪除、排序。

去掉菜單中的無用頁面

去掉我們用不上的頁面，譬如下圖中的Account、My account、Cart。

去掉購物車圖標

進入Appearance 》Customize 》 Header 》 Primary menu頁面中，將last item in menu從woocommerce（購物圖標）設(shè)置為seach（搜索圖標）。










安裝必要的插件

此時網(wǎng)站還是缺少不少功能的，譬如詢盤表單、詢盤郵件通知等等，請在WordPress后臺直接安裝這些免費插件，相關(guān)教程：如何安裝wordpress插件（3種方法），安裝完成后記得active激活他們。

部分插件此處未提及，在下文中介紹到對應(yīng)功能，再安裝即可。下文我們會逐一介紹這些插件的使用教程以及用處。

網(wǎng)站安全防護

插件安裝完成后，按如下兩篇教程給網(wǎng)站增加安全防護。

修改聯(lián)系我們頁面

本教程選的模板中缺少了聯(lián)系表單，我們要將它補充完整，請按下面的教程逐步完成操作。

  1. 用Ninjaforms添加聯(lián)系表單
  2. 創(chuàng)建免費的企業(yè)郵箱
  3. 用Post SMTP配置詢盤通知郵件和記錄郵件發(fā)送記錄
接下來，我們將表單放入到聯(lián)系我們頁面中

在網(wǎng)站all pages頁面中，找到contact頁面，點擊edit with elementor。

在頁面左側(cè)的工具欄中，輸入ninja搜索，將圖中標記有EA的ninja forms元素塊，左鍵按住拖拽到右側(cè)頁面中的目標位置。（如果你沒安裝Essential Addons for Elementor插件，是看不到這個元素塊的）

然后在左側(cè)選擇之前制作的表單，Ninja forms元素塊在Elementor中編輯時會出現(xiàn)一直在加載的情況，我目前也還沒找到解決方案，但實際他在前臺是能夠正常顯示的，所以此問題暫時擱置。

我們點擊頁面左下角的update的發(fā)布頁面，并預(yù)覽它，如下圖所示，表單已經(jīng)成功顯示。

我們接下要修改表單的樣式，譬如：隱藏表單標題，修改字段標題的粗細，修改輸入框內(nèi)部的顏色、修改提交按鈕的樣式。

表單樣式修改完之后是下圖所示效果，接下來我們逐一操作。

隱藏Ninjaforms表格標題

我們依舊還在Elementor編輯聯(lián)系我們頁面中，左鍵點選剛才在頁面中添加的ninja froms表單，如下圖所示，在左側(cè)的工具欄中，將Title開關(guān)關(guān)閉，保存一下頁面去預(yù)覽一下標題是否隱藏成功，如果失敗，那么繼續(xù)下一步。

去編輯這個Ninja forms，在Advanced – display settings中，將display form title關(guān)閉，保存表單后，再去預(yù)覽聯(lián)系我們頁面，標題會成功隱藏。

隱藏Ninjaforms表單的標*字段必填的提示文案

在表單標題的下方有一段話：“Fields marked with an * are required”，這個可以說是常識了，無需贅述，所以我們將這段話隱藏，需要用到自定義CSS功能。

1.進入appearance 》 customize頁面

2.點擊底部的additional css

3.添加如下代碼后，點擊右上角的publish按鈕即可。

.nf-form-fields-required { display: none;}

調(diào)整Ninjaforms字段輸入框的填充顏色

接著用Elementor編輯聯(lián)系我們頁面的Ninja forms元素，在左側(cè)工具欄的Style中，找到input & textarea，將background color設(shè)置為白色#ffffff，這樣輸入框內(nèi)的填充顏色就變成了白色。

調(diào)整Ninjaforms字段標題的粗細





繼續(xù)，在Style標簽頁中，找到Lables設(shè)置字段標題的字體粗細（weight）為400，原來的字體比較粗，改為400會細一些。

調(diào)整Ninjaforms提交按鈕的樣式

繼續(xù)，在Style標簽頁中，找到submit button按鈕，開始設(shè)置










繼續(xù)選擇hover標簽，設(shè)置鼠標懸停于按鈕時的文本顏色（text color）與按鈕背景顏色（background color）










此時，樣式修改已完成，我們預(yù)覽一下頁面，由于預(yù)覽時是在管理員已登錄狀態(tài)下查看到的樣子，并不是用戶真正看到的樣子，我們還需要更換一個瀏覽器或無痕狀態(tài)下去查看網(wǎng)頁是否如意，結(jié)果我便發(fā)現(xiàn)按鈕的異常，在管理員預(yù)覽模式下是正常的，而換個瀏覽器時，按鈕就變成了圓角，并且不是全寬。（如下圖所示）

于是，我又重新修改了一下按鈕的設(shè)置，如下圖所示，改完后保存、換個未登陸后臺的瀏覽器查看，一切正常了。










添加博客頁面

這套網(wǎng)站模板缺少了博客頁面，博客頁面可以用于發(fā)布產(chǎn)品相關(guān)的知識文章、公司動態(tài)等，如果不想寫博客，emm，那網(wǎng)站收獲詢盤的可能性就低了許多，你看我們平常買一些大件，也會多方看評測、知識型文章，而這些文章就在潛移默化中決定著我們的購買意愿。

接下來進入具體操作，提供兩種解決方案，一種是用Elementor制作博客頁面，這種方法復(fù)雜一些，不過能學(xué)到元素的使用方法；另一種是用主題自帶的博客列表模板，這種方法簡單，這兩種方法你都看一下，因為在第二種方法里介紹了博客詳情頁的顯示項與側(cè)邊欄的配置。

用Elementor制作博客頁面

  1. 在后臺，找到菜單pages》add new，點擊進入
  2. 輸入頁面標題Blog，點擊Edit with elementor
為了保持設(shè)計的一致性，我們從about us頁面復(fù)制標題模塊到Blog中

請使用Elementor編輯about us頁面，如下圖所示，右鍵點選模塊，再點擊copy復(fù)制標題模塊

然后回到博客頁面右鍵粘貼這個模塊，復(fù)制完成后，我們發(fā)現(xiàn)跟about頁面不一樣，用elementor編輯about頁面時，頂部未顯示導(dǎo)航，因為about頁面設(shè)置的是透明導(dǎo)航，我們也將blog頁面同樣設(shè)置一下。

進入后臺的all pages頁面，找到blog，點擊Edit。

在右下角找到transparent header設(shè)置，選擇Enabled，然后update頁面即可。

接下來繼續(xù)用Elementor編輯Blog頁面，你可以保存后刷新一下頁面，頂部的導(dǎo)航將消失，這表示透明導(dǎo)航生效了。

先修改一下標題，改為Blog，左鍵點選元素后，在左側(cè)工具欄中將出現(xiàn)這個元素的設(shè)置項，如下圖所示。

然后我們向頁面中添加文章元素塊，在左側(cè)元素欄中，點擊右上方的九宮格就能回到元素選擇面板，輸入post搜索，找到標記有EA的post grid元素，左鍵點選并拖拽它到右側(cè)頁面中。

如下圖所示，目前只能看到一篇博客文章，這是因為咱們還沒添加文章呢，你可以按照教程《如何在WordPress中發(fā)布和管理文章？》去添加一篇測試用的示例文章，文章要包含封面圖片、摘要、分類、標簽、正文，然后在文章列表中用EA Duplicator快速復(fù)制幾篇文章。

在上圖中箭頭指向位置，是每頁文章數(shù)量，默認是4，有點少，可以改為8。

下圖是我快速復(fù)制制作的9篇文章。

然后我們繼續(xù)用Elementor編輯Blog頁面，刷新一下頁面獲取這9篇文章數(shù)據(jù)。

如下圖所示，這個文章元素有很多的配置項，我在下圖中用數(shù)字標注了常用配置項的對應(yīng)關(guān)系。

如果你要改文章日期的格式，你要在WordPress后臺設(shè)置。

我把作者頭像與名字都隱藏起來了，然后將日期挪到了標題下方，同時顯示了文章的分類（在鼠標懸停于圖片時才會顯示分類），如下圖所示。

你可以嘗試一下每個配置的功能，其中若看到配置項名稱右側(cè)顯示了電腦圖標，說明它可以在不同設(shè)備上選擇不同的設(shè)置，這是為了讓網(wǎng)站能夠靈活的適應(yīng)電腦、平板、手機設(shè)備，也就是響應(yīng)式設(shè)計。

最后我們調(diào)整一下文章元素塊的上下間距，在元素的advanced標簽頁設(shè)置margin top和bottom的數(shù)值，如下圖所示，記得鎖鏈圖標要解鎖，不然margin的每個值都是同一數(shù)值。

最終，你會得到下圖這樣的博客頁面。

相關(guān)教程：

用Astra默認的博客頁面

免費版的Astra也提供了基礎(chǔ)的博客頁面設(shè)置功能的

  1. 在后臺，找到菜單pages》add new，點擊進入
  2. 輸入頁面標題Blog，然后直接發(fā)布保存
  3. 進入Setting》reading頁面，設(shè)置posts page為剛才添加的blog頁面（如下圖所示），然后保存即可。
接下來我們?nèi)ピO(shè)置一下博客頁面，從appearance》astra options頁面的blog layouts進入

進入后，我們能看到兩個選項，1.用于設(shè)置博客頁面和文章歸檔頁面的；2.用于設(shè)置博客詳情頁面。




這是博客頁面的設(shè)置，請按圖配好，圖中的眼睛是內(nèi)容顯示的開關(guān)，也可以拖拽內(nèi)容進行排序


這是博客詳情頁的配置，設(shè)置完成后記得點擊右上角的publish按鈕保存。

接下來我們再去設(shè)置一下博客頁面和博客詳情頁面的側(cè)邊欄，側(cè)邊欄一般放博客的分類、搜索框、最新博客文章等等，方便用戶使用。

我們依舊在appearance》customize頁面，找到sidebar，點擊進入，在Blog posts和archives欄，都選擇Right sidebar，這表示側(cè)邊欄將展示在頁面右側(cè)。然后點擊publish保存。










然后我們?nèi)ピO(shè)置sidebar的內(nèi)容，在appearance》widget中找到main sidebar，如下圖所示，我們能看到里頭有search（搜索）、recent post（最新文章）等內(nèi)容了，你可以點擊內(nèi)容右側(cè)的三角箭頭展開查看，對不必要的內(nèi)容進行delete刪除。

譬如Meta通常是不必要的，里頭會放置網(wǎng)站的登錄地址等功能入口。一般情況下，要保留的內(nèi)容是搜索、分類、最新文章，是否保留最新評論，看你的需求，譬如你的網(wǎng)站沒開放評論，那么也就不必要放這個模塊了。

你還可以對側(cè)邊欄的內(nèi)容進行拖拽排序。

我們還需要設(shè)置一下博客頁面的面包屑，這是SEO的基礎(chǔ)技術(shù)之一。

還是在appearance》customize頁面，找到breadcrumb，點擊進入，如下圖所示設(shè)置位置和不需要展示面包屑的頁面。










然后我們來看下博客頁面和博客詳情頁的樣子。

記得將博客頁面添加到網(wǎng)站菜單中哦~

修改產(chǎn)品頁面

給產(chǎn)品頁面添加側(cè)邊欄

這個模板本身已經(jīng)提供了產(chǎn)品列表和產(chǎn)品詳情頁，我們先參照博客側(cè)邊欄的配置方法，給產(chǎn)品列表頁與產(chǎn)品詳情頁添加右側(cè)側(cè)邊欄。

我們依舊在appearance》customize頁面，找到sidebar，點擊進入，如下圖所示，將woocommerce和single product設(shè)置right sidebar，點擊右上角publish保存。

然后我們?nèi)ピO(shè)置sidebar的內(nèi)容，如下圖所示，在appearance》widget中找到woocommerce sidebar和product sidebar，目前能看到里頭沒有任何內(nèi)容

我們在頁面左側(cè)的available widgets中找到產(chǎn)品相關(guān)的小工具（widget），將它添加進去就可以了。如下圖所示，點擊小工具的右側(cè)三角箭頭，在下拉選項中找到woocommerce sidebar或product sidebar，點選中它，然后點擊add widget，即可將這個小工具添加到對應(yīng)的側(cè)邊欄中。

下圖是我加完小工具的側(cè)邊欄，分別是產(chǎn)品搜索、產(chǎn)品類目、產(chǎn)品標簽。

隱藏產(chǎn)品的價格和加入購物車按鈕

作為B2B外貿(mào)網(wǎng)站，是不需要展示價格和加入購物車按鈕的，我們只需要在發(fā)布產(chǎn)品時不填寫價格即可，這樣加入購物車按鈕也不會出現(xiàn)。

給產(chǎn)品頁面添加詢盤表單標簽頁

目前產(chǎn)品頁面沒有詢盤聯(lián)系表單，我們需要借助插件Custom Product Tabs for WooCommerce，先用它添加一個標簽頁，放入之前在Ninja forms制作的聯(lián)系表單的短代碼（shortcode），然后在添加產(chǎn)品時加入這個標簽頁即可，具體操作步驟如下：

1.在網(wǎng)站后臺找到custom product tabs菜單，進入后點擊add tab

如下圖所示，依次輸入標題、名稱，然后切換內(nèi)容框到text模式，從ninja forms的dashboard頁面獲取表單的shortcode，黏貼到tab content中，最后點擊save tab即可。

然后我們?nèi)ゾ庉嬕粋€示例的產(chǎn)品，給它添加這個詢盤標簽頁。

進入網(wǎng)站后臺，在all products頁面任意選一個產(chǎn)品，點擊edit按鈕進入編輯

在編輯產(chǎn)品頁面時，滾動頁面到下圖所示位置，進入custom tabs標簽頁，點擊add a saved tab

然后選擇剛才添加的標簽頁即可。

如下圖所示，標簽頁已經(jīng)成功加到這個產(chǎn)品里了，我們在頁面右上方找到update按鈕，點它發(fā)布產(chǎn)品。

然后我們查看一下這個產(chǎn)品，能看到Enquiry詢盤標簽頁已經(jīng)成功加入了。

emm(??ˇ?ˇ??)這個插件的免費版只能一個個給產(chǎn)品添加詢盤標簽頁，但咱們可以用復(fù)制產(chǎn)品功能省點力氣，所以不買付費版也是可以的，既然走免費這條路子，那就貫徹到底吧，如果想便利一些，那不如買個Elementor Pro，能夠自定義產(chǎn)品頁模板，靈活度更高，當然學(xué)習(xí)難度也比較大一些。

去掉產(chǎn)品列表頁面的多余面包屑

由于上文中開啟了astra主題的面包屑功能，但是它不能配置產(chǎn)品列表頁面是否展示面包屑，如下圖所示，出現(xiàn)了兩個面包屑，于是我們用短代碼的方式，將woocommerce自帶的面包屑去掉。

此時我們要用到code snippets插件，請先學(xué)習(xí)一下如何添加短代碼，然后添加一個新的短代碼去掉woocommerce產(chǎn)品列表頁自帶的面包屑，代碼內(nèi)容如下：

/** * Remove the breadcrumbs */add_action( 'init', 'woo_remove_wc_breadcrumbs' );function woo_remove_wc_breadcrumbs() { remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );}

去掉產(chǎn)品詳情頁面的多余面包屑

產(chǎn)品詳情頁也多了一個面包屑，但這個可以在后臺配置，不需要添加短代碼。

進入后臺appearance 》customize，然后按照下圖所示操作，進入woocommerce》 single product，選中disable breadcrumb，點擊publish保存即可。

修改產(chǎn)品首頁的標題和Slug

上文提到的隱藏問題：產(chǎn)品首頁的頁面標題和導(dǎo)航菜單里的標題不一樣，那是因為在設(shè)置菜單時，是可以修改標題的；但頁面實際名稱還是Shop。

我們進入all pages頁面，找到shop頁面，點擊其下方的quick edit，可以快速修改頁面的標題以及slug，都改為Products吧，保持一致。注：slug，你可以當做是url。

至此，一個滿足常規(guī)使用的產(chǎn)品頁面就完工啦，包括產(chǎn)品列表頁、產(chǎn)品詳情頁。

細心的你可能發(fā)現(xiàn)我的頁面上是有product tags，而你那兒可能沒有，那你去修改一下幾個產(chǎn)品，在快速編輯或者編輯產(chǎn)品頁面的右側(cè)都能找到標簽。

添加、編輯產(chǎn)品等產(chǎn)品管理功能

添加產(chǎn)品功能與添加博客文章的功能是類似的，我就不寫圖文教程了，附一個視頻教程吧。

修改頁面內(nèi)容

請進入后臺的all pages頁面，如下圖所示的情況，帶有elementor標記的，都可以用elementor編輯頁面，也就是能夠可視化編輯頁面內(nèi)容。

用Elementor編輯頁面的方法：點選要修改的內(nèi)容，然后在左側(cè)工具欄中設(shè)置內(nèi)容、樣式以及高級配置。我們依舊用一個視頻來講解頁面內(nèi)容編輯功能，視頻中的模板與本文中的模板不一樣，但方法是一樣的。

你還可以看下方的Elementor編輯器的教程，了解更多細致的操作。

查看更多Elementor教程，其中有部分教程是針對Elementor Pro的，若是在使用免費版的Elementor時提示你升級Pro或未顯示視頻中的操作的功能，就表示是Elementor Pro的功能，需要付費購買。

編輯頁腳

Astra的這套模板的頁腳是用插件Elementor – Header, Footer & Blocks制作的，頁頭是用的Astra本身自帶的功能。頁腳的編輯方法與頁面編輯方法無差異，詳見下方視頻。

給網(wǎng)站添加返回頂部按鈕

在免費版的Astra里是不提供頁面上的返回頂部按鈕的，有如下兩種方法：

  1. 用Elementor制作WordPress網(wǎng)站的返回頂部按鈕（3分鐘解決），這個方法比下面的方法復(fù)雜一些， 但可以少裝一個插件。
  2. 安裝插件：WPFront Scroll Top，然后如下圖所示enabled啟用即可，你還可以自行配置按鈕的樣式。

網(wǎng)站內(nèi)容發(fā)布要點

至此，頁面修改就差不多告一段落了，接下來就是往網(wǎng)站上發(fā)產(chǎn)品、發(fā)博客，這些內(nèi)容的發(fā)布有一些注意事項，我在另一篇基于Elementor Pro的建站教程中有詳細的描述，請點擊《B2B外貿(mào)建站教程》前往查看。

站內(nèi)SEO

請按照如下教程逐步操作

  1. 給網(wǎng)站安裝Google Analytics跟蹤代碼
  2. 給網(wǎng)站開通Google Search Console
  3. 將Google Analytics關(guān)聯(lián)Google Search Console
  4. Rank Math SEO設(shè)置教程
  5. 你的網(wǎng)頁如何在Rank Math SEO的測試中得到100分

站點速度優(yōu)化

我們需要用工具Gtmetrix測試站點的速度，并進行速度優(yōu)化，盡量優(yōu)化到加載時間在3S以內(nèi)，優(yōu)化教程請按如下子教程逐一實施

  1. 優(yōu)化圖片，在上文中已經(jīng)介紹了圖片的優(yōu)化辦法，此教程中做了一些補充擴展
  2. 針對使用Siteground建站的情況，可以使用SG Optimizer加速網(wǎng)站，我實測后，發(fā)現(xiàn)效果不理想（優(yōu)化前后差距很小），我覺著最好用易用的還是付費使用WP Rocket加速網(wǎng)站，如果你不想購買這個插件，也可以微信聯(lián)系我獲取正版分享。
  3. 實施CDN，每個主機的CDN不盡相同，大多用的是免費的Cloudflare。
    1. 如果在Sitegroun建站，請看：在Siteground給網(wǎng)站啟用Cloudflare CDN
    2. 如果你的主機用的是Cpanel主機面板，譬如FastComet，可以參考這篇文章：如何在GreenGeeks給網(wǎng)站開啟Cloudflare CDN，如果開啟過程中遇到問題，咨詢主機客服即可。



開放收錄，站點上線

完成上述內(nèi)容后，站點可上線，開放收錄吧、

進入設(shè)置》閱讀（setting》reading），將建議搜索引擎不索引本站點去掉勾選，保存更改

然后進入Google Search Console，提交站點地圖地址以助于加快收錄。



74
73
25
news

版權(quán)所有? 億企邦 1997-2022 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉