WoodMart 主题中的滑块设置指南

ウッドマート 主题具备轻量级滑块功能,能够快速创建流畅的图片轮播效果,相较于 Revolution Slider 这类插件,它运行更快、配置更简便,并且对网站的影响更小。该功能依赖 ワードプレス 自定义文章类型,使用户能够利用 WPBakeryページビルダー もしかしたら エレメンタ 进行布局和内容管理,从而提升页面的动态视觉效果。

图片[1]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

创建滑块

滑块能够增强页面的视觉表现,吸引访客关注重点内容。创建滑块的基本步骤如下:

进入 WordPress 后台,点击 Slides > Slider 进入滑块管理页面。

图片[2]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

输入相关信息创建一个新的滑块

图片[3]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

カスタマイズスライダセットアップ

Layout

滑块切换动画(Slide Change Animation)

在该部分,可以选择不同的滑块切换动画:

  • Slide(滑动) – 默认的滑动切换效果。
  • Fade(淡入淡出) – 使幻灯片平滑地淡入淡出。
  • Parallax(视差) – 具有视差滚动的切换效果。
  • Distortion(扭曲) – 具有特殊变形效果的动画。
图片[4]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

拉伸滑块(Stretch Slider)

  • 该选项用于 是否让滑块全屏显示.
  • 当前状态为 NO(关闭),意味着滑块不会自动填充整个屏幕宽度。
  • 若开启(YES),滑块将自适应整个页面宽度,适合全屏大图展示。
图片[5]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

设备端高度设置(Height on Desktop)

  • 该选项允许调整滑块在桌面端的高度。
  • 目前高度被设置为 500px,可根据需求拖动滑块调整数值。
  • 在右侧图标可见,该高度设置仅适用于 桌面端,平板端和移动端可进行单独调整。
图片[6]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

Arrows style

箭头样式(Arrows Style)

在此部分,可以选择滑块上的导航箭头样式,有四种选项:

  • 默认箭头(当前选中)
  • 细线箭头
  • 圆形箭头
  • 隐藏箭头(无导航箭头)
图片[7]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

如果不希望用户通过箭头切换幻灯片,可以选择最后一个选项,将箭头隐藏。

箭头颜色方案(Arrows Color Scheme)

  • 提供两种颜色方案:
    • 黑色背景,白色箭头
    • 白色背景,黑色箭头
图片[8]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

适用于不同风格的网站,可根据页面背景颜色进行选择。

自定义设置(Custom Settings)

  • 当前状态:关闭(NO),意味着使用默认设置。
  • 如果打开该选项,可以进行更高级的个性化设置,例如箭头大小、颜色、边框等。
图片[9]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

Pagination style

分页样式(Pagination Style)

该部分允许选择滑块的分页指示器样式,共提供四种类型:

  • 圆点分页(默认选中):以圆点形式显示当前滑块进度,适合简约风格。
  • 数字分页:以数字形式展示滑块位置,如“01 — 02”,更直观。
  • 圆点+进度条:结合圆点与进度条,适用于动态效果较强的设计。
  • 隐藏分页:不显示任何分页导航,适合无分页需求的设计。
图片[10]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

分页水平对齐方式(Pagination Horizontal Alignment)

该设置决定分页导航在滑块中的水平位置,有三种选项:

  • 左对齐
  • 居中对齐(当前选中)
  • 右对齐
图片[11]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

分页颜色方案(Pagination Color Scheme)

该设置允许选择分页导航的颜色方案:

  • 黑色背景,白色分页指示器
  • 白色背景,黑色分页指示器
图片[12]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

可根据网站整体配色风格进行调整,确保视觉效果一致。

自定义设置(Custom Settings)

  • 当前状态:关闭(NO),表示使用默认设置。
  • 如果开启自定义设置,可以调整分页指示器的大小、间距、颜色等,提供更高级的个性化配置。
图片[13]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

创建成功后,可以在列表中查看已创建的滑块,并在后续步骤中添加幻灯片内容,使其发挥更大的作用。

自定义幻灯片设置

滑块的配置能够决定其展示效果,进入 Slides > Slider > 编辑スライド,可以调整以下关键参数:

オープニング

布局(Layout)设置

  • Content no space(内容无间距):当前为 閉塞状態,如果开启,滑块内的内容区域将不会有额外的填充(padding)。
  • Full width content(全宽内容):当前为 閉塞状態,如果开启,滑块内容将自动填充整个滑块宽度,适用于全屏展示效果。
  • Content width(内容宽度):滑块的内容宽度可手动调整,目前设置约为 750px,可以根据设计需求滑动调整。

内容位置(Content Position)

  • 提供三种设备模式 (Desktop、Tablet、Mobile),可以分别针对不同设备设定内容布局,确保滑块的适配性。
  • Vertical content align(垂直对齐方式):提供三种对齐方式,当前选中的是 中间对齐(即内容在滑块的中部)。
  • Horizontal content align(水平对齐方式):提供三种选项,当前选中的是 左对齐,即内容位于滑块左侧。
图片[14]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

コンテキスト

背景颜色(Color)

  • ある カラー 选项中,可以选择一个纯色背景。如果不想使用背景图片,可以点击颜色选择器来设置一个合适的颜色。
