WoodMartテーマのスライダー設定ガイド

ウッドマート このテーマは、Revolution Sliderのようなプラグインよりも高速に実行され、設定が簡単で、サイトへの影響が少ない、滑らかな画像回転効果を素早く作成するための軽量スライダーを備えています。この機能は ワードプレス カスタマイズされた記事タイプにより、ユーザーは以下の利点を活用できる。 WPBakeryページビルダー もしかしたら エレメンタ レイアウトとコンテンツの管理を行い、ページのダイナミックな視覚化を強化する。

画像[1]-WoodMartテーマスライダー設定と最適化ガイド:スムーズな画像回転エフェクトの作成

スライダーの作成

スライダーはページの視覚的なプレゼンテーションを強化し、訪問者の注意を主要なコンテンツに引き付けます。スライダーを作成する基本的な手順は以下の通りです:

WordPressのバックエンドに移動し、スライド > スライダーをクリックしてスライダー管理ページに移動します。

画像[2] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

関連情報を入力して新しいスライダーを作成する

画像 [3] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

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

レイアウト

スライドチェンジアニメーション (Slide Change Animation)

このセクションでは、異なるスライダーを選択してアニメーションを切り替えることができる:

  • スライド - デフォルトのスライドトグル効果。
  • フェード - スライドをスムーズにフェードイン、フェードアウトさせる。
  • 視差 - 視差スクロールの切り替え効果。
  • ディストーション - 特殊な変形効果を持つアニメーション。
画像[4] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

ストレッチ・スライダー

  • このオプションは スライダーをフルスクリーンにするかどうか.
  • 現在の状態は NO(オフ)つまり、スライダーは自動的にスクリーンの幅いっぱいに表示されません。
  • オンにすると(YES)、スライダーはページ幅全体に適応し、大きな画像をフルスクリーンで表示するのに適しています。
画像 [5] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

デスクトップ設定時の高さ

  • このオプションでは、デスクトップ側のスライダーの高さを調整できます。
  • 高さは現在 500px必要に応じてスライダーをドラッグして値を調整できる。
  • 右側のアイコンに表示されている、この高さの設定は デスクトップタブレット側とモバイル側を個別に調整できる。
画像 [6] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

アローズスタイル

アローズスタイル

このセクションでは、スライダー上のナビゲーション・アローのスタイルを4つのオプションから選択できます:

  • デフォルトの矢印(現在選択中)
  • 細線矢印
  • 円矢印
  • 隠し矢印(ナビゲーション矢印なし)
画像 [7] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

ユーザーが矢印を使ってスライドを切り替えたくない場合は、最後のオプションを選択して矢印を非表示にすることができます。

アローズの配色

  • 配色は2種類:
    • 黒背景、白矢印
    • 白背景、黒矢印
画像 [8] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

異なるスタイルのウェブサイトに適しており、ページの背景色に応じて選択することができます。

カスタム設定

  • 現在の状態: オフ (NO)つまり、デフォルト設定が使用される。
  • このオプションをオンにすると、矢印のサイズ、色、ボーダーなど、より高度なパーソナライズ設定を行うことができます。
画像 [9] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

ページネーションのスタイル

ページネーションのスタイル

このセクションでは、スライダーのページング・インジケータのスタイルを選択できます:

  • ドットページング(デフォルトでチェック): 現在のスライダーの進行状況をドットで表示します。
  • 数字ページネーションスライダーの位置を "01 - 02 "のように数値で表示すると見やすくなります。
  • ドット+プログレスバードットとプログレスバーを組み合わせ、よりダイナミックなデザインに。
  • ページングを隠すページネーションの必要がないデザインに適しています。
画像 [10] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

ページネーションの水平アライメント

この設定は、スライダー内のページング・ナビゲーションの水平位置を決定し、3つのオプションがあります:

  • 左揃え
  • 中央(現在選択中)
  • 右寄せ
画像 [11] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

ページネーションの配色 (ページネーションの配色)

