www.wpcitation.com/

Category: WoodMart主题

  • 如何在 WoodMart 主题中集成 Join.chat 实时聊天功能

    如何在 WoodMart 主题中集成 Join.chat 实时聊天功能

    为了提升用户体验并为客户提供便捷的沟通渠道，集成实时聊天功能是现代电商网站的必备功能之一。Join.chat 是一款非常流行的实时聊天插件，它特别适合集成 WhatsApp 聊天功能，帮助你与客户实现即时对话。值得注意的是，Join.chat 插件不仅适用于 WoodMart 主题，它同样兼容于任何其他 WordPress 主题，因此不管你使用哪种主题，都可以通过该插件实现与客户的即时沟通。

    图片[1]-361Sale WordPress Care

    为什么选择 Join.chat 插件？

    1. 轻量易用：Join.chat 插件非常轻便，易于设置，不需要复杂的配置。
    2. WhatsApp 集成：大多数用户已经在使用 WhatsApp，Join.chat 可以直接将用户带到 WhatsApp 聊天页面，提供更高的沟通效率。
    3. 提升客户体验：即时对话意味着客户可以更快地解决问题，缩短决策时间，增加转化率。
    4. 自定义选项丰富：可以自定义聊天按钮的颜色、文本以及展示的位置，确保与网站设计风格保持一致。

    集成 Join.chat 插件的步骤

    步骤 1：安装 Join.chat 插件

    • 登录 WordPress 后台，点击 插件 > 安装插件。
    图片[2]-361Sale WordPress Care
    • 在搜索框中输入 Join.chat 并点击搜索。
    图片[3]-361Sale WordPress Care
    • 找到插件后，点击 安装，然后点击 激活 插件。
    图片[4]-361Sale WordPress Care
    图片[5]-361Sale WordPress Care

    步骤 2：配置 Join.chat 插件

    • 插件激活后，导航到 Join.chat > 设置 进行配置。
    图片[6]-361Sale WordPress Care
    • 输入你的 WhatsApp 号码：在设置页面中，你需要输入你的 WhatsApp 号码（国际格式，如 +8613912345678），确保用户点击聊天按钮时能够直接联系到你。
    图片[7]-361Sale WordPress Care
    • 自定义预填充消息：你可以在设置中输入预定义的消息，例如：“你好，我需要了解关于 [产品名] 的更多信息。” 这样，当用户点击聊天按钮时，消息会自动出现在对话框中，用户只需点击发送即可。（图中默认的是：嗨{网站}!我需要有关{标题}{URL}的更多信息）可以显示来自那个网站以及网站的那个页面和页面的标题，这样更好知道用户的需求，简洁你的聊天了解过程。
    图片[8]-361Sale WordPress Care
    • 然后点击下一步（Continue with this text）。
    • 引导消息功能：是一种帮助网站主动吸引用户注意并促使他们进行互动的工具。当用户首次点击聊天按钮时，会显示一条预先设置的引导消息。这条消息的目的是快速抓住用户的关注，引导他们提出问题或了解更多产品信息。
    图片[9]-361Sale WordPress Care
    • 这个是提供给插件的分析，需要填写你的邮箱，当然你也可以不提供给他，让他优化他们的插件。
    图片[10]-361Sale WordPress Care
    • 然后基本设置就完成了，我们去设置一些详细的细节。
    图片[11]-361Sale WordPress Care
    • 自定义聊天按钮：你可以自定义聊天按钮的文本、位置、颜色及图标。确保按钮的设计与 WoodMart 主题的整体风格相匹配。
    图片[12]-361Sale WordPress Care
    • 位置：选择聊天按钮在屏幕的左侧或右侧显示，通常建议将其放置在右下角，避免遮挡其他重要内容。
    图片[13]-361Sale WordPress Care
    • 文本提示：为按钮设置一句吸引人的话，如“联系我们”或“有什么问题？点击这里”
    图片[14]-361Sale WordPress Care

    步骤 3：设置自动回复（可选）

    Join.chat 插件允许你在用户打开对话框时发送自动回复消息。你可以在设置中启用此功能，添加一条简单的欢迎消息，例如：“你好！我们如何帮助你？” 这样用户可以立即感受到被关注，增加互动意愿。其实就是行动召唤，需要设置触发条件。比如多少秒或者用户访问页面的次数。

    图片[15]-361Sale WordPress Care

    步骤 4：测试 Join.chat 功能

    • 完成设置后，刷新你的网站，查看聊天按钮是否显示在页面底部。
    图片[16]-361Sale WordPress Care
    • 点击按钮，确保能够跳转到 WhatsApp 并开始对话。
    图片[17]-361Sale WordPress Care
    • 测试发送消息并确保消息能够正常接收和回复。（因为是演示数据，正常是可以显示联系客服的头像的，然后点击立即聊天）
    图片[18]-361Sale WordPress Care

    步骤 5：优化移动端显示

    Join.chat 插件在移动设备上会自动调整按钮位置，以确保良好的用户体验。在设置中，你可以进一步调整按钮的大小和间距，确保不会遮挡移动端的核心功能，如结账按钮等。（利用主题的自定义功能选择移动端视角查看按钮是否在合适的位置）

    图片[19]-361Sale WordPress Care

    Join.chat 插件的高级选项

    • 显示条件：你可以设置聊天按钮仅在某些页面或特定条件下显示。例如，你可以选择只在产品页或结账页显示聊天按钮，帮助用户在关键页面获得支持。
    图片[20]-361Sale WordPress Care
    • 自定义 CSS：如果你对设计有更高的要求，可以通过自定义 CSS 对聊天按钮进行高级定制，调整按钮样式以匹配 WoodMart 的整体风格。
    图片[21]-361Sale WordPress Care
    • WooCommerce 产品页面：为每个产品页面自定义聊天窗口的 行动号召（Call to Action） 文本和 预填充消息，帮助客户在产品页面上与客服快速联系。
    图片[22]-361Sale WordPress Care

    常见问题及解决方案

    1. 聊天按钮不显示：确保已正确激活插件，并检查设置中的 WhatsApp 号码是否格式正确。通常情况下，国际号码格式错误会导致按钮不显示。
    2. 无法跳转到 WhatsApp：检查你的 WhatsApp 是否正常工作，并确保浏览器支持 WhatsApp 的链接跳转。
    3. 按钮显示位置不合适：你可以通过插件设置或自定义 CSS 调整按钮的位置，确保不影响页面内容的正常展示。

    结论

    通过 Join.chat 插件在 WoodMart 或任何其他 WordPress 主题 中集成 WhatsApp 实时聊天功能是一个提升用户体验的简单且高效的方法。借助即时聊天，用户可以快速联系到客服，从而解决他们的问题，提升转化率。

  • 如何在WoodMart主题中实现多语言支持：详细教程与插件优缺点分析

    如何在WoodMart主题中实现多语言支持：详细教程与插件优缺点分析

    对于使用WoodMart主题的电商网站来说，添加多语言支持可以提升用户体验和市场覆盖范围。那么我们怎么去添加这个功能，以及怎么去选择呢？

    为什么选择多语言支持？

    图片[1]-361Sale WordPress Care

    为网站添加多语言支持有多重好处：

    • 扩大市场范围：多语言支持可以吸引全球用户，提高客户转化率。
    • 提升用户体验：以用户母语呈现的内容，更容易让用户理解和信任。
    • SEO优化：多语言支持可以在不同语言的搜索引擎中提升排名，带来更多自然流量。
    图片[2]-361Sale WordPress Care

    使用GTranslate插件实现多语言支持

    GTranslate是一款基于Google Translate的插件，适合预算有限、需要快速上线多语言功能的网站。它支持多种语言，并可以通过简码插入到标头中。

    GTranslate的优缺点

    优点：

    • 免费且易于配置：GTranslate提供免费版，并且设置简单，适合初次添加多语言功能的用户。
    • 自动翻译功能：利用Google Translate，可以快速为网站提供多语言支持，无需手动翻译。
    • 多样化语言切换器展示：支持简码添加语言切换器，并且提供下拉菜单、国旗图标等多种样式。
    图片[3]-361Sale WordPress Care

    缺点：

    • 翻译精度一般：机器翻译在特定行业术语方面可能不够准确，特别是专业领域的网站需要谨慎使用。
    • SEO支持有限：免费版不支持多语言SEO优化，所有语言都在同一个URL上，不利于搜索引擎索引。
    • 样式受限：GTranslate的菜单集成样式相对简单，可能无法完全满足主题设计要求。

    安装与配置GTranslate

    1. 安装插件：
      • 在WordPress后台，导航到“插件” > “安装插件”，搜索“GTranslate”，然后点击“立即安装”，并激活插件。
    图片[4]-361Sale WordPress Care

    启用插件。

    图片[5]-361Sale WordPress Care
    1. 配置插件：
      • 进入“设置” > “GTranslate”，选择网站默认语言和目标语言。
    图片[6]-361Sale WordPress Care
    1. 设置语言切换器的样式（如下拉菜单或国旗图标），并保存配置。
    图片[7]-361Sale WordPress Care
    1. 将GTranslate添加到WoodMart标头：
      • 如果使用简码，可以通过简码 [gtranslate] 直接将语言切换器插入标头区域。
    图片[8]-361Sale WordPress Care

    找到标头设置的位置，添加简码模块。

    图片[9]-361Sale WordPress Care

    添加文本/html模块，插入简码，然后保存，就完成了。

    图片[10]-361Sale WordPress Care
    1. 如果选择在菜单中添加，请在插件中在菜单中显示选择展示某一个菜单，他不能直接在Wordpress后台菜单直接添加。但注意GTranslate的菜单样式可能不符合视觉需求，因此更推荐通过简码插入标头以提升视觉效果。
    图片[11]-361Sale WordPress Care

    使用TranslatePress插件实现多语言支持

    TranslatePress插件功能更为全面，支持手动翻译、自动翻译和多语言SEO。它允许直接在WordPress菜单中添加语言切换器，且样式效果较好，无需使用简码，适合需要高质量翻译和SEO支持的网站。

    图片[12]-361Sale WordPress Care

    TranslatePress的优缺点

    优点：

    • 手动和自动翻译支持：TranslatePress允许逐页手动翻译，并支持Google Translate API和DeepL API，提供更高的翻译精度。
    • 多语言SEO优化：每种语言都有独立的URL，有助于多语言SEO，适合希望提升在搜索引擎中的表现的网站。
    • 菜单集成友好：无需使用简码即可将语言切换器添加到WordPress的菜单中，样式与主题更为契合，视觉效果更好。
    图片[13]-361Sale WordPress Care

    缺点：

    • 费用较高：TranslatePress的高级功能需要付费，若使用DeepL API和Google Translate API，则会增加额外费用。
    • 初次设置复杂：由于支持多种功能，TranslatePress的设置过程比GTranslate复杂，需要一些时间来配置。

    安装与配置TranslatePress

    1. 安装插件：
      • 在WordPress后台插件页面，搜索“TranslatePress”，点击“立即安装”，然后激活插件。
    图片[14]-361Sale WordPress Care

    建议你直接购买TranslatePress插件，解锁所有的功能，不然还是需要另外付费。

    1. 配置插件：
      • 在“设置” > “TranslatePress”中选择网站默认语言和目标语言。
    图片[15]-361Sale WordPress Care
    1. 若希望使用自动翻译，可以启用DeepL API或Google Translate API，并输入API密钥。图中使用的DeepL API .
    图片[16]-361Sale WordPress Care
    1. 将TranslatePress添加到WoodMart标头：
      • 无需简码，将语言切换器直接添加到“外观” > “菜单”，将其作为菜单项添加到导航栏中。
    图片[17]-361Sale WordPress Care
    1. 该插件的菜单集成视觉效果良好，可以无缝融入WoodMart主题的设计风格。

    总结：

    1. GTranslate适合预算有限、对翻译质量和SEO优化要求不高的用户。简码插入提供了一定的样式选择，但菜单效果较为简单。(只是想要一个简单的谷歌翻译，而且没有其他的付费）
    2. TranslatePress适合需要手动控制翻译内容、注重SEO优化的用户。菜单集成效果良好，无需简码就可以实现漂亮的语言切换器，适合设计要求较高的网站。（对于网站有更高的要求，用户的使用体验，以及翻译正确率，以及需要更多自然流量，请选择这一种，当然你可以从后期从第一种升级为这种）

  • 精通WoodMart主题设置：完全指南（09）

    精通WoodMart主题设置：完全指南（09）

    欢迎回到我们的教程系列，本期我们继续深入探讨如何精确配置WoodMart主题，使您的电商网站更具吸引力和功能性。从基本设置到高级功能，我们将一一解析，确保您能够充分利用这一强大的工具，为顾客带来无与伦比的购物体验。

    步骤：网站后端→Theme settings→shop

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

    如果你不知道设置的效果，可以通过选项后面的问号，会有相应的演示效果，如上图，一般都是默认的，不用动，但如果你要不同的效果，就需要设置

    图片[3]-361Sale WordPress Care

    Variable products：可变产品，产品变量的一些设置，你可以设置一个变量用图像来展示，你也可以不选择，下图选择的是颜色

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

    设置变体图形，这个功能需要打开，如上图

    图片[6]-361Sale WordPress Care

    还有一些价格和点击变体实时跳转的设置，如果你不知道设置，可以参考我我这个设置。

    图片[7]-361Sale WordPress Care

    这个是产品左上角打折或者优惠的标签设置，你可以设置样式或者颜色，但颜色可能是根据模版和主题来继承的，如下图，因为模版是蓝色，所以颜色是蓝色，打你可以在这里设置背景和文字的颜色

    图片[8]-361Sale WordPress Care

    Quick view：快速浏览，你可以理解为一个预览小窗口

    图片[9]-361Sale WordPress Care

    Compare：产品比较

    Wishlist：心愿单
    这些就比较简单，根据翻译就能设置了

    图片[10]-361Sale WordPress Care

    Cart：购物车，如果清除购物车所有的产品，可以出现的文本

    图片[11]-361Sale WordPress Care

    Checkout：查看（结账页面），一些选项的展示效果

    Thank you page：感谢页面
    Free shipping bar：免费运输页面。看实际情况来决定

    图片[12]-361Sale WordPress Care

    步骤：步骤：网站后端→Theme settings→Product archive

    商店档案页面，如下图

    图片[13]-361Sale WordPress Care

    Product archive：商店档案，（shop页面）

    图片[14]-361Sale WordPress Care

    如上图，你可以设置产品前端的详细展示样式，选择适合自己的，或者默认不动

    图片[15]-361Sale WordPress Care

    如上图，布局，悬停效果都可以设置

    图片[16]-361Sale WordPress Care

    如上图，分类模块的展示样式，也在这里调

    步骤：网站后端→Theme settings→Single product

    Single product：单品（单个产品的详细页面设置）

    图片[17]-361Sale WordPress Care

    如上图，产品布局还有其他的一些设置

    图片[18]-361Sale WordPress Care

    如上图，产品详情页的，主图和细节图的样式

    图片[19]-361Sale WordPress Care

    如上图，主图的触碰效果还有主图视频的设置，如果不知道设置可以参考我这里的设置，但根据你的实际情况来调整

    Add to cart：添加到购物车（可以设置这个按钮）

    图片[20]-361Sale WordPress Care

    Buy now：立即购买，可以跳转到结账界面，你可以理解为快速购物

    图片[21]-361Sale WordPress Care

    Elements：元素（一些产品的面包屑，简短的描述，库存的样式设置等一些产品的小细节设置）

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

    如果你希望在产品的下方的描述增加更多的显示，根据你的实际情况，可以在这里添加

    图片[24]-361Sale WordPress Care

    默认是没有的，所以WoodMart主题的功能很多，让你少安装不少的插件，一个主题就搞定了

    图片[25]-361Sale WordPress Care

    Related & Upsells：相关产品以及销售的展示，一般是默认打开的，如果不打开，产品的详情页是没有相似产品推荐的

    My account：我的账户，你可以设置登录或者注册的一些文本信息

    图片[26]-361Sale WordPress Care

    步骤：Social profiles→Links to social profiles

    图片[27]-361Sale WordPress Care

    Social profiles→Links to social profiles：社交媒体的链接可以在这里添加

    通过本期的详细指南，您应该能够掌握WoodMart主题的关键配置。如果您在设置过程中遇到任何困难或有进一步的问题，别忘了我们的团队随时准备为您提供帮助。感谢您的阅读，我们期待在未来的教程中继续为您服务。

  • 完全指南：如何优化和自定义WordPress中的WoodMart主题设置 （08）

    完全指南：如何优化和自定义WordPress中的WoodMart主题设置 （08）

    上一期讲述了Elementor的WoodMart主题的所有编辑和设置，欢迎回到我们的系列教程，今天我们将深入探讨如何有效利用WordPress的WoodMart主题进行网站设计优化。无论您是新手还是有经验的开发者，这篇文章都将为您提供必要的知识和技巧，帮助您精确调整主题以满足您的需求。

    进入后端一般有两个选项：WoodMart和Theme settings

    我们一个一个来

    图片[1]-361Sale WordPress Care

    步骤：网站后端→WoodMart→Header builder

    Header builder：标头生成器，标头的设置在这

    图片[2]-361Sale WordPress Care

    如上图，请认准一个黄色五角星，这种就是现在主题模版用的，上图只有一个，但在其他情况下，可能会有多个，请认准有五角星的，但也会有特殊情况，一摸一样的有多个，而且五角星的并不是用的，这个就是需要进入编辑模式，一个一个尝试了，如下图

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

    如上图，进入编辑模式会进入到这样一个界面，这就是前端的展示布局

    图片[5]-361Sale WordPress Care

    每个单独的模块都能通过笔符号去编辑，进去设置每一个细节，大家根据实际去调整

    Theme settings：主题设置

    步骤：网站后端→WoodMart→Theme settings

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

    这里可以选择标头的的那个布局，一般都是设置好的，不用调整，如果是不对的情况，再去调整

    图片[8]-361Sale WordPress Care

    Header banner：这个属于标题的横幅，要根据每个模版来设置，不一定每个都有

    图片[9]-361Sale WordPress Care

    Promo popup：这个是网站的弹窗设置，可以根据翻译去设置文本颜色背景等等

    图片[10]-361Sale WordPress Care

    Age verify popup：年龄验证弹窗
    Cookie law info：cookie法令弹窗
    这些都是可以关闭的，cookie法令可以根据实际情况

    图片[11]-361Sale WordPress Care

    Page title：标题页面。一般都是默认的，如上图默认颜色是蓝色

    步骤：Footer→Copyrights

    图片[12]-361Sale WordPress Care

    页脚版权设置在这里

    图片[13]-361Sale WordPress Care

    Typography：排版，网站各个模块的字体，都在这里调整，大家更具翻译去设置

    但这个主题的字体是可以自定义添加单独某个位置的，如下图

    步骤：Typography→Advanced→＋Add rule

    图片[14]-361Sale WordPress Care

    选择你想要设置的位置，还有字体，以及风格

    Styles and colors：风格和颜色

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

    Colors：网站各个部分的颜色

    图片[17]-361Sale WordPress Care

    Buttons：按钮。设置一些按钮的样式，颜色，大小等等

    图片[18]-361Sale WordPress Care

    Notices：网站通知，可以设置通知的颜色

    图片[19]-361Sale WordPress Care

    Carousel：旋转木马（理解为产品的展示方式的一种，轮播）设置样式和大小

    步骤：Typography→BLOG

    图片[20]-361Sale WordPress Care

    BLOG：博客的外观，以及展示的方式都在这里，大家根据翻译去理解

    总结：

    希望本期教程能够帮助您更好地理解和使用WoodMart主题的多种设置选项。在下一期中，我们将继续探讨关于商店设置及其分类，确保您能够最大化地利用主题功能，打造出理想的网站。敬请期待，同时也别忘了在评论区分享您的体验和疑问！

  • Elementor与WoodMart主题：探索强大模块与功能（07）

    Elementor与WoodMart主题：探索强大模块与功能（07）

    在上一期文章中，我们详细介绍了Elementor免费版和付费版的一些基本功能。这一期，我们将重点讨论Elementor与WoodMart主题的强大模块功能。无论你是想要创建滑块、图片库、价格表，还是联系表单、促销横幅、产品展示等，这篇文章都将带你全面了解这些常用功能的设置与使用方法。通过这些实用的功能模块，您可以轻松提升网站的用户体验和视觉效果。

    如下图，一个是Elementor和WoodMart主题的模块：[XTemos] Elements，一个是Elementor和WooCommerce插件：[XTemos] WooCommerce

    图片[1]-361Sale WordPress Care
    此图片的 alt 属性为空；文件名为 2024071907162167.png

    我们讲述一些常用的功能

    Slider：滑块，幻灯片，但是设置就不是在编辑器页面设置，而需要到网站后端的Slides（幻灯片）设置细节

    lmage or SVG：图片和SVG格式图片，和图片功能一样，只是有些效果有差别

    lmages gallery：图片库，多张图片需要用到，轮播网格等等

    Pricing tables：价格表，和上一期说的一样的，只是效果不一样

    图片[3]-361Sale WordPress Care

    Contact form 7：联系表单，主题带的，如果没有的话则需要安装单独的插件才能有。这就是主题好的原因，功能都有了，你就不需要那么多插件了

    Testimonials：评价，Elementor编辑器也会有，但主题的效果肯定是完全不一样的

    图片[4]-361Sale WordPress Care

    Promo Banner：促销横幅，你可以理解为海报，有标题和按钮跳转的

    Banners carousel：海报轮播，在横幅的基础上升级了

    Products (grid orcarousel)：产品的展示，多种风格可选，你可以用主题的也可以用WooCommerce插件的，但显示效果肯定是没有主题的好，如下图

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

    步骤：选择Products (grid orcarousel)模块→style→Grid or carousel

    图片[7]-361Sale WordPress Care

    主题的产品样式在风格（Style）设置，如上图

    Product categories：产品分类，多种样式可选，如何设置呢，下图是一个旋转木马（Carousel）的展示效果

    图片[8]-361Sale WordPress Care

    步骤：选择Product categories模块→Layout

    图片[9]-361Sale WordPress Care

    如上图，在模块的风格（Style）设置

    AJAX Products tabs：在一个模块设置 多个展示的类别，如下图，比如新产品或者，特色产品，最佳销售等等

    图片[10]-361Sale WordPress Care

    Brands：品牌，在网站后台Products的Attributes（属性）的Brand里

    WC Products widget：产品的小部件，你可以用作产品的优惠展示或者打折来，如下图

    图片[11]-361Sale WordPress Care

    至于WooCommerce的WoodMart主题的模块，根据翻译去理解，然后按照实际使用就行

    图片[12]-361Sale WordPress Care

    总结

    通过以上对Elementor与WoodMart主题模块功能的详细讲解，希望能帮助你更好地利用这些强大工具，打造出专业且功能丰富的网站。无论是展示产品、促销活动，还是提升用户互动体验，这些模块都能提供极大的便利和美观效果。下一期，我们将深入探讨WoodMart主题的设置和调整方法，帮助你进一步优化网站设计。持续关注我们的内容，获取更多关于网站设计和功能优化的实用技巧与建议。

  • 深入解析Elementor基本版与Pro付费版功能：全面指南与实用技巧（06）

    深入解析Elementor基本版与Pro付费版功能：全面指南与实用技巧（06）

    在上一期的内容中，我们详细介绍了Elementor编辑器的基本功能。在继续讲解Pro付费版功能之前，我们需要了解一个重要的通用功能。只要您安装了普通版的Elementor编辑器，就可以使用这些基本功能的扩展。然而，仅靠基本功能是远远不够的。接下来，我们将一步步带您了解这些扩展功能的具体应用和操作方法。

    步骤：网站前端→Edit with Elementor→General

    图片[1]-361Sale WordPress Care

    lmage Box：图边框，如果你需要用到图片还要展示标题和描述就需要用到它，如下图

    图片[2]-361Sale WordPress Care

    Image Carousel：图片轮播，如果你不想用幻灯片（slide）的形式展示，就可以考虑这种方式

    图片[3]-361Sale WordPress Care

    Slider Revolution 6：滑动模块，可以理解为幻灯片（slide）的替代形式，因为幻灯片模块是需要Pro版付费版才能用的，所以在没有开通付费版之前是存在一些限制的

    其他的通用功能就不一一介绍了，大家根据翻译就能理解。

    接下来我们继续讲述Pro版付费版能带来哪一些不一样的功能，如下图，我们讲述一些常用的。

    步骤：网站前端→Edit with Elementor→Pro

    图片[4]-361Sale WordPress Care

    Slides：幻灯片，你可以理解为轮播图，就是网站的海报图，可以DIY（自定义）功能比较强大，如下图

    图片[5]-361Sale WordPress Care

    Price Table：价格表，，B2B一般用的会比较多，B2C用不上，如下图

    图片[6]-361Sale WordPress Care

    Reviews：评论，客户的评价，自己都可以设置的，当然你也有疑问，普通版的也有评价模块，但你设置的时候你会发现，普通版是达不到这个效果和美观度，付费版才能有多样化以及更好看的展示效果，如下图，付费和普通的对比，看起来应该不明显，但编辑的时候区别明显，大家可以自己去实验下

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

    Testimonial Carousel：见证轮播，也可以用于评价的展示，如下图

    图片[9]-361Sale WordPress Care

    Template：模版，你可以在Elementor模版创建一个模版，如果你要用在某个位置就可以用的就可以使用这个，或者你保存某一个模版然后再其他位置插入也可以的

    图片[10]-361Sale WordPress Care

    总结：

    通过本期的讲解，相信大家已经对Elementor Pro付费版的一些常见功能有了更清晰的了解。这些功能不仅使您的网站设计更加灵活多样，还显著提升了整体的视觉效果和用户体验。无论是幻灯片展示、价格表设计，还是评论模块的美观设置，Elementor Pro版都能为您提供强大的支持。希望这些内容对您有所帮助。下一期，我们将继续深入探讨WoodMart主题的一些模板和使用方法，以及它们的区别，敬请期待。

  • 打造个性化网站：Elementor编辑器与WoodMart主题的高级应用（05）

    打造个性化网站：Elementor编辑器与WoodMart主题的高级应用（05）

    上一期介绍了Elementor编辑器的基本介绍与WoodMart主题的搭配，今天我们将深入探讨如何使用Elementor编辑器与WoodMart主题进行更高级的网站设计自定义。无论您是设计新手还是寻求更精细化布局的经验者，本篇文章都将为您提供实用的步骤和技巧。

    步骤：网站前端→Edit with Elementor→滑动到页脚的前面（或者某个模块的添加也可以）

    图片[1]-361Sale WordPress Care

    如上图，一共有四个按键，分别是添加，模版文件，ai构建，主题模版选项

    一般用的最多的是第一个，第二个模版文件，除非你保存了某个模块，然后想要添加到某个位置，但这属于高阶设置了，一般新手用不上，第三个ai构建不建议用，第四个主题模版，根据主题的不一样，当然内容也不一样，上述显示的是WoodMart主题的

    图片[2]-361Sale WordPress Care

    我们点击添加会得到下面的选项

    图片[3]-361Sale WordPress Care

    上述显示的容器（Container）的样式选择，根据实际情况去选择

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

    他们有一个明显的区别是Grid（网格）是需要设置第一个才能设置第二个格子，Flexbox（弹性盒子）则不需要，但也会有一个区别，就是如果你添加弹性盒子开始只选择了整个，没有分开，选择两格或者三个，他不能选择，除非重新添加，但如果是网格就可以自己切换多个格式，大家根据实际情况去选择

    图片[6]-361Sale WordPress Care

    添加容器后，在容器（Container）的上方都会有三个按钮，分别是添加，编辑，关闭

    文章的前面说过，除了网页最下端的页脚能添加之外，任何容器的添加也是能添加容器的，

    第二个是编辑，关于容器（Container）的一些设置选项

    第三个就是关闭了，无需多说

    我们重点讲述第二个编辑，如下图

    图片[7]-361Sale WordPress Care

    其他的在上一篇的文章有介绍过就不说了，如上图，这个功能新手一般用不上，但如果想容器更美观或者调节多样性就必须会，其实翻译写的很明显了，所以很容易明白，红色框有一个项目，下面有一个方向，上图显示的往下，因为你添加容器选择的是就是向下的其他都是一些方位的显示，大家根据实际情况去调整

    风格也在上一篇介绍了，这里也就不多多说了

    今天讲述先进的其中一个没有讲到的功能

    图片[8]-361Sale WordPress Care

    如上图，为了大家更好的理解，我用中文的图片来说，应该会更好理解一些，基本中文都说明了选项，大家应该对“黏“比较困惑，因为翻译是不准确的，其实就这个容器你可以选择固定顶端或者底部，或者不固定的意思

    图片[9]-361Sale WordPress Care

    Transform：容器（Container）的一些特殊的效果，大家根据翻译去选择，一般是不用动的

    图片[10]-361Sale WordPress Care

    容器点添加，你就可以选择模块了，左边会有容器（Layout），以及基本功能（Basic），和Elementor PRO版（Pro）的功能

    每个主题的基本功能都是不一样的，如果你网站有其他的插件的话，也会在基本功能展示

    但基本的功能能满足你一个网站的基本的构建，可能会不够美观，和炫彩的效果，那样就需要Pro付费版的才能实现，需要添加什么模块，点击你需要的模块拖动到容器里面就行

    模块介绍：

    步骤：网站前端→Edit with Elementor→容器（Container）→Heading

    Heading：标题，理解为大标题，如下图，你可以设置标题文案（Title），以及链接（link）以及标题大小（HTML Tag）以及标题的方向（Alignment），标题颜色（Text Color），字体排版（Typography）大小或者字体风格，大小等等

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

    步骤：网站前端→Edit with Elementor→容器（Container）→Text Editor

    Text Editor：文本编辑器（如果文字多的话建议用这个，比如一些产品介绍，公司的介绍等等）如下图，文本内容，文本分列（Columns），可以理解为文本在整个容器占据多少，柱间隙（如果你没有设置文本分列，则不需要调整）

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

    如上图，还有一个文本编辑器风格，可以调整配色方案（Color scheme），文本的方向（Alignment），文本标题颜色（Text Color），文字排版（Tyроgraphy），内容对齐（Content align），内容宽度（Content width）

    步骤：网站前端→Edit with Elementor→容器（Container）→Text Editor

    image：图片展示

    Choose lmage：选择一张图片，你可以选择从网站媒体库或者本地上传

    Image Resolution：图片的分辨率大小，可以选择非常多的分辨率

    Caption：标题，可以展示也可以不展示

    Link：链接，可以展示自定义链接，或者媒体链接

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

    如上图，Alignment（图片位置）Width（图片宽度），Max width（图片最大宽度），Height（图片高度）Normal（默认状态），Hover（悬停状态，鼠标点击状态）两种不同状态可以分别调整，其他根据翻译理解就行

    图片[18]-361Sale WordPress Care

    步骤：容器（Container）→选择两列布局→图片选择网格的形式选择两列

    如上图，如果你想实现上图的效果，你则需要用到图片（image）的Advanced（先进的）高级功能，请注意是图片（image）的，而不是容器（Container）的，需要在下图的Margin（外框）设置数值偏移，但请断开链接的符号，如果不断开则四个方向是一起变动的，如上图，一个偏左下，一个偏右上，在相对应的方向设置数值就行了

    当然有一个简单的方法那就是做一张这种图片直接插入，会比我这种方法简单，大家根据需要选择

    图片[19]-361Sale WordPress Care

    步骤：网站前端→Edit with Elementor→容器（Container）→Button

    Button：按钮，可以跳转链接的按钮，是必不可少的一个功能，而且美观

    图片[20]-361Sale WordPress Care

    Type（类型），一般是默认的，你也可以选择其他的

    Text（按钮名称），根据实际情况写

    Link（链接）按钮跳转链接

    Icon（图标），你可以设置有图标或者没有图标的，看实际情况调整

    Button lD（按钮ID），一般不用设置的

    图片[21]-361Sale WordPress Care

    Position：按钮的方向

    Typography：按钮排版

    Text Color：文本颜色
    Background Type：背景类型
    Color：颜色

    Normal：默认
    Hover：悬停

    两种不同状态分别调整

    步骤：网站前端→Edit with Elementor→容器（Container）→Spacer

    Spacer：垫片。你可以理解为上下两个模糊或者容器的间隙

    图片[22]-361Sale WordPress Care

    步骤：网站前端→Edit with Elementor→容器（Container）→Divider

    Divider：分割线

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

    可以设置宽度和颜色，还有高度，他和垫片（Spacer）的区别就是功能会强大一点，垫片（Spacer）的功能只是间隙，如下图，分割线（Divider）效果会不一样

    图片[25]-361Sale WordPress Care

    更多的模块

    Video：视频插入

    Google Maps：地图插入

    icon：图标

    这些设置比较简单就不说了，大家根据翻译就能设置

    这期就讲述到，我们讲述了Elementor编辑器的基本功能和一些经验分享，通过今天的教程，我们希望您能够掌握Elementor编辑器与WoodMart主题的高级应用，从而打造出既美观又功能全面的网站。下一期，我们将介绍Elementor的付费版功能，敬请期待更多专业技巧和深入指导！

  • Elementor编辑器深入解析：打造个性化的WoodMart主题网站（04）

    Elementor编辑器深入解析：打造个性化的WoodMart主题网站（04）

    上一期我们讲述了如何设置Woodmart主题的海报（banner），这期我们讲述Elementor编辑器来装修Woodmart主题，我们将深入探讨如何使用Elementor编辑器来进一步自定义和优化您的WoodMart主题。通过本篇教程，学习如何利用Elementor的多功能模块，打造一个既美观又实用的网站前端。

    图片[1]-361Sale WordPress Care

    如上图进入编辑模式

    每个模版会里面有不同的模块，如下图，这是其中一个模块的截图，但实际的应用不是说每个模块都合适

    图片[2]-361Sale WordPress Care

    如下图，这是同样的模版，但是是另外一个效果

    图片[3]-361Sale WordPress Care

    是不是觉得好看了许多，不是那么单调但又有自己的个性

    接下来我们来讲述Elementor编辑器各个功能的效果和具体的方法。

    我们先来讲解下上图的模版整个布局，我们进入到模版的编辑页面右边会看到整个布局，如下图

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

    如上图布局都是Container（容器）组成的，容器里面才有各个模块

    图片[6]-361Sale WordPress Care

    如上图，比如由标题和分类模块两个实现的，在右边的就会对应的显示，Elementor编辑器，比较适合新手，但如果你想调整的更美观更好看，也是需要一定经验的

    我们拿两个比较有特殊的模块，来举例，如下图

    图片[7]-361Sale WordPress Care

    从上图来看，这是一个海报或者图片加一个产品展示的模块对吧，布局是1:3，其实就是两个容器里面加入了模块

    先看左边，如下图方框符号是容器（Container），笔符号是模块的编辑，这是一个Promo Banner（促销横幅）模块

    步骤：网站前端→选择对应的模块→方框（容器）Container

    图片[8]-361Sale WordPress Care

    进入容器，我们能看到容器的一些设置，如下图

    图片[9]-361Sale WordPress Care

    有三大设置，如下图

    图片[10]-361Sale WordPress Care

    Layout：布局

    Style：风格

    Advanced：高级设置（先进的）

    图片[11]-361Sale WordPress Care

    Container Layout：容器的样式，分为弹性盒子和网格（红色框）

    Content Width：容器的布局，分为居中和全宽，全宽就是全屏，根据翻译和实际效果就能明白了（黄色框）

    Width：整个容器的宽度。（蓝色框）

    Min Height：整个容器的高度（蓝色框）

    可以看到蓝色框调整后面可以根据百分比调整或者像素调整，但还有其他的，一共四种格式，最常用还是我说的那两种，大家根据实际情况来调整，同时还能看到设备图案，说明是可以根据每个设备单独调整的，如果自适应不是很理想，可以去调整

    Gaps：柱子，可以理解为容器之前的间隙（绿色框）

    图片[12]-361Sale WordPress Care

    如上图，Style（风格）

    这里容器调整的就是Background（背景)色了,其他的暂时不需要动

    图片[13]-361Sale WordPress Care

    如上图，Advanced：高级设置（先进的）

    Layout→Margin：调节外框的偏移

    Layout→Padding：调节内框的偏移

    一般是不需要调整的，如果需要样式不一样，或者填充则需要调整，也就是需要更好的效果，但不建议新手弄，可能会导致电脑端感觉好，但其他设备出现乱遭的感觉

    图片[14]-361Sale WordPress Care

    Responsive：响应式，你可以使这个模块，在所以设备上显示，或者只显示在某个设备上，非常的灵活，甚至你可以设置两个一样的，但针对不同设备的，已到达非常好的效果，也会避免自适应或者调整到不效果的一种解决办法

    以上就是容器（Container）基本的使用，容器基本的内容都差不多，会有细微的差别，但模块就不一样，区别都会很大

    下面我们讲述下这个模块

    图片[15]-361Sale WordPress Care

    General：一般的，这个模块显示就可以插入链接(link)

    Background：背景

    图片[16]-361Sale WordPress Care

    Source：背景来源

    choose imae：选择图片，但前提你的来源是选择图片，可以去媒体库或者上传图片

    Banner height：模块的高度

    Image Position：显示图片的位置

    图片[17]-361Sale WordPress Care

    如上图，Content（内容）

    分别对应右边模块的位置，这个比较简单就不一样讲述了，大家也可以根据翻译理解

    图片[18]-361Sale WordPress Care

    Style：风格，这里可以处理每一个部件的样式，就是使得他们更美观，比如标题描述按钮，以及模块更多的效果，大家根据翻译去理解

    Advanced：高级设置（先进的），基本和容器一样，但新手不需要去调整

    接下里我们讲述右边

    步骤：网站前端→对应的容器（方框图标）或者模块（笔符号）

    图片[19]-361Sale WordPress Care

    如上图显示，他是由一个容器里面加入了标题模块和按钮模块，容器的下方加入了一个产品模块

    图片[20]-361Sale WordPress Care

    如上图，触碰标题会出现笔符号进入编辑，按钮模块也是一样的，如下图

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

    如上图，意思根据翻译理解，非常好理解。通过本期的详细介绍，相信您对Elementor编辑器在自定义WoodMart主题中的应用有了更加深入的理解。我们展示了如何通过不同的模块和容器来增强网站的视觉效果和功能。请期待我们的下一篇文章，我们将继续探索更多基础模块和容器的使用技巧，帮助您进一步提升网站设计。感谢您的阅读，我们下期再见！

  • 如何设置WoodMart主题的菜单：详细教程与最佳实践（02）

    如何设置WoodMart主题的菜单：详细教程与最佳实践（02）

    今天我们讲WoodMart主题的菜单设置，之前的WoodMart主题模版数据导入参考

    WoodMart主题菜单功能性比较强，DIY（自定义也多），所以建议新手慢慢理解，简单的菜单功能就无需多讲了，不会的参考Basel主题菜单设置。
    欢迎来到我们的详细教程，今天我们将深入探讨如何设置和优化WoodMart主题的菜单。WoodMart主题以其强大的自定义功能和丰富的DIY选项而著称，对于新手用户来说，了解并掌握这些功能可能需要一些时间和耐心。无论您是希望创建简单的导航菜单，还是像图中展示的那样实现美观的超级菜单，这篇文章都将为您提供所需的步骤和技巧。

    图片[1]-361Sale WordPress Care

    如果想实现上图漂亮的菜单以及图标展示，需要多个功能一起实现

    我们会用到Elementor或者WPBakery PageBuilder编辑器，每个模版不一样，所以编辑器也不一样，但大致是一样的，选择WoodMart主题的菜单模版可以参考之前的链接

    还需要HTML块实现，当然菜单也需要具备超级菜单的选项

    步骤：网站后端→Appearance→Menus

    举个列子：下面就是超级菜单的设置

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

    如上图每个模版的超级菜单都会有点区别，但大致是一样

    图片[4]-361Sale WordPress Care

    Shop Pages，Product Loop，Single Product，Features这些页面都是在网站的后端HTML Blocks

    步骤HTML Blocks→Shop Pages→Edit with Elementor

    ，如上图，找到合适的页面

    图片[5]-361Sale WordPress Care

    如果找不到可以view（查看）来预览确定

    图片[6]-361Sale WordPress Care

    如上图，进入编辑页面

    具体的看模版搭配什么编辑器，来选择，上图是Elementor编辑器

    步骤Shop Pages→Edit with Elementor

    图片[7]-361Sale WordPress Care

    进去编辑想要的效果，图片内容可能不一样，但操作方式是一样的，根据每个模版不一样操作也会有细微的差别。

    但有些模块不会出现在HTML Blocks（HTML块）这个位置，会出现在Layouts（布局）

    图片[8]-361Sale WordPress Care

    如上图，但方法是一样的

    还有一种展示分类的图片的，也很简单，如下图

    图片[9]-361Sale WordPress Care

    也很简单，也是设置好HTML块，在菜单选择就可以了，如下图

    步骤HTML Blocks→新建→Product categories

    图片[10]-361Sale WordPress Care

    步骤Appearance→Menus→设置产品分类→选择对应的HTMl块

    图片[11]-361Sale WordPress Care

    也非常简单，做出来的菜单就会比较好看，但最终还是看个人的选择。

    总结：

    通过本文的教程，您现在应该能够轻松设置并优化WoodMart主题的菜单。无论是使用Elementor还是WPBakery PageBuilder编辑器，每个步骤都经过详细说明，确保您能够实现理想的效果。如果您在操作过程中遇到任何问题，欢迎随时联系我们的支持团队。感谢您的阅读，并祝您网站建设顺利！

  • 完全指南：如何设置Woodmart主题中的海报（Banner）（03）

    完全指南：如何设置Woodmart主题中的海报（Banner）（03）

    在我们上一次的讨论中，我们已经详细探讨了Woodmart主题的菜单设置。今天，我们将进一步深入到如何在这一主题中设置海报（Banner）。无论您是初学者还是寻求进一步优化网站的专业人士，这篇指南都将为您提供必要的指导和技巧。如下图

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

    不同的模版，海报（banner）位置也不一样，但后端的设置基本上相同，首先我们找到网站后端Slides（幻灯片）

    步骤Slides→All ltems

    图片[3]-361Sale WordPress Care

    找到对应的幻灯片位置，用对应的编辑器进去编辑，进行替换海报（banner）文字信息，如下图使用的是Elementor编辑器

    步骤Mega electronics slide 1→Edit with Elementor

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

    如上图，更换文字和展示信息

    如有需要更换海报（banner），则需要点击对应的页面进入编辑页面，而不是Elementor编辑器

    步骤Mega electronics slide 1→Edit

    图片[6]-361Sale WordPress Care

    如上图进入编辑

    图片[7]-361Sale WordPress Care

    选择Featured image，点击图片进入媒体库更换，就可以更换背景

    但不是所有的Woodmart主题模版都在Slides（幻灯片），还有另外一个地方可以找到Slider Revolution

    图片[8]-361Sale WordPress Care

    具体的Slider Revolution（滑动模块）设置方法，可以参考Basel主题海报设置方法

    在每个海报（banner）的编辑页面下面还有一个Slide Settings（幻灯片设置），有布局以及背景和一些设置，如下图，根据实际情况调整

    图片[9]-361Sale WordPress Care

    总结

    现在，您已经掌握了如何在Woodmart主题中设置和更新海报（Banner）的所有技巧。这些步骤简单易行，可以显著提升您的网站视觉效果。如果在设置过程中遇到任何问题或需要更多帮助，请不要犹豫，随时联系我们。我们期待看到您网站的成功改变！