專注於企業網站架設,分享WordPress教學和Elementor教學
不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%,感謝你的互惠互助

B2B企業獨立站:如何用Astra主題製作

更新日期:2022-03-08

掃碼加入 讀者學習群

相關 教學

我自用的 架設網站資源

當你點擊本站的鏈接購買主機、主題、外掛,我會得到一些佣金用於運營網站,但不會影響你的購買價格,我只推薦自己在用的,感謝有你的支持~比心( •̀ ω •́ )y

Cloudways

不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%
了解詳情→

elementor logo gradient 01 1
Elementor

最熱門的網頁可視化設計編輯器,我的網站就是用它建的
了解詳情→

Namesilo

註冊網域,購買時使用優惠券loyseo可減1美元
前往註冊→

Share on facebook
Share on twitter
Share on linkedin

本文全篇17800+字,一步步講解如何用:Cloudways主機、 Astra主題製作B2B企業獨立站,零經驗的你也能建個靠譜的企業獨立站,只要肯花點時間照著步驟做就能行~

本文選用的Astra主題,速度快、質量有保證,配套的功能外掛也都是選擇了用戶多、評價好的外掛,對起步階段的企業Soho自架設網站很有幫助~

如果你缺少自學架設網站的時間,可查看我提供的企業網站架設服務

架設網站要花多少錢?

  • 網域費用:65元左右/年
  • 主機費用:800元左右/年
  • 主題費用:159CNY/終生/站,請聯繫我購買
  • 外掛費用:0
  • 教學費用:0
是的,本站的教學都免費,且圖文+視頻兼備。為了互惠互助,如果你沒有主機的話,希望你能點擊本站的主機鏈接(Cloudways)、使用本站的優惠券代碼(loyseo)註冊賬號,可免費試用3天,不用先充值。我推薦的這款主機是近兩年自己用過7、8款主機後,對比留下的性價比最好的,它得到了我的架設網站客戶的一致認可。最後,感謝你的互惠互助,因為通過主機給我的佣金,我才能維持站點的運營和不斷寫作。

選購網域和主機

在用Astra主題建企業獨立站之前,先按照如下步驟逐一操作,點擊鏈接可以查看對應教學。

  1. 註冊網域,建議在Namesilo購買,新用戶首購使用優惠券loyseo可以減1美元。
  2. Cloudways主機:Cloudways的速度十分優秀,詳情請看測評,它比SiteGround快兩倍,我和很多客戶都用Cloudways主機,並提供3天免費試用,不用充值就可以試用,此外,選擇10美金的套餐就夠新網站使用,它是按月計費,不需要年付,還能按需一鍵升級配置,像SiteGround、Bluehost等共享主機都是第一次買優惠很高(譬如3折),到續費就很貴,Siteground續費要25刀一個月,而Bluehost速度不好,且他們是共享主機,比不上cloudways是vps(專享主機),請按照下面的步驟,逐一操作。
    1. 註冊Cloudways,註冊時使用promo code:loyseo可享有頭兩個月7折優惠。
    2. 在Cloudways中創建服務器(有3天的試用期,創建服務器時已經創建好一個wordpress網站,且用的是臨時網域)
    3. 在Cloudways中升級你的賬戶為付費賬戶(綁定信用卡)
    4. 登錄網站後台
    5. 修改固定鏈接設置
    6. 綁定網域
    7. 安裝ssl證書
    8. 更多Cloudways文章教學
    9. Cloudways視頻教學
  1. 在網站完成以前,設置“建議搜索引擎不收錄”

好啦~接下來我們便可以開始安裝Astra主題,開始搗鼓網頁啦~

安裝Astra主題

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

1.進入WordPress後台的Appearance 》themes頁面,點擊Add New按鈕

astra tutorial

2.在添加主題頁面中,搜索Astra,找到對應主題後,點擊Install按鈕

astra tutorial

3.安裝完astra後,點擊Activate激活主題,接下來我們導入網站模板

astra tutorial

相關教學:如何安裝wordpress主題(3種方法)

Astra主題免費版與付費版的區別

Astra主題付費版=Astra主題+付費外掛,這個主題本身是免費的,通過幾個付費外掛來擴展付費的高級功能。

付費外掛如下,可聯繫我打包購買,159CNY/終生/站點,買3份即可不限站點。

  1. Astra addon plugin ——增強Astra主題的外觀選項配置,譬如對顏色、背景、字體、博客、菜單、導航、返回頂部、商店的增強配置。
  2. Astra premium sites ——提供付費網站模板
  3. Ultimate elementor —— 這是Elementor的擴展元素,當安裝後,在使用elementor編輯頁面時,能在元素庫中找到更多元素塊使用,所以,這個外掛安裝後,界面上會提示你安裝Elementor外掛,你可以直接點擊提示按鈕安裝。
  4. Astra portfolio —— 用於管理作品/案例的擴展功能,易用性比較弱,不是必要用的。

導入Astra的預製網站模板

Astra提供了大量的網站模板,每個模板裡都包含了多個頁面以及必要的內容(譬如產品、文章樣例)。 Astra主題提供了免費和付費兩類預製模板。

導入模板需要安裝外掛,免費和付費的模板的導入外掛有所不同,免費版的叫做:Starter Templates,付費版的叫做:Premium Starter Templates,他們倆的導入模板流程都一樣,下面將會詳細介紹。

astra templates plugins

如何導入網站模板

Astra免費版依舊提供了50+套免費的網站模板(真良心!)。

如果你購買了Astra付費版,請安裝Premium Starter Templates外掛,並綁定授權碼。你也可以同步將Astra其他幾個付費外掛一起安裝、激活、授權。

activate astra premium template plugin

然後點擊菜單appearance – starter templates進入導模板功能。

starter template 2

如果你決定使用免費版的,那麼請進入Appearance 》 Astra option頁面,找到右側的install importer plugin,點它安裝免費的導入模板的外掛。

astra tutorial

導入模板外掛安裝完成後,我們將看到如下界面,點擊按鈕繼續。

