Astra主题教程:外贸独立站建站最受欢迎的主题模板

    wordpress astra b2b

    本篇Astra主题教程,我将手把手教你使用 Astra 主题搭建WordPress外贸网站,内容涵盖外贸建站的方方面面,下面是完整教程指南,0基础也能学会。

    接下来,我就详细介绍Astra主题建站流程,请大家请按照我的建站步骤一步一步操作。

    Astra主题简介

    wpastra

    Astra 是一个高度可定制的 WordPress 主题,适用于个人博客、外贸建站和自建跨境电商网站 。它预先配置 WordPress 建站所需的模板和插件,即便你不是专业人士,可以快速搭建出一个像样的网站。

    近几年,WordPress外贸建站非常流行。但有一个奇怪的现象,很多建站新手为了省钱,去使用一些来路不明的破解主题模板,甚至还有人愿意花钱去购买所谓的汉化主题......

    哎,如果你真想白嫖,不如使用今天介绍的 Astra 免费版。

    它自带汉化,能完美兼容 Elementor 可视化页面编辑器,功能方面仅次于 Avada 付费主题,有上百个模板可以一键导入、拼接、修改,简直就是白嫖党的福音。

    1、选择最好的域名和主机

    域名和主机是外贸建站的第一步,任何一个网站都不能例外。域名是网站的入口地址,也是网站的品牌名称,比如 baidu.com。主机是安装网站系统、存放网站内容的地方。

    域名,我们推荐在 NameSilo 上注册购买。它是目前性价比最高的国外域名注册商,有免费的域名隐私保护和支付宝付款,安全可靠。相关教程请阅读 NameSilo 域名购买

    NameSilo

    国外域名注册商,免费送域名隐私保护,支付宝付款。

    直达官网 »

    注册域名时,记住 com 后缀是首选,名称越短越好,这样才容易被人记住。如果你想不出好的名称,请使用品牌名,或者品牌名 + 产品词的组合,比如 abcmachines.com。

    主机,我们推荐在 ChemiCloud 上注册购买。它是目前性价比最高的外贸建站主机,有一个顶配的 cPanel 面板,性能好、功能全、速度快,并且在安全方面也有一定的优势。

    ChemiCloud

    免费送SSL证书、CDN、每日备份、企业邮箱,网站搬家。

    直达官网 »

    购买主机时,记住要自己输入优惠码 DX75 才能享受 75% 优惠折扣。折算下来最便宜方案不到 50 美元/年,买三年只要89美元,相关教程请阅读 ChemiCloud 主机购买

    chemicloud new york

    顺便说下,ChemiCloud 有一个免费的网站搬家服务,可以把网站从以前的主机迁移出来。搬家期间你的网站不会受到任何影响,非常适合想换主机但又不会换的新手使用。

    2、一键安装 WordPress

    WordPress 是目前最好的外贸建站系统,域名和主机购买好之后,下一步就是安装它。首先登陆 ChemiCloud 后台,然后进入 cPanel 面板,点击 WordPress 一键安装按钮。

    chemicloud cpanel

    cpanel wordpress button

    按照下图,自行设置 WordPress 登陆名和登陆密码,选择 http://www 前缀,禁用 WPMU 和 Cron,勾选安装 Loginizer 插件(防后台暴力破解),然后点击 Install。

    安装wordpress

    到这,WordPress 就安装好了。但此时网站是无法打开的,因为还有一个设置没做,那就是绑定域名和主机,也叫域名解析,设置好才能打开主机上面的网站内容。

    域名解析,首先去 ChemiCloud 后台找到主机地址,有三条:ns1.serverhostgroup.com,ns2.serverhostgroup.com,ns3.serverhostgroup.com,如下图所示。

    chemicloud主机地址

    然后,进入 NameSilo 域名后台 ,找到 NameServers,把域名的默认地址替换成主机的。

    namesilo account domain

    nameservers

    chemicloud ns

    接下来,等待域名解析生效。等待期间可以使用 whatsmydns 查询域名解析是否生效,大概需要半个小时,生效后才能开通 https,正常打开网站,登陆网站后台。

    说到 https,它是一个网站安全标示,建议在正式建站之前就开通它。开通流程如下图所示,首先,点击 cPanel 控制面板里的扳手按钮,免费一键安装 SSL 证书。

    chemicloud ssl

    chemicloud run autossl

    然后,点击 cPanel 控制面板里的 Domains 图标,打开始终显示 https 的按钮。

    Force HTTPS Redirect

    3、安装 Astra 主题模板

    WordPress 安装好,下一步是登陆 WordPress 后台安装 Astra 主题。WordPress 的默认登陆地址是:你的域名.com/wp-admin,打开后输入安装时自己填写的用户名和密码。

    wordpress 登陆地址

    第一次登陆 WordPress 后台,有几个选项必须要先设置。首先,关闭搜索引擎收录,等网站建完再开启,这样做的目的是有利于外贸网站的 SEO 优化。

    Discourage search engines from indexing this site

    然后,把 WordPress 设置成前端显示英文,后台显示中文。这样做既方便了国外客户访问网站时,不会看到中文。又方便了自己建站操作时,对每一个后台选项都很容易理解。

    wordpress 语言设置1

    wordpress语言设置2

    wordpress语言设置3

    接下来,开始安装 Astra 主题模板。在 WordPress 菜单栏找到主题选项,点击安装主题,然后搜素 Astra 并一键安装启用。

    安装wordpress主题

    安装astra主题

    如果遇到 Astra 主题启用失败,可以返回主题选项,再次点击启用 Astra 主题。

    启用astra主题

    Astra 主题启用后,接下来去“Astra 选项”安装配套的 Starter Templates 模板导入插件。 这个插件是 Astra 主题建站的核心,也是新手能自己搞定外贸建站的关键所在。

    安装Starter Templates

    接下来,选择要导入的模板。页面编辑器推荐 Elementor,模板推荐 Brandstore,因为它有外贸建站里最重要的产品页面,能最大程度的减少外贸建站所需的时间成本。

    use demo 1

    use demo 2

    use demo 3

    use demo 4

    use demo 5

    use demo 6

    use demo 7

    use demo 8

    最后,在 WordPress 后台的插件栏,禁用删除一些和外贸建站不相关的插件。

    astra删除插件

    模板导入后,一个欧美风格、内容丰富、功能强大的网站雏形已现,但它还不算是一个真正意义上的外贸网站。接下来,我们会在模板的基础上对网站进行自定义,进一步完善外贸建站。

    4、自定义 Header 和 Footer

    页眉(Header)是第一个需要自定义的地方,它位于网站的最上方,管理着网站Logo,网站导航,按钮等等,自定义方法如下。

    header页眉

    首先,点击 Customize,找到页眉生成器。它有一个类似Excel表格的编辑框,可以移动,添加或删除各种不同的网站元素。

    astra修改页眉的位置

    页眉生成器

    页眉生成器编辑框

    接下来,从“网站标题和 Logo ”开始,替换原始 Logo,同时关闭“高分辨率Logo”。

    网站logo

    更换logo

    然后,点击自定义透明页眉,关闭“透明页眉使用不同Logo”。

    自定义透明页眉

    透明页眉使用不同Logo

    最后,点击 DESIGN,把页眉背景颜色设置成白色, 菜单设置成黑色,完成后发布。这样做的目的是制作Logo方便(不用透明背景),而且白色背景和任何Logo都很好搭配。

    修改页眉背景颜色

    修改菜单颜色

    修改菜单点击颜色

    Logo 和页眉背景颜色修改完,下一步是对主菜单进行可以排序、删除和添加。如果你还没确定主菜单里的内容,可以等网站个页面制作完再来设置。

    astra网站主菜单

    配置菜单

    编辑菜单

    t添加或删除菜单名称

    菜单修改完,接下来删除页眉里的购物车,添加一个指向联系页面的询盘按钮,完成后发布。

    删除购物车

    添加询盘按钮

    询盘按钮设置

    页脚是第二个需要修改的地方,它位于整个网站的最底部,管理着网站链接,版权信息等等。

    footer页脚

    首先,通过“Customize”进入自定义编辑页面,找到页脚生成器的编辑框。

    自定义页脚

    页脚生成器

    页脚生成器编辑框

    接下来,把页脚版权信息替换成自己的,正确的格式及写法如下。

    页脚版权

    然后,点击页脚里的 Widget 小工具,依次替换里面的内容,可以是文字说明,也是网站链接。

    页脚小工具

    5、自定义 Product 产品页面

    产品页面会用到 WooCommerce 和 Astra 的一些自定义选项。首先,找到 Store 页面,通过快速编辑选项,把它的名字替换成 Products。

    store页面

    products页面

    然后,更改固定连接名称,常用设置选文章名,产品固定连接选 Shop base,保存修改。

    文章固定链接

    产品固定链接

    接下来,通过“Customize”进入自定义选项,找到 WooCommerce 的产品目录,关闭价格和评级的显示选项。

    woocommerce自定义

    产品目录

    关闭价格和评级显示

    到这,网站主导航里的 Products 页面就编辑完了。接下来,我们编辑单个产品页面。首先,找到 WordPress 后台菜单的产品栏,随便找一个产品进行编辑。

    编辑单个产品页面

    然后,修改产品的标题,URL和详细描述。描述可以使用 Elementor 修改,能添加很多不同的元素进去,比如表格,图片,图表等可视化元素。

    产品标题URL描述

    删除产品模板里的价格,产品页面对应的 add to cart 也会自动删除。

    删除产品价格

    修改产品页面的简短描述,同时还可以在最下面添加一个询盘表单。

    添加询盘表单

    删除产品属性,因为详细描述里可以更好的描述产品。

    删除产品属性

    设置产品类别,确认无误后,点击更新按钮,发布产品页面。

    产品类别

    最后,在 WooCommerce 菜单找到设置产品,不允许产品评价,保存修改。

    woocommerce产品设置

    不允许产品评价

    6、自定义 Home、About 和 Contact 页面

    网站首页看上去很复杂,其实有一个捷径可走,那就是拼接 Astra 的模板。首先,打开首页编辑页面,点击 Elementor 编辑按钮。

    首页编辑

    使用 Elementor

    然后,把页面拉到最下方,使用 Astra 的模板功能,导入 Local Business 这个模板的首页。

    Local Business模板

    导入首页

    点击导入

    接下来,找到 Elmentor 页面编辑的导航,把第一个模板里的模块删除后 Update。

    页面导航

    删除多余模块

    最后,把新模板里的文字和图片替换成你自己的。因为Elementor是一个可视化页面编辑器,操作很简单,我就不在这逐一演示,如果遇到不会的,可以留言。

    网站首页编辑完,其他页面(比如 about 和 contact)都可以用我介绍的这个模板拼接方法来编辑,建站的速度非常的快。

    唯一要注意的是,联系页面会用到表单插件 WPForms。它的使用方法是找到预建好的表单,进入后点击 Settings 和 Notification,把通知邮箱修改成自己的,然后保存。

    wpforms表单

    wpforms通知邮箱

    7、自定义 Blog 文章页面

    博客页面和上述几个页面的编辑不同,需要去页面选项新建一个 Blog 页面,完成后发布。

    新增blog页面

    blog

    然后,返回 WordPress 菜单里的设置 - 阅读,文章页选择 Blog,保存修改。

    文章页设置

    接下来,开始写文章,发布新文章,为后续的谷歌SEO优化排名做内容引流。

    写文章

    发文章

    总结

    Astra 主题作为一个免费主题,里面的核心功能(模板)实在是太好用了,不是付费,媲美付费。利用模板拼接大法,谁都可以快速搭建一个专业的 WordPress 外贸网站。

    另外,使用本文介绍的 ChemiCloud 主机外贸建站,配合它赠送的 LiteSpeed 插件优化网站,谷歌测速非常快,特别适合想要通过谷歌推广获取流量和询盘的同学使用。

    chemicloud谷歌测速

    关于作者

    • 一灯

      独立站实战派,一灯出海创始人,拥有超过10年的建站及运营经验,擅长外贸自建独立站并写了很多的原创教程,有问题可微信免费咨询,谢谢大家支持。

      • Chloe

        你好,我想问下如果想做图片下面添加文字,并且文字的后面还需要加入一个icon,怎么才能把文字和icon保持在同一行呢

        • 第6步、自定义 Home、About 和 Contact 页面

          “然后,把页面拉到最下方,使用 Astra 的模板功能,导入 Local Business 这个模板的首页”

          这一段我找不到呀。。。。网页这个模块下面找不到这个呀。

            • 一灯

              @ astra starter templates 装了以后,elementor 编辑页面时,最下方会多一个图标,里面就是模板。

            • Lucy

              一灯,您好,按照您的方法在操作,编辑HOME的时候没有找到拼接ASTRA的模板,直接就进入了elementor界面,求指点,谢谢!

                • 一灯

                  @ Lucy 安装astra配套的Starter Templates,进elementor后右下角可以看到astra模板库图标

                • SEIKO

                  您好打扰啦,按照你的教程想要调整页脚的内容,因为有一个页脚链接的网页不正确。但是点进去只能调整页脚大小,没办法调整页脚内容。请问有可能是什么问题呢?谢谢

                    • 一灯

                      @ SEIKO 你可能指的是footer menu,去菜单栏设置就可以了。

                    • 安吉

                      我想要把blog里的最新几篇文章自动出现在主页下端,该怎么设置呢?

                        • 一灯

                          @ 安吉 免费版elemntor + astra没有这方面的免费模块可以调用。解决方法:1. wordpress后台安装Essential Addons for Elementor免费插件,它有免费的最新文章模块可以调用,模块叫Post Grid。另外,Elementor免费扩展插件还有很多,可以自行在wordpress后台插件栏搜索Elementor找到,都不用出钱。2. 要么付费升级elementor pro,要么付费升级astra pro,二选一就行,升级了就能调用最新文章模块。3. 使用wordpress自带的Gutenberg Block来重新做,不过这样做的话,demo需要你重新导一遍,导的时候记得选择Gutenberg Block。

                        • 安吉

                          你好,我想问下在两个不同主题之间切换时网站页面会出现两个主题混在一起的情况,请问这是为什么呢?该怎么解决?

                            • 一灯

                              @ 安吉 主题切换后,比如菜单之类的,还会保留之前的,是正常现象,需要你自己手动调整。

                            • Jessica

                              非常有用的文章。适合没有经验的小白建站,非常感谢大神也一直帮我解答问题。。会一直关注你后续的文章的!!

                              • 深色鱿鱼

                                教程很好很受用,我是建完了才发现你说的拼接方法,确实加快了建站速度,大师威武。其他人都是模仿你的,知乎上全是抄的,看来看去都差不多,就你这还能看到点新的东西,你多更新点文章啊。

                                • andy

                                  写的很好,之前看的别人的还是一头雾水,看完老师的思路清晰了很多,果然大师,谢谢。

                                  • ww

                                    大神,首先感谢你谢了这么一篇详细的文章,我这个小白刚好按照你的文章操作了一遍,现在脑子有点晕乎,先是添加一个Astra主题模板,在添加了一个Brandstore模板编辑了LOGO,页眉和页脚。首页的编辑又添加了一个拼接模板Brandstore的首页。感觉现在的首页好乱啊,那最开始的Astra主题模板到那去了?还有很多不明白的,是不得多操作几遍就能通一些。

                                      • 一灯

                                        @ ww 首页是在之前第一个模板 Brandstore 的基础上进行修改和拼接,不是另外新建的。所以导入第二个模板 Local Business 只用导入它的 Home,相当于用它去替换第一个模板的首页,删除的时候删旧的前三个 section 就行了,文中的图片里有标记。

                                          • ww

                                            @ 一灯 感谢的你及时回复,我其他方面的操作基本都是按照你的文章来的,上传的图片大小是具体怎么看的,首页的图片可以自己制作成滚动或者轮播式的吗?

                                              • 一灯

                                                @ ww 图片你可以参照模板里的大小。首页的silder需要安装第三方silder插件,或升级elementor pro。

                                        发表评论

                                        匿名网友