用免费的Astra主题搞定外贸B2B, B2C网站

astra主题 外贸商城主题推荐

一、Astra主题介绍

Astra主题是一个轻量化, 可高度定制的免费主题,超过100w的wordpress用户选择Astra作为自己网站的主题。该主题的rate评价常年稳居5星,足以见Astra主题的受欢迎程度。

Astra除了可以用在B2B外贸门户网站上,也可以非常好的与woocommerce结合,用于构建B2C外贸商城网站。

  • 轻量化:该主题的代码非常精简,加载速度快,具有很好的用户体验。
  • 高度定制化:该主题可以适应任意类型的网站建设需要。

1. 安装方法

和所有其他主题安装方法一样,直接在wordpress主题菜单中搜索astra即可找到astra主题。

mark

安装完Astra主题后,建议删除其他主题,加快网站加载速度,减少安全漏洞。

二、主题的设置

主题的作用这篇文章中,我们讲到了主题最重要的两个作用:

  1. 为整个网站提供通用的基础设置(字体,颜色,页面宽度等)
  2. 给新建的网页提供样式模板

下面的文章,我们分别从这两个方面了解Astra主题怎么使用。

1. 网站通用设置

网页中的所有页面都是有文字、标题、图片、按钮等部分组成,这些组件在网页中称为元素element。每个页面都是由这些基础的元素进行排列组合而成。

为了追求网页设计上的一致性,这些基础元素都会尽量保持统一的样式,如文字的大小、字体类型、颜色等。这些基础元素的属性设置中就是主题的通用设置功能。如在设计某个页面时,不单独指定文字的样式,则会继承主题的这些属性设置。

在astra主题中对应为Global菜单下的选项:

mark
Global设置项选项说明
基础字体Family font / Size/ Weight/ Line Height行高网站正文文字样式
Heading标题H1-H6标题的样式设置
Color颜色文本/ 网站主题色/ link链接颜色等文本和链接缺省的颜色
容器container整体布局/ Page页/ bLOG页布局网页的正文区域宽度设置
Button按钮颜色,大小,边框等网页中button按钮样式

Global全局设置选项并不多,且每个设置都是马上生效,可以看到实时效果,根据自己的设计需要进行基础设置的调整即可。

mark

具体某个设置的值和影响范围可Astra参考官方文档- Global全局设置

2. 网页模板相关设置

网页模板是我们新建网页时的缺省样式。在wordpress中,所有最终发布出来的网页都是由网页模板+网页主体内容两部分组成。

主题设置好以后,当我们在wordpress后台新建任意一个page/ blog页面时,添加的内容都会出现在主题内容区域

在页面编辑器中我们没法编辑和修改非主题内容区域的内容,因为这些是由主题中的网页模板功能生成,需要通过主题的选项来控制和修改。

mark

主题模板包括哪些部分?

主要由以下三个部分组成。

  1. header区域:网页的头部,有网站logo和菜单导航栏等。
  2. sidebar侧边栏:侧边栏区域可添加widget小工具,widget小工具为网页提供一些额外的动态内容,如搜索功能、最新文章等。
  3. footer页脚:网站的版权申明等信息

搞明白以上逻辑关系后,接下来设置astra主题中的页面模板就简单了。

具体的设置和对应影响的区域关系见下图:

mark
mark

具体的每个设置选项请参考官网 https://wpastra.com/docs-category/astra-customizer-settings/

三、B2C商城支持

如果我们的网站是用于B2C商城,一般都会选用woocommerce插件,woocommerce搭配astra主题也是一个非常好的组合,针对商城网站,astra中有提供了一些额外的功能支持。

当安装完woocommerce插件后,astra主题选项中会多出如下的设置选项,可用于优化woocommerce商城页面。

mark

四、Elementor编辑器支持

Astra主题和Elementor是一对天生的搭档,结合Elementor可视化编辑器可以快速制作任意类型的外贸网站。

youtube上搜索astra+elementor可以找到成吨的优质建站视频。

mark

astra还提供了一个快速导入外部优质网页模板的插件 astra starter,在plugins中搜索安装即可。

安装完astra starter后,在外观菜单中会多出一个 starter templates的菜单:

mark

选择elementor编辑器制作的网页模板,可以找到非常多优质的网页,这些网页都可以直接为我们所用。

比起在国内随便找个网站外包公司来说,这些优质的网页设计要高出几个级别。

mark

五、 更多高级功能

最后,astra基础版是免费的,免费的功能已经非常强大了.

如果你还需要一些更多的控制选项及相关主题功能,astra也提供了一个pro版本。

在pro版本,可供配置的功能选项更多,如提供了更多的字体,页面布局相关设置。另外也增加了一些额外功能,如固定头部栏(鼠标滚动式头部不会消失)等,有需要的可以登陆Astra官网了解

mark

End

Table of Contents

欢迎关注TTVPS公众号,一起交流探讨学习!

欢迎关注TTVPS公众号,及时接收最新文章!