astra theme template

這裡,讓我們選擇網站模板的頁面編輯器,這裡我們選擇Elementor,因為它是時下最熱門最好用的Wordpress page builder(頁面編輯器)。

astra theme template choose page builder

接下來我們看到了模板列表,篩選出免費的模板列表(沒標記premium的就是免費模板),請根據你的喜好選擇模板,我們以下圖中的organic store為講解示例,這是一個電商的網站模板,我們會將它改造為B2B企業網站。

choose astra theme template

選中模板後,你可以上傳logo和設置它的展示寬度,如果沒有logo的話,可以以後再傳,我們點擊按鈕繼續。

import free astra template

然後,我們可以選擇配色方案與字體,如果現在還拿不定主意,以後也可以再改的,點擊按鈕繼續。

import free astra template 2

如下圖所示,在導入設置中,會讓你填一些信息,譬如名字、郵箱等等,都可以不填。

下圖中,默認勾選了4個選項:導入網站的外觀樣式設置(customizer setting)、導入widgets(小工具,通常用於側邊欄)、導入content(內容,譬如文章、產品),分享非敏感信息給主題官方,但對新手而言,我的建議是保持默認設置,點擊按鈕提交。

import free astra template 3 1

若是你以後想更換模板,為了不引起內容混亂,再次導入時,圖中會提供一個選項:delete previously imported site(即刪除當前模板),你也可以勾選它,以便刪除已有模板的內容和設置。

接下來我們靜靜等待網站導入,不要關閉網頁哦。

import free astra template 4

導入完成後將看到成功提示。

import free astra template 5

若是導入的進度條卡主不動,可重新再導入操作一次。

若是導入失敗,系統會給與原因提示及解決辦法。

若是導入成功,但網站依舊不是模板的樣子,那麼請二次導入試一試。

此外,部分服務器(譬如WPXhosting)因為安全策略原因,不允許做導入動作,或是導入完成後,依舊還是導入前的老樣子,此時,你就需要聯繫主機商的客服來解決了。

導入完成後,我們查看一下網站,大功告成。

import free astra template 6

由於過多的外掛會影響網站的速度和安全,所以用不上的外掛,就請前往plugins/外掛的列表中進行禁用並刪除。

  • CartFlows外掛是隨模板安裝的B2C所需的外掛,如果你是製作B2B企業獨立站,可以將他們禁用後刪除。
  • Starter Templates是導入網站模板時用到的,如果你不需要再導入模板了,也將它禁用並刪除。

設置網站Logo、Icon、名稱

網站模板導入完成後,我們開始設置網站的logo、icon(顯示在瀏覽器頁卡中的小圖標)、網站名稱(site title)及標語(tagline)。

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

astra upload logo

進入後將看到下圖,我們依次:

  1. 上傳logo,最好用透明的png格式圖片,不超過20K。
  2. 設置logo的寬度,在圖中我們能看到一個小電腦圖標,點擊它可以切換到平板、手機設備上的logo寬度設置
  3. 將display site title開關打開,即可設置網站標題,這個標題將展示在每個頁面的標題中,同時也會展示在logo旁側,設置完成後,通常建議將開關關閉。
  4. 將display site tagline開關打開,即可設置網站宣傳標語,它會展示在網站標題下方,同時也會出現在網站首頁的頁面標題中,設置完成後,通常也建議將開關關閉。
  5. Site icon,即網站圖標,這個圖標展示在瀏覽器的標籤裡頭。它要求上傳正方形512px圖標,其實可以用32px*32px即可,512px適合在手機上展示,但實際上我們很少會在手機上將網頁保存到桌面,所以,這個圖標,體積盡量小,譬如5K左右。
set site title logo

相關教學:WordPress安裝後必須要做的11件事

修改菜單

相關教學:如何在WordPress中製作菜單(7個功能點),你可以按照這個片教學給菜單內容進行增加、修改、刪除、排序。

如果你想製作超級菜單(Mega menu):如下圖所示,將鼠標懸停在Products上,下拉菜單裡出現了豐富的圖文內容,那麼你需要購買Astra付費版

mega-menu

去掉菜單中的無用頁面

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

astra tutorial

去掉購物車圖標,增加搜索圖標

針對最新版本的Astra:進入Appearance 》Customize 》Header Builder中,刪除cart,然後加入search圖標。

astra remove cart in header
astra header add search

針對舊版本的Astra:進入Appearance 》Customize 》 Header 》 Primary menu頁面中,將last item in menu從woocommerce(購物圖標)設置為search(搜索圖標)。

astra tutorial
astra tutorial

在主導航上方添加頂部導航

astra header builder 2

接下來講解如何實現上圖所示的頂部導航,我們將添加一個聯繫郵箱和一組社交媒體圖標。

從後台的appearance》astra options頁面中,點擊header builder進入。

astra header builder

然後如下圖所示,添加social到第一行header的右側

astra header builder above menu 2

再在第一行左側點擊加號添加HTML

astra header builder above menu 3

接下來,點擊HTML1,在左側的編輯框裡,切換到Text模式,輸入:

Email:
astra header builder above menu 4

接下來我們去配置Social,點擊之前添加的Social,在左側能看到已經添加了3個示例,你可以在下圖①處選擇其他社交媒體,然後點擊按鈕添加,也可以點擊已有的圖標譬如facebook,在url中填入你的Facebook主頁地址。如果你需要更換圖標,在下圖③處點擊即可展開圖標面板。

astra header builder above menu 6

當添加完圖標後,你還可以設計它們的樣式,如下圖所示,切換到design標籤,然後你可以配置圖標的大小、圖標之間的間距、圖標與背景之間的間隙、圖標的圓角弧度、圖標和背景的顏色&鼠標懸停色。

astra header builder above menu 1

此外,在上圖的右下角,我們能看到三個圖標:電腦、平板、手機,請點擊平板或手機,在平板和手機上的header是獨立製作的,請自行製作一下哦。

