专注于外贸建站,分享WordPress教程和Elementor教程

如何用Astra主题制作B2B外贸网站

更新日期:2021-09-21
Share on facebook
Share on twitter
Share on linkedin

本文全篇17000+字,一步步讲解如何用Astra主题免费版制作B2B外贸网站。除了域名主机,本文所选的WordPress主题插件通通是免费版,零经验的你也能建个靠谱的外贸网站,只要肯花点时间照着步骤做就能行~

本文我选用的Astra主题,速度快、质量有保证,配套的功能插件也都是选择了用户多、评价好的插件,对起步阶段的外贸Soho自建站很有帮助~

如果你缺少自学建站的时间,可查看我提供的外贸建站服务,还可以购买我制作的外贸网站套装,开箱即用。

建站要花多少钱?

  • 域名费用:60元左右/年
  • 主机费用:800元左右/年
  • 主题费用:0
  • 插件费用:0
  • 教程费用:0

选购域名和主机

在用Astra主题建外贸独立站之前,先按照如下步骤逐一操作,点击链接可以查看对应教程。

  1. 注册域名(点击文案链接就可以查看注册域名教程了)

来自站长Bonnie的话:

当你在我的网站点击主机购买链接,并成功购买后,主机商会给我一些佣金报酬,但这不会影响你的购买价格,同时,我也只推荐我测评使用的主机,且效果不理想的也会在文中标注出来。


推荐自用的Cloudways(需翻墙注册),速度快、10美金套餐就够用了、并且是按月计费,不需要年付,仅仅是注册略微麻烦一些

2021/5/17更新:我自己在不断使用、物色主机,这篇文章是2020年7月份发布的,当时用的是以SiteGround主机为例进行讲解,如果想了解更多我对比使用过的主机,请查看这篇主机清单

相关文章:

下方主机方面的教程介绍的是SiteGround。

我将位于Siteground新加坡节点的模板站用fastorslow进行测速,结果如下。

image-181
image 175 - Cloudways主机评测、建站教程、优惠券
下面开始是视频配套图文的教程,鉴于有部分新手读者,对于图文教程中的细节操作存在理解上的困难,所以我配合图文录制了操作视频(无音频),下方的这个视频内容包含:“Siteground创建WordPress网站”到“添加博客页面”。其中,使用Ninjaforms制作表单功能,本站相关文章已经配有视频,就不再此视频中重复录制了。
  1. 买完主机后,去主机上安装WordPress和SSL证书,教程如下
    1. Siteground主机
      1. 如何在Siteground中创建Wordpress网站
      2. 如何在Siteground中给WordPress网站安装SSL证书
  2. WordPress安装完成后,你可以用账号密码登录网站后台,这里还有登录网站后台的4种方法
  3. 安装完SSL后,还需要检查下url是否都改为了https,请看:将网站中的http改为https(2种方法)
  4. 在网站完成以前,设置“建议搜索引擎不收录”

好啦~接下来我们便可以开始安装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免费版依旧提供了50+套免费的网站模板(真良心!),网站模板里会包含一个网站常用的必要页面。

进入Appearance 》 Astra option页面,找到右侧的install importer plugin,点它安装导入模板的插件

astra tutorial

安装完成后,我们将看到如下界面,让我们选择网站模板的页面编辑器,这里我们选择Elementor,因为它是时下最热门最好用的Wordpress page builder(页面编辑器)。

astra tutorial

接下来我们看到了模板列表,筛选出免费的模板列表,请根据你的喜好选择模板,我们以下图中的organic store为讲解示例,这是一个电商的网站模板,我们会将它改造为B2B的网站。

astra tutorial

选中模板后,我们可以去预览一下,也可以直接点击import complete site按钮导入所有页面及内容

astra tutorial

在导入设置中,默认会自动安装必要的插件,你可以不导入样式设置(customizer setting)、widgets(小工具,通常用于侧边栏)、content(内容,譬如文章、产品),但对新手而言,我的建议是保持默认设置,点击Import。

若是你想更换模板,为了不引起内容混乱,再次导入时,记得勾选下图中的delete previously imported site,以便删除已有模板的内容和设置。

astra tutorial

接下来我们静静等待网站导入,不要关闭页面,导入完成后将看到下图。

若是导入失败,系统会给与原因提示及解决办法。

若是导入成功,但网站依旧不是模板的样子,那么请二次导入试一试。

此外,部分服务器(譬如WPXhosting)因为安全策略原因,不允许做导入动作,或是导入完成后,依旧还是导入前的老样子,此时,你就需要联系主机商的客服来解决了。

astra tutorial

导入完成后,我们查看一下网站,大功告成。

astra tutorial

由于过多的插件会影响网站的速度和安全,所以用不上的插件就禁用并删除掉。见下图标红的插件:

  • CartFlows和Woocommerce Cart abandonment recovery插件是随模板安装的B2C所需的插件,如果你是制作B2B外贸网站,可以将他们禁用后删除。
  • Starter Templates是导入网站模板时用到的,如果你不需要再导入模板了,也将它禁用并删除。
astra tutorial

设置网站Logo、Icon、名称

网站模板导入完成后,我们开始设置网站的logo、icon(显示在浏览器页卡中的小图标)、网站名称(site title)及标语(tagline)。

如下图所示,在appearance 》 astra option页面中,点击upload logo进入

astra tutorial
astra tutorial

