Tag: Astra主题设置

  • Astra主题详解:页眉和页脚的设置指南(12)

    Astra主题详解:页眉和页脚的设置指南(12)

    在打造一个完美的WordPress网站时,主题的选择和设置至关重要。Astra主题凭借其高度自定义和灵活的功能,成为了许多用户的首选。在之前的教程中,我们已经讨论了Astra主题的其他设置,今天将重点讲解页眉和页脚的设置。这部分设置虽然被留到了最后,但它们的重要性不容忽视。通过合理的配置,您可以显著提升网站的视觉效果和用户体验。

    步骤:网站后端→Appearance→Customize→Header Builder

    图片[1]-361Sale WordPress Care

    点击后,我们会得到这一个界面

    图片[2]-361Sale WordPress Care

    左侧红色框会显示我们的页眉,也就是标头的一些放置的内容,方便总体调整,当然你也可以在下方单独调整

    图片[3]-361Sale WordPress Care

    如上图,对应的网站logo(Site Title & Logo),菜单(Primary Menu),按钮(Button 1),个人账户(Account),根据你实际需求去调整

    大家很疑惑为什么有三排页眉,但现在只有中间一排有布局,这就是留给你自己的操作空间,你可以把上下两排当做空隙调整,或者加入其他功能,他的布局也会在前端的页面展示在上下两排,下面我添加一个功能大家可以看一下

    图片[4]-361Sale WordPress Care

    如上图,我加入了一个搜索功能,然后他就出现在页眉的上方,大家觉得展示的太小了对吧,因为这排的间隙没有调整好,之前是只有第二排有布局,上下两排间隙是调整到最小的,不然整个页眉会显得很庞大,不协调,下面看怎么调整间隙

    图片[5]-361Sale WordPress Care

    点击设置符号,然后可以设置高度,也就是间隙,还有展示在那些设备,如下图

    图片[6]-361Sale WordPress Care
    图片[7]-361Sale WordPress Care

    如上图,你还可以单独设置这一排的文字颜色背景颜色等等,非常的方便

    其他两排也是这样的操作,当然你也可以设置整个页眉

    步骤:网站后端→Appearance→Customize→Header Builder→DESIGN

    图片[8]-361Sale WordPress Care

    因为我们选择的是透明页眉,所以设置不在这

    步骤:网站后端→Appearance→Customize→Header Builder→Transparent Header

    图片[9]-361Sale WordPress Care
    图片[10]-361Sale WordPress Care

    当然透明页眉也可以设置展示的设备,还有更换网站logo,但这里是我没用打开Enable on Complete Website(在整个网站上启用)可以不用设置,因为我在页眉的网站logo设置了,如果你在这里启用了,那你之前的设置就会被覆盖

    图片[11]-361Sale WordPress Care

    在这里设置各种文字和背景,如果没有设置透明页面就不用在这里设置

    图片[12]-361Sale WordPress Care

    如上图,透明页眉是看你需要的网站效果的,如果你不需要首页的幻灯片或者海报融为一体,可以不启用这个,Astra主题的模版有些是透明页眉有些不是,在导入的时候可以看清楚,如果还是没注意,也是可以调整的

    图片[13]-361Sale WordPress Care

    页眉是分三个部分的,怎么排列就看你需要什么样的效果了,中间肯定居中的,适合放菜单

    图片[14]-361Sale WordPress Care

    添加也是有很多功能可以选择的,如上图和下图

    图片[15]-361Sale WordPress Care

    按钮最多可以添加两个Button 1和Button 2,适合跳转链接

    分隔器也是最多两个Divider 1和Divider 2

    简码展示:HTML 1和HTML 2,也是最多两个,比如有一些插件可以用这种简码插入到标头,比如多语言多货币

    LanguageSwitcher:多语言(语言转换器)

    Secondary Menu:(次要菜单),你可以理解为主菜单后的存在

    ToggleButton:(折叠符号),手机端的菜单展示

    Search是搜索栏,Social是社交链接

    Cart:是购物车

    小部件的功能可以到后端小部件设置:Widget 1到4,当然一般用于页脚的,如果页脚不需要你可以设置页眉

    图片[16]-361Sale WordPress Care

    还有四个已经添加在页眉,所以不会显示在可以添加的功能

    图片[17]-361Sale WordPress Care

    同时也主要三个设备的调试,比如下面的手机端

    图片[18]-361Sale WordPress Care
    图片[19]-361Sale WordPress Care

    手机端OFF CANVAS是折叠符号和里面的内容设置

    图片[20]-361Sale WordPress Care

    菜单记得配置好每一个对应的菜单项目,不然不会显示

    下面来讲下页脚,基本差不多,有一个区别就是他可以设定一排多少列

    图片[21]-361Sale WordPress Care
    图片[22]-361Sale WordPress Care

    如上图,他可以设置一排几列,能达到你需要的效果,还有布局的效果

    图片[23]-361Sale WordPress Care

    能添加的模版都差不多,主菜单变成了页脚菜单,大家更具自己的需要添加

    最后还有一个问题就是Astra和Astra pro是有区别的,如下图

    图片[24]-361Sale WordPress Care
    图片[25]-361Sale WordPress Care

    Sticky Header(粘性页眉)也就是置顶页眉

    图片[26]-361Sale WordPress Care

    置顶页眉还是很好的,不然你滑动的时候页眉是不会粘贴在当前页面的上方的,会处于首页的最上方

    所以建议开通Astra pro 解锁所有的功能,体验感会更好

    总结

    通过本文的介绍,相信大家已经掌握了如何在Astra主题中设置页眉和页脚。这些设置不仅能够让您的网站更具个性化,还能提升用户的浏览体验。如果您对Astra主题或WordPress其他方面的设置感兴趣,欢迎关注我们下期的内容,我们将为您深入讲解盗版主题插件和正版主题插件的区别,帮助您做出更明智的选择。

  • Astra主题设置详解:如何轻松管理您的网站外观(10)

    Astra主题设置详解:如何轻松管理您的网站外观(10)

    Astra主题以其轻量化和高定制性著称,但对于新手用户来说,初次接触其设置可能会感到有些复杂。本文将详细介绍Astra主题的主要设置位置及功能,帮助您轻松管理和定制网站的外观与布局。无论是排版、颜色还是博客布局的设置,您都可以通过本文的指导快速上手,打造出一个符合您需求的网站。

    Astra主题的主题设置集成在两个地方

    步骤:网站后端→Astra→Dashboard→你需要设置的模块

    图片[1]-361Sale WordPress Care

    这是其中的一种,可能看起来会比较乱,没有那么直观,如上图

    图片[2]-361Sale WordPress Care

    第二种就在主题的自定义,如下图和上图

    步骤:网站后端→Appearance→Customize→你需要设置的模块

    图片[3]-361Sale WordPress Care

    这种就直观一点,可视化编辑

    图片[4]-361Sale WordPress Care

    Typography(排版):空调调整字体的样式,以及你在elmentor编辑选择的H1-H6字体也可以在这里选择,你可以理解为全局布局

    图片[5]-361Sale WordPress Care

    以及颜色

    图片[6]-361Sale WordPress Care

    容器的设置

    Site Layout(网站布局)

    Container Layout(容器布局):可以设置几种不同宽度的

    图片[7]-361Sale WordPress Care

    以及设置整个容器的外框(Outside)和内框(Inside),你可以理解为elmentor高级功能一样,但不建议在这里调整,在elmentor容器模块单独设置比较好,这里会影响全局

    图片[8]-361Sale WordPress Care

    这句话怎么理解呢,如下图,在黄色款的状态下,则不会有变化

    图片[9]-361Sale WordPress Care

    博客(blog)也可以设置

    图片[10]-361Sale WordPress Care

    博客目录:Blog / Archive

    单篇博客:Single Post

    图片[11]-361Sale WordPress Care

    选择合适的布局

    图片[12]-361Sale WordPress Care

    这个是博客目录的布局,如果不选择的就是默认的

    图片[13]-361Sale WordPress Care

    如果没有设置布局,默认的就是一篇一篇的

    还可以设置目录显示多少篇文章,大家根据翻译去理解

    图片[14]-361Sale WordPress Care

    以及Post Elements(贴子元素),可以隐藏或者展示或者编辑

    图片[15]-361Sale WordPress Care

    以及文章作者摘要的一些信息,如下图,功能很完善,而且调整的,旁边的页面能显示实时效果,就是可视化还是很好用的

    图片[16]-361Sale WordPress Care
    图片[17]-361Sale WordPress Care

    如果默认的标题不能满足你需要的效果,记得打开Blog Title Area(博客标题区)

    图片[18]-361Sale WordPress Care

    设置布局和元素,记得看实际效果哦

    图片[19]-361Sale WordPress Care

    Single Page:(单个页面)

    Search Page:(搜索页面)

    图片[20]-361Sale WordPress Care

    设置方法和上面博客设置是类似的,只是设置的区块不一样,这个是设置页面的,如上图

    图片[21]-361Sale WordPress Care

    Sidebar:侧边栏设置,如果不需要则不需要设置,上述就没有设置有侧边栏,黄色的箭头就是设置有侧边栏的

    总结

    通过以上介绍,您应该对Astra主题的设置有了更深入的了解。无论是调整排版、颜色,还是定制博客和页面布局,Astra主题都提供了丰富的功能来满足您的需求。在下一期中,我们将继续探讨Astra主题的更多设置选项,帮助您进一步优化网站的用户体验和视觉效果。