Astra主题教程：外贸建站首选主题(附视频)

Astra建站的准备：

1.域名购买：记住购买com和无黑历史的域名即可，新域名我感觉更好。

namesilo和cloudflare购买域名步骤都在wordpress建站详细过程中可以找到。

2.服务器购买与安装wordpress

预算低：hostinger主机，选择most popular。

预算高：cloudways云服务器，vultr 2G以上

自带一键安装wordpress功能。

3.DNS解析

获取服务器IP地址，在域名管理或者DNS Zone区域添加两个A记录。一个@,一个www，内容填服务器ip地址。

4.WordPress后台设置

安装Astra Pro主题

购买Astra Pro主题

普通版wordpress后台可以直接搜索安装，如果需要pro版本需要到Astra官网购买。

选择自己需要的套餐，上面是终身和每年的选择，还有站点数量，下面是每个package的选择，选择越贵的，绑定的工具插件越多。

千万不要去买某宝的或者GBL版本的，虽然非常便宜，但是容易有bug，后门，不能在线更新，谷歌广告账户被封等问题。像下面这个兄弟就是因为某宝买了盗版的。

购买完成回到account页面，下面就有API授权证书，点击三个点有下载的选项，把三个安装包都下载下来。

安装和激活主题

wordpress安装主题有多种方式，这里就介绍最简单的一种，其他的可以在这篇文章了解。3种主题安装方式介绍

外观>主题>安装主题>上传主题>上传主题安装包，安装成功，启用

Astra需要astra主题（启用），astra child子主题（不需要启用），astra addon plugin插件（需要许可证）

现在转到插件页面，上传astra addon plugin，一样点击插件，安装上传新插件。填入证书就成功了。

Astra如何导入模板

安装模板库插件Starter Templates，astra模板库中有280多个模板，如果你想全部都能用，就要把这个插件升级premium，模板带有premium的必须升级插件才能用。

这边一定要选对编辑器，通常是elementor。

选择一个自己喜欢的模板。

上传LOGO，选择喜欢的字体，颜色。

插件方面可以直接跳过。

这边也不需要填，打勾最下面的understand就可以了。

开始安装，等一会儿就好了。安装成功点击view website到前台检查一下。

正常就可以着手修改内容，对于新手，模板是非常友好的，想要自己设计就往下看。

Astra页眉

普通页眉

新建常规的5个页面，Home，Products，Blog，About Us，Contact Us。如果已经有页面就不用添加了。

把这五个页面添加到主菜单上，方便后面操作，外观>菜单。

选择主菜单。

删除旧菜单，如果没有或者存在可用的，修改就行。

把刚才的五个页面都添加进去，下面的自动将新的顶级页面菜单添加至此菜单要勾选。保存。

接下来打开Astra仪表盘，进入自定义。

有astra pro的全部打开。

基础版的直接点击start customising或者下面的页眉生成器。

页眉生成器位置，点开。

header set几个固定布局可以选择，或者不选，自己设计。

页眉的主要编辑内容，一个个编辑。

先更改LOGO。

Logo最好是透明底的比较好看，下面的站点标题要改，改成网站的主要内容，简短一点。设置LOGO和站点标题同一行。

添加账户，如果你是做在线商城的话。如果只是B2B网站不需要，换成一个Send Inquiry的Button就好。

账户改大小改颜色，其他小工具也是一样的位置。

添加设计搜索框。

添加主菜单并设计，不喜欢在右边可以拖到中间或者LOGO同一边。

添加多语言标志。

接下来设计移动端。点击下面的手机图标

同样在底部添加更改。

手机端应用不同的LOGO。

添加搜索框。

更改toggle button颜色大小风格。

保存之前测试一下正不正常。

有的同学想要在header之上添加文本，折扣信息，按钮之类的，添加在这里就可以。

保存好到前台看看正不正常。

透明页眉

启用astra透明页眉。

自定义选项，根据自己需求选择，或者只开启在整个网站上启用，下面全关了，注意LOGO一定要透明底，不然不好看。

效果如下。

背景设置，滚动或固定。

固定页眉

在astra设置打开固定页眉。

外观>自定义>页眉，点击进入。

sticky选择primary header就有了固定页眉效果。

还可以开启下面的hide when scrolling down，停止滚动或者滑动隐藏页眉。

Astra页脚

外观>自定义>页脚

找到页脚，进入。

自定义添加内容。

自定义有三行，第一行可以放些CTA促销文字，点击+号，添加HTML,然后在左边编辑框添加文字，也可以带链接，对齐，改颜色字体等等。

第二行通常是页脚菜单，介绍，logo，视频，newsletter，联系表单等等，按自己需求添加。点击小齿轮可以选择footer布局。

参考例子。

版权，社媒等一般放最下面，左边改背景颜色，字体图标颜色等等。

移动端页脚编辑入口。

按自己审美设置。

设置好到前台分别检查一下，没错就完成了。

Astra超级菜单

点击Astra主题选项，然后打开Nav Menu导航菜单选项。

设置好primary menu主菜单，设置好才能启用mega menu超级菜单。

选择你想要设置超级菜单的选项，或者全部也可以。打开astra menu settings。

就能看见mega menu的开关，开启，然后下面的图标，高光，design里面的颜色字体等等按自己需求设置。

添加子目录进去。

保存到前台检查一下，这样就是成功了。