安裝必要的外掛

此時網站還是缺少不少功能的,譬如詢盤表單、詢盤郵件通知等等,請在WordPress後台直接安裝下面這些免費外掛,相關教學:如何安裝wordpress外掛(3種方法),安裝完成後記得active激活他們。

  • Essential Addons for Elementor:Elementor的元素擴展包,包含了產品、文章、Ninjaforms表單等元素塊,Astra免費版和Elementor免費版都不提供這類元素塊,並且astra的網站模板裡是使用Woocommerce簡碼實現的產品展示,不利於我們設置。
  • Elementor – Header, Footer & Blocks:用它能用Elementor免費版製作網站的頁頭、頁腳,現在Astra的模板基本都用上文說過的、主題自帶的header和footer builder,如果你覺得主題自帶的不夠用,可以用這款外掛來製作。
  • Ninja forms:實現詢盤表單,如果你使用的是Elementor Pro,就不需要安裝它,直接用Elementor Pro的Form元素來製作詢盤表單,同時,在Elementor的後台菜單裡,有一個submissions菜單可用於查詢詢盤。
  • Post SMTP:實現詢盤郵件通知
  • Custom Product Tabs for WooCommerce:實現產品頁面詢盤表單標籤頁
  • Code snippets:可安裝功能短代碼,譬如:安裝google analytics跟踪代碼、更換站點管理員地址
  • Wordfence:實現網站安全防護
  • WPS Hide Login:自定義網站登錄地址,這個外掛裝完並激活後,後台的登錄地址會默認從/網域/wp-admin改為/網域/login

部分外掛此處未提及,在下文中介紹到對應功能,再安裝即可。下文我們會逐一介紹這些外掛的使用教學以及用處。

網站安全防護

外掛安裝完成後,按如下兩篇教學給網站增加安全防護。

修改聯繫我們頁面

本教學選的模板中缺少了聯繫表單,我們要將它補充完整,請按下面的教學逐步完成操作。

  1. 用Ninjaforms添加聯繫表單
  2. 創建免費的企業郵箱
  3. 用Post SMTP配置詢盤通知郵件和記錄郵件發送記錄

接下來,我們將表單放入到聯繫我們頁面中

在網站all pages頁面中,找到contact頁面,點擊edit with elementor。如果你的頁面下方找不到edit with elementor,那麼請直接點擊edit,進入後,點擊按鈕edit with elementor。

astra tutorial

在頁面左側的工具欄中,輸入ninja搜索,將圖中標記有EA的ninja forms元素塊,左鍵按住拖拽到右側頁面中的目標位置。 (如果你沒安裝Essential Addons for Elementor外掛,是看不到這個元素塊的,如果你安裝了還看不到元素塊,那麼,請繼續往下看)

astra tutorial

在wordpress後台找到essential addons菜單,來到elements菜單下,通過ctrl+f的頁面搜索技能,輸入ninja找到ninja form的元素,點擊它右邊的開關按鈕,然後回到頁面頂部點擊保存按鈕,這個元素就能在編輯頁面時找到了。通常這個功能的作用是為了提升頁面速度,因為用不到的元素,如果還擺在頁面的css、js中,無疑會增加頁面的體積,這也是速度優化的一項工作,部分優秀的外掛,能夠提供這個能力,當然,我也發現有些外掛提供了“表面上”的這個能力,雖然有開關,但是css並未做元素分離,也就是不論你開關與否,css的體積都不會受到影響。

essential enable element

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

astra tutorial

我們點擊頁面左下角的update的發布頁面,並預覽它,如下圖所示,表單已經成功顯示。

我們接下要修改表單的樣式,譬如:隱藏表單標題,修改字段標題的粗細,修改輸入框內部的顏色、修改提交按鈕的樣式。

astra tutorial

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

astra tutorial

隱藏Ninjaforms表格標題

我們依舊還在Elementor編輯聯繫我們頁面中,左鍵點選剛才在頁面中添加的ninja froms表單,如下圖所示,在左側的工具欄中,將Title開關關閉,保存一下頁面去預覽一下標題是否隱藏成功,如果失敗,那麼繼續下一步。

astra tutorial

去編輯這個Ninja forms,在Advanced – display settings中,將display form title關閉,保存表單後,再去預覽聯繫我們頁面,標題會成功隱藏。

astra tutorial

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

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

1.進入appearance 》 customize頁面

astra tutorial

2.點擊底部的additional css

astra tutorial

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

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

調整Ninjaforms字段輸入框的填充顏色

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

astra tutorial

調整Ninjaforms字段標題的粗細

astra tutorial 1 29

繼續,在Style標籤頁中,找到Lables設置字段標題的字體粗細(weight)為400,原來的字體比較粗,改為400會細一些。

調整Ninjaforms提交按鈕的樣式

繼續,在Style標籤頁中,找到submit button按鈕,開始設置

astra tutorial
  • 將寬度(width)設置為全寬,也就是寬度會鋪滿。
  • 在normal狀態下,將background color設置為你想要的顏色

繼續選擇hover標籤,設置鼠標懸停於按鈕時的文本顏色(text color)與按鈕背景顏色(background color)

astra tutorial 1 25
astra tutorial 1 26

此時,樣式修改已完成,我們預覽一下頁面,由於預覽時是在管理員已登錄狀態下查看到的樣子,並不是用戶真正看到的樣子,我們還需要更換一個瀏覽器或無痕狀態下去查看網頁是否如意,結果我便發現按鈕的異常,在管理員預覽模式下是正常的,而換個瀏覽器時,按鈕就變成了圓角,並且不是全寬。 (如下圖所示)

astra tutorial

於是,我又重新修改了一下按鈕的設置,如下圖所示,改完後保存、換個未登陸後台的瀏覽器查看,一切正常了。

astra tutorial 1 30
  • 將width改為custom,100%
  • 將border radius(按鈕的角半徑)改為0,這下就會變成直角。

添加博客頁面

