Category: 巴塞尔主题

  • Basel主题完整教程:从零开始优化你的网站(13)

    Basel主题完整教程:从零开始优化你的网站(13)

    欢迎来到我们的Basel主题总结教程!在之前的几篇文章中,我们详细介绍了如何使用Basel主题来优化你的WooCommerce网站。从修改公告、设置浏览器图标和网站标题,到调整商店页面展示风格和产品图片尺寸,我们一步步带你完成了所有关键设置。今天,我们将回顾并总结这些重要步骤,确保你的网站在视觉效果和用户体验上都达到最佳状态。让我们开始吧!

    1,修改网站的公告

    步骤Appearance→Customize→WooCommerceStore Notice

    图片[1]-361Sale WordPress Care

    Basel主题的公告默认在网站前端的最下方,是固定滑动的,接下来我们说下在哪里设置的,如下图,(但前提你需要安装WooCommerce插件),具体的显示位置和效果由主题决定

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

    记得填写好内容,勾选Enable store notice(展示),内容可以写优惠活动或者最新消息,以及注意事项,因为公告会有很好的提醒效果,这只是作为参考

    2.网站的浏览器图标以及网站标题和标语

    步骤步骤Appearance→Customize→Site ldentity

    图片[5]-361Sale WordPress Care

    如上图替换内容和图标

    3.商店页面展示风格

    步骤Appearance→Customize→WooCommerceProduct Catalog

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

    你可以选择展示产品或者产品分类,或者产品和分类一起展示

    4.产品图片统一尺寸

    步骤Appearance→Customize→WooCommerceProduct lmages

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

    如上图,选择合适的产品图片尺寸,所有的产品都会统一裁剪,如果不知道设置多少数值合适,请参考以上数值

    5.设置导航栏菜单,可以参考之前的文章

    6.其他设置参考Basel主题其他教程

    我们说一下有些必须注意的事项

    整个网站装修完后,检查前端所有的跳转链接是否正常,以及菜单页面跳转是否正常,以及从客户购买产品有没有问题,购物车和结账页面,能不能选择送货方式以及支付方式的选择,以及用户的注册,还有订单的测试,确认处理订单没有问题。Basel主题是一个非常完善的主题,功能设置很多,基本上设置就能解决很多问题,不需要用代码插入,可以参考下列图片设置

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

    恭喜你!通过完成这些步骤,你已经成功优化了你的WooCommerce网站,并充分利用了Basel主题的强大功能。记住,定期检查和更新网站是保持其高效运行和吸引力的关键。无论是修改公告、调整导航栏菜单,还是确保购物流程的顺畅,这些细节都会影响用户的整体体验。希望这个总结教程对你有所帮助,如果有任何疑问或需要进一步的指导,欢迎随时与我们联系。祝你的在线商店生意兴隆!

  • 详解Basel主题页脚功能:从基础设置到链接跳转全攻略(12)

    详解Basel主题页脚功能:从基础设置到链接跳转全攻略(12)

    在今天的教程中,我们将详细讲述Basel主题的页脚功能。Basel主题,以其强大的功能和灵活的设计著称。本篇文章将教您如何修改页脚内容和设置跳转链接,从而提升您网站的用户体验。关于Basel主题的其他功能,您可以参考我们之前的文章。

    图片[1]-361Sale WordPress Care

    如上图,这是网站前端的画面

    我们怎么修改页脚的内容,以及跳转链接呢,如上图,是五列的格式,上面一个网站logo

    步骤Appearance→Widgets

    Basel主题修改页脚需要用到小部件(Widgets)

    图片[2]-361Sale WordPress Care

    我们找到页脚的栏目,当然还有其他的一些小部件,我们先讲Footer(页脚)

    图片[3]-361Sale WordPress Care

    Footer Column1:就是对应最上面的一列,如下图,我们需要点击右边展开的符号,再点击框任意位置

    图片[4]-361Sale WordPress Care

    就会看到这个界面,如下图

    图片[5]-361Sale WordPress Care

    红色框是网站logo的图片链接,也就是页脚网站logo,我们需要去媒体库(图片库)找到图片链接然后插入,在两端引号间插入,引号不能删除

    黄色框:是logo的标题。在前端触碰到logo会显示名称

    图片[6]-361Sale WordPress Care

    如上图都有数字顺序,对应前端的位置,所以很好去找寻,如下图

    图片[7]-361Sale WordPress Care

    Footer Column 2:第二列页脚

    图片[8]-361Sale WordPress Care

    #:是跳转的链接,比如你要跳转的链接,我们替换这个#就行,引号不要删除

    New York:是标题,如上图的第二张图,展示在前端的标题

    其他的也是一样的,其他的简码不需要去管那个是隔行以及间距的。

    图片[9]-361Sale WordPress Care

    如上图,可以看到实际的演示效果就是这样

    我们讲下最后一列,Footer Column 6,前面的2,3,4,5都是一样的

    图片[10]-361Sale WordPress Care

    后端的界面是这样,如下图

    图片[11]-361Sale WordPress Care

    红色框:是网站的简介

    黄色款:是网站地址

    蓝色款:是更换电话号码

    绿色框:是显示支付机构的图片

    从上面的前端的图片能一一对应

    总结

    通过本篇文章,您已经掌握了如何在Basel主题中修改页脚内容和设置跳转链接的基本技能。下一篇文章中,我们将探讨Basel主题的一些注意事项和细节问题,帮助您更全面地使用这一强大的主题。感谢您的阅读,期待与您在下期内容中再次见面!

  • Basel主题设置指南:全面了解网站界面配置(11)

    Basel主题设置指南:全面了解网站界面配置(11)

    在上一期文章中,我们详细讲解了Basel主题的一些基本设置。这期我们将继续深入探讨Basel主题的商店界面和产品页面设置,帮助您更好地优化和定制您的网站。无论您是新手还是有经验的站长,这些实用的设置指南都能帮助您提升网站的用户体验和功能。

    步骤Shop→设置

    图片[1]-361Sale WordPress Care

    如上图,关于网站Basel主题的商店界面就在这,大家根据翻译就理解

    步骤Shop page layout→Shop Layout

    图片[2]-361Sale WordPress Care

    Shop page layout:商店页面布局,如上图是选择一个整页,可以参考下方的数据,当然你也可以选择另外有侧边栏的布局

    图片[3]-361Sale WordPress Care

    Brands:品牌的一些设置

    My Account:我的账户,一些文本和按钮设置,一般是默认

    Compare:比较,产品的对比的设置

    Wishlist:产品的愿望清单。细节的选项

    Catalog mode:目录模式,理解为只展示不购买的一键功能

    Cookie Law Info:Cookie 的弹窗,可以关闭

    Promo popup:促销弹窗,可以理解为网站首页,用户进入的一个弹窗,比如优惠信息的展示,已经优惠的弹窗,参考下方,Promo popup text设置优惠的图片和字幕以及排版,还有其他一些颜色和大小的设置,根据需要调整

    图片[4]-361Sale WordPress Care

    其他的页面大家根据,翻译去理解,新手一般不需要动,都为默认,有什么问题都可以随时和我们联系

    步骤Product page→设置

    图片[5]-361Sale WordPress Care

    如上图,这个就是产品详情页的设置了

    图片[6]-361Sale WordPress Care

    Main image click action:产品点击的效果,可以选择三种的其中一种,可以翻译去理解

    Product background:产品背景一般不需要设置

    图片[7]-361Sale WordPress Care

    RELATED PRODUCTS OPTIONS:相关产品,在产品详情页的下方展示其他相关的产品,参考下图

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

    Reviews:产品评论功能设置

    图片[10]-361Sale WordPress Care

    Buy now:一键购买功能,如下图,如果没打开就没有这个功能

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

    其他的功能根据翻译去理解,但一般是默认的,新手不用去动

    CSS:是插入代码和简码的一种形式,可以了解不用去动

    总结

    通过本期的讲解,相信您已经对Basel主题的商店界面和产品页面设置有了更深入的了解。设置这些功能可以大大提升用户在您网站上的购物体验,从而提高转化率和客户满意度。下一期我们将探讨Basel主题的页脚功能,敬请期待。如果在设置过程中有任何问题,欢迎随时与我们联系。

  • Basel主题设置指南:全面了解网站界面配置(10)

    Basel主题设置指南:全面了解网站界面配置(10)

    网站的外观和功能对于用户体验至关重要。选择一个强大的主题并进行适当的设置,可以使您的网站在众多竞争者中脱颖而出。本文将带您深入了解如何通过Basel主题的设置来优化网站的各个界面,使您的网站不仅美观大方,还具备高度的可用性。

    首先,我们将从网站后端的Theme Settings开始,逐步讲解每个重要设置的功能和调整方法。无论您是初学者还是有经验的站长,本指南都将为您提供实用的参考和指导。

    步骤网站后端→Theme settings

    图片[1]-361Sale WordPress Care

    如下图,选择第一个,Basel主题选项,关于主题相关的设置都在这里调整

    图片[2]-361Sale WordPress Care

    如下图,我们可以看到很多个设置的方式以及按钮,我们讲述一些常用的

    图片[3]-361Sale WordPress Care

    步骤Theme Settings→General

    图片[4]-361Sale WordPress Care

    这里是网站的基本设置,一般情况是默认的

    图片[5]-361Sale WordPress Care

    注意着两个就行,按照实际情况调整,不懂的可以看翻译,或者参考以上图片调整

    步骤General→Mdobile bottom navbar

    图片[6]-361Sale WordPress Care

    Mdobile bottom navbar(移动端底部导航栏设置)手机端,一般也是默认的,可以参考上方的图片

    步骤General layout→Site background

    图片[7]-361Sale WordPress Care

    Site background:网站背景,理解为整个网站前端的背景,现在是默认的没有颜色,如果你要以什么颜色为主,可以在这里设置

    图片[8]-361Sale WordPress Care

    Site width:站点宽度,你可以设置全宽布局,或者盒装,也就是中间,根据你的需求调整

    图片[9]-361Sale WordPress Care

    Main Layout:网站布局风格,实际情况调整

    步骤Page title→Pages title background

    图片[10]-361Sale WordPress Care

    如上图,可以调整页面标题

    Pages title background:可以以网站的主色调来调整,现在就是金色,因为网站是金色为主

    步骤Footer→ON

    图片[11]-361Sale WordPress Care

    打开页脚设置功能,一般是默认的

    Footer layout:页脚布局,实际情况设置,一般是默认的

    Footer text color:页脚文本的颜色

    Footer background:页脚整体的背景,上图是黑色

    图片[12]-361Sale WordPress Care

    Copyrights:网站版权的填写,如下图,展示在网站前端的最下方

    图片[13]-361Sale WordPress Care

    步骤Header→设置

    图片[14]-361Sale WordPress Care

    Header:网站的logo在这里添加,对应不同的位置,都上传就行

    步骤Header→Top bar

    图片[15]-361Sale WordPress Care

    Text in the header top bar:可以添加一些展示在顶栏位置的信息

    Top bar background:顶栏背景颜色

    图片[16]-361Sale WordPress Care

    如上图,前端位置

    步骤Header Layout→Header

    图片[17]-361Sale WordPress Care

    Header:如上图可以选择主导航的风格

    图片[18]-361Sale WordPress Care

    Typography:文字字体设置

    图片[19]-361Sale WordPress Care

    关于网站和主题有关字体方面的都在这调整,大家根据翻译去调整,如果这里没有你想选择的位置或者字体,你可以选择Advanced typography来调整某一个位置设置单独的字体,如下图

    图片[20]-361Sale WordPress Care

    步骤Styles and colors→设置

    颜色的调节都在这块

    图片[21]-361Sale WordPress Care

    Buttons:按钮的颜色
    Notices:通知的颜色

    图片[22]-361Sale WordPress Care

    Primary color:网站的主色调

    Secondary color :网站的次要颜色,也叫辅助颜色

    步骤Blog→设置

    图片[23]-361Sale WordPress Care

    Blog:博客也就是文章,细节的设置都在这里,大家根据翻译理解

    总结

    通过以上的讲解,我们已经了解了如何在Basel主题中进行基本设置、布局调整、页脚和页眉配置等内容。正确的设置可以提升网站的整体体验,使其更加符合用户的需求。

    在下一期文章中,我们将深入探讨更多的设置,包括商店页面和产品详情页的配置。文章内容会更详细,希望大家继续关注并学习这些实用技巧,以便更好地优化自己的网站。

    期待与您在下一期继续探讨,帮助您打造一个更加专业和吸引人的网站。谢谢您的阅读!

  • 如何DIY添加模块和使用Basel主题功能 – 完整指南(09)

    如何DIY添加模块和使用Basel主题功能 – 完整指南(09)

    大家好,我们又见面了,之前讲述了ROW(排)Column(柱子),以及一些基本的模块设置,大家可以根据链接查看,今天我们讲一讲怎么DIY(自己添加),以及模块的介绍,通过这些步骤和功能的了解,您可以更灵活地搭建和美化自己的网站。

    步骤网站前端→滑动到网站页脚的前面

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

    如上图,这就是所有你能添加的模块了

    步骤Add Element→WooCammerce

    图片[3]-361Sale WordPress Care

    如上图,这是WooCommerce插件的元素,一些产品的展示

    今天我们主要讲述主题的元素,其他的元素都是WPBakery Page Builder编辑器带的,和WooCammerce插件带的

    主题元素

    步骤Add Element→Theme elements

    图片[4]-361Sale WordPress Care

    如上图,这是主题元素,每一个主题不一样,具体的功能也不一样,这是Basel主题的功能。我们讲述一些常用的功能,其他的功能大家按照翻译的意思理解就行

    图片[5]-361Sale WordPress Care

    Slider:滑块(也就是海报)

    图片[6]-361Sale WordPress Care

    Brands(品牌):轮播品牌:(和轮播分类是一样的意思,只是内容不一样)

    图片[7]-361Sale WordPress Care

    Section title(文章标题),你可以用来做某一个模块的标题或者某个文本的标题,都是可以的

    图片[8]-361Sale WordPress Care

    Blog(博客):来显示网站的咨询和文章的,可以参考下方的数据参考

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

    Button(按钮):比如跳转按钮,基本上很多个模块都可以用,如下图,除了主题的按钮,编辑器也有,具体使用那种就看你的需要他能不能达到决定

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

    步骤添加Google Map→Google Map Settings

    图片[13]-361Sale WordPress Care

    Google Map(谷歌地图):如果你需要一个显示地点的功能,则需要谷歌地图,需要地图的API,以及经纬度,如下图

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

    WC products widget(产品小部件):你可以理解为产品的小功能,你可以拿来做产品折扣窗口,刺激消费,如下图,图片加部件的形式,就会有创意

    图片[16]-361Sale WordPress Care

    Testimonials(评价):可以用于产品评论的展示。增加网站的信任度

    图片[17]-361Sale WordPress Care

    Promo Banne(促销横幅):你可以理解为大海报

    图片[18]-361Sale WordPress Care

    增加网站的的美观,不会显示的很单调,如上图

    图片[19]-361Sale WordPress Care

    Images gallery(图片库):用于图片的展示以及轮播,根据需要使用,编辑器也会自带图片功能,根据需要和效果去决定使用哪一个

    图片[20]-361Sale WordPress Care

    Product categories(产品类别):展示产品分类,让客户从前端能看到你的品类,直观和清晰,如下图

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

    Products (grid or carousel)(产品展示,风格有网格轮播还有更多):用于产品的展示,建议使用主题产品功能,而不是WooCommerce插件的,因为它默认是网络格式,风格比较单一,如下图

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

    AJAX Products tabs(阿贾克斯产品标签):你可以理解为一个模块同事展示多个不同的产品类别和方式

    图片[25]-361Sale WordPress Care

    如果你不想一个模块展示一种产品类别或风格,可以尝试这种展示方法,如上图,展示的是新产品,特色产品,以及最佳销售的产品,这是按照产品的销售风格,你也可以展示不同类目的方法

    到这里,讲述了基本的Basel主题选项的功能,当然还有没有讲述了,希望大家去多多了解,不懂的随时联系我们,新手基本上够用了。到这里你能自己去构建属于自己的Basel主题网站了。

    总结

    以上就是关于Basel主题常用功能的介绍,希望对大家有所帮助。当然,Basel主题还有许多其他功能,欢迎大家多多探索和了解。如果在使用过程中有任何疑问,随时联系我们。下一期,我们将深入讲解Basel主题在网站后端的设置及功能展示。可以多留言我们的“WP主题装修”专题,敬请期待!

  • 掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(08)

    掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(08)

    在之前的文章中,我们详细讲解了如何设置网站的ROW(排)Column(柱子)。今天,我们将继续探讨模块的设置,特别是Revolution Slider(海报)的使用方法。通过颜色区分模块,我们可以更清晰地了解各个模块的功能和设置。

    今天我们讲一讲模块的设置

    步骤网站前端→Revolution Slider(海报)

    图片[1]-361Sale WordPress Care

    如上图,你也可以用颜色来区分,模块都是绿色

    之前也说过,海报(Revolution Slider)具体的设置不在编辑器,所以编辑没什么功能

    在这里我们讲述一些网站前端基本需要的一些模块吧,比如产品,产品分类,图片,标题和文本,按钮这些基本的构建元素

    步骤Products (grid or carousel)→笔符号(编辑)

    图片[2]-361Sale WordPress Care

    如上图展示的网站产品模块的编辑

    步骤Products (grid or carousel) Settings→General

    图片[3]-361Sale WordPress Care

    如上图,我将一一说出产品的一些基本功能

    Products view:产品的显示样式,有三种大家根据需要调整

    图片[4]-361Sale WordPress Care

    Data source:产品数据来源

    图片[5]-361Sale WordPress Care

    大家根据需要设置数据源

    图片[6]-361Sale WordPress Care

    如果你不想用它的数据来源,你可以设置你想显示的分类以及标签,但(前提你有这个产品分类和产品标签),这里可以DIY,所以可玩性还是很不错的

    图片[7]-361Sale WordPress Care

    ltems per page:产品模块的展示的数量,根据实际需要调整

    图片[8]-361Sale WordPress Care

    步骤Products (grid or carousel) Settings→Design

    Products hover:鼠标悬停的样式

    Columns:产品从做到右的列数,如下图就是4列

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

    lmages size:图片尺寸可以不用动,因为WooCommerce插件能设置固定的尺寸,所有的产品图片都能自动裁剪的(后面我们会细说)

    Sale countdown:产品倒计时,大家可以根据需要设置

    步骤Products (grid or carousel) Settings→Data Settings

    图片[11]-361Sale WordPress Care

    如上图,可以设置产品数据源的一些具体细节,以及你可以单独排除一些产品,隐藏缺货产品等等,大家可以根据翻译理解,非常的简单,请记住所有的选项都要Save changes(保存)才能生效

    接下来我们讲下产品分类

    步骤Product categories→笔符号(编辑)

    图片[12]-361Sale WordPress Care

    如上图我们进入编辑

    图片[13]-361Sale WordPress Care

    如上图,并不是每一个模块的功能都有好几个,比如这个只有一个,这里可以设置标题和名字,当然你也可以单独设置单独的标题或者名字,不用在模块这里设置

    图片[14]-361Sale WordPress Care

    我们重点讲一下圈的设置,其他的可以根据翻译理解,比较简单

    Layout:分类的风格

    Categories design:分类设计,你可以理解为分类名称的位置选择

    Space between categories:类别之间的空间,你可以理解为第一个与第二分类之间的间隙

    Slides per view:在分类模块展示的分类数量,大家根据需要调整

    步骤Product categories Settings→Categories

    图片[15]-361Sale WordPress Care

    如上图,你可以选择你战士的名称,输入分类名称或者ID都可以,如果你不选择它会按照默认的方式展示,如果你不喜欢就自己输入,请记住所有的选项都要Save changes(保存)才能生效

    接下来我们讲述一下图片

    步骤Single lmage→笔符号(编辑)

    图片[16]-361Sale WordPress Care

    如上图进入编辑

    图片[17]-361Sale WordPress Care

    我们讲一讲圈起来的元素,其他的根据翻译去理解就行,标题你可以在这里设置或者单独设置一个标题模块,但我一般不会使用模块里面的标题,因为非常的单一,如果选择标题模块就有很多风格选择,这个后面会讲述到

    lmage source:图片来源,图中选择的是媒体库

    lmage:在下面点击可以添加你需要展示的图片

    lmage alignment:图片展示的位置

    lmage style:图片的风格,一般是默认,大家根据需要调整

    On click action:你可以理解为点击图片的反馈,上述是跳转链接的选项

    图片[18]-361Sale WordPress Care

    Link Target:链接跳转的选项,上述是在现在的窗口,还有一个选项是新窗口打开

    CSS Animation:这个就是模块的动画效果了,之前在ROW(排),和Column(柱子)讲过。大家可以根据链接查看

    步骤Single lmage→Design Options

    图片[19]-361Sale WordPress Care

    如上图,这个设置和之前的ROW(排),和Column(柱子)讲过。大家根据链接查看,请记住所有的选项都要Save changes(保存)才能生效

    接下来我们讲述下标题和文本
    步骤Section title→笔符号(编辑)

    图片[20]-361Sale WordPress Care

    步骤Section title Settings→General

    图片[21]-361Sale WordPress Care

    如上图,这是标题模块,我们在Title中换掉就行了,<strong>则是简码,不用管他,上述显示的“Best Sales“标题名称。其他的根据翻译理解

    Design Options:设计选项都一样,就不必说了,大家可以看上面的图片模块也说过的
    文本模块
    步骤Text Block→笔符号(编辑)

    图片[22]-361Sale WordPress Care

    步骤Text Block Settings→General

    图片[23]-361Sale WordPress Care

    文本模块你可以根据需要去设定,比如上述是红色的字体

    Color Scheme:配色方案

    图片[24]-361Sale WordPress Care

    前端的展示效果

    步骤Button→笔符号(编辑)

    图片[25]-361Sale WordPress Care

    如上图,我们多讲述一个按钮模块

    图片[26]-361Sale WordPress Care

    Text:按钮名称

    URL (Link):按钮跳转链接

    Style:按钮的风格

    Shape:你可以链接为按钮边框的样式

    Color:按钮的颜色

    Size:按钮的大小

    Alignment:按钮的位置

    好了,上述讲述了网站构建的一些基本元素,Basel主题基本的搭建元素,到这里大家基本上可以装修一个简单的网站了,上述讲述的是替换演示模版的一些模块。

    总结

    通过以上介绍,相信大家已经掌握了网站前端的一些基本模块设置。Basel主题提供了丰富的模块和设置选项,足以帮助你打造一个美观实用的网站。下一篇文章中,我们将进一步探讨自定义添加元素和Basel主题的其他高级功能,敬请期待。

  • 掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(07)

    掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(07)

    在上一期的教程中,我们详细讲解了WPBakery Page Builder编辑器中的排(ROW)的使用方法。本期我们将重点介绍柱子(Column)的设置步骤和相关功能,帮助大家更好地掌握如何在网站前端编辑页面中展开和编辑柱子,从而实现更加精细的页面布局。
    上一期我们讲述了WPBakery Page Builder编辑器排(ROW)(详情可参阅掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)

    今天我们讲一下柱子(Column)

    步骤网站前端→Column→展开

    图片[1]-361Sale WordPress Care

    我们进入网站前端的编辑页面,展开柱子(Column)

    步骤Column→笔符号(编辑)

    图片[2]-361Sale WordPress Care

    如上图所以我们能看到四个功能

    分别是编辑,添加,粘贴,关闭

    我们重点讲一下编辑,其他的功能一般新手用不到

    步骤Column Settings→General

    图片[3]-361Sale WordPress Care

    如上图这个界面,一般使用是默认的,新手一般不需要动

    可以了解下CSS Animation:就是动画就是展示一些动画效果,之前的排(ROW)也有类似的动画效果,也会有模块也会有一样的功能设置,你理解为这个模块的展示的动态效果,比如(上划,弹出等,里面会有多重选择,根据实际情况调整)

    步骤Column Settings→Design Options

    图片[4]-361Sale WordPress Care

    如上图,这个界面的功能可以参考掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)来调整,大概意思都一样,区别只是ROW(排)整个与Column(柱子)单个

    步骤Column Settings→Responsive Options

    图片[5]-361Sale WordPress Care

    如上图,这是柱子(Column)与排(ROW)最大的区别

    图片[6]-361Sale WordPress Care

    步骤Column Settings→Responsive Options→Width

    图片[7]-361Sale WordPress Care

    这是柱子(Column)的布局方式,默认是(1/1),可以理解为一排或一个

    步骤步骤Column Settings→Responsive Options→Responsiveness

    图片[8]-361Sale WordPress Care

    如上图所示可以调整每个设备的布局,与展示或者隐藏,大家可以根据字母意思理解

    图片[9]-361Sale WordPress Care

    如上图,这是WPBakery Page Builder编辑器与Basel主题的单独功能,一般也是默认,新手不需要动,排(ROW)也有这个功能,大家可以了解下

    图片[10]-361Sale WordPress Care

    如上图所示每个排(ROW)都会带一个柱子(Column),但是ROW是控制整个的,上图有四个ROW,其中一个ROW是控制四个的,只有Column(柱子)是单独控制一个的,上述演示是1/4的布局

    好了,这期给大家了解完柱子(Column)的功能,下期我们会讲述每个模块的设置,以及更多的装修Basel主题的方法和功能

    总结:

    好了,这期我们就介绍到这里,大家对WPBakery Page Builder编辑器中的柱子(Column)功能有了基本的了解。下期我们将继续讲解每个模块的设置,以及更多装修Basel主题的方法和功能,敬请期待!

  • 掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)

    掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)

    本文将带你一步步掌握WPBakery Page Builder编辑器,用于装修Basel主题。从革命滑块(Revolution Slider)到排(ROW)的使用,详细讲解每一个步骤和设置。

    接下来我们就正式开始

    WPBakery Page Builder编辑器开始装修Basel主题

    步骤网站前端→Edit with WPBakery Page Builder

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

    如上图所示进入前端的编辑页面,我们可以看到有不同的模块,上述显示的是革命滑块(海报banner)

    还有排(ROW),和柱子(Column)等功能

    让我一一与你道来

    1.我们先讲革命滑块(Revolution Slider)这个是首页的海报功能,这个不在这里设置,所以我们不需要动它

    图片[4]-361Sale WordPress Care

    如上图我们进编辑页面

    1.步骤网站前端→笔符号(编辑)

    图片[5]-361Sale WordPress Care

    选择我们导入演示数据的模版海报(banner)就可以了

    2.ROW(排)

    3.Column(柱子)

    排和柱子基本上模块都是一样的,当然你可以直接放模块,但是你无法控制模块的大小以及一些展示功能,我们后面慢慢讲

    图片[6]-361Sale WordPress Care

    ROW(排)是控制整个模块的,不管里面是有多少模块,他是一个整体,他里面的设置也是整体而不是单个,后续我们会讲述柱子(Column)的,你就会明白了

    图片[7]-361Sale WordPress Care

    如上图演示,他是可以拖动整个模块的

    步骤排→符号(展开)

    图片[8]-361Sale WordPress Care

    步骤排→笔符号(编辑)

    图片[9]-361Sale WordPress Care

    步骤Row Settings→General

    图片[10]-361Sale WordPress Care

    如上图所示编辑页面,我会写出上述圈出的一些基本功能的解释

    Row stretch:可以理解为整个模块的大小

    图片[11]-361Sale WordPress Care

    Stretch row and content和Stretch row and content (no paddings)是全宽(包含所有)和内容不全宽

    Default和Stretch row是默认和间隙的区别 也就是居中的位置

    图片[12]-361Sale WordPress Care
    图片[13]-361Sale WordPress Care

    如上图展示,大家根据实际需要调整

    Columns gap:可以理解为间隙,一般情况不需要动,但如果前端比较拥挤,大家根据需要调整

    Content position:内容的位置,一般是默认

    图片[14]-361Sale WordPress Care

    如上图,根据实际情况调整,设置好记得Save changes保存

    步骤Row Settings→Design Options

    图片[15]-361Sale WordPress Care

    我们来讲述Design Options,这里调节是背景以及颜色,以及上下左右间距的问题

    图片[16]-361Sale WordPress Care

    Border color:边框的颜色

    Border style:边框的风格(样式)

    Border radius:边框的间隙(一般不用调整)

    以上对于简单的情况下,都不需要调整

    Background:背景颜色以及背景图片的添加,以及图片的展示效果

    图片[17]-361Sale WordPress Care

    如上图,根据实际情况调整整个模块的背景

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

    上图如果显示的是没有背景与显示背景的展示

    步骤Row Settings→CSS box

    图片[20]-361Sale WordPress Care

    如上图所示,这里调整的是上下以及左右的间隙,可以用于前端展示的调整,以及模块的样式,一般情况下是不需要调整的,一般上下模块拥挤的情况会用到,上述有外框内框已经模块内框的调整,我们一般情况下调整的是margin外框的间隙,可以加入正数值或者负数值,来实现间隙

    步骤ROW→三条符号(排的数量格式)

    图片[21]-361Sale WordPress Care

    Row layout:选择行的数量(示例如上图:一个,二个,二个左宽右窄,以及三个),大家根据图标可以看的出来

    Enter custom layout for your row:你可以自己添加行的数量(分子形式的都可以)

    图片[22]-361Sale WordPress Care

    如上图后面的图标意思→
    +:添加模块,克隆整个排,复制行,粘贴,关闭,大家根据按钮以及翻译理解

    以上讲述了WPBakery Page Builder编辑器的ROW的功能,接下来我会讲述更多编辑器的功能来装修Basel主题,此文章只讲述了基本的一些功能,比较适合新手,如果你对于装修Basel主题有更深入的研究,欢迎与我探讨

    总结

    以上是关于WPBakery Page Builder编辑器中排(ROW)的基础功能介绍。在下一篇文章中,我们将继续讲解更多编辑器的功能,帮助你全面装修Basel主题,敬请期待。

  • 确保网站装修成功:安装和激活WooCommerce插件以完美搭配Basel主题(05)

    确保网站装修成功:安装和激活WooCommerce插件以完美搭配Basel主题(05)

    在正式开始网站装修前,请确保安装了官方的WooCommerce插件

    步骤Plugins→搜索→WooCommerce→Install Now→Activate 

    图片[1]-361Sale WordPress Care

    如果没有,您的网站将会失去一半的功能,Basel主题也不能完美的发挥

    如上图中演示的是已经安装完毕的,

    图片[2]-361Sale WordPress Care

    步骤Products→All Products

    如上图是所有产品的界面

    图片[3]-361Sale WordPress Care

    安装后会有WooCommerce和Products两个选项

    Products:产品的相关信息,大家可以根据翻译字面意思去理解

    WooCommerce:管理整个网站的正常销售

    步骤WooCommerce→Settings

    图片[4]-361Sale WordPress Care

    如上图所示,有产品,运输,支付,账号等相关信息

    好了这里讲述的是WooCommerce插件的基本功能,方便搭配Basel主题更好的完成装修以及排版.

    如果大家想详细了解WooCommerce插件的使用以及设置,后期我会单独写一篇完整的文章,谢谢

    当然上述讲述的是主题不安装WooCommerce插件,你所需要安装的教程

    一般按照主题必备的插件会带WooCommerce插件,因为演示数据模版是有默认产品的

    这样前端才会有相应的演示模版效果

    图片[5]-361Sale WordPress Care

    如上图所示演示数据产品,每个模版不一样产品也不一样

    后期删掉演示数据产品就行了

    总结:

    在开始网站装修之前,请务必确保安装并激活官方的WooCommerce插件。这不仅是实现Basel主题所有功能的关键,也是保证网站正常运营的基础。WooCommerce插件不仅涵盖了产品管理、运输、支付等重要功能,还能与Basel主题完美搭配,呈现出理想的前端效果。如果您对WooCommerce插件的使用和设置有更深入的兴趣,后续我将撰写一篇详细的教程,敬请期待。感谢您的阅读,希望本文对您的网站装修有所帮助!

  • Basel主题网站海报(banner)如何设置和使用方法?(04)

    Basel主题网站海报(banner)如何设置和使用方法?(04)

    这期我们讲述自己如何添加以及更改banner(自己DIY)

    一个精美的海报(banner)可以有效吸引用户的注意力,并传达品牌信息。无论您是网站管理员、设计师还是小企业主,掌握如何DIY添加和更改banner都是非常重要的技能。本文将带您了解如何通过简单的步骤,添加文本、图片和按钮,并优化这些元素,确保最佳展示效果。
    1.步骤→Add Layer

    图片[1]-361Sale WordPress Care

    在这里可以添加文本,图片,以及按钮,形状,视频,音乐等等(但常用的是文本,图片,按钮)
    2.步骤Add Layer→text

    图片[2]-361Sale WordPress Care

    文本可以任何编辑,以及拖放和大小,具体请参考“Basel主题网站海报(banner)如何设置和使用方法?(03)
    3.步骤Add Layer→image

    图片[3]-361Sale WordPress Care

    图片可以放商品图或者人物,或者与你产品有关的任何内容,但确保图片是PNG透明格式,否则展示的不太满意(参考Basel主题网站海报(banner)如何设置和使用方法?(03)
    4.步骤Add Layer→button

    图片[4]-361Sale WordPress Care

    根据需要选择按钮的风格,颜色不用担心 都是可以更该的(参考Basel主题网站海报(banner)如何设置和使用方法?(03)
    其他设置可以参考上篇文章的设置方法

    好了这就是一些基本功能的操作方法,接下里我们会讲到一些常见问题

    1。我们怎么确定海报(banner)背景图片的大小

    图片[5]-361Sale WordPress Care

    图中我们可以看到蓝色的虚线,长度和宽度,这个可以作为参考

    还有一个办法可以设置展示海报的大小

    2.步骤设置→Layout

    图片[6]-361Sale WordPress Care

    一般展示的尺寸是图片的两倍 比如图形是1000*1000,则我们需要设置两倍的数据即可。但这样是为了能完全的展示背景,但前端的首页海报也会同样很大,所以建议背景图可以小一点

    3.步骤电脑图标

    图片[7]-361Sale WordPress Care

    Desktop:显示器界面

    Notebook:笔记本显示界面

    Tablet:平板界面

    Mobile:手机端界面

    你可以都打开,都打开的话你需要单独设置每一个界面,以营造更好的用户体验

    你也可以都关闭,只留显示器,这样其他的界面会进行自适应

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

    这是三种不同设备的界面

    总结:
    通过以上步骤,您已经学会了如何添加和更改banner。从选择合适的文本和图片,到设置按钮样式和背景尺寸,每一步都很关键。记得根据不同设备的界面进行优化,以提供更好的用户体验。希望这篇文章能帮到您,激发您的设计创意。继续探索这些技巧,相信您能设计出更精美的banner!如有任何疑问,欢迎留言交流。祝您的设计之旅顺利愉快!