外贸建站教程:如何用Astra主题免费建外贸网站

时间:2022-01-10 来源:未知网络 作者:996建站网

超详细10000+字的外贸建站教程,图文、视频兼备。除了域名和主机,WordPress主题、插件通通是免费版,零经验的你也能建个靠谱的外贸网站,只要肯花点时间照着步骤做就能行~我选用了大牌的Astra主题,速度快、质量有保证,配套的功能插件也都是选择了用户多、评价好的插件,对起步阶段的Soho外贸人很有帮助~

原文首发地址:loyseo.com/create-busin

花了一周码字,对你有用的话,还请点赞、喜欢、收藏三连击哟~(比心

外贸建站教程:如何用Astra主题免费建外贸网站插图

本教程的外贸建站要花多少钱?

  • 域名费用:20~30元/首年,次年起50-60元/年
  • 主机费用:400~900/年
  • 主题费用:0
  • 插件费用:0
  • 教程费用:0

建站基础 – 选购域名和主机

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

  1. 注册域名
  2. 购买WordPress托管主机,详见主机价格与配套一览对比。
    1. 购买Siteground的WordPress主机的注意事项 ——大品牌,可信用卡/paypal支付
    2. 购买GreenGeeks的Wordpress主机的注意事项 —— 价格在三者中最便宜,但只支持信用卡支付
    3. ChemiCloud主机测评、选购要点、建外贸网站教程 —— 价格在三者中是第二,可信用卡/paypal支付,它家不定期有优惠券(coupon),可以在买之前联系在线客服要一下最新优惠券哦~能要到优惠券的话,价格与GreenGeeks差不多。

Siteground是WordPress官方推荐主机之一,品牌和用户规模比GreenGeeks、ChemiCloud大,他们的五星好评都是90%+。

具体选谁?看你的预算啦,我一般选购1-2年,主机续费一般也会有一些优惠政策。

注:还有一些其他主机,譬如hostgator(用户评分2.5)、hostinger(用户评分4.3)、bluehost(用户评分1.6),因为评价不达4.5被淘汰了,Dreamhost、Kinsta、WPXhosting等因为价格比较贵也不推荐了。(Dreamhost有便宜的套餐,但速度性能不过关,做PBN倒是合适,做外贸网站就不合适了)。

最后,值得一提的是,Chemicloud和GreenGeeks比Siteground在网站速度评测时还略胜一筹。

下面是GreenGeeks与Siteground的实测数据对比,我用本站的B2B外贸模板站,分别在siteground和greengeeks上进行了部署,在未开启CDN的情况下,使用fastorslow进行了全球多节点多次测评,结果如下图:

Chemicloud测试结果

外贸建站教程:如何用Astra主题免费建外贸网站插图

GreenGeeks测试结果

外贸建站教程:如何用Astra主题免费建外贸网站插图

Siteground测试结果

外贸建站教程:如何用Astra主题免费建外贸网站插图

前往Siteground
前往GreenGeeks
前往ChemiCloud

买完主机后,去主机上安装WordPress和SSL证书,教程如下

  1. Siteground主机
    1. 如何在Siteground中创建Wordpress网站
    2. 如何在Siteground中给WordPress网站安装SSL证书

  1. GreenGeeks主机
    1. 如何在GreenGeeks创建WordPress网站
    2. 如何在GreenGeeks中给Wordpress网站安装SSL证书
    3. 如何在GreenGeeks给网站开启Cloudflare CDN

  1. ChemiCloud主机测评、选购要点、建外贸网站教程

  1. WordPress安装完成后,你可以用账号密码登录网站后台,这里还有登录网站后台的4种方法
  2. 安装完SSL后,还需要检查下url是否都改为了https,请看:将网站中的http改为https(2种方法)
  3. 在网站完成以前,设置“建议搜索引擎不收录”。

好啦~接下来我们便可以开始安装Astra主题,开始捣鼓网页啦~

安装Astra主题免费版

Astra主题是知名的轻量主题,也就是说它的体积小、网站打开会比较快。网站打开速度慢,用户就都溜了溜了~

1.进入WordPress后台的Appearance 》themes页面,点击Add New按钮

外贸建站教程:如何用Astra主题免费建外贸网站插图

2.在添加主题页面中,搜索Astra,找到对应主题后,点击Install按钮

外贸建站教程:如何用Astra主题免费建外贸网站插图

3.安装完astra后,点击Activate激活主题,接下来我们导入网站模板

外贸建站教程:如何用Astra主题免费建外贸网站插图

相关教程:如何安装wordpress主题(3种方法)

Astra免费版主题如何一键导入网站模板

Astra免费版依旧提供了50+套免费的网站模板(真良心!),网站模板里会包含一个网站常用的必要页面。

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

外贸建站教程:如何用Astra主题免费建外贸网站插图

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

外贸建站教程:如何用Astra主题免费建外贸网站插图

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

外贸建站教程:如何用Astra主题免费建外贸网站插图1

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

外贸建站教程:如何用Astra主题免费建外贸网站插图1

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

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

外贸建站教程:如何用Astra主题免费建外贸网站插图1

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

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

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

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

外贸建站教程:如何用Astra主题免费建外贸网站插图1

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

外贸建站教程:如何用Astra主题免费建外贸网站插图2

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

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

外贸建站教程:如何用Astra主题免费建外贸网站插图2

设置网站Logo、Icon、名称

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

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

外贸建站教程:如何用Astra主题免费建外贸网站插图2

外贸建站教程:如何用Astra主题免费建外贸网站插图2

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

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

外贸建站教程:如何用Astra主题免费建外贸网站插图2

我们继续设置网站的标题和标语
网站标题一般会展示在每个页面的标题中,而tagline一般展示在首页的页面标题中。
当你打开网站,把鼠标放在浏览器标签页中时,就能看到它们,具体如下图所示。

外贸建站教程:如何用Astra主题免费建外贸网站插图2

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

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

修改导航菜单

相关教程:如何在WordPress中制作导航菜单(7个功能点),你可以按照这个片教程给菜单内容进行增加、修改、删除、排序。

去掉菜单中的无用页面

去掉我们用不上的页面,譬如下图中的Account、My account、Cart。

外贸建站教程:如何用Astra主题免费建外贸网站插图2

去掉购物车图标

进入Appearance 》Customize 》 Header 》 Primary menu页面中,将last item in menu从woocommerce(购物图标)设置为seach(搜索图标)。

外贸建站教程:如何用Astra主题免费建外贸网站插图2

外贸建站教程:如何用Astra主题免费建外贸网站插图2

安装必要的插件

此时网站还是缺少不少功能的,譬如询盘表单、询盘邮件通知等等,请在WordPress后台直接安装这些免费插件,相关教程:如何安装wordpress插件(3种方法),安装完成后记得active激活他们。

  • Essential Addons for Elementor:Elementor的元素扩展包,包含了产品、文章、Ninjaforms表单等元素块,Astra免费版和Elementor免费版都不提供这类元素块,网站模板里是使用Woocommerce简码实现的产品展示,不利于我们设置。
  • Elementor – Header, Footer & Blocks:用它能用Elementor免费版制作网站的页头、页脚,这个插件在导入模板时已经自动安装了
  • Ninja forms:实现询盘表单
  • Post SMTP:实现询盘邮件通知
  • Custom Product Tabs for WooCommerce:实现产品页面询盘表单标签页
  • Code snippets:可安装功能短代码,譬如:安装google analytics跟踪代码、更换站点管理员地址
  • Wordfence:实现网站安全防护
  • WPS Hide Login:自定义网站登录地址

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

网站安全防护

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

  • WordPress网站安全防护:Wordfence Security插件下载与教程
  • 修改Wordpress登录地址:WPS Hide Login插件下载与教程

修改联系我们页面

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

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

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

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

外贸建站教程:如何用Astra主题免费建外贸网站插图2

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

外贸建站教程:如何用Astra主题免费建外贸网站插图2

然后在左侧选择之前制作的表单,Ninja forms元素块在Elementor中编辑时会出现一直在加载的情况,我目前也还没找到解决方案,但实际他在前台是能够正常显示的,所以此问题暂时搁置。

外贸建站教程:如何用Astra主题免费建外贸网站插图2

我们点击页面左下角的update的发布页面,并预览它,如下图所示,表单已经成功显示。

我们接下要修改表单的样式,譬如:隐藏表单标题,修改字段标题的粗细,修改输入框内部的颜色、修改提交按钮的样式。

外贸建站教程:如何用Astra主题免费建外贸网站插图2

表单样式修改完之后是下图所示效果,接下来我们逐一操作。

外贸建站教程:如何用Astra主题免费建外贸网站插图2

隐藏Ninjaforms表格标题

我们依旧还在Elementor编辑联系我们页面中,左键点选刚才在页面中添加的ninja froms表单,如下图所示,在左侧的工具栏中,将Title开关关闭,保存一下页面去预览一下标题是否隐藏成功,如果失败,那么继续下一步。

外贸建站教程:如何用Astra主题免费建外贸网站插图2

去编辑这个Ninja forms,在Advanced – display settings中,将display form title关闭,保存表单后,再去预览联系我们页面,标题会成功隐藏。

外贸建站教程:如何用Astra主题免费建外贸网站插图2

隐藏Ninjaforms表单的标*字段必填的提示文案

在表单标题的下方有一段话:“Fields marked with an * are required”,这个可以说是常识了,无需赘述,所以我们将这段话隐藏,需要用到自定义CSS功能。

1.进入appearance 》 customize页面

外贸建站教程:如何用Astra主题免费建外贸网站插图2

2.点击底部的additional css

外贸建站教程:如何用Astra主题免费建外贸网站插图2

3.添加如下代码后,点击右上角的publish按钮即可。

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

外贸建站教程:如何用Astra主题免费建外贸网站插图3

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序