www.wpcitation.com/

Tag: WPBakery Page Builder

  • 如何高效装修与排版BoxShop主题：全面指南（04）

    如何高效装修与排版BoxShop主题：全面指南（04）

    欢迎大家来到本期教程！今天我们将深入探讨如何装修和排版BoxShop主题，这是一个功能强大且灵活的WordPress主题。与之前的主题不同，这次我们会集中讲解如何在后台使用WPBakery Page Builder进行编辑和设置。在本指南中，我们将详细分解每一个步骤，帮助你快速掌握如何高效地管理和自定义你的BoxShop主题，让你的网站更具吸引力和功能性。

    步骤：网站后端→pages→Home→WPBakery Page Builder

    图片[1]-361Sale WordPress Care

    先找到pages（页面）然后再去找寻HOME(首页），如下图

    图片[2]-361Sale WordPress Care

    根据模版的不同，首页名字也会有区别，请认准有Front Page（首页），这种才是设置好的主页，一般都是设置好的，如果没有的话，要去其他地方调整一下

    图片[3]-361Sale WordPress Care

    点击编辑，进入，如上图

    图片[4]-361Sale WordPress Care

    然后我们会得到一个这样的界面，其实也是WPBakery Page Builder 编辑器来编辑的，之前Basel主题也是WPBakery Page Builder编辑器，但是那是前端可视化编辑，而这个只支持后端编辑，你需要在后端设置保持好后，再去前端看下效果，这样会有优点和缺点，优点是前后端分离，就不会出现误操作导致的结果，缺点是不能看到直接的效果，更多Basel主题的WPBakery Page Builder编辑器可以通过链接查看

    让我们继续

    图片[5]-361Sale WordPress Care

    这是后端

    图片[6]-361Sale WordPress Care

    对应前端的效果

    图片[7]-361Sale WordPress Care

    设置好对应的图片，图片很简单，就在这里详细的讲解了，可以去看看Basel主题的WPBakery Page Builder编辑器内容就知道啦，或者大家翻译下也是很好能理解的

    图片[8]-361Sale WordPress Care

    这是一个多选项的产品的模块，如果你需要添加选项，则需要添加Tabs（标签），选择+号添加，或者在选项后面的+号添加

    图片[9]-361Sale WordPress Care

    选择新选项，加入一个产品模块

    图片[10]-361Sale WordPress Care

    Section（部分）这里设置新选项的名称，请确保下面的id每一个度不一样，否则无法会导致无法跳转

    然后就实现这个效果了，如下图

    图片[11]-361Sale WordPress Care

    步骤：网站后端→pages→Home→TS Banner2

    图片[12]-361Sale WordPress Care

    banner也就是图片，可以理解为横幅，这个没什么说的，但只要注意一点，图片的大小要一致，不然就看起来歪歪曲曲，可以使用一些图片工具去裁剪到统一的规格

    图片[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

    至于博客和视频也非常的简单。如上图

    步骤：网站后端→pages→Home→TS Blog

    图片[21]-361Sale WordPress Care

    博客如果你不想展示特定的分类的博客的文章，就不要勾选，他默认是勾选了，所以在出现默认的文章删掉了，但你新写的博客不展示，那就是这里设置出了问题

    步骤：网站后端→pages→Home→Video Player

    图片[22]-361Sale WordPress Care

    这里插入的视频是链接的形式，不是嵌入的简码，所以要看清楚

    图片[23]-361Sale WordPress Care

    这个是就是主题自带的订阅模块了，如下图，他有几种样式选择，但一般选择默认的，比较符合这个模版

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

    选择好内容和样式就行，你如果需要背景图片，也可以加，但建议是默认的

    总结

    本期教程就到这里了，希望通过这次的详细讲解，大家对BoxShop主题的装修和排版有了更加清晰的理解和操作能力。在下一期，我们将继续探讨如何利用BoxShop主题自带的功能进行自定义设置，打造更符合你需求的独特网站。感谢大家的关注，我们下期再见！

  • 掌握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主题的方法和功能，敬请期待！