进入后将看到左图,我们依次:

  1. 上传logo,最好用透明的png格式图片,不超过20K。
  2. 设置logo的宽度,在图中我们能看到一个小电脑图标,点击它可以切换到平板、手机设备上的logo宽度设置
  3. 上传网站图标,要求正方形512px,体积尽量小,譬如5K左右
astra tutorial

我们继续设置网站的标题和标语

网站标题一般会展示在每个页面的标题中,而tagline一般展示在首页的页面标题中。

当你打开网站,把鼠标放在浏览器标签页中时,就能看到它们,具体如下图所示。

astra tutorial
  • 1是之前上传的site icon
  • 2是网站名称(site title)
  • 3是tagline

相关教程:WordPress安装后必须要做的10件事

修改菜单

相关教程:如何在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: <a href="mailto:[email protected]">[email protected]</a>
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免费版制作网站的页头、页脚,这个插件在导入模板时已经自动安装了
  • Ninja forms:实现询盘表单,如果你使用的是Elementor Pro,就不需要安装它,直接用Elementor Pro的Form元素来制作询盘表单,同时,在Elementor的后台菜单里,有一个submissions菜单可用于查询询盘。
  • Post SMTP:实现询盘邮件通知
  • Custom Product Tabs for WooCommerce:实现产品页面询盘表单标签页
  • Code snippets:可安装功能短代码,譬如:安装google analytics跟踪代码、更换站点管理员地址
  • Wordfence:实现网站安全防护
  • WPS Hide Login:自定义网站登录地址

部分插件此处未提及,在下文中介绍到对应功能,再安装即可。下文我们会逐一介绍这些插件的使用教程以及用处。

网站安全防护

插件安装完成后,按如下两篇教程给网站增加安全防护。

修改联系我们页面

本教程选的模板中缺少了联系表单,我们要将它补充完整,请按下面的教程逐步完成操作。

  1. 用Ninjaforms添加联系表单
  2. 创建免费的企业邮箱
  3. 用Post SMTP配置询盘通知邮件和记录邮件发送记录

接下来,我们将表单放入到联系我们页面中

在网站all pages页面中,找到contact页面,点击edit with elementor。

astra tutorial

在页面左侧的工具栏中,输入ninja搜索,将图中标记有EA的ninja forms元素块,左键按住拖拽到右侧页面中的目标位置。(如果你没安装Essential Addons for Elementor插件,是看不到这个元素块的)

astra tutorial

然后在左侧选择之前制作的表单,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页面的blog layouts进入

astra tutorial 2020 09 18 15 17 57

进入后,我们能看到两个选项,1.用于设置博客页面和文章归档页面的;2.用于设置博客详情页面。

astra tutorial
astra tutorial

这是博客页面的设置,请按图配好,图中的眼睛是内容显示的开关,也可以拖拽内容进行排序

astra tutorial

这是博客详情页的配置,设置完成后记得点击右上角的publish按钮保存。

接下来我们再去设置一下博客页面和博客详情页面的侧边栏,侧边栏一般放博客的分类、搜索框、最新博客文章等等,方便用户使用。

我们依旧在appearance》customize页面,找到sidebar,点击进入,在Blog posts和archives栏,都选择Right sidebar,这表示侧边栏将展示在页面右侧。然后点击publish保存。

astra tutorial
astra tutorial

然后我们去设置sidebar的内容,在appearance》widgets中找到main sidebar,如下图所示,我们能看到里头有search(搜索)、recent post(最新文章)等内容了,你可以点击内容右侧的三角箭头展开查看,对不必要的内容进行delete删除。在wordpres 5.8版本之后, widgets的模样发生了变化,不再是下图的样子,如果你不习惯新的样子,那就安装一个插件:classic widgets,安装后便可以变成下图所示的界面了。

astra tutorial

譬如Meta通常是不必要的,里头会放置网站的登录地址等功能入口。一般情况下,要保留的内容是搜索、分类、最新文章,是否保留最新评论,看你的需求,譬如你的网站没开放评论,那么也就不必要放这个模块了。

你还可以对侧边栏的内容进行拖拽排序。

astra tutorial

我们还需要设置一下博客页面的面包屑,这是SEO的基础技术之一。

还是在appearance》customize页面,找到breadcrumb,点击进入,如下图所示设置位置和不需要展示面包屑的页面。

astra tutorial
astra tutorial
astra tutorial

然后我们来看下博客页面和博客详情页的样子。

astra blog page
博客(列表)页面
astra post page
博客详情页面

记得将博客页面添加到网站菜单中哦~

修改产品页面

给产品页面添加侧边栏

这个模板本身已经提供了产品列表和产品详情页,我们先参照博客侧边栏的配置方法,给产品列表页与产品详情页添加右侧侧边栏。

我们依旧在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主题的面包屑功能,但是它不能配置产品列表页面是否展示面包屑,如下图所示,出现了两个面包屑,于是我们用短代码的方式,将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.91

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的内容,而不是取消这个功能。

评论被关闭。

相关 教程

我自用的 建站资源

当你点击本站的链接购买主机、主题、插件,我会得到一些佣金用于运营网站,但不会影响你的购买价格,我只推荐自己在用的,感谢有你的支持~比心( •̀ ω •́ )y

Namesilo

注册域名,购买时使用优惠券loyseo可减1美元
前往注册→

Cloudways

速度快、续费不涨价的优质主机
了解详情→

elementor logo gradient 01 1
Elementor

最热门的网页可视化设计编辑器,我的网站就是用它建的
了解详情→

Astra

易用又轻快的WordPress主题,含超多免费模板
了解详情→

Copyright © LOYSEO.COM