2024-03-04
分类：开源工具
阅读(305) 评论(0)
[Astra Pro](https://www.xiapilu.com/tag/196 "【查看含有[Astra Pro]标签的文章】") 是一款功能强大的 [WordPress](https://www.xiapilu.com/tag/25 "【查看含有[WordPress]标签的文章】") 主题，适用于各种类型的网站。[Astra Pro](https://www.xiapilu.com/tag/196 "【查看含有[Astra Pro]标签的文章】")使用教程将指导您完成 [Astra Pro](https://www.xiapilu.com/tag/196 "查看更多关于 Astra Pro 的文章") 的安装、配置以及使用一些重要功能的过程。[Astra Pro](https://www.xiapilu.com/tag/196 "查看更多关于 Astra Pro 的文章") 是Astra主题的付费版本。如果你需要使用付费版本，可以在搬主题站点找到汉化版【[Astra Pro完美汉化中文合集\|自定义页面设计轻量响应式WordPress主题模板介绍](https://www.banzhuti.com/astra-pro.html)】。或者先使用免费版本的，需要升级再购买。这里搬主题就分享一下Astra Pro主题超详细手把手设置图文教程。
原文地址：[Astra Pro主题超详细手把手设置图文教程](https://www.banzhuti.com/astra-pro-tutorial.html)
本文目录
----
1. [Astra和Astra Pro的区别](#ftoc-heading-1)
2. [Astra Pro优势](#ftoc-heading-2)
3. [安装 Astra Pro](#ftoc-heading-3)
4. [导入预制网站](#ftoc-heading-4)
5. [自定义 Header 和 Footer](#ftoc-heading-5)
6. [自定义 Header](#ftoc-heading-6)
7. [设置顶部固定导航方法](#ftoc-heading-7)
8. [自定义Footer](#ftoc-heading-8)
9. [配置布局和颜色选项](#ftoc-heading-9)
10. [设置导航菜单](#ftoc-heading-10)
11. [自定义 Product 产品页面](#ftoc-heading-11)
12. [自定义 Home、About 和 Contact 页面](#ftoc-heading-12)
13. [自定义 Blog 文章页面](#ftoc-heading-13)
14. [如何Mega Menu制作](#ftoc-heading-14)
15. [1、激活模块Nav Menu](#ftoc-heading-15)
16. [2、创建Mega Menu](#ftoc-heading-16)
17. [3、Mega Menu的列设置](#ftoc-heading-17)
18. [4、扩展：Mega Menu第二列的Galley是如何实现的](#ftoc-heading-18)
19. [如何将 Elementor 模板添加到超级菜单？](#ftoc-heading-19)
20. [最后总结](#ftoc-heading-20){#ftwp-list}
Astra和Astra Pro的区别
------------------
Astra主题的付费版包括Astra主题和几个付费插件，而Astra主题本身是免费的。这些付费插件可以扩展Astra主题的高级功能。Astra付费版本有三个套餐，分别是Astra Pro、Essential Bundle和Growth Bundle。Growth Bundle的功能是最全的，大家可以根据需要购买。
Astra Addon插件(Astra Pro套餐)：增强了Astra主题的外观选项配置，包括颜色、背景、字体、博客、菜单、导航、返回顶部和商店的增强配置。
Premium Starter Templates插件(Essential Bundle套餐)：提供了付费的网站模板，可以帮助用户快速建立具有专业外观和功能的网站。
Ultimate Addons for Elementor插件(Growth Bundle套餐)：这是Elementor的扩展元素，安装后可以在Elementor编辑页面时找到更多的元素块，增强了编辑器的功能。安装此插件后，界面上会提示安装Elementor插件，您可以直接点击提示按钮安装。
### Astra Pro优势
Astra Pro是一款流行的[WordPress](https://www.xiapilu.com/tag/25 "【查看含有[WordPress]标签的文章】")主题，它由Brainstorm Force开发。该主题旨在为用户提供一个灵活的、易于使用的平台，用于创建具有专业外观和功能的网站。Astra Pro主题具有许多优点，其中包括：
**快速加载速度**：Astra Pro主题是一个轻量级主题，因此加载速度非常快，这有助于提高用户体验和SEO排名。
**设计灵活性**：Astra Pro主题提供了多种设计选项，可以轻松自定义网站的外观和感觉，包括颜色、布局、字体等。
**广泛的集成** ：Astra Pro主题与许多流行的[WordPress](https://www.xiapilu.com/tag/25 "【查看含有[WordPress]标签的文章】")插件兼容，包括WooCommerce、Elementor、Beaver Builder等，这些插件可以帮助用户增强网站的功能和特性。
**响应式设计**：Astra Pro主题是响应式设计的，可以自适应各种设备尺寸，包括桌面、平板电脑和移动设备。
**SEO友好**：Astra Pro主题使用标准的HTML和CSS代码，这有助于提高网站的SEO排名。
总的来说，Astra Pro主题是一个功能齐全、易于使用、具有灵活性的[WordPress](https://www.xiapilu.com/tag/25 "查看更多关于 WordPress 的文章")主题，适合各种类型的网站，包括商务、博客、电子商务等。
安装 Astra Pro
------------
首先，您需要在 WordPress 上安装 Astra 主题和 Astra Pro 插件。请按照以下步骤操作：
1、登录您的 WordPress 后台。
2、转到 外观 \> 主题，然后点击添加新。
3、搜索 "Astra"，找到 Astra 主题并点击 安装，然后点击启用。
4、登录购买Astra Pro的账号后台，下载Astra Pro Addon Plugin，转到"插件" 》 添加插件 》上传插件，安装然后点击启用。当然，你也可以下载搬主题本站的汉化中文版。
在搬主题站点找到汉化版【[Astra Pro完美汉化中文合集\|自定义页面设计轻量响应式WordPress主题模板介绍](https://www.banzhuti.com/astra-pro.html)】
5、在 Astra Pro 插件的设置页面，输入您的**许可证密钥** 以激活插件。
### 导入预制网站 {#ftoc-heading-4}
Astra Pro 提供了许多预制的网站模板，可以帮助您快速搭建网站。要导入预制网站，请按照以下步骤操作：
1、登录购买Astra Pro的账号后台，下载Premium Starter Templates，转到"插件" 》 添加插件 》上传插件，安装然后点击启用。
或者在插件中心搜索"starter templates"安装免费版本的，认准作者是Brainstorm Force。免费版本就没有付费的主题选择。
2、外观-Starter Templates
3、点击"Build Your Website Now"
2、选择您喜欢的网站构建器，例如 Elementor、Beaver Builder 或 Blocker Editor。建议使用Elementor，Elementor是目前最热门的网站构建器之一。也开可以使用搬主题的Elementor Pro汉化中文版。
【[Elementor Pro完美汉化中文版\|页面拖动自定义设计WordPress插件介绍](https://www.banzhuti.com/elementor-pro.html)】
3、浏览预制网站库，选择一个模板并点击预览。右上角标有PREMIUM的，是需要安装Premium Starter Templates插件才能使用。
4、在预览页面，点击导入网站，然后等待导入过程完成。选中模板后，你可以上传logo和设置它的展示宽度，如果没有logo的话，可以以后再传，我们点击按钮继续。
然后，我们可以选择配色方案与字体，如果现在还拿不定主意，以后也可以再改的，点击按钮继续。
下图中，默认勾选了4个选项：导入网站的外观样式设置（customizer setting）、导入widgets（小工具，通常用于侧边栏）、导入content（内容，譬如文章、产品），分享非敏感信息给主题官方，但对新手而言，我的建议是保持默认设置，点击按钮提交。
接下来我们静静等待网站导入，不要关闭网页哦。
看到这个界面就安装成功了。
最后，在 WordPress 后台的插件栏，禁用删除一些和外贸建站不相关的插件。
模板导入后，一个欧美风格、内容丰富、功能强大的网站雏形已现，但它还不算是一个真正意义上的外贸网站。接下来，我们会在模板的基础上对网站进行自定义，进一步完善外贸建站。
自定义 Header 和 Footer {#ftoc-heading-5}
-------------------------------------
### 自定义 Header {#ftoc-heading-6}
页眉（Header）是第一个需要自定义的地方，它位于网站的最上方，管理着网站Logo，网站导航，按钮等等，自定义方法如下。
1、转到外观 \> 自定义。
2、点击"Site Identity"，然后点击"网站标题和LOGO设置"。可以更改网站的LOGO和站点标题。
往下滑动，我们还可以看到设置副标题和站点图标的地方。站点图标会显示在浏览器标签页里面。
3、使用左侧的菜单栏，浏览各个设置选项，例如布局、颜色、字体、背景等。根据您的需求调整这些设置，并实时预览更改。当您满意设置时，点击发布以保存更改。
### 设置顶部固定导航方法 {#ftoc-heading-7}
在网页设计中，固定导航是一种非常常见的做法，将导航菜单固定到网页顶部，不管访客滚动到哪一屏，都可以轻松点击到菜单上的链接，接下来说下如何在Astra主题中设置固定头部导航栏
打开 外观 -- Astra选项，开启固定页头模块
然后打开自定义选项，依次进入 页头 -- Sticky Header
### 自定义Footer {#ftoc-heading-8}
页脚是第二个需要修改的地方，它位于整个网站的最底部，管理着网站链接，版权信息等等。
首先，通过"Customize"进入自定义编辑页面，找到页脚生成器的编辑框。
接下来，把页脚版权信息替换成自己的，正确的格式及写法如下。
然后，点击页脚里的 Widget 小工具，依次替换里面的内容，可以是文字说明，也是网站链接。
配置布局和颜色选项 {#ftoc-heading-9}
---------------------------
Astra Pro 提供了丰富的布局和颜色选项。要配置这些选项，请按照以下步骤操作：
1、转到 外观 \> 自定义 \> 全局。
2、选择您想要配置的全局部分，例如字体样式、颜色、容器、按钮等设置。
3、根据您的需求调整设置。
设置导航菜单 {#ftoc-heading-10}
-------------------------
要设置导航菜单，请按照以下步骤操作：
1、转到 外观 \> 菜单。
2、点击 创建新菜单，为菜单命名，然后点击 创建菜单。
3、使用左侧的菜单项选择器，将页面、分类等添加到菜单中。
4、拖动菜单项以调整顺序和层次结构。
5、在 菜单设置区域中，选择要显示菜单的位置（如主导航、页眉或页脚）。
6、点击 保存菜单 以保存更改。
自定义 Product 产品页面 {#ftoc-heading-11}
-----------------------------------
产品页面会用到 WooCommerce 和 Astra 的一些自定义选项。首先，找到 Store 页面，通过快速编辑选项，把它的名字替换成 Products。
然后，更改固定连接名称，常用设置选文章名，产品固定连接选 Shop base，保存修改。
接下来，通过"Customize"进入自定义选项，找到 WooCommerce 的产品目录，关闭价格和评级的显示选项。
到这，网站主导航里的 Products 页面就编辑完了。接下来，我们编辑单个产品页面。首先，找到 WordPress 后台菜单的产品栏，随便找一个产品进行编辑。
然后，修改产品的标题，URL和详细描述。描述可以使用 Elementor 修改，能添加很多不同的元素进去，比如表格，图片，图表等可视化元素。
删除产品模板里的价格，产品页面对应的 add to cart 也会自动删除。
修改产品页面的简短描述，同时还可以在最下面添加一个询盘表单。
删除产品属性，因为详细描述里可以更好的描述产品。
设置产品类别，确认无误后，点击更新按钮，发布产品页面。
最后，在 WooCommerce 菜单找到设置产品，不允许产品评价，保存修改。
自定义 Home、About 和 Contact 页面 {#ftoc-heading-12}
----------------------------------------------
网站首页看上去很复杂，其实有一个捷径可走，那就是拼接 Astra 的模板。首先，打开首页编辑页面，点击 Elementor 编辑按钮。
然后，把页面拉到最下方，使用 Astra 的模板功能，导入 Local Business 这个模板的首页。
接下来，找到 Elmentor 页面编辑的导航，把第一个模板里的模块删除后 Update。
最后，把新模板里的文字和图片替换成你自己的。因为Elementor是一个可视化页面编辑器，操作很简单，我就不在这逐一演示，如果遇到不会的，可以留言。
网站首页编辑完，其他页面（比如 about 和 contact）都可以用我介绍的这个模板拼接方法来编辑，建站的速度非常的快。
唯一要注意的是，联系页面会用到表单插件 WPForms。它的使用方法是找到预建好的表单，进入后点击 Settings 和 Notification，把通知邮箱修改成自己的，然后保存。
自定义 Blog 文章页面
-------------
博客页面和上述几个页面的编辑不同，需要去页面选项新建一个 Blog 页面，完成后发布。
然后，返回 WordPress 菜单里的设置 -- 阅读，文章页选择 Blog，保存修改。
接下来，开始写文章，发布新文章，为后续的谷歌SEO优化排名做内容引流。
如何Mega Menu制作
-------------
### 1、激活模块Nav Menu
**从** *WordPress 仪表板 \> Astra \> Astra Pro 模块 \> 导航菜单* 激活插件
### 2、创建Mega Menu
如果您想创建超级菜单，您需要为您想要将其子菜单项变成超级菜单的顶级菜单项启用超级菜单功能。
请按照以下步骤执行此操作：
**第 1 步** -- 从 WordPress 仪表板导航至*外观 \> 菜单。*
**第 2 步**-- 选择要在其下添加大型菜单的菜单项。
**步骤 3** -- 展开此菜单项并单击" \*\*Astra 菜单设置"\*\*按钮。
* **超级菜单**
* 然后，右侧将打开一个滑入式弹出窗口。在此处启用超级菜单切换按钮。这将为父菜单的所有子菜单启用大型菜单选项。它提供顶级/父菜单的选项。您可以将超级菜单宽度设置为内容、菜单容器或完整宽度。
**Mega Menu width含义**：
* **内容**-- 将菜单宽度设置为您的内容宽度
* **菜单容器宽度**------限制主菜单的宽度
* **全宽**-- 将大型菜单的宽度设置为屏幕的宽度，但将菜单内容限制为内容宽度。
* **Full Width Stretched** -- 将大型菜单的宽度设置为全宽，边到边。
* **自定义宽度**-- 以像素为单位设置自定义宽度值
**背景颜色/图像**
背景颜色/图像将设置为父菜单的大型菜单框。您可以使用背景重复、背景大小和背景位置等设置来调整背景图像。
**覆盖此大型菜单的颜色？**
您可以为父菜单的大型菜单框中的菜单项设置颜色。可用选项有文本/链接颜色、文本/链接悬停颜色、列分隔线颜色。
**突出显示标签**
这是出现在菜单项旁边的文本。它突出显示菜单。标签可以是免费、促销、新品、精选等。您可以设置标签文本和颜色。
spacing
您可以为菜单项设置 Margin 和 Padding。
### 3、Mega Menu的列设置
通常情况下，我们在一级菜单目录为某一个菜单项目开始Mega Menu设置，对应本文的Products菜单项目。
在一级目录项目下面添加的二级菜单项目，对应本文的 Product Categorie和Product Gallery自动成为Mega Menu的两列。
而在二级菜单下面添加的三级菜单项目则会自动成为Mega Menu对应列中的内容。
### 4、扩展：Mega Menu第二列的Galley是如何实现的
第一步：添加一个自定义链接到Products菜单项目的二级菜单中
链接设置为#，也就是空链接
第二步：进入Astra Menu Settings设置内容来源
内容来源选择小部件，并在小部件中选择gallery，并添加。
添加之后为Gallery添加图片
添加图片之后设置相册
Link to：attachement Page代表链接到添加这个图片的关联页面
Columns：设为2就代表设为2列
Random Order：勾选就代表相册随机排列，每次刷新排列的顺序都不一样
Size：图片尺寸，如果需要图片清晰一点就用full size。
添加之后保存Gallery返回到Astra Menu设置，保存这个Gallery设置，并保存Astra menu 设置，在退出到菜单列表。
第三步：保存菜单设置
保存之后刷新页面验证结果。
如何将 Elementor 模板添加到超级菜单？
------------------------
您可以使用 Astra 主题和 Astra Pro 插件创建超级菜单。此外，您还可以使用大型菜单模板来代替或与文本菜单项（链接）结合使用。
本文档将向您展示如何使用 Elementor（免费）和 Astra Pro 导航菜单模块将包含 WooCommerce 产品类别的模板添加到大型菜单中。
注意：该解决方案用于将Elementor 模板添加到 Astra 主题提供的默认标题中。请记住，这仅适用于 Astra 的默认标题和 Astra Pro 导航菜单模块。如果您改用Elementor 标头，则此解决方案将不适用。
请按照以下步骤操作：
**步骤 1** -- 确保您已安装 Elementor 插件和 Astra Pro Addon 并处于活动状态。另外，请确保在 Astra 设置 中激活导航菜单模块。
**步骤 2** -- 导航到*仪表板 \> 模板 \> 添加新的*。
**步骤 3** -- 在下拉菜单中，选择"部分"，命名您的模板（可以是任何名称；我们使用"Mega Menu Item 1"），然后单击"创建模板"。这将创建新模板并打开 Elementor 编辑器。
**步骤 4** -- 在 Elementor 编辑器中，添加"部分"和"短代码"小部件。
使用 Elementor Pro，您可以使用 Elementor"产品类别"小部件而不是简码小部件。
单击"发布"保存您的模板。
**第 5 步** -- 现在，是时候创建一个大型菜单了。为此，请导航至*外观 \> 菜单*。单击展开要在其下添加大型菜单的菜单项（我们将此项目命名为"商店"）。
**步骤 6** -- 单击" **Astra 菜单设置"** 按钮，然后启用**超级菜单** 切换按钮。这将在该项目下创建一个大型菜单。您还可以在此步骤中设置大型菜单的样式（宽度、填充等）
**步骤 7** -- 接下来，在超级菜单下添加一个新的菜单项（我们将其命名为"按类别购物"），然后单击" \*\*Astra 菜单设置"\*\*按钮。
**步骤 8** -- 在内容源下拉菜单中，选择"模板"选项。在模板字段中，输入模板的名称并从列表中选择它。单击"保存"将此模板添加到您的菜单项中。
这是它在前端的样子。
最后总结
----
Astra 主题作为一个免费主题，里面的核心功能（模板）实在是太好用了，不是付费，媲美付费。利用模板拼接大法，谁都可以快速搭建一个专业的 WordPress 外贸网站。
![]()
众生皆苦，唯有自渡！
51工具盒子
![[A-03] ARMv8/ARMv9-多级Cache架构](https://img1.51tbox.com/static/2024-08-22/col/eebbff84a7ffc330ef2e8b4ec12153ad/af2d3248f51445299c4ba8b0d1b5e0e7.jpg)
