【图文】Astra主题 + Elementor搭建独立站菜鸟教程

Astra是一款非常流行的 WordPress 主题，由公司 Brainstorm Force 开发。自发布以来，Astra 深受广大用户的好评，并且受到 WordPress 圈子中知名人士的强烈推荐，例如 WordPress 和 WooCommerce 专家 Chris Lema 以及 WPBeginner 的创始人 Syed Balkhi 等等。该主题的免费版本是第一个也是唯一超过 100 万 活跃安装量的 WordPress 主题。

同时，Elementor 是目前 WordPress 生态系统中最受欢迎的页面编辑器，已经有数百万个网站使用 Elementor 搭建页面。据统计，在Wordpress网站中，Elementor 的使用率约为 8%+，超过了第二大页面构建工具 WPBakery（市场份额为 5.7%）。

Astra最初是基于Elementor开发的，但现在它已经成为一个多功能的主题，支持多种页面编辑器，包括古腾堡编辑器。这让用户可以根据自己的需求选择适合的编辑器。但是如果想体验 Astra 强大的功能，建议还是使用 Elementor 编辑器。

选择一个适合的WordPress主题是非常重要的。经过十多年的Wordpress建站接触到不少的WordPress主题，例如avada、betheme、the7等等。虽然有许多主题可供选择，但过多的选择也可能让人感到困惑。每个主题都有不同的设置界面、功能和使用逻辑，学会并记住如此多的主题是一件麻烦的事情。

直到我接触到了Astra，它确实让我眼前一亮，它是一款适合大多数独立站建站需求的WordPress主题。

Astra是我心目中的最佳的WordPress主题。它的轻量级设计使得加载速度飞快，仅占用50KB的空间，相较于其他动辄几MB的主题，这无疑是一大优势。更为难得的是，尽管体积小巧，但Astra的功能却一应俱全，上手也十分便捷。当它与Elementor页面编辑器搭配使用时，更是如鱼得水，能够轻松满足博客网站、企业展示网站、电商网站以及在线课程网站等多种类型的网站建设需求。无论是对于初学者还是经验丰富的开发者，Astra都能完美胜任，展现出其卓越的性能和适应性。

如果你想学习如何用Astra主题搭建出一个出色的WordPres网站，那就跟着本文的教程进行操作吧。

Astra主题简介？

Astra主题是由Brainstorm Force所开发的WordPress主题，在推出后的短短的几年内，就已经有超过一百万个网站使用Astra主题 ，并获得了将近全五星的好评。Astra 主题，以其轻量、快速和丰富的功能而闻名。适用于搭建各种网站类型，包括博客、商城、企业网站等。

使用Astra主题的优势？

在搭建外贸独立站时，有太多的主题可以选择，但是Astra绝对是最佳选择之一，主要原因有以下几点：

• 简单易用：Astra 简化了许多复杂的逻辑，自定义模式中只保留了六个项目，让你轻松找到修改的地方。
• 加载速度快：Astra 主题本身不包含 jQuery 函数库，因此体积较小，减少了出现问题的概率，使整体网页加载速度非常快。
• 高度定制：Astra 主题的代码非常干净，你可以根据需求自行修改代码和安装所需的插件，完全掌控你的网站。
• 与Elementor编辑器完美契合：Elementor 是目前最受欢迎的页面编辑器之一，使用 Astra 主题可以与 Elementor 完美结合，几乎可以创建各种类型的网站。

之前我使用过的很多WordPress主题，都太过复杂和沉重，需要花不少时间来学习。但是对于Astra主题，真的是太简单了，非常容易上手，几分钟就可以搞清楚它的使用逻辑，这点让我感到非常震惊。所以，我在这里非常推荐小伙伴们选择Astra主题建站。

Astra免费版和高级版（Astra Pro）的区别

Astra主题有分为免费版和付费版，免费版可以从Wordpress官方主题库安装，免费版本对于一般用户来说也是够用的，但是如果想要使用更多强大的功能，那么需要购买一个名为Astra Pro的付费版本，如果条件允许建议还是使用付费版本，因为功能太强大了，一旦使用了就无法再用免费版本了。