この設定では、ページネーション・ナビゲーションの配色を選択できます:

  • 黒背景、白ページネーション表示
  • 白背景、黒ページングインジケーター
画像 [12] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

ウェブサイトの全体的な配色に合わせて調整することで、一貫した視覚効果を確保することができます。

カスタム設定

  • 現在の状態: オフ (NO)はデフォルト設定が使用されていることを示す。
  • カスタム設定をオンにすると、ページング・インジケータのサイズ、間隔、色などを調整し、より高度でパーソナライズされた設定を行うことができます。
画像 [13] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

作成に成功したら、作成したスライダーをリストで表示し、スライドコンテンツを追加して、後続のステップでより便利に使うことができます。

カスタムスライド設定

スライダーのコンフィギュレーションによって スライド > スライダー > 編集スライド以下の主要パラメータを調整できる:

オープニング

レイアウト設定

  • スペースなし現在 閉塞状態をオンにすると、スライダー内のコンテンツ領域に余分なパディング(詰め物)がなくなります。
  • 全幅コンテンツ現在 閉塞状態オンにすると、スライダーのコンテンツは自動的にスライダーの幅いっぱいに表示されます。
  • コンテンツ幅スライダーのコンテンツ幅は手動で調整することができ、現在はおよそ 750px設計のニーズに応じてスライドさせ、調整することができる。

コンテンツ・ポジション

  • 3つのデバイスモードが利用可能 (デスクトップ、タブレット、モバイル)コンテンツレイアウトは、スライダーの適応性を確保するために、異なるデバイス用に別々に設定することができます。
  • 垂直方向のコンテンツの整列現在選択されているアライメントは次の3種類です。 中央揃え(つまり、コンテンツはスライダーの真ん中にあります)。
  • コンテンツの水平配置つのオプションが用意されており、現在選択されているのは 左揃えつまり、コンテンツはスライダーの左側にある。
画像 [14] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

コンテキスト

背景色(カラー)

  • ある カラー オプションで無地の背景を選択できます。背景画像を使用したくない場合は、カラーピッカーをクリックして適切な色を設定できます。
画像[15] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

背景画像

  • 背景画像のアップロードをクリックしてください。 アップロード ボタンはスライダーの背景として使用する画像をアップロードします。
  • デバイス・アダプティブ提供 デスクトップ、タブレット、モバイル 3つのオプションで、異なるデバイスの背景画像を設定し、すべての画面サイズで良好な表示を保証します。
画像 [16] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

背景サイズ

  • このオプションは、背景画像の表示方法を調整するために使用され、2つのオプションがあります:
    • カバー: 背景画像はスライダーエリア全体を埋めるように引き伸ばされ、場合によっては画像コンテンツの一部が切り取られますが、背景がスライダーを完全に覆うようになります。
    • コンテイン: 背景画像は全体が表示され、スライダー内に空白領域ができる可能性がありますが、画像の内容は切り取られません。

バックグラウンド

  • 現在のオプションは センター・センターつまり、背景画像はスライダーの中心点に合わせられます。調整が必要な場合は、別の位置を選ぶことができます:
    • 左下 - 左下
    • センターセンター - 中央揃え
    • 右トップ - 右上
    • センターボトム - ボトムセンター
    • センタートップ - トップセンター
    • 左中央 - 左中央
    • 左上 - 左上
    • 右センター - 中央右
    • 右下 - 右下
    • カスタム - カスタマイズ可能

設定

自動再生を有効にする

  • 現在の状態: オフ (NO)
  • このオプションは、スライダーを自動的に回転させるかどうかを決定します。スライドは、手動でクリックしなくても、設定した間隔で自動的に切り替わります。
  • 人気商品やプロモーション情報など、動的なコンテンツを表示し、ページの視覚的な魅力を高めるのに適しています。
画像 [19] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

