www.wpcitation.com/

Category: WP主题装修

  • 掌握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插件的使用和设置有更深入的兴趣，后续我将撰写一篇详细的教程，敬请期待。感谢您的阅读，希望本文对您的网站装修有所帮助！

  • Woodmart主题安装后如何选择模版数据？(01)

    Woodmart主题安装后如何选择模版数据？(01)

    轻松打造一个专业、美观的WordPress网站并不难，尤其是使用Woodmart主题。这篇文章将带您一步步了解如何安装和配置Woodmart主题，从选择适合的预构建模板到确保编辑器正常工作，帮助您快速上手，创建一个精美的网站。

    图片[1]-361Sale WordPress Care

    安装主题后如上图所示

    1.步骤Woodmart→Prebuilt websites

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

    大家根据自己的品类选择相应的模版，也可以选择你喜欢的模版再去修改，如果是新手建议选择品类相关的模版。

    2.步骤：在导入之前可以选择Live preview（预览），再选择lmport（导入）

    图片[4]-361Sale WordPress Care

    3.步骤Appearance→Install Plugins

    图片[5]-361Sale WordPress Care

    安装主题必备的插件，这里显示的是已经安装完毕的画面，一般主要的插件有主题核心，编辑器（Elementor或WPBakery PageBuilder），还有一个联系表单，其他的根据需要自行安装.

    注意：两个编辑器不能同时启用，只能用一个编辑器，前端会显示错误，模版带什么编辑器就用什么类型的，不要更换，如果你之前用了其他的主题，请记住卸载之前的主题核心，否则新的主题核心无法安装

    图片[6]-361Sale WordPress Care

    上述图中显示的是woodmare主题核心

    图片[7]-361Sale WordPress Care

    打开网站的前端如上图所示出现“Edit with Elementor”则编辑器是正常工作的，如果没有则需要进入网站后台

    4,.步骤网站后台→Elementor→Settings→General

    图片[8]-361Sale WordPress Care

    请确保编辑的页面是勾选的，如果不知道如何设置，可以参考上图。（此文章演示的是Elementor编辑器）

    如果是WPBakery PageBuilder编辑器，请参考：如何选择并导入巴塞尔（Basel）主题的演示数据：详细步骤与注意事项（01）

    总结：

    按照这些简单的步骤，您将能够快速安装和设置Woodmart主题，并开始创建一个功能强大且吸引人的网站。如果遇到任何问题，别忘了参考本文的指南，确保您的网站建设顺利进行。立即开始，展示您的创意吧！

  • 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！如有任何疑问，欢迎留言交流。祝您的设计之旅顺利愉快！

  • Basel主题网站海报（banner）如何设置和使用方法？（03）

    Basel主题网站海报（banner）如何设置和使用方法？（03）

    如何展示完美的海报？接下来让我们一起来学习

    1.步骤进入wordpress→登录后台→Slider Revolution

    然后我们要去选择我们的首页banner

    注意：会有很多的模版，但只有一个模版是正确的，可以根据导入的演示数据大体的类型以及模糊的外形去选择，当然同一个模版可能还会有多个一样的 ：只能通过进去编辑，去前端刷新看看是否有变化，如果前端变化了；说明是需要的一个。如果没有变化，则继续用同样的方法找，最终确认为止

    这里演示的是已经更改过的banner，所以会比较好找

    2.点击左边笔字图标进入编辑页面

    左边是直接进入编辑页面，右边是进入海报是所有页面的预览的界面，后续我们在细说

    这会有很多功能，让我来一个一个来解答，这个是设计好的页面，所以看起来会比较好看、

    这里显示你海报中每一个模块的展示的时间 以及出现的时间点，你可以根据需要去调整

    图片[7]-361Sale WordPress Care

    这是海报的页面，我们现在处于海报1

    3.步骤Slides→Add Slide（s）

    可以添加更多的海报页面

    Global Layers，可以暂时不用管
    译：（通常指的是一个图层管理功能，可以让你在整个滑动模块中添加和管理统一的图层内容。这些图层可以包含文本、图片、视频等元素，且它们会在所有幻灯片上保持一致，而无需在每个单独的幻灯片上重复添加。这对于保持设计的一致性和节省时间非常有用。

    具体来说，如果你在某个滑动模块的每一页都想显示相同的标志、导航按钮或者其它重复性元素，就可以使用“Global Layers”功能来实现。这些元素会固定在所有滑动页面的同一位置，确保它们在整个滑动展示中始终可见。）

    每一个页面都有四个选项分别为预览，删除，复制，设置

    你可以根据需要去调整

    其他三个比较容易理解，我们重点讲一下设置

    4,.步骤设置→Media Library

    这里先讲述的是怎么设置海报背景，点击后进去媒体库替换即可

    这里可以设置背景图形展现的风格

    这里可以设置图形是包含，还是重复，也是风格，下面是图形的位置 ，现在是中心位置，大家可以根据翻译去理解

    5.步骤点击海报图中任意一个模块

    点击图中的模块，我们会进入到模块的一些调整与设置

    Content：是文本，你可以更换成自己需要的文本

    Style：是颜色，背景演示，以及边框颜色

    Hover：是鼠标悬浮的一些设置，比如悬浮的背景颜色（就是鼠标碰触的效果）

    Actions：是加入超链接的一个设置（跳转链接）

    6,.步骤Style→Quick style

    这里更换字体，有很多可以选择，根据你自己的需要选择

    一般海报的模块有：标题 副标题，描述，按钮 图片等等（可以做个参考）

    这里讲述的是替换原有演示数据海报（也就是在原有的数据上修改一下）达到一个非常好的效果，下一期我们讲述怎么自己添加这些元素以及更多的操作方法

    总结

    非常感谢大家的耐心阅读！通过上述步骤，我们已经学习了如何在WordPress中利用Slider Revolution编辑和展示一个完美的海报。希望这些详细的指导能够帮助你在实际操作中获得理想的效果。

    在下一篇文章中，我们将深入探讨如何自己添加新的元素，进一步优化和自定义你的海报展示效果，以及更多实用的操作技巧。敬请期待，不见不散！

    如果你在操作过程中遇到任何问题，欢迎随时留言，我们会尽快为你解答。让我们一起继续学习，共同进步！

  • 如何设置导航栏菜单（Basel主题，其他主题个别会有差异）（02）

    如何设置导航栏菜单（Basel主题，其他主题个别会有差异）（02）

    在本教程中，我们将详细介绍如何在WordPress网站上创建和管理菜单。通过遵循以下步骤，您可以轻松设置和自定义网站的导航栏，以提高用户体验和网站的可用性。如果在操作过程中有任何疑问，请随时联系我们，我们将竭诚为您提供帮助。

    1.步骤Appearance→Menus

    图片[1]-361Sale WordPress Care

    进入菜单页面

    图片[2]-361Sale WordPress Care

    接下来我们了解各种菜单的区别

    2.步骤Select a menu to edit:→点击旁边的框

    图片[3]-361Sale WordPress Care

    Categories：分类菜单，列如产品分类或者其他的一些分类，如果前端是全屏海报的首页，无需理会

    Main navgatio：主导航（主菜单），可以理解为主导航，首页导航栏

    Menu 1：可以理解为主菜单的复制

    Menu2：可以理解为主菜单的复制

    Mobile navigation：移动端菜单，理解为手机端的菜单（导航）

    Segment Club：无需理会，默认数据，根据你的需要调整

    Top bar：顶栏菜单（导航），不是每个主题都有

    这里演示的数据是巴塞尔（Basel）主题，一般导航栏有主菜单和移动端菜单就可以了，根据需要调整

    图片[4]-361Sale WordPress Care

    图一

    图片[5]-361Sale WordPress Care

    图二

    注：Categories：图一的前端则无需理会，图二的就需要设置

    3. 步骤点击create a new menu可以创建新菜单

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

    如果需要图像或者商品展示，则需要单独创建页面添加到菜单，但网站一般讲究快，所以这种图形以及商品只会拖慢网站的打开速度，一般只需要正常的一级菜单和二级菜单或者三级菜单就行了

    一级→二级-三级（菜单示范）

    4.步骤只需要把框向右拖动，如下图，就是三个级别的菜单样式

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

    菜单的左侧会有许多选项以便你添加
    Pages：网站的页面，列如隐私政策或者联系，关于我们，这些主页面等等

    Posts：就是网站的文章了，也就是博客

    HEML：属于简码，一般用不上

    Custom Links：自定义链接，可以添加你想要的超链接（就是跳转的网页链接）

    Product categories：就是产品的分类

    Categories：这里包含网站的所有分类

    注：其他分类可以根据翻译，很清楚的了解字面意思，我只说了比较常用的选项

    注意：

    如果你的MEUS页面左侧没有这么多选项，那是你没有勾选选项
    移动到最上方
    操作步骤：点击Screen Options

    请全部勾选，或者你也可以根据翻译来调整

    图片[11]-361Sale WordPress Care

    选中一个菜单，我们来添加选项，这里我们演示最基本的导航选项

    5.步骤Page→勾选你想要的界面

    图片[12]-361Sale WordPress Care

    一般主导航最基本的选项要有Home（首页），Shop（商店），Cart（购物车）， Checkout（结账），My account（我的账户）。还有Blog（博客），这些页面都需要选择主题设置优先级的页面，否则无法展示，如上图。
    当然还有关于我们。联系我们的页面，也是同样，根据你的需求选择添加，这两个页面需要自己去创建编辑（有些主题会有默认的，你只需要修改相应的信息就可以了，你自己设计的还不一定有默认的好）

    你可以在Shop加入一些产品分类，以便用户更好的选择

    图片[13]-361Sale WordPress Care

    如上图所示，没有二级或者三级分类是不会出现右边的箭头的

    图片[14]-361Sale WordPress Care

    添加的界面的名称也是可以更改的，看你的需求，非常的灵活，如上图

    6.步骤菜单下方→勾选展示位置

    图片[15]-361Sale WordPress Care

    在菜单的最下方会有展示在那些位置，以及整个菜单的删除和保存，大家可以根据需要更改

    图片[16]-361Sale WordPress Care

    上图显示的是主菜单和手机端是同一个菜单，如果你想要分开，请取消勾选，分别创建主菜单和移动菜单，以两张方式 展示在不同的设备就行了

    7.步骤点击Manage Locations

    图片[17]-361Sale WordPress Care

    如上图，这里可以选择主要菜单选择用什么菜单去展示

    总结

    通过以上步骤，您现在应该能够在WordPress网站上创建和管理各种菜单，从而优化用户导航体验。根据您的具体需求调整和定制菜单选项，可以确保您的网站导航更符合访客的使用习惯和偏好。如果您在操作中遇到任何问题或需要进一步的帮助，请随时联系我们。

  • 如何选择并导入巴塞尔（Basel）主题的演示数据：详细步骤与注意事项（01）

    如何选择并导入巴塞尔（Basel）主题的演示数据：详细步骤与注意事项（01）

    安装好巴塞尔主题包后，你会发现前端显示的是默认的基础页面。这意味着主题已成功安装，接下来的步骤就是选择并导入合适的演示数据。在本文中，我们将详细讲解如何导入巴塞尔主题的演示数据，并分享一些个人见解和注意事项，帮助你顺利完成网站的初步搭建。

    1、WordPress仪表板，点击“Appearance”→“Themes”

    图片[1]-361Sale WordPress Care

    这是导入巴塞尔主题的界面，这样显示就是导入成功了
    注意事项：（请至少保持一个默认的wordpress主题，以防后期检查问题）我们光子团队多年装修经验
    下一步我们去选择合适的演示数据

    2.WordPress仪表板，点击“Basel”

    图片[2]-361Sale WordPress Care

    点击后就进入演示数据的面板，图中可以看到有两个选项框，左边是基础演示数据，右边就会有很多颜色数据模版选择
    3.“Basel”→“Demo versions”→“–select–”

    图片[3]-361Sale WordPress Care

    里面的模版很多，大家根据需要选择，当然如果选择类似的产品模版如果不是很喜欢，你可以后续再可视化面板调整，导入相似的面板是为了让初学者比较更容易的排版网站，以达到一个完美的前端页面。

    图片[4]-361Sale WordPress Care

    4.每个模版都有数据的首页页面预览，请一定仔细的看好，然后点击“SET UP VERSION”导入颜色数据，然后等待导入完成就行了。

    问题

    然后我们在登陆wordpress的后台账号的情况下，打开前端，进行可视化编辑，巴塞尔主题搭配的是WPBakery编辑器，后续我们会详细讲。
    初学者可能会遇到没有可视化编辑的按钮

    图片[5]-361Sale WordPress Care

    这个就是可视化编辑的按钮，如果没有这个按钮我们该怎么排查呢？

    图片[6]-361Sale WordPress Care

    1.进入wordpress后端，找到 “WPBakery Page Builder”.

    2.我们会进入到这个页面，请选择Role Manager

    图片[8]-361Sale WordPress Care

    3.请确保这些选项你都有勾选，特别是page，这就是前端为什么不显示的原因了。

    总结

    通过上述步骤，你应该能够成功导入并设置巴塞尔主题的演示数据，并开始进行网站的可视化编辑。如果你遇到任何问题，可以参考本文提供的排查方法。希望这些步骤和个人见解能够帮助你顺利搭建出理想的网站。后续我们还会提供更多关于巴塞尔主题的详细教程，敬请期待。