這套網站模板缺少了博客頁面,博客頁面可以用於發布產品相關的知識文章、公司動態等,如果不想寫博客,emm,那網站收穫詢盤的可能性就低了許多,你看我們平常買一些大件,也會多方看評測、知識型文章,而這些文章就在潛移默化中決定著我們的購買意願。

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

用Elementor製作博客頁面

這個製作方法沒有側邊欄,如果你需要展示側邊欄,請用下文的第二種方法。

  1. 在後台,找到菜單pages》add new,點擊進入
  2. 輸入頁面標題Blog,點擊Edit with elementor
astra tutorial

為了保持設計的一致性,我們從about us頁面複製標題模塊到Blog中

請使用Elementor編輯about us頁面,如下圖所示,右鍵點選模塊,再點擊copy複製標題模塊

astra tutorial

然後回到Elementor編輯的博客頁面,右鍵粘貼(paste)這個模塊

astra tutorial 12

粘貼完成後,我們發現跟about頁面不一樣,用elementor編輯about頁面時,頂部未顯示導航,因為about頁面設置的是透明導航,我們也將blog頁面同樣設置一下。

astra tutorial

進入後台的all pages頁面,找到blog,點擊Edit。

astra tutorial

在右下角找到transparent header設置,選擇Enabled,然後update頁面即可。

astra tutorial

接下來繼續用Elementor編輯Blog頁面,你可以保存後刷新一下頁面,頂部的導航將消失,這表示透明導航生效了。

先修改一下標題,改為Blog,左鍵點選元素後,在左側工具欄中將出現這個元素的設置項,如下圖所示。

astra tutorial

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

astra tutorial

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

astra tutorial

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

下圖是我快速復制製作的9篇文章。

astra tutorial

然後我們繼續用Elementor編輯Blog頁面,刷新一下頁面獲取這9篇文章數據。

如下圖所示,這個文章元素有很多的配置項,我在下圖中用數字標註了常用配置項的對應關係。

astra tutorial

如果你要改文章日期的格式,你要在WordPress後台設置。

astra tutorial
astra tutorial

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

astra tutorial

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

最後我們調整一下文章元素塊的上下間距,在元素的advanced標籤頁設置margin top和bottom的數值,如下圖所示,記得鎖鏈圖標要解鎖,不然margin的每個值都是同一數值。

astra tutorial

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

astra blog elementor

相關教學:

用Astra默認的博客頁面

免費版的Astra也提供了基礎的博客頁面設置功能的

  1. 在後台,找到菜單pages》add new,點擊進入
  2. 輸入頁面標題Blog,然後直接發布保存
  3. 進入Setting》reading頁面,設置posts page為剛才添加的blog頁面(如下圖所示),然後保存即可。
astra tutorial 20 9 18 17 12 19

接下來我們去設置一下博客頁面,請進入appearance》astra options頁面

首先我們確認已經激活了Astra pro的授權

astra pro license

然後,激活所有astra pro的外觀配置。

activate all astra options

當激活astra pro外掛後,你可能會發現,在頁面的兩側有空隙,請進入appearance-customize-global-container頁面中,如下圖所示設置space outside body的left和right中的數值為0.

astra pro layout space

接下來,在astra options中找到blog layouts進入

astra tutorial 2020 09 18 15 17 57

進入後,我們能看到兩個選項,1.用於設置博客頁面和文章歸檔頁面的;2.用於設置博客詳情頁面。

astra tutorial

免費版和付費版的Astra的Blog配置功能不一樣,我們依次講解。

如果你使用的是免費版,將看到如下配置界面。

這是博客頁面的設置,請按圖配好,圖中的眼睛是內容顯示的開關,也可以拖拽內容進行排序

astra tutorial

這是博客詳情頁的配置,設置完成後記得點擊右上角的publish按鈕保存。

astra tutorial

如果你用的是付費版Astra,你將能看到更多的配置選項,下面提供一個配置示例。

astra blog setting
astra blog setting 2

設置完blog後,我們點擊左上角的箭頭,退回選擇single post進行設置單篇文章詳情

astra pro post setting
astra pro post setting 2

設置過程中,記得隨時點擊頂部的publish按鈕保存。

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

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

astra tutorial
astra tutorial

然後我們去設置sidebar的內容,進入appearance》widgets中,在wordpres 5.8版本之後, widgets的模樣發生了變化,不再是下圖的樣子,如果你跟我一樣不習慣新的樣子,那就安裝一個外掛:classic widgets,安裝後便可以變成下圖所示的界面了。找到main sidebar,如下圖所示,我們能看到裡頭有search(搜索)、recent post(最新文章)等內容了,你可以點擊內容右側的三角箭頭展開查看,對不必要的內容進行delete刪除。

astra tutorial

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

你還可以對側邊欄的內容進行拖拽排序。

astra tutorial

我們還需要設置一下博客頁面的麵包屑,這是SEO的基礎技術之一。

還是在appearance》customize頁面,找到breadcrumb,點擊進入,如下圖所示設置麵包屑的位置和不需要展示麵包屑的頁面。 (下圖中的after header視同after)

astra tutorial
astra tutorial
astra tutorial

針對Astra Pro,我們查看Blog頁面時,會發現內容上方的空隙高度有異,如下圖所示。

astra blog top space

我們按下圖所示調整,進入appearance-customize-global-container,進入design標籤頁,設置outside-container-spacing的top和bottom的數值為4,單位為EM,注意設置之前,點擊小鎖鏈解鎖。

astra blog top space 2

此外,還在這個設置頁面中,將inside container spacing也要設置一下

astra pro layout space 2

然後我們來看下博客頁面和博客詳情頁的樣子,我們做了免費版和付費版的對比。

astra blog page
Astra免費版:博客(列表)頁面
astra pro blog page
Astra付費版:博客(列表)頁面

astra post page
Astra免費版:博客詳情頁面
astra pro single post
Astra付費版:博客詳情頁

最後,記得將博客頁面添加到網站菜單中哦~

修改產品頁面