スクロール・ローディング・スライダー (スクロールでカルーセルを開始)

  • 現在の状態: オフ (NO)
  • このオプションは、スライダーが表示された後にのみスクリプトがロードされるかどうかを決定し、ページパフォーマンスを最適化し、最初のページロード時間を短縮するのに役立つ機能です。
  • 複数のスライダーを含むページ、特にコンテンツが長い場合に最適で、不要なスクリプトの実行を減らし、ページの流れを改善します。
画像 [20] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

スライダーにスライドを追加する

あるスライダスライドの追加

以下の画面は個別スライドの作成または編集ページのサイドバーに表示され、その主な機能は、現在編集中のスライドを1つまたは複数の作成済みスライダーに割り当てることです:

  • すべてのスライダー(すべてのスライダー): ここにサイトに作成されたすべてのスライダーがリストされ、ユーザーは現在のスライドを割り当てたいスライダーを選択できます。
  • 最も利用されている(使用頻度の高いスライダー):よく使うスライダーを素早く選択できるように、使用頻度の高いスライダーをリストアップしています。
  • の下をクリックします。 「新しいスライダーを追加する 新しいスライダーを直接作成し、現在のスライドを新しく作成したスライダーに素早く追加することができます。
画像[21] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

この機能を使用して、スライドとスライダーの関連付けを迅速かつ効率的に管理し、コンテンツ管理の効率を最適化します。

スライド・ソート

以下ワードプレスバックエンドのPost Attributes設定エリアでは、Orderオプションを使ってスライドやページの表示順を設定します。

特定してください:

  • オーダー::
    リストやフロントエンドの表示で、現在のページ、投稿、スライドの順序を設定するために使用します。
    • デフォルトの数値は "0 "で、数値が小さいほど高度なソートとなる。
    • 例えば、"0 "または負の数(例えば"-1")を入力すると、その項目はフロントエンドの一番上に表示されます。
    • より大きな数字(例えば「5」や「10」)を入力すると、ソートの後半にその項目が表示される。
画像 [22] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

この機能を使って、スライドやページの表示順を柔軟にコントロールし、コンテンツをより整理して表示することができます。

特集画像の設定

  • の右側には 特集画像 パネルをクリックします。 「注目画像の設定.
  • WordPressのメディアライブラリから画像を選択するか、新しい画像をアップロードしてください。
画像 [23] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

ページにスライダーを追加する

ウッドマート テーマサポート WPBakeryページビルダー 歌で応える エレメンタ スライダーを挿入する2つの方法:

エレメンターの使用

  • Elementorのページ編集画面に移動します。
  • 増加 ウッドマート・スライダー ウィジェットをページに
  • ドロップダウンリストから作成したスライダーを選択し、必要に応じてサイズとスタイルを調整します。
  • エラーがないことを確認したら 更新変更を有効にする。
画像 [24] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

使う WPBakeryページビルダー

  • 入り込む ページ編集者に切り替える。 WPBakeryバックエンドエディタ .
  • 増加 ウッドマート・スライダー 要素をページ上の適切な場所に置く。
  • Component Settingsで、挿入するスライダーを選択します。
  • 変更を保存した後、ページを更新してスライダーがどのように表示されるかをプレビューしてください。
画像[25] - WoodMartテーマスライダーの設定と最適化ガイド:スムーズな画像回転エフェクトの作成

ほら

  • スライダーを含むブロック 幅は デフォルトそうでなければ誤植の可能性がある。
  • フルスクリーン・スライダー スライダーの設定が必要 ストレッチ・スライダーを有効にするそして 全幅コンテンツ オプションは、異なるデバイスへの適応性を確保するために有効になっています。

概要

ウッドマート このテーマのスライダー機能は、ユーザーが高品質の回転エフェクトを素早く作成し、ウェブサイトのビジュアルプレゼンテーションを最適化するのに役立ちます。スライダーを適切に使用することで、訪問者の注意を重要な情報に引きつけるだけでなく、ページの階層を強化し、サイト全体をよりプロフェッショナルなものにします。


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

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

    コメントなし