WP主题教程, WordPress -tutorial

Astra Pro主题建站教程入门到专家(完整指南)

Astra Pro 是一款功能强大的 WordPress 主题适用于各种类型的网站Astra Pro使用教程将指导您完成 Astra Pro 的安装配置以及使用一些重要功能的过程Astra Pro 是Astra主题的付费版本如果你需要使用付费版本需要先在官网购买或者先使用免费版本的需要升级再购买

Astra和Astra Pro的区别

Astra主题的付费版包括Astra主题和几个付费插件而Astra主题本身是免费的这些付费插件可以扩展Astra主题的高级功能Astra付费版本有三个套餐分别是Astra ProEssential Bundle和Growth BundleGrowth Bundle的功能是最全的大家可以根据需要购买

Astra Addon插件(Astra Pro套餐):增强了Astra主题的外观选项配置包括颜色背景字体、bloggen、菜单导航返回顶部和商店的增强配置

Premium Starter Templates插件(Essential Bundle套餐):提供了付费的网站模板可以帮助用户快速建立具有专业外观和功能的网站

Ultimate Addons for Elementor插件(Growth Bundle套餐):这是Elementor的扩展元素安装后可以在Elementor编辑页面时找到更多的元素块增强了编辑器的功能安装此插件后界面上会提示安装Elementor插件您可以直接点击提示按钮安装

Astra Pro优势

Astra Pro是一款流行的WordPress主题它由Brainstorm Force开发该主题旨在为用户提供一个灵活的易于使用的平台用于创建具有专业外观和功能的网站Astra Pro主题具有许多优点其中包括

快速加载速度Astra Pro主题是一个轻量级主题因此加载速度非常快这有助于提高用户体验和SEO排名

设计灵活性Astra Pro主题提供了多种设计选项可以轻松自定义网站的外观和感觉包括颜色布局字体等

广泛的集成Astra Pro主题与许多流行的WordPress插件兼容包括WooCommerceElementorBeaver Builder等这些插件可以帮助用户增强网站的功能和特性

响应式设计Astra Pro主题是响应式设计的可以自适应各种设备尺寸包括桌面平板电脑和移动设备

SEO友好Astra Pro主题使用标准的HTML和CSS代码这有助于提高网站的SEO排名

总的来说Astra Pro主题是一个功能齐全易于使用具有灵活性的WordPress主题适合各种类型的网站包括商务、bloggen、电子商务等

安装 Astra Pro

Eerst,您需要在 WordPress 上安装 Astra 主题和 Astra Pro 插件请按照以下步骤操作

1、登录您的 WordPress 后台

2、转到 外观 > thema,然后点击添加新

3、搜索 “Astra”找到 Astra 主题并点击 安装然后点击启用

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

4、登录购买Astra Pro的账号后台下载Astra Pro Addon Plugin转到“插件” 》 添加插件 》上传插件安装然后点击启用

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

5、在 Astra Pro 插件的设置页面输入您的许可证密钥以激活插件

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

导入预制网站

Astra Pro 提供了许多预制的网站模板可以帮助您快速搭建网站要导入预制网站请按照以下步骤操作

1、登录购买Astra Pro的账号后台下载Premium Starter Templates转到“插件” 》 添加插件 》上传插件安装然后点击启用

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

或者在插件中心搜索“starter templates”安装免费版本的认准作者是Brainstorm Force免费版本就没有付费的主题选择

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

2、外观》Starter Templates

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

3、点击“Build Your Website Now”

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

2、选择您喜欢的网站构建器例如 ElementorBeaver Builder 或 Blocker Editor建议使用ElementorElementor是目前最热门的网站构建器之一你也可以查看关于Elementor的教程

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

3、浏览预制网站库选择一个模板并点击预览右上角标有PREMIUM的是需要安装Premium Starter Templates插件才能使用

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

4、在预览页面点击导入网站然后等待导入过程完成选中模板后你可以上传logo和设置它的展示宽度如果没有logo的话可以以后再传我们点击按钮继续

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

Dan,我们可以选择配色方案与字体如果现在还拿不定主意以后也可以再改的点击按钮继续

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

下图中默认勾选了4个选项导入网站的外观样式设置(customizer setting)导入widgets(小工具通常用于侧边栏)导入content(内容譬如文章产品)分享非敏感信息给主题官方但对新手而言我的建议是保持默认设置点击按钮提交

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

接下来我们静静等待网站导入不要关闭网页哦

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

看到这个界面就安装成功了

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

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

astra删除插件

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

自定义 Header 和 Footer

自定义 Header

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

1、转到外观 > 自定义

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

2、点击”Site Identity”然后点击”网站标题和LOGO设置”可以更改网站的LOGO和站点标题

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

往下滑动我们还可以看到设置副标题和站点图标的地方站点图标会显示在浏览器标签页里面

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

3、使用左侧的菜单栏浏览各个设置选项例如布局颜色字体背景等根据您的需求调整这些设置并实时预览更改当您满意设置时点击发布以保存更改

设置顶部固定导航方法

在网页设计中固定导航是一种非常常见的做法将导航菜单固定到网页顶部不管访客滚动到哪一屏都可以轻松点击到菜单上的链接接下来说下如何在Astra主题中设置固定头部导航栏

打开 外观 – Astra选项开启固定页头模块

Astra Pro主题建站教程:入门到专家(完整指南)

然后打开自定义选项依次进入 页头 – Sticky Header

自定义Footer

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

footer页脚

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

自定义页脚
页脚生成器
页脚生成器编辑框

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

页脚版权

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

页脚小工具

配置布局和颜色选项

Astra Pro 提供了丰富的布局和颜色选项要配置这些选项请按照以下步骤操作

1、转到 外观 > 自定义 > 全局

2、选择您想要配置的全局部分例如字体样式颜色容器按钮等设置

3、根据您的需求调整设置

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

设置导航菜单

要设置导航菜单请按照以下步骤操作

1、转到 外观 > 菜单

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

2、点击 创建新菜单为菜单命名然后点击 创建菜单

3、使用左侧的菜单项选择器将页面分类等添加到菜单中

4、拖动菜单项以调整顺序和层次结构

5、在 菜单设置区域中选择要显示菜单的位置(如主导航页眉或页脚)

6、点击 保存菜单 以保存更改

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

自定义 Product 产品页面

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

store页面
products页面

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

文章固定链接
产品固定链接

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

woocommerce自定义
产品目录
关闭价格和评级显示

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

编辑单个产品页面

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

产品标题URL描述

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

删除产品价格

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

添加询盘表单

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

删除产品属性

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

产品类别

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

woocommerce产品设置
不允许产品评价

自定义 HomeAbout 和 Contact 页面

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

首页编辑
使用 Elementor

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

Local Business模板
导入首页
点击导入

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

页面导航
删除多余模块

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

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

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

wpforms表单
wpforms通知邮箱

自定义 Blog 文章页面

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

新增blog页面
blog

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

文章页设置

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

写文章
发文章

如何Mega Menu制作

1、激活模块Nav Menu

WordPress 仪表板 > Astra > Astra Pro 模块 > 导航菜单激活插件

Astra Pro主题建站教程:入门到专家(完整指南)

2、创建Mega Menu

如果您想创建超级菜单您需要为您想要将其子菜单项变成超级菜单的顶级菜单项启用超级菜单功能。 

请按照以下步骤执行此操作

1 – 从 WordPress 仪表板导航至外观 > 菜单

2 – 选择要在其下添加大型菜单的菜单项

步骤 3 – 展开此菜单项并单击“Astra 菜单设置”按钮

导航菜单模块 [创建超级菜单]
  • 超级菜单
    • Dan,右侧将打开一个滑入式弹出窗口在此处启用超级菜单切换按钮这将为父菜单的所有子菜单启用大型菜单选项它提供顶级/父菜单的选项您可以将超级菜单宽度设置为内容菜单容器或完整宽度
Astra Pro主题建站教程:入门到专家(完整指南)

Mega Menu width含义

  • 内容– 将菜单宽度设置为您的内容宽度
  • 菜单容器宽度——限制主菜单的宽度
  • 全宽– 将大型菜单的宽度设置为屏幕的宽度但将菜单内容限制为内容宽度
  • Full Width Stretched – 将大型菜单的宽度设置为全宽边到边
  • 自定义宽度– 以像素为单位设置自定义宽度值

背景颜色/图像

背景颜色/图像将设置为父菜单的大型菜单框您可以使用背景重复背景大小和背景位置等设置来调整背景图像

覆盖此大型菜单的颜色?

您可以为父菜单的大型菜单框中的菜单项设置颜色可用选项有文本/链接颜色文本/链接悬停颜色列分隔线颜色

突出显示标签

这是出现在菜单项旁边的文本它突出显示菜单标签可以是免费促销新品精选等您可以设置标签文本和颜色

spacing

您可以为菜单项设置 Margin 和 Padding

3、Mega Menu的列设置

通常情况下我们在一级菜单目录为某一个菜单项目开始Mega Menu设置对应本文的Products菜单项目

在一级目录项目下面添加的二级菜单项目对应本文的 Product Categorie和Product Gallery自动成为Mega Menu的两列

而在二级菜单下面添加的三级菜单项目则会自动成为Mega Menu对应列中的内容

Astra Pro主题建站教程:入门到专家(完整指南)
Astra Pro主题建站教程:入门到专家(完整指南)

4、扩展Mega Menu第二列的Galley是如何实现的

第一步添加一个自定义链接到Products菜单项目的二级菜单中

链接设置为#也就是空链接

Astra Pro主题建站教程:入门到专家(完整指南)

第二步进入Astra Menu Settings设置内容来源

内容来源选择小部件并在小部件中选择gallery并添加

Astra Pro主题建站教程:入门到专家(完整指南)

添加之后为Gallery添加图片

Astra Pro主题建站教程:入门到专家(完整指南)

添加图片之后设置相册

Link toattachement Page代表链接到添加这个图片的关联页面

Columns设为2就代表设为2列

Random Order勾选就代表相册随机排列每次刷新排列的顺序都不一样

Size图片尺寸如果需要图片清晰一点就用full size

添加之后保存Gallery返回到Astra Menu设置保存这个Gallery设置并保存Astra menu 设置在退出到菜单列表

第三步保存菜单设置

保存之后刷新页面验证结果

如何将 Elementor 模板添加到超级菜单?

您可以使用 Astra 主题和 Astra Pro 插件创建超级菜单。Ook,您还可以使用大型菜单模板来代替或与文本菜单项(链接)结合使用

本文档将向您展示如何使用 Elementor(免费)和 Astra Pro 导航菜单模块将包含 WooCommerce 产品类别的模板添加到大型菜单中

注意该解决方案用于将Elementor 模板添加到 Astra 主题提供的默认标题中请记住这仅适用于 Astra 的默认标题和 Astra Pro 导航菜单模块如果您改用Elementor 标头则此解决方案将不适用

请按照以下步骤操作

步骤 1 – 确保您已安装 Elementor 插件和 Astra Pro Addon 并处于活动状态另外请确保在 Astra 设置 中激活导航菜单模块

步骤 2 – 导航到仪表板 > 模板 > 添加新的

步骤 3 – 在下拉菜单中选择“部分”命名您的模板(可以是任何名称我们使用“Mega Menu Item 1”)然后单击“创建模板”这将创建新模板并打开 Elementor 编辑器

Astra Pro主题建站教程:入门到专家(完整指南)

步骤 4 – 在 Elementor 编辑器中添加“部分”和“短代码”小部件将以下 WooCommerce 代码添加到短代码小部件中

Link Construction Services (30)

E-mailtool (1)

Accountaan- en verkoop (5)

Wikipedia externe linkservice

社媒营销服务

lokale optimalisatie (1)

Distributiediensten voor persbericht (6)

plug-in (1)

Lijst van exposanten (9)

Andere hulpmiddelen (4)

thema (1)

Wordpress-bronnen (2)

Uncategorized

SEO -tools (6)

Gast Post externe linkservice (24)

EDU externe linkservice (5)

这是 WooCommerce 短代码您可以在本文中找到有关它的更多信息以及可能的变化

Astra Pro主题建站教程:入门到专家(完整指南)

使用 Elementor Pro您可以使用 Elementor“产品类别”小部件而不是简码小部件

单击“发布”保存您的模板

5 – 现在是时候创建一个大型菜单了为此请导航至外观 > 菜单单击展开要在其下添加大型菜单的菜单项(我们将此项目命名为“商店”)

步骤 6 – 单击“Astra 菜单设置”按钮然后启用超级菜单切换按钮这将在该项目下创建一个大型菜单您还可以在此步骤中设置大型菜单的样式(宽度填充等)

Astra Pro主题建站教程:入门到专家(完整指南)

步骤 7 – 接下来在超级菜单下添加一个新的菜单项(我们将其命名为“按类别购物”)然后单击“Astra 菜单设置”按钮

步骤 8 – 在内容源下拉菜单中选择“模板”选项在模板字段中输入模板的名称并从列表中选择它单击“保存”将此模板添加到您的菜单项中

Astra Pro主题建站教程:入门到专家(完整指南)

这是它在前端的样子

Astra Pro主题建站教程:入门到专家(完整指南)

总结

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

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

需要了解更多可以查看ChemiCloud主机选购注意事项建站教程速度测评

chemicloud谷歌测速

Over Redactionele afdeling

Het redactionele personeel van Kuajinggu is een team van WordPress -experts,Geleid door Dylan,在 WordPress、Virtuele gastheer、E-commerce、Meer dan 10 jaar ervaring in SEO en marketing。kuajinggu gemaakt op 2014 Jaar,Het is momenteel de grootste gratis WordPress Resource -website in de branche,Wikipedia, vaak WordPress genoemd。

Leave a Reply