多类别的可以继续添加。效果如下。

Elementor创建带图Mega Menu

首先打开ElementsKit Elementor addons官网，点击下载elementskit elementor addons插件。

安装ElementsKit Elementor Addons插件并启动。

转到外观-菜单。

打勾Enable Mega Menu。

选择你需要创建得项目，然后点击蓝色mega menu开始创建。

开始创建带图mega menu。

添加结构。

添加内容，图片，视频，链接，按钮，文字，标题等等都可以。添加完保存。

再把原菜单换成这个带KIT得菜单就可以了。

前台检查一下，ok，完成。

Astra侧边栏

外观自定义侧边栏。

选择侧边栏样式即可全局应用。侧边栏样式在wordpress后台，外观，小工具里面自定义，有main sidebar，woocommerce sidebar（商店页面侧边栏）等等。

单独设置文章页侧边栏

选择侧边栏，把侧边栏布局取消，改为全局。

目标页面单独添加侧边栏，编辑目标页面。

点击Astra Logo。

选择sidebar。

设置好侧边栏样式即可。

IKS Menu侧边栏

安装Iks Menu,免费版的就够用，需要更多功能需要购买付费版。

在iks menu里面创建一个新菜单。

add menu选Custom Wp Menu,如果你只是想做分类的或者FAQ选1或3。

选主菜单或者你需要的菜单去设置。

接下来就是IKS MENU的具体设置，颜色，背景，风格等等。这个是选择折不折叠目录子项目。

第二个选项还可以再次选择menu和来源，保持刚才设置的就好。

空档案之类的就不要显示了，Disable。

背景颜色，边距，位置等等按自己需求设置。

按钮图标设置，尺寸，高度等等。

Menu字体，颜色设置。

效果动画设置。

旁边预览，可以实时看到效果，其他都是付费的设置，到这里完成后就直接保存了。

这样就创建成功了。

保存好之后选择外观打开小工具。

添加想要放在侧边栏的部件。想要不同页面不同的侧边栏，在下面增加，设置就行了。

记得Iks Menu要添加进去。其他的比如视频，图片，标签按自己所需添加。

打开自定义-侧边栏。

布局改成有侧边栏的，左右，宽度设置一下。

如需固定侧边栏，就把这个置顶打开。

侧边栏如果模块间距有点大，可以把样式改成非盒装，自定义一下宽度。

保存再到前台看一下，没问题就完成了。

如果想要侧边栏有过滤功能的可以采用filter everything插件

Home页完成效果

开始制作，感觉东西少可以自己自由添加，都是大同小异。

Astra菜单设置

如果需要页眉也就是导航菜单上滑显示，停止滚动或者下滑隐藏，按以下操作。

首先打开固定页眉。

点击固定页眉。

打开固定页眉，打开当滚动时隐藏页眉。

Banner（Hero）区域

在后台页面点开Home页，选择Elementor编辑。注意banner图一般是1920宽，不要小于这个宽度，可能会很模糊。

点击这个小文件夹，分类选择hero，跳出来的都是hero模板，有喜欢的可以直接选择然后替换文字和背景图就可以。

模板不满意的话自己动手制作，点击粉红色上面那个+号，添加一个容器，设为全宽。

添加结构，设为全宽。

点击左手边最上面那个+号，添加Slider小部件。

点开之后左边都是设置轮播图的。

速度，停止，自动播放等设置。

文字按钮设置。

Slogan

添加个标题元素，然后更改字体颜色即可。

公司信息

图文并茂，图片公司工厂整体，或者视频也可以，文字介绍公司。

生产流程

按照自己公司生产步骤来添加timeline stories。

添加部分次热门产品

添加元素，选择products，列改为4，行改1

添加产品轮播

新建结构设为全宽，添加Loop Carousel，然后到后台创建个模板。

注意选择Loop Item，Products。

点+号选择自己喜欢的布局。

也有模板可选。

添加需要的元素进去，比如图片，add to cart，price等等。保存。

在刚才全宽的container里面添加产品轮播元素，一定要选择product，下面选自己模板的名称。

添加成功的样子。

加个背景色更好看。

轮播图下面

一样添加4个一行半热门产品，看起来更对称美观。

产品目录

直接用portfolio填充就可以了，来源选产品。

portfolio是比较小众的，建议用ACF自定义字段管理产品，如果需要更丰富一点，方便一点，可以使用acf和CPT UI。

客户评价

模板选择。

或者手动制作。

中间加logo或者特色透明图片，点缀一下。

新建一个container，三格布局

分别在左右两边添加图像框，评分星级，图片。

内容替换一下然后背景颜色也改下。

外距和边框，css设置一下更好看，整齐。

中间点击灰色方框进入设置。

把背景重复改为覆盖，不透明度和CSS滤镜调一下。

文字信息就按照标题，文本，按钮去添加。

最新文章

布局设为三格或者4格，然后每个都添加posts元素，把数量改1，皮肤cards，其他按需求设置。如果要实现轮播，跟产品轮播一样，做个post轮播模板然后插入即可。

Astra建站插件推荐

rank math SEO插件

Elementor pro编辑器

Astra Pro主题插件

Wp Rocket + perfmatters优化加速组合

或Flyingpress+FlyingCDN组合

Shortpixel图片压缩插件

SEO优化

制作感谢页，优化用户体验

Astra速度提升

Cloudflare免费CDN