給產品頁面添加側邊欄

這個模板本身已經提供了產品列表和產品詳情頁,我們先參照博客側邊欄的配置方法,給產品列表頁與產品詳情頁添加右側側邊欄。

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

astra tutorial 2020 09 19 12 13 18

然後我們去設置sidebar的內容,如下圖所示,在appearance》widget中找到woocommerce sidebar和product sidebar,目前能看到裡頭沒有任何內容

astra tutorial 2020 09 19 12 14 20

我們在頁面左側的available widgets中找到產品相關的小工具(widget),將它添加進去就可以了。如下圖所示,點擊小工具的右側三角箭頭,在下拉選項中找到woocommerce sidebar或product sidebar,點選中它,然後點擊add widget,即可將這個小工具添加到對應的側邊欄中。

astra tutorial 2020 09 19 12 15 11

下圖是我加完小工具的側邊欄,分別是產品搜索、產品類目、產品標籤。

astra tutorial 2020 09 19 16 44 53

如果你想給產品頁面添加:點擊按鈕後從側邊滑入的側邊欄(如下圖所示,很適合小屏幕,譬如手機),那麼你需要購買Astra付費版

image 154

然後在astra option配置中開啟off canvas sidebar即可。

image 20 12 16 17 08 51

隱藏產品的價格和加入購物車按鈕

作為B2B企業獨立站,是不需要展示價格和加入購物車按鈕的,我們只需要在發布產品時不填寫價格即可,這樣加入購物車按鈕也不會出現。

給產品頁面添加詢盤表單標籤頁

目前產品頁面沒有詢盤聯繫表單,我們需要藉助外掛Custom Product Tabs for WooCommerce,先用它添加一個標籤頁,放入之前在Ninja forms製作的聯繫表單的短代碼(shortcode),然後在添加產品時加入這個標籤頁即可,具體操作步驟如下:

1.在網站後台找到custom product tabs菜單,進入後點擊add tab

astra tutorial 2020 09 19 16 54 10

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

astra tutorial 2020 09 19 16 56 28

然後我們去編輯一個示例的產品,給它添加這個詢盤標籤頁。

進入網站後台,在all products頁面任意選一個產品,點擊edit按鈕進入編輯

astra tutorial 2020 09 19 17 55 46

在編輯產品頁面時,滾動頁面到下圖所示位置,進入custom tabs標籤頁,點擊add a saved tab

astra tutorial 2020 09 19 17 56 15

然後選擇剛才添加的標籤頁即可。

astra tutorial 2020 09 19 17 57 09

如下圖所示,標籤頁已經成功加到這個產品裡了,我們在頁面右上方找到update按鈕,點它發布產品。

astra tutorial 2020 09 19 17 57 29

然後我們查看一下這個產品,能看到Enquiry詢盤標籤頁已經成功加入了。

astra tutorial 2020 09 19 17 58 42

如何修改詢盤提交按鈕的配色

你需要添加自定義CSS

1.進入appearance 》 customize頁面

astra tutorial

2.點擊底部的additional css

astra tutorial

3.在源代碼中找到按鈕的id,如下圖所示,我用的chrome瀏覽器,將鼠標放在按鈕上,右鍵鼠標後,在右鍵菜單裡找到inspect或檢查,點擊它可查看到按鈕的代碼。 <input id=”xxxx”,請將其中的xxxx記錄下來,譬如下圖中的是nf-field-4

image 85

請按如下規則組織代碼,代碼中/**/部分是註釋給你看的,你可以刪除它;將代碼添加到additional css中後,點擊右上角的publish按鈕即可。

#nf-field-4{ background:#333333;/*將#333333換成你需要的常態按鈕背景色*/ color: #ffffff;/*將#ffffff換成你需要的常態按鈕文字顏色*/ } #nf-field-4:hover{ background:#444444;/*將#444444換成你需要的按鈕懸停背景色*/ color: #ffffff;/*將#ffffff換成你需要的按鈕懸停文字顏色*/ }

emm(。•ˇ‸ˇ•。)這個外掛的免費版只能一個個給產品添加詢盤標籤頁,但咱們可以用複制產品功能省點力氣,所以不買付費版也是可以的,既然走免費這條路子,那就貫徹到底吧,如果想便利一些,那不如買個Elementor Pro,能夠自定義產品頁模板,靈活度更高。

去掉產品列表頁面的多餘麵包屑

由於上文中開啟了astra主題的麵包屑功能,但是它不能配置產品列表頁面是否展示麵包屑,如下圖所示,出現了兩個麵包屑,如果是Astra付費版的用戶,可以直接在appearance-customize-woocommerce-product catalog中將display breadcrumb關閉即可隱藏麵包屑。

hide woocommerce catalog breadcrumb astra

如果使用Astra免費版的用戶,可以用短代碼的方式,將woocommerce自帶的麵包屑去掉;

astra tutorial 2020 09 19 18 18 00
有個隱藏問題:頁面標題與導航上的標題不一樣啊!

此時我們要用到code snippets外掛,請先學習一下如何添加短代碼,然後添加一個新的短代碼去掉woocommerce產品列表頁自帶的麵包屑,代碼內容如下:

/** * 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 ); }

去掉產品詳情頁面的多餘麵包屑

產品詳情頁也多了一個麵包屑,但這個可以在後台配置,不需要添加短代碼。

astra tutorial 2020 09 19 18 18 33

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

astra tutorial 2020 09 19 18 27 27

修改產品首頁的標題和Slug

上文提到的隱藏問題:產品首頁的頁面標題和菜單裡的標題不一樣,那是因為在設置菜單時,是可以修改標題的;但頁面實際名稱還是Shop。

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

astra tutorial 2020 09 19 18 33 34

至此,一個滿足常規使用的產品頁面就完工啦,包括產品列表頁、產品詳情頁。

astra tutorial 2020 09 19 18 42 43
產品列表頁
astra tutorial 2020 09 19 18 43 13
產品詳情頁

細心的你可能發現我的頁面上是有product tags,而你那兒可能沒有,那你去修改一下幾個產品,在快速編輯或者編輯產品頁面的右側都能找到標籤,自己按需給產品添加標籤吧,但注意哦,不要跟分類重複了。

添加、編輯產品等產品管理功能

添加產品功能與添加博客文章的功能是類似的,我就不寫圖文教學了,附一個視頻教學吧。

修改頁面內容

請進入後台的all pages頁面,如下圖所示的情況,帶有elementor標記的,都可以用elementor編輯頁面,也就是能夠可視化編輯頁面內容。

astra tutorial 2020 09 19 18 55 04

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

你還可以看下方的Elementor編輯器的教學,了解更多細緻的操作。

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

編輯頁腳

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

給網站添加返回頂部按鈕

在免費版的Astra裡是不提供頁面上的返回頂部按鈕的,如果你購買了付費版,安裝Astra Pro外掛後,進入appearance》astra options界面,點擊圖中的activate all按鈕激活所有高級模塊就能啟用返回頂部按鈕了。

image 48

如果決定只用免費版Astra,那有如下兩種方法:

  1. 用Elementor製作WordPress網站的返回頂部按鈕(3分鐘解決),這個方法比下面的方法複雜一些, 但可以少裝一個外掛。
  2. 安裝外掛:WPFront Scroll Top,然後如下圖所示enabled啟用即可,你還可以自行配置按鈕的樣式。
astra tutorial 2020 09 20 13 12 13

給網站添加側邊懸浮聯繫按鈕(付費)

這是我自製的付費模板,能夠在全站右側添加懸浮的4個聯繫按鈕(按鈕你可以自行增減),詳細介紹請查看:網站右側邊懸浮聯繫按鈕

image 3

Astra主題設置常見功能介紹

在上文中我們已經介紹過主題設置的一部分功能,譬如側邊欄、麵包屑。接下來我們講解一些常用的Astra主題設置功能。

如何修改網站顏色?譬如正文顏色、按鈕顏色

在appearance》astra option頁面,點擊set colors進入

astra theme tutorial 2020 10 02 18 38 49

進入頁面後,點選base colors菜單進入配置頁面。

astra theme tutorial 2020 10 02 18 40 23

在base colors頁面,可以設置如下顏色:

astra theme tutorial
  • text color:文本顏色,作用於網站的正文內容
  • theme color:主題顏色,一般影響網站按鈕、選定文本時的背景顏色等等,如果按鈕有單獨設置配色,則不會受主題顏色影響
  • link color:鏈接顏色,通常作用於頁面中的文字鏈接,產品評價五星圖標、產品標籤頁切換、產品分類與標籤鏈接,對按鈕無影響,按鈕有單獨的設置
  • link hover color:鼠標懸停鏈接時的顏色
  • heading color(h1-h6):標題顏色
  • background color:網站背景顏色,可以響應式設置
  • background image:網站背景圖片,顏色會疊加圖片之上,如果同時選擇了顏色和圖片,那麼請將顏色設置一些透明效果,針對圖片,點擊more settings還可以設置圖片的佈局、重複、尺寸、位置。

如何設置文本的排版,譬如字體、字號、行距

使用Astra的全局文本排版設置,可以對全站的文本樣式進行自定義。需要注意的是,如果你在Elementor中設置了某些元素的文本樣式,那它將不會取用Astra主題中設置的文本樣式。

功能入口:請點擊菜單WordPress後台菜單:appearance》customize,進入後點擊global》typography。在Astra免費版中,提供瞭如下圖所示的兩項配置:基礎排版設置、標題設置。付費版Astra的配置功能更多一些。

astra theme tutorial

Base Typography 基礎排版

基礎排版設置可以影響到全站的文本默認樣式,當文本沒有設置自己的樣式時,就會取用默認設置。通常文章、產品詳情正文就使用這個默認樣式。

astra theme tutorial 1 5
  • Family 字體,提供了系統字體、Google字體可供選擇
  • Variants 變體,僅適用於google字體,設置變體類型可以便於你之後快速選擇字體樣式,這個功能不常用
  • Size 大小
  • Text Transform 文本轉換,包含:無、全部大寫、全部小寫、首字母小寫
  • Weight 文本粗細
  • Line Height 文本行高
  • Paragraph Margin Bottom 段落底部間距

當你在設置文本字體、字號、粗細等樣式時,右側界面中可及時預覽頁面效果,你還可以直接在頁麵點選需要預覽的頁面。

譬如下圖所示,我框選了兩處正文文本,也可以理解為基礎文本,他們會取用此處的基礎排版樣式。而另外兩處較大較粗的字體,是標題文本,標題文本通常比較突出,通常用在頁面標題以及頁面主要欄目標題。

astra theme tutorial 2020 10 02 18 49 52

Heading 標題排版

上文中提到的標題文本(heading),在WordPress中分為6種——H1-H6,數值越大,標題層級越深,H1通常是頁面的大標題。

astra theme tutorial
  • 針對H1-H6標題,可通配字體、變體、字體粗細、字體大小寫、行高
  • 針對H1-H3標題,可分別設置:字體、字號(可區分電腦、平板、手機設置,即響應式)、粗細、大小寫、行高;若是未設置,則會默認繼承通配設置與全局設置
  • 針對H4-H6,可區分電腦/平板/手機設置不同字號,若是未設置,則會默認繼承通配設置與全局設置

Astra主題如何設置頁面內容佈局

功能入口:請點擊菜單WordPress後台菜單:appearance》customize,進入後點擊global》container。

  • width 寬度,可以設置網頁正文區的寬度,通常保持默認1200px。
  • layout 佈局,可以設置網頁的佈局,佈局分為四種類型(下文有圖解):
    • boxed:網頁內容和側邊欄都在白盒子中,白盒子周圍是背景色
    • content boxed:只有內容在白盒子中
    • full width / contained:頁面全寬,背景被覆蓋,但內容和側邊欄依舊在盒子中
    • full width / stretched :頁面和正文全部被拉伸鋪滿,背景被覆蓋
astra zhuti jiaocheng
astra 主題boxed佈局
astra zhuti jiaocheng
astra 主題content boxed佈局
astra zhuti jiaocheng
astra 主題full width / contained佈局
astra zhuti jiaocheng
astra 主題full width / stretched佈局
astra theme tutorial

佈局可以針對頁面、博客詳情頁、歸檔列表頁、產品頁面分別設置

Astra主題如何設置按鈕樣式

功能入口:請點擊菜單WordPress後台菜單:appearance》customize,進入後點擊global》button。此處可以設置按鈕的:

  • color 顏色(常規背景色、常規文字顏色;懸停背景色、懸停文字顏色),
  • border 邊框顏色、粗細、半徑;
  • button text 按鈕上的文字的排版(大小、行高、粗細等);
  • padding 按鈕內間距:即文字與邊框的距離。
astra theme tutorial

Astra主題如何修改頁頭的樣式

功能入口:請點擊菜單WordPress後台菜單:appearance》customize,進入後點擊Header》Primary Header。

如下圖所示,我將頁頭佈局改為了上logo+下菜單佈局,一共有三種佈局,請按需調整。同時,還可以調整頁頭的寬度(width),它提供了content width(與內容寬度保持一致)和full width(全寬)選項。也能給頁頭添加底部邊框,設置粗細(bottom border size)以及顏色(bottom border color)。

astra theme tutorial 2020 10 02 19 06 24

此處的設置依舊是左側修改後,右側即時預覽,你可以逐一調整測試,不點擊右上角的Publish按鈕都不會生效。你也可以點擊publish按鈕旁邊的齒輪,它還提供保存草稿和定時發布的功能。

astra theme tutorial 2020 10 02 19 10 43

在左側頁面底部,還有設備圖標按鈕,點擊不同的圖標,在右側可以預覽不同設備上的網頁效果。

astra theme tutorial 2020 10 02 19 12 42

如何給導航中添加按鈕

在導入模板後,我們能看到導航的右側有一個購物圖標,你也可以將它更換為搜索圖標或按鈕。

功能入口:請點擊菜單WordPress後台菜單:appearance》customize,進入後點擊Header》Primary Menu。如下圖所示,可以在last item in menu中設置。

astra theme tutorial 2020 10 02 19 18 38

在last item in menu下方,還有兩個選項,你需要點擊左下角切換到平板或手機模式,然後試用它們,用於控制這個元素的顯示狀態與顯示位置。譬如下圖,我便將搜索按鈕收在了菜單內。

astra theme tutorial 2020 10 02 19 23 05

依舊在這個配置頁面,你還能找到子菜單樣式設置、移動端菜單按鈕的樣式設置。

網站內容髮布要點

至此,頁面修改就差不多告一段落了,接下來就是往網站上發產品、發博客,這些內容的發布有一些注意事項,我在另一篇基於Elementor Pro的架設網站教學中有詳細的描述,請點擊《架設B2B企業網站教學》前往查看。

站內SEO

請按照如下教學逐步操作

  1. 給網站安裝Google Analytics跟踪代碼
  2. 給網站開通Google Search Console
  3. 將Google Analytics關聯Google Search Console(GA4目前不能關聯,就先不關聯了)
  4. Rank Math SEO設置教學
  5. 你的網頁如何在Rank Math SEO的測試中得到100分

站點速度優化

我們需要用工具Gtmetrix測試站點的速度,並進行速度優化,盡量優化到加載時間在3S以內,優化教學請按如下子教學逐一實施

  1. 優化圖片,在上文中已經介紹了圖片的優化辦法,此教學中做了一些補充擴展
  2. 針對使用Siteground架設網站的情況,可以使用SG Optimizer加速網站,我實測後,發現效果不理想(優化前後差距很小),我覺著最好用易用的還是付費使用WP Rocket加速網站
  3. 刪除谷歌字體(2種簡單方法)
  4. 使用Flying Pages預加載網頁
  5. 實施CDN,每個主機的CDN不盡相同,大多用的是免費的Cloudflare。
    1. 如果在Siteground架設網站,請看:在Siteground給網站啟用Cloudflare CDN
    2. 如果使用Cloudways主機,請開通cloudflare cdn

開放收錄,站點上線

完成上述內容後,站點可上線,開放收錄吧、

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

wordpress%E5%BC%80%E6%94%BE%E6%94%B6%E5%BD%95

然後進入Google Search Console,提交站點地圖地址以助於加快收錄。

google-search-console中提交站點地圖

站點地圖地址可在Rank Math SEO中獲取

image 89

最後,如果你有難以解決的疑問,也可以留言或加我微信諮詢,若是教學中未包含的知識,我會根據讀者的反饋不斷補充~

常見問題答疑

根據讀者的諮詢,我將一些細節問題及答案補充如下

如何隱藏產品列表頁的排序功能

通過添加自定義css.woocommerce-ordering{display:none}

image 58

1.進入appearance 》 customize頁面

astra tutorial

2.點擊底部的additional css

astra tutorial

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

.woocommerce-ordering{display:none}

如何在首頁展示我想要的產品

使用Elementor編輯首頁,將產品模塊替換成新的元素Product Grid(EA)

之前我們安裝的Essential Addons for Elementor外掛中,提供了Product Grid(EA)元素,使用它替換首頁中已有的產品元素。

image 31

在Product Grid中,如下圖所示,在Product setting中,按你的需要調整Filter By,以及Order(排序)規則、並且可以指定產品所屬的目錄(product categories)

image 32

其中,作為B2B站點,只有Rencent Products和Featured Products我們能用上。 Rencent Products表示最新產品,Featured Products表示星標產品,在後台產品管理頁面,將產品的星星點一下變實心就表示星標了。

image 33

備註:Best selling products表示熱賣產品;sale products表示促銷產品;top rated products表示最高評價產品;對於B2B站而言,不涉及銷售,也就用不上這三個選項了。


如何製作首頁的輪播廣告(banner)

免費的Elementor不提供Slider功能,請安裝外掛Premium Addons for Elementor,它是Elementor的元素擴展外掛,使用它的carousel widget可以實現輪播廣告功能。

安裝並激活外掛Premium Addons for Elementor之後,請先創建banner的內容,如下圖所示,在templates中add new,模板類型一般選擇setion。

image 48

進入頁面後,你將能看到Premium Addons for Elementor提供的模板入口(五角星),點擊它你可以查看一些現成的模板,免費的可以直接導入,標記pro的需要付費。

image 49

如下圖所示,我導入了一個banner

image 50

插入完成後,你可以按需修改內容素材,完成後點擊左下角的publish按鈕發布。

image 51

接下來用相同的辦法創建第二個banner,你也可以不導入模板,自製一個banner,譬如最簡單的是直接用image圖片元素

image 52

記得將圖片尺寸設置為full,將link 設置為custom url,然後輸入圖片需要鏈接的頁面。

image 53

接下來用Elementor編輯需要添加banner 的頁面,總左側元素庫找到premium carousel,將它拖拽到右側頁面中

image 54

然後按下圖所示,選擇template為剛才製作的兩個banner。

image 55

上圖中我們能看到banner兩側有空白,我們如下圖所示,選擇banner所在的setion,然後在左側的style中,將content width從box設置為full,這下banner兩側就沒有空白了,但是四周還有細小的間隙,請繼續往下看。

image 56

如下圖所示操作,點選banner所在的column,然後在advanced標籤頁中,找到padding並設置為0,可以去掉banner周圍的白色縫隙。

image 57

外掛要設置成自動更新嗎?

不建議設置為自動更新,因為外掛更新還是可能會出錯的,建議1~3個月手動更新一次,更新前記得備份網站,除了主機的備份以外,還可以用updraftplus備份,直接在wordpress後台備份,方便後續恢復,如果更新出錯,還可以用備份進行還原。

為什麼產品首頁不能用Elementor編輯

當你用Elementor編輯SHOP或products頁面時,出現下方圖一的錯誤,那是因為這個頁面在Woocommerce的設置中被選為商店頁面(見下方圖二),並且在頁面管理中,也能看到它被標記為商店頁面(見下方圖三),此時,便不能用Elementor編輯,它是自動調用主題的模板的,如果你非要用Elementor編輯它,請先在Woocommerce的設置中,取消該頁面作為商店頁面。

image 88
圖一
image 86
圖二
image 87
圖三

為什麼我修改了頁面標題,但在菜單中還是修改前的?

這很可能是因為:這個頁面在菜單中的標題被修改了,請前往appearance>menu中查看和修改,如果你想將菜單的頁面標題與頁面本身標題保持一致,請重新添加這個菜單項,不要人工添加自定義鏈接,直接選擇頁面並點擊添加到菜單按鈕。切記:如果你在菜單中修改了頁面的標題,那麼它將不會同步你在頁面管理中設置的標題。
推薦閱讀:如何在WordPress中製作菜單

為什麼我的產品首頁沒有展示產品呢?

大概率是的產品首頁未被設置為商店頁面。請在woocommerce的設置》常規中,按下圖所示方式配置。

此圖像的alt屬性為空;文件名為image-86.png

菜單裡的購物車圖標沒對齊,怎麼辦?

原因是在設置菜單最後一項圖標時,選中了Take Last Item Outside Menu,如下圖所示,去掉勾選即可恢復。

image 48

點贊
0 / 5 4.93

Your page rank:

20 回复

  1. 你好,博主,你的文章对我们很有用。

    请请问一下,有没有用astra pro和elementor pro建站的教程呀

    谢谢

    1. 也可以邮件或微信告诉我你对标的网站是如何的?想要做的功能是如何的,我可以综合到教程里。~

  2. 你好,请问在产品详情页里,如何添加表格?(产品的详细参数)

    1. 方法1:在excel里制作表格,将表格内容复制并黏贴到产品描述中
      方法2:使用tablepress等表格类插件。

    1. 512是wordpress官方提供的建议尺寸,因为不仅考虑到要在浏览器页卡上展示,也考虑到了在手机浏览器上将网站存入桌面时的图标尺寸(虽然这种场景用到的很少)

  3. 感谢分享,内容很有用。
    有一个问题,你在产品页中插入的是联系表单,但是如果我想要插入一个“call to action”的按钮呢?会不会有什么插件可以实现?

    1. 你可以看下我用el pro做的astra主题的产品详情https://b2bdemo1.loyseo.com/product/product-name-06/,元素风格还是一致的

  4. 您好,跟着您的教程学了好多东西,首先感谢!有一个问题,商店页面放到了PRODUCTS菜单下,开启ASTRA主题面包屑功能后,商店首页的面包屑是Home/products/products, 请问这里为什么多一个products? 另一个问题, 商店页面的showing all 5 results,这句话能删掉吗? 感谢!

    1. 开启ASTRA主题面包屑功能后,商店首页的面包屑是Home/products/products —— 你自己设置的问题,Products只应该是一个独立的页面,而不是某个页面的子页面;
      showing all 5 results —— astra pro(付费版)能实现,如果我没记错的话,在外观-自定义中找woocommerce的配置项下的产品列表的配置项

      1. 太谢谢您了! 问题全都解决了!感谢您的帮助,希望您的生意越来越好!

      2. 您好,最近我又发现一个问题,想请教您一下! 访问我的官网的时候,鼠标悬停在主页的任何一张图片上的时候,都会显示出来图片上传时的名字, 其他页面的图片不这样。 这个效果能关闭吗? 谢谢!

        1. 正确的做法是给图片设置正确的alt的内容,而不是取消这个功能。

評論被關閉。

超快獨享主機
Cloudways
免費試用3天,無需充值
費用月結| 不用一次性付整年
*註冊優惠碼Promo code:LOYSEO
*用Gmail郵箱,註冊易通過