Astra的付费版本需要订阅相关的方案，具体方案我们整理成下方的表格供大家参考。

前往Astra主题官网查看更多

按年订阅方案

下面表格中的价格为每年付费价格。Astra主题采用订阅制，其三个产品方案分别为Astra Pro、Essential Toolkit和Business Toolkit，每个产品方案均提供授权一个域名、十个域名和一千个域名三种选择。

授权一个域名：

产品	黑色星期五价格	常规价格
Astra Pro	39美元/年	59美元/年
Essential Toolkit	69美元/年	99美元/年
Business Toolkit	119美元/年	199美元/年

授权10个域名：

产品	黑色星期五价格	常规价格
Astra Pro	49美元/年	79美元/年
Essential Toolkit	109美元/年	159美元/年
Business Toolkit	149美元/年	229美元/年

授权1000个域名：

产品	黑色星期五价格	常规价格
Astra Pro	59美元/年	89美元/年
Essential Toolkit	139美元/年	199美元/年
Business Toolkit	169美元/年	269美元/年

立即打开Astra主题官网页面

---

终身订阅方案

终身订阅方案，就是一次性购买，终身无需续费，可以永久使用。与按年订阅相同，其三个产品方案分别为Astra Pro、Essential Toolkit和Business Toolkit，每个产品方案均提供授权一个域名、十个域名和一千个域名三种选择。

一个域名授权方案：

产品	黑色星期五价格	常规价格
Astra Pro	179美元	299美元
Essential Toolkit	359美元	599美元
Business Toolkit	999美元	249美元

10个域名授权方案：

产品	黑色星期五价格	常规价格
Astra Pro	239美元	399美元
Essential Toolkit	539美元	899美元
Business Toolkit	599美元	1199美元

授权1000个域名方案：

产品	黑色星期五价格	常规价格
Astra Pro	299美元	499美元
Essential Toolkit	599美元	999美元
Business Toolkit	699美元	1399美元

访问Astra主题官网

详细的订阅方案，小伙伴们可以前往Astra主题官网查看，不同时期价格可能会有差异，大家可以实时去官网了解。

安装和启用Astra主题

大家选择了合适的方案后，就可以开始使用Astra建站的过程了。

首先，可以在Wordpress后台的，导航至外观–主题，然后在Wordpress主题库中搜索和安装Astra主题。如果购买了高级版本，访问Astra官网，点击 Login to Account，然后会跳转到Astra主题开发商Brainstorm Force的网页。

输入我们购买Astra主题时用的账户和密码，然后点击登录。登录后我们会来到这个界面，然后我们就把鼠标移动到上方导航栏的 Account，在下拉列表处选择 Downloads。

找到Astra Pro主题所在的那一栏，下载以下的三个文件：

1. Astra Theme
2. Astra Child Theme
3. Astra Pro Addon Plugin

在点击Astra Child Theme的时候，会来到这个画面，Astra的子主题可以让我们自定义名字、作者、版本、介绍等等。现在因为是教程，为了方便所以我们就不做修改，保持默认名字Astra Child。

都下载好了之后，我们现在会有三个文件，分别叫做：

1. Astra Theme：astra.3.6.4.zip（Astra父主题）
2. Astra Child Theme：astra-child.zip（Astra子主题）
3. Astra Pro Addon Plugin：astra-addon-plugin-3.5.4（Astra Pro插件）

因为我们已经通过主题库安装了Astra主题，可以在上传安装Astra子主题，然后通过插件上传安装Astra pro 插件。

启用Astra主题及插件后，打开网站首页就可以看到，网站已经变成了Astra主题了。

虽然我们已经安装了Astra主题和高级版插件，但是我们的建站工作才刚刚开始，我们还需要对Astra主题进行一些自定义。因为很多外观、颜色和内容可能还不能满足我们的要求。我们可以打开外观 > 自定义进入自定义模式。

Astra主题布局构成

首先，我们简单介绍一下WordPress网站的布局方式。WordPress网站的前端都可以分为4个部分：

1. 页眉（Header）：这是网站的顶部区域，通常包含网站的 LOGO、主导航菜单和其他重要信息。用户可以通过导航菜单访问不同页面。
2. 主要内容（Content）：这是网站的核心部分，用于显示文章、页面和其他内容。这里包括博客文章、产品页面、服务介绍等。
3. 侧边栏（Sidebar）：侧边栏位于主要内容旁边，通常放置在网站的左侧或右侧。它用于放置小工具，例如搜索框、最新文章、分类目录、标签云等。
4. 页脚（Footer）：页脚位于网站的底部，通常包含次要的导航菜单、版权信息、联系方式和其他相关链接。

所有的Wordpress网站都是这样的布局方式。astra主题提供对每个部分的自定义，用户可以定义每个部分的布局和内容。在自定义中，我们还可以添加很多元素，使我们的网站看起来更加专业和个性化。

页眉（Header）

页眉（Header），就是网站的顶部区域，通常包含网站的 LOGO、主导航菜单和其他重要信息。用户可以通过导航菜单访问不同页面。

如何在页眉中创建导航菜单

如果想要添加菜单，可以按照下面的步骤进行操作：

1. 进入自定义
2. 点击 菜单
3. 点击 创建新菜单
4. 给菜单命名
5. 菜单位置勾选 主菜单
6. 点击 添加项目
7. 添加你想要添加的菜单项目
8. 点击 发布

然后你就可以在页眉的地方看到刚刚新增的菜单项目了。

如何更改LOGO？

在Astra的自定义选项中，打开页眉构建器，然后点击“Site Title & Logo”，就可以上传Logo进行自定义了。

默认情况下，Astra会显示站点标题 ，如果您要只显示LOGO，那么可以显示站点标语关掉，这样就可以只显示LOGO了。

如何更改页眉布局

从Astra主题的3.0版本开始，它推出了 页眉生成器 和 页脚生成器，如上图，页眉被分成了三个部分，页眉上方，主页眉 和 页眉下方。我们可以打开 自定义 -> 页眉生成器，然后就通过拖曳的方式把页眉做成你想要的样子。

如果想修改 页眉上方，主页眉 和 页眉下方 的样式和设置，可以直接点击左边的图标前往修改的位置。

主要内容（Content）

主要内容（Content）其实就是我们的文章，Astra主题只将文章定义为主要内容，相关设置可以在自定义模式的 博客 中找到。

为什么Astra主题没有将页面定义成内容呢？因为Astra官方建议用Elementor来制作页面，所以他们就没有在自定义中添加页面的栏位。

在调整主要内容设置之前，我们先随便写3到5篇文章，并添加特色图片（这样才能看到效果）。

然后我们再去后台 -> 设置 -> 阅读，将主页显示设置为最新文章

如何改变文章的布局

在随便添加了几篇文章之后，其实我们的网站看上去也算是有模有样了。

如果你希望换个布局的话，那就在自定义模式中进入 博客 -> 博客/存档 修改相关的设置，Astra主题提供了3种不同的布局给我们。

在上图中，我们选择了图片在左、文字在右的布局，同时打开了文章间隔和日期格子选项，现在的博客页面看上去就有点焕然一新了。

侧边栏（Sidebar）

要修改侧边栏，我们可以从 侧边栏 或者 小工具 选项入手，前者一般是修改整体的外观，而后者则是以新增、编辑和修改内容为主。

在Astra主题中，侧边栏（Sidebar）能修改的花样并不多，只有一些基本的设置，例如：把侧边栏缩短、拉长，或者移到左边等。

页脚（Footer）

页脚一般是拿来放网站Copyright说明的地方，也可以放隐私政策、服务条款等比较法律性的内容，当然也可以放一些导航菜单等等，页脚的设置我们可以在自定义模式中的 页脚生成器 找到，下面我就跟大家简单示范一下如何修改Copyright说明。

如何修改Copyright说明

自定义模式 -> 页脚生成器，点击 Copyright 区块，点击然后把下面的代码复制粘贴上去：

Copyright © [current_year] [site_title]

[current_year] 是当前年份，[site_title] 是站点名字。这两个都是WordPress自带的短代码，会随着当前年份和你的站点名字自行变动，这样你就不用一直改了。

添加好Copyright说明之后，就像刚才操作页眉一样，用鼠标把Copyright说明拖曳到你想要的地方。

全局设置

全局设置是用来修改一些网站通用的东西的地方，例如字体，容器，颜色，按钮等，我们可以在 全局 中找到相关的设置。

如何修改字体

入口：全局 -> 基础字体样式，这里我们可以选择一款免费的Google中文字体Noto Sans SC（思源黑体）。

比如可以按照下面的数值设置：

1. Body字体系列（Font Family）：Noto Sans SC
2. 尺寸（Font Size）：16
3. 粗细（Font Weight）：细体 300
4. 行高（Line Height）：1.6

这里有个小技巧，就是在网页设计中的数值尽量选择8的倍数，例如字体尺寸是16px，行高1.6，这样会是一个比较好看的比例，小伙伴们可以多观察一下好看的网页设计范例，基本上都会遵守这个法则。

调整完字体之后，我们再回到网站首页看看，网站应该又变得好看一点了。

如何修改布局和容器（Container）

现在网站的布局是一块块的，也许有的小伙伴会觉得不太好看，或者是想试下其他的布局，这个时候我们就可以去修改容器（Container）。

入口：自定义模式 -> 全局 -> 容器，Astra提供了4种不同的布局给我们选择，而且还能给页面、博客和归档各分配不同的布局，现在我们就来试一下把布局修改成 完全宽度/包含 。

把布局修改成 完全宽度/包含 之后，我们回到首页就会发现布局已经改变了，现在看起来有木有比之前好看一点点呢？这个问题就有点见仁见智了，我觉得是有好看一点点的，小伙伴们不妨去测试一下哪个布局最适合你的网站哦。

如何导入Astra主题提供的模板

在学会了前面Astra主题的操作之后，我们就可以来尝试一下【套版】的操作了，所谓套版其实就是一键导入Astra主题提供给我们网站模板。

目前市面上大多数流行的WordPress主题都有一键导入Demo的功能，Astra主题也不例外，Astra主题提供了适用于Gutenberg，Elementor，Beaver Builder和Brizy这4个页面编辑器的模板，其中适用于Elementor的模板多达200个，适用于各行各业。如此一来，我们就可以在找到一个喜欢的模板之后，导入Demo再稍作修改就能得到一个全新的美观的网站。

登录Astra官网，去到之前下载Astra主题文件的页面，找到并下载 Premium Start Templates。

注：Premium Starter Templates 只有 Essential Bundle 或以上的方案才会提供。

将下载的文件在WordPress插件处上传并启用。

然后我们就输入序列号激活（跟Astra Pro一样， 序列号可以在Brainstorm Force的官网上方导航栏的 Account 的下拉列表 License 找到 ），激活之后我们就点击左边的 See Library。

然后会让我们选择一个页面编辑器，我们选的是Elementor，因为这是目前最受欢迎的也是我最喜欢的WordPress页面编辑器插件。

接着就会显示出Astra主题提供的所有Elementor编辑器的模板，如果想切换编辑器模板的话，可以在右上角处选择。

接下来，我们将会导入【Event Management Agency】模板作为示范，这是我比较喜欢的一个模板。

选择好我们喜欢的模板之后，就点击正中的 Import Complete Site 按钮进行导入。（左边按钮是预览，右边的按钮可以选择导入单一页面）

如果是第一次导入Demo的话，第一个选择不用勾选（这个选项是清除之前的网站模板），然后点击 Import 按钮进行模板导入。

导入完成之后，回到网站前端一看，我们已经拥有了一个跟模板一模一样的网站。

接着，我们要做的就是根据自己的需求来修改模板上的信息，我们在登录状态下，来到想要修改的页面，点击上方工具栏的 使用Elementor编辑 就可以对页面进行修改。（也可以去WordPress后台，选择要修改的页面，点击 使用Elementor编辑 。）

这个就是Elementor的编辑界面，它提供了很多我们常用的网页元素，让我们很轻松地就能把一个网页制作出来，操作起来也很简单，只需要用拖曳区块的方式就能把想要的网站给做出来。