图片[15]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

背景图片(Background Image)

  • 背景画像のアップロード:可以点击 Upload 按钮上传一张图片作为滑块的背景。
  • 设备自适应提供 桌面(Desktop)、平板(Tablet)、手机(Mobile) 三个选项,可以分别设置不同设备的背景图片,确保在各种屏幕尺寸下都能有良好的显示效果。
图片[16]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

背景尺寸(Background Size)

  • 该选项用于调整背景图片的显示方式,有两个选项:
    • Cover(覆盖):背景图片会拉伸填充整个滑块区域,可能会裁剪掉部分图片内容,但能保证背景完全覆盖滑块。
    • Contain(包含):背景图片会完整显示,可能会在滑块内留出空白区域,但不会裁剪图片内容。

背景位置(Background Position)

  • 当前选项为 Center Center(居中对齐),意味着背景图片将以中心点对齐滑块。如果需要调整,可以选择其他位置,例如:
    • Left Bottom – 左下角
    • Center Center – 居中对齐
    • Right Top – 右上角
    • Center Bottom – 居中底部
    • Center Top – 居中顶部
    • Left Center – 左侧居中
    • Left Top – 左上角
    • Right Center – 右侧居中
    • Right Bottom – 右下角
    • Custom – 自定义

設定

启用自动播放(Enable Autoplay)

  • 当前状态:关闭(NO)
  • 该选项决定滑块是否自动轮播,如果开启,スライド将在设定的时间间隔内自动切换,无需手动点击。
  • 适用于展示动态内容,如热门商品、促销信息等,提高页面的视觉吸引力。
图片[19]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

滚动加载滑块(Init Carousel on Scroll)

  • 当前状态:关闭(NO)
  • 该选项决定是否仅在滑块进入视野后才加载脚本,这一功能有助于优化页面性能,减少页面初始加载时间。
  • 适用于包含多个滑块的页面,特别是在内容较长时,有助于减少不必要的脚本运行,提高页面流畅度。
图片[20]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

在滑块添加幻灯片

あるスライダ添加幻灯片

下面这个界面出现在创建或编辑单个幻灯片页面的侧边栏中,主要作用是把当前正在编辑的幻灯片分配给一个或多个已创建的滑块:

  • All Sliders(全部滑块):在这里会列出网站已创建的所有滑块,用户可以选择要将当前幻灯片分配到哪些滑块中。
  • Most Used(最常用):在此列出了使用最频繁的滑块,以便快速选择常用的滑块。
  • の下をクリックします。 “+ Add New Slider” 可以直接创建一个新的滑块,并将当前幻灯片快速添加到新创建的滑块中。
图片[21]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

使用这个功能,能快速有效地管理幻灯片与滑块之间的关联,优化内容管理效率。

幻灯片排序

下面是ワードプレス后台中“Post Attributes”(文章属性)的设置区域,其中的“Order”(排序)选项用于设置幻灯片或页面的显示顺序。

具体说明:

  • Order(排序)::
    用来设置当前页面、文章或幻灯片在列表或前端显示中的顺序。
    • 默认数字为“0”,数字越小,排序越靠前。
    • 例如,输入“0”或负数(如“-1”),该项目在前端显示时会排在靠前位置。
    • 输入更大的数字(如“5”或“10”),则该项目将在排序中靠后显示。
图片[22]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

使用这个功能可灵活控制幻灯片或页面在网站上的显示顺序,帮助网站更好地组织和展示内容。

设置特色图片

  • の右側には Featured Image 面板中,点击 “Set Featured Image”.
  • 选择 WordPress 媒体库中的图片,或上传新图片。
图片[23]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

在页面中添加滑块

ウッドマート テーマサポート WPBakeryページビルダー 歌で応える エレメンタ 两种方式插入滑块:

使用 Elementor

  • 进入 Elementor 页面编辑界面。
  • 増加 WoodMart Slider 小部件至页面。
  • 从下拉列表中选择已创建的滑块,并根据需要调整大小与样式。
  • 确认无误后,点击 更新,使修改生效。
图片[24]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

使う WPBakeryページビルダー

  • 入り込む 页面编辑,切换至 WPBakery Backend Editor .
  • 増加 WoodMart Slider 元素至页面适当位置。
  • 在组件设置中,选择要插入的滑块。
  • 保存更改后,更新页面,即可预览滑块的显示效果。
图片[25]-WoodMart 主题滑块设置与优化指南:创建流畅的图片轮播效果

ほら

  • 包含滑块的区块 需要将宽度设置为 デフォルト,否则可能出现排版问题。
  • 全屏滑块 需在滑块设置中 启用 Stretch Slider,并确保 全宽内容 选项已激活,以保证不同设备的适配效果。

概要

ウッドマート 主题的滑块功能可帮助用户快速创建高质量的轮播效果,并优化网站的视觉展示。合理运用滑块,不仅能吸引访客关注重点信息,还能提升页面层次感,使整个网站更具专业性。


お問い合わせ
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事を書いた人 : upupdowndownLRLRBABA
終わり
好きなら応援してください。
クドス7124 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし