Category: Astra主题

  • 如何在Astra主题中禁用特定页面的背景图片

    如何在Astra主题中禁用特定页面的背景图片

    图片[1]-361Sale WordPress Care

    Astra主题中,背景图片可以为页面增添视觉效果,使用Astra Pro可以实现。但有时希望在特定页面上禁用背景图片,以获得更简洁或定制的外观。本文将详细介绍如何在Astra主题中禁用特定页面的背景图片,能够灵活管理网站的视觉风格。

    第一步:进入页面编辑器

    1. 登录到WordPress后台。
    2. 点击左侧菜单中的“页面”选项,找到想要修改的页面。
    3. 点击页面标题或“编辑”按钮,进入WordPress的页面编辑器。
    图片[2]-361Sale WordPress Care

    第二步:进入Astra设置

    在页面编辑器的右侧,会看到一个名为“Astra Settings”或“页面设置”的面板。

    图片[3]-361Sale WordPress Care

    第三步:禁用背景图片

    1. 在“Astra Settings”面板中,查找与背景相关的设置。例如,“禁用背景”或“背景图片”选项。
    图片[4]-361Sale WordPress Care
    1. 如果找不到明确的背景禁用选项,可以在“布局”选项卡中检查是否有用于隐藏或禁用页面背景的选项。

    第四步:使用自定义CSS禁用背景图片(可选)

    如果通过代码实现更加灵活的控制,可以使用自定义CSS来禁用特定页面的背景图片。以下是具体操作步骤:

    1. 在WordPress后台,导航到“外观” > “自定义”。
    图片[5]-361Sale WordPress Care
    1. 点击“额外CSS”选项,在此输入以下代码:
    .page-id-XX {
    background-image: none !important;
    }
    图片[6]-361Sale WordPress Care

    将“XX”替换为想要禁用背景图片的页面ID。可以通过查看页面的URL来获取页面ID。例如,页面链接是yoursite.com/?page_id=123,那么123就是页面ID。

    第五步:保存并预览

    1. 完成所有设置后,点击“更新”或“发布”按钮保存页面的修改。
    2. 预览该页面,确保背景图片已成功禁用,并检查页面外观是否符合你的预期。

    总结

    在Astra主题中,可以轻松禁用特定页面的背景图片,帮助你创建更加简洁和个性化的网页设计。通过Astra设置或自定义CSS代码,能够灵活地控制页面的视觉效果,确保每个页面都符合你的设计需求。

  • 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主题中的WooCommerce集成功能与商店设置(11)

    深入解析Astra主题中的WooCommerce集成功能与商店设置(11)

    在本文中,我们将深入探讨Astra主题如何与WooCommerce无缝集成,为在线商店带来更多自定义和优化选项。通过Astra主题提供的丰富功能,您可以轻松设置商店的布局、产品分类、购物车、结账页面等多个重要元素,为客户提供更加优质的购物体验。本文将逐步介绍这些功能的详细设置,帮助您全面了解并利用这些强大的工具。

    图片[1]-361Sale WordPress Care

    有商店每一个单独的设置,如下图,比如商店布局,产品分类,单个产品,购物车,结账,个人账户,产品图片等等,非常丰富,这里属于主题赋予的功能,如果没有Astra主题,就没有这些

    图片[2]-361Sale WordPress Care

    1,布局,右侧的可视化就体现了我们现在设置的布局,如果你想更换,设置为其他的就会刷新重新布局

    图片[3]-361Sale WordPress Care

    如下图,是不是很简单

    图片[4]-361Sale WordPress Care

    2.Product Catalog:产品目录,就是商店页面

    图片[5]-361Sale WordPress Care

    可以设置样式和一条栏目展示几个,和整个页面展示多少个

    图片[6]-361Sale WordPress Care

    还有一些商店展示选项,还有一些元素,如果你不知道设置,可以参考上图的设置,或者用翻译就能知道了,因为是可视化的,你调整了可以看下有哪些变化,要自己多试,我说了你明白了,但你实际操作还是会不明白,多实操

    图片[7]-361Sale WordPress Care

    还有一些显示条件,每一个效果都不一样,默认的如果能满足你就不用调整了

    3,Single Product(单产品的设置)产品详情页

    选择默认的,或者去调整下,每个根据翻译就可以了

    4,购物车的细节调整

    图片[9]-361Sale WordPress Care

    5,结账界面的调整

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

    以及提醒和隐私政策都可以编辑,非常的方便

    6,我的账户页面的调整,名称和视图等等

    图片[12]-361Sale WordPress Care

    7,产品图片,这是一个非常好的功能,不需要担心产品图片尺寸不同意,非常的好看,这个功能都是需要比较好的主题才有这个功能

    图片[13]-361Sale WordPress Care

    8,商店通知,很简单,设置好后,勾选Enable store notice(展示出来)

    图片[14]-361Sale WordPress Care
    图片[15]-361Sale WordPress Care

    设置好颜色和位置就可以了

    总结

    通过本次的讲解,您应该已经对Astra主题与WooCommerce的集成功能有了更加深入的理解。这些功能不仅使您的在线商店更加灵活,还能帮助您优化用户体验。如果您还没有尝试过这些设置,建议在自己的商店中动手操作一番。下一期我们将继续探讨Astra主题的更多设置和功能,敬请期待。

  • 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主题的更多设置选项,帮助您进一步优化网站的用户体验和视觉效果。

  • 如何使用Elementor创建自定义标头和页脚:一步步指南(09)

    如何使用Elementor创建自定义标头和页脚:一步步指南(09)

    在使用WordPress建站时,默认的Astra主题标头和页脚可能无法满足您对网站外观的所有需求。幸运的是,通过elmentor,您可以轻松创建和定制自己的标头和页脚。本篇文章将详细介绍如何在elmentor中生成这些自定义部分,并替换掉Astra主题的默认设置,为您的网站注入更多个性化元素。

    我们需要先进入到Edit with Elementor编辑页面

    图片[1]-361Sale WordPress Care

    点击如上图的符号,进入全局设置

    图片[2]-361Sale WordPress Care

    再点击Theme Builder(主题生成器),可以进入elmentor的部件生成器界面

    图片[3]-361Sale WordPress Care

    你可以编辑标头和页脚,以及单品或者其他的页面,如果需要更多的自定义以及DIY这个就很适合你

    图片[4]-361Sale WordPress Care

    我们先添加一个标头,如上图

    图片[5]-361Sale WordPress Care

    选择一个你喜欢的布局,具体的细节都可以改的

    图片[6]-361Sale WordPress Care

    点击Insert, 先下载,我们会得到一个标题的界面,如下图

    图片[7]-361Sale WordPress Care

    然后我们可以更改logo和菜单以及右边的社交

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

    当然你也可以添加新的模块,但要注意每个设备间的适配问题

    图片[10]-361Sale WordPress Care
    图片[11]-361Sale WordPress Care
    图片[12]-361Sale WordPress Care

    查看是否协调,特别是手机端

    然后全部设置调整好后就可以设置显示条件了,如果没有设置的话,会优先显示Astro主题的,如下图

    如果您直接点击保存也回弹出窗口让你设置显示条件的,这只是一种自己调整的方式

    图片[13]-361Sale WordPress Care

    Display Conditions(显示条件),在左侧保存的更多的栏目

    图片[14]-361Sale WordPress Care

    然后我们点击Add Condition,继续设置条件

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

    可以选择Entire Site(整个网站)或者Archives或者Singular(其实不同类型的页面)

    图片[17]-361Sale WordPress Care

    单个建议选择Singular,设置的选项会更多,也更完善,最终根据大家的效果设置就行啦

    然后点击保存Save & Close

    图片[18]-361Sale WordPress Care

    现在设置的是整个网站展示,所以会替换主题的页眉效果

    如果我们需要删除的话,也是有两种方法可以删除

    1,重复先前进入主题生成器(Theme Builder)的步骤,进入后

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

    如上图,直接删除即可

    2,进入网站后端,找到elmentor模版(Templates)

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

    点击删除即可,模版不多的话,还比较容易找到,建议设置好每一个模版的名称,以便查找

    同理,创建页脚的步骤也是一样的

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

    替换掉成你的内容,或者栏目不够的在添加一个容器,也就是一列都是可以的,还有版权信息等等

    图片[25]-361Sale WordPress Care

    添加你需要的模块,记得查看每个设备的界面是否协调

    然后保持设置需要的条件就完成了,是不是很简单

    但如果有Astra主题的话,不建议使用elmentor的自定义生成器,因为主题的会更好用,这种比较适合没有没有好的主题或者只有elmentor的玩家,而且对于elmentor有一定的熟练度,否则可能会和主题有冲突,你可能需要更多时间来排查

    总结

    通过上述步骤,您已经掌握了如何使用Elementor创建和定制标头与页脚。虽然Astra主题提供了不错的默认设置,但对于希望个性化网站设计的用户来说,Elementor的自定义生成器无疑是一个强大的工具。在下一期,我们将继续探讨更多Astra主题与Elementor的结合使用技巧,帮助您更好地优化网站的设计与功能。

  • Astra主题与Elementor:模块间隙调整与模板保存技巧(08)

    Astra主题与Elementor:模块间隙调整与模板保存技巧(08)

    今天我们继续讲解Astra主题Elementor更多的设置和技巧,在使用Astra主题与Elementor构建WordPress网站时,模块之间的布局和间隙设置至关重要。一个良好的间隙布局可以显著提升页面的美观度与用户体验。然而,很多人常常因为模块拥挤而感到困扰。今天,我们将分享两种简单有效的方法,帮助你轻松调整模块间隙,同时还会介绍如何保存模板以便在其他页面重复使用。

    图片[1]-361Sale WordPress Care

    如上图,如果每个模块直接很拥挤,那我们应该调整呢,有两种方法

    1.我们找到Spacer(垫片),就是间隔器直接拖动到,模块的上面或者下面,或者单独加一个容器,再加入这个Spacer,根据你的实际情况

    图片[2]-361Sale WordPress Care

    然后我们会进入这个模块的设置,再去调整Spacer(垫片)的具体间隔数值

    图片[3]-361Sale WordPress Care

    2.第二种就是通过容器(Container)的高级布局功能

    图片[4]-361Sale WordPress Care

    我们需要先断开这个链接功能,如果不断开四个方向都是链接的,就会造成容器偏移,请看如下第二张那个图片

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

    所以正确的设置是,比如我们想设置上面的空隙,断开链接后,设置TOP(也就是上方)设置好你希望的效果,这是100的效果

    这就是模块的间隙的两种调整方法

    还有一个保存模块,以便到其他地方使用的方法

    比如我需要这个容器的内容或者只需要某个模块

    图片[7]-361Sale WordPress Care

    鼠标右键点击后,我们会有一个这样的界面,选择保存到模版Save as Template

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

    填写好模版的名称,以便在插入模版的时候方便寻找,点击Save保存

    图片[10]-361Sale WordPress Care

    如上图,在需要插入的地方选择Termplale模版

    图片[11]-361Sale WordPress Care

    输入模版的名称就能插入了,是不是很方便,如果模块相同的情况下,确实很方便,但有一个缺点,如果你需要修改模块的内容,需要去网站后端的elmentor模块找到这个模块去修改,大家根据实际情况来调整哦

    图片[12]-361Sale WordPress Care

    总结

    通过掌握这两种模块间隙调整方法,以及学会保存和复用模板,你可以更加灵活地设计网页布局,提高工作效率。希望今天的分享能够帮助你在Astra主题与Elementor的使用过程中更得心应手。下期我们将继续探讨更多Astra主题与Elementor的实用技巧,敬请期待!

  • Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

    Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

    在上期的文章中,我们探讨了Astra主题的一些基本排版技巧。今天,我们将继续深入探讨如何在Elementor编辑器中更好地利用Container和Grid布局,帮助你创建更加灵活且美观的网页设计。无论你是初学者还是有经验的设计师,这些技巧都将助你一臂之力。

    如果你需要设置二个或者四个甚至更多的布局

    图片[1]-361Sale WordPress Care

    如上图,你需要先加入一个容器(Container)

    图片[2]-361Sale WordPress Care

    步骤:网站前端→Edit with Elementor→Layout→Container或Grid

    怎么去选择Container和Grid,这个需要根据实际情况,但建议优先选择Container

    图片[3]-361Sale WordPress Care
    图片[4]-361Sale WordPress Care

    Container可以选择多种布局,当然Grid也行,但是Container可以在里面一直添加模块,而Grid是固定的,如下图,红色框是Container,如果你需要展示多个模块,肯定是Container,黄色框是Grid,很明显的结果

    图片[5]-361Sale WordPress Care

    但Grid也有自己的优点,如果你已经有一个容器了,但你想分为二个甚至四个的布局,那重新设置的Container两布局的容器是无法拖动到第一个的容器的,但是Grid就可以随时调整,如下图,所以大家根据实际情况去调整

    图片[6]-361Sale WordPress Care

    接下来来讲一个两个布局的设置和方法

    图片[7]-361Sale WordPress Care

    以上就是一个Container两布局的,左边是有文本和标题模块再加一个文本模块再加一个按钮模块,右边则是单张图片模块

    左边的第一个文本模块大家觉得为什么能调整到那么小

    我们找到文本模块Edit Text Editor

    步骤:网站前端→Edit with Elementor→Edit Text Editor

    图片[8]-361Sale WordPress Care

    需要调整文本的大小,按照我上述的步骤,颜色在内容哪里调整

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

    这样就设置好了

    图片[11]-361Sale WordPress Care

    按钮模块设置一下文字和位置就可以了,当然背景颜色样式也是都可以调整的

    步骤:网站前端→Edit with Elementor→Creative Button

    图片[12]-361Sale WordPress Care

    右边的图片模块不是霸占全屏的,如果需要的话,裁剪合适的尺寸就行了,竖图,而不是横图

    图片[13]-361Sale WordPress Care

    这就是两布局的方式

    当然四布局也是一样的

    图片[14]-361Sale WordPress Care
    图片[15]-361Sale WordPress Care

    设置好四布局后,在每一个单独的加入标题和文本模块

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

    背景色是设置一个容器的黑色

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

    模块背景是白色

    图片[20]-361Sale WordPress Care

    模块设置好宽度,以及位置,还有空隙

    总结:

    通过本文的介绍,你应该对Container和Grid的使用有了更深的理解,并能够根据实际需求选择合适的布局方式。记住,Container适用于更灵活的布局需求,而Grid则可以帮助你在现有容器中快速分割布局。下一期,我们将继续为你带来更多关于Astra主题的实用技巧与攻略,敬请期待。

  • Astra主题正式排版指南:Elementor模块设置与优化技巧(06)

    Astra主题正式排版指南:Elementor模块设置与优化技巧(06)

    前面已经讲了Astra主题的个别细节功能,今天讲述怎么正式排版

    在如今的WordPress生态系统中,Astra主题以其轻量化和高度自定义的特点赢得了广泛的用户青睐。然而,对于初次使用Astra主题的用户而言,如何高效地进行页面排版和模块设置,依然是一个需要探索的过程。在这篇文章中,我们将深入解析如何在Astra主题中使用Elementor编辑器进行页面排版,逐步讲解图片轮播效果和折叠显示图片功能的创建和设置,让你的网页更具吸引力和实用性。

    Astra主题是没有主题的特色模块,他适合所有的编辑器,比如默认的Gutenberg编辑器,以及WPBakery PageBuilder还有Elementor编辑器还有他自己的光谱(spectra)编辑器

    在进入elmentor编辑界面后,我们会得到一个编辑首页的页面,以下展示的是一个B端已经装修好的页面,具体根据你的实体情况来

    图片[1]-361Sale WordPress Care

    我们分别讲述一下这些模块是怎么创建和设置的,第一个我们看到的是一个图片轮播效果的展示

    步骤:网站前端→Edit with Elementor→Edit lmage Carousel

    图片[2]-361Sale WordPress Care
    图片[3]-361Sale WordPress Care

    我们需要设置他这个图片,然后在设置一些展示方法,比如一共展示多少个,或者当前页面展示多少个,还有尺寸的大小

    图片[4]-361Sale WordPress Care

    这样基本的设置就完成了,当然你如果对于图片或者导航的大小或布局,风格不满意,可按照以下设置去修改

    图片[5]-361Sale WordPress Care

    下一个是一个折叠显示的图片功能

    图片[6]-361Sale WordPress Care

    elmentor和elmentor pro的功能基本够用,但如果有些特殊的功能需要用到Essential Addons(就是elmentor的高级附属插件),提供了大量的模块,基本能满足你的所有要求,比如上述的图形折叠模块(Edit lmage Accordion)

    图片[7]-361Sale WordPress Care

    你安装好后,会出现在elmentor编辑器的栏目的下方,如下图

    图片[8]-361Sale WordPress Care

    如果大家有兴趣,后续还可以推荐更多elmentor的功能插件

    图片[9]-361Sale WordPress Care

    折叠模块的设置方法,设置好是Accordion Style:
    悬停滑动还是点击滑动,也就是理解为弹窗.

    Direction:设置是横屏还是竖屏

    Horizontal Alignment和Vertical Alignment
    是居中的

    图片[10]-361Sale WordPress Care

    内容设置好图片,标题和按钮,你可以在描述也就是按钮加入链接,也可以在下方的Title Link加入链接,标题链接点击的范围更大,按钮的只能点击按钮才有会跳转

    图片[11]-361Sale WordPress Care

    如果你对他的容器或者文字描述不满意,可以去General(容器)和Color & Typography(文字的颜色大小)去调整

    总结:

    通过本篇文章的介绍,相信大家对如何在Astra主题中使用Elementor编辑器进行页面排版有了更清晰的了解。在实际操作中,你可以根据自身需求对不同模块进行灵活设置,从而打造出更具个性化和功能性的网页。下一期,我们将继续探讨如何创建更多的容器以及Astra主题的更多高级设置技巧,帮助你进一步提升网站的专业性和用户体验。

  • 轻松掌握Astra主题幻灯片设置:Elementor Pro与非Pro版操作详解(05)

    轻松掌握Astra主题幻灯片设置:Elementor Pro与非Pro版操作详解(05)

    Astra主题的幻灯片有两种方式

    图片[1]-361Sale WordPress Care

    在选择幻灯片(Slides)的时候,需要确保你开通了elementor Pro版,普通版是没有的,一般Astra模版导入后,首页的图片都是容器背景,是不可轮播的

    我们先讲第一种不需要elementor Pro版的

    图片[2]-361Sale WordPress Care

    步骤:网站前端→使用 Elementor 编辑→选择容器→style(样式)→image

    一般是一个大容器里面加入的小容器,小容器分为两列,然后有标题或文本,这样就形成了一个不轮播的首页

    图片[3]-361Sale WordPress Care

    先设置好大容器的背景,注意背景要调成Repeat:No-repeat(不重复),显示尺寸(Display Size):Cover(覆盖)

    然后替换掉模版的标题和文本就行了,当然模版不一样设置也不一样,如果是两列的情况下,右边有图片,那就替换图片就行

    图片[4]-361Sale WordPress Care

    如下图,两列的形式

    图片[5]-361Sale WordPress Care

    第二种则需要elementor Pro

    步骤:网站前端→使用 Elementor 编辑→选择容器→Slides(幻灯片)

    图片[6]-361Sale WordPress Care

    进入左侧编辑页面,滑动到Pro界面,找到Slides(幻灯片)

    在添加之前,我们需要加入Container或Grid(也就是容器),这样才好控制模块的功能

    图片[7]-361Sale WordPress Care

    然后进入幻灯片模块

    图片[8]-361Sale WordPress Care

    会有内容设置和高度以及一些其他的设置

    图片[9]-361Sale WordPress Care

    第一个是背景,以及背景的底色,如果有设置图片背景,底色的颜色也是会被覆盖的

    图片[10]-361Sale WordPress Care

    第二个就是幻灯片的内容展示,在这里替换内容,以及按钮和跳转的链接,

    图片[11]-361Sale WordPress Care

    第三个就是内容风格,如果你选择默认的,则展示在中间的位置,如果你需要其他设置,以及更多的展示方式,则需要打开自定义功能

    图片[12]-361Sale WordPress Care

    宽度根据实际情况调整,我这是到顶的

    图片[13]-361Sale WordPress Care

    还有一个整体幻灯片的风格调整,这里有针对标题或描述,和按钮,以及单个设置

    图片[14]-361Sale WordPress Care

    到这里,你就会Astra主题的幻灯片几种展示了,,下一期我们讲述Astra主题更多的功能和技巧

  • Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)

    Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)

    在之前的文章中,我们详细探讨了 Astra 主题付费版与模板导入的区别。本期文章,我们将深入解析 Astra 主题的菜单设置。对于每一个网站来说,菜单都是至关重要的导航工具,不仅决定了用户的浏览体验,还直接影响到网站的整体布局和美观度。通过 Astra 主题的强大功能,你可以轻松设置出既美观又实用的超级菜单,提升你的网站质感和用户体验。

    在之前的各类主题我们都讲述了菜单,菜单的设置都是差不多的,就一个添加的page(页面),第二个是自定义链接,第三个则是你想加入比如产品的分类或者其他项目

    步骤:网站后端→Appearance→Menus

    图片[1]-361Sale WordPress Care

    为什么页面显示Elementor,因为是显示这个页面是有Elementor编辑的,没有显示的则为默认编辑器

    图片[2]-361Sale WordPress Care
    图片[3]-361Sale WordPress Care

    还有些页面会显示page,这就是设定的主页面,比如主页(home),博客(blog),商店(shop),购物车(cart),结账(checkout)

    图片[4]-361Sale WordPress Care

    如果你不想显示的这么单一,想要更美观更独特的效果,如下图

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

    各种各样的效果,是不是比普通效果好多了,接下来我来教你怎么设置超级菜单

    图片[8]-361Sale WordPress Care

    如上图,我们在需要需要设置的二级菜单的主导航名称下开启超级菜单选项,链接可以设置为\或者#

    图片[9]-361Sale WordPress Care

    如上图,先打开这个超级菜单按钮哦

    图片[10]-361Sale WordPress Care

    然后选择合适展示宽度,你可以选择全屏宽度或者菜单宽度,和自定义宽度,非常的智能

    图片[11]-361Sale WordPress Care

    然后你可以设置菜单背景的颜色,或者放入背景图片,根据实际情况调整

    图片[12]-361Sale WordPress Care

    当然还有标题和文本以及链接的颜色调整

    图片[13]-361Sale WordPress Care

    最后点击保持,你就完成了第一步

    图片[14]-361Sale WordPress Care

    然后我们需要设置超级菜单的标题,也就是第一个,你可以理解为标题

    图片[15]-361Sale WordPress Care

    然后链接地址\或者#,然后在点击超级菜单

    图片[16]-361Sale WordPress Care

    把他设置为标题,这样会比较好区分它和他的子项。同时禁用链接,如果有链接,则在前端鼠标触碰会有动态效果,如果只是展示的话,就禁用链接

    图片[17]-361Sale WordPress Care

    还有一个分隔符的颜色,这人会更容易区分

    图片[18]-361Sale WordPress Care

    当然还有一种分隔符的设置方式,但超级菜单这种的会比较简单,而且自适应

    图片[19]-361Sale WordPress Care

    如上图,通过自定义链接的形式,但这种不好控制长度,所以这只是一种参考

    图片[20]-361Sale WordPress Care

    然后它的子项目就正常添加就行了,无需在动超级菜单,是不是非常的简单

    我们讲述另一种超级菜单的设置

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

    我们看到前端的效果是不显示标题的,你看到可能会有疑问,其实就在超级菜单的哪里隐藏了标题

    图片[23]-361Sale WordPress Care

    如下图,图片则是在超级菜单的位置加入了图片,其他都是一样的

    图片[24]-361Sale WordPress Care

    如下图,我们需要一步步设置,才能选中图片,否则是没有的

    图片[25]-361Sale WordPress Care

    总结:
    通过本篇文章的详细讲解,相信你已经掌握了如何在 Astra 主题中设置超级菜单的方法。菜单的设计不仅仅是简单的导航设置,更是提升用户体验和网站专业度的重要一环。下一期,我们将继续探讨 Astra 主题的更多功能,包括幻灯片和其他细节设置,帮助你打造更加出色的网站。