WPBakeryを使用して画像の動的な回転を作成する方法：詳細なチュートリアル

WPベーカリー 人気です。 ワードプレス 様々なタイプのページやレイアウトを簡単にデザインするための多くの強力な機能を提供するページエディタプラグインです。WPBakeryを使用すると、ページのインタラクティブ性と視覚的な魅力を高めるために、簡単に動的な画像回転効果を作成することができます。この記事では、WPBakeryを使用してページを作成する方法についての詳細なチュートリアルを提供します。画像のダイナミックローテーション.

1.WPBakeryページビルダーのインストールと有効化

まず、WPBakeryページビルダーがサイトにインストールされ、有効になっていることを確認してください。インストールは以下の手順で行います：

• WordPressのバックエンドにログインします。
• 左側のメニューで プラグイン > 新しいプラグインの追加.
• 購入した商品のアップロードWPBakeryページビルダーをクリックしてください。 現在インストール中.
• インストールが完了したら コミッション.

2.新規ページの作成または既存ページの編集

WordPressのバックエンドに移動し ウェブページをクリックし、編集したいページを選択します。 新しいページを追加 新しいページを作成します。ページをクリックエディタ編集画面へ

3.WPBakeryを使用した画像回転モジュール

WPBakeryでイメージ回転(スライダー）モジュールを使って、ダイナミックな画像回転効果を実現します。詳しい手順は以下の通りです：

ステップ 1: 行と列の追加

1. ページ編集をクリックすると、WPBakeryの編集画面で + 要素の追加.

2. 要素のポップアップリストで 単語などの行のオブジェクトに対する分類器(行）。ローテーションにコンテナを追加します。

3. を選択します。 スタンドアローン(1コラム）。

ステップ2： WPBakeryの画像スライダー要素を挿入します。

1. 単一の列で + 要素の追加検索と選択 イメージ回転(イメージカルーセル）モジュールです。

2. 追加されると、画像の回転を含む設定パネルが表示されます。

ステップ 3: 画像回転の設定

1. 写真のアップロードをご覧ください。写真「セクションをクリックします。 + 画像を追加 ボタンをクリックして、表示したい画像を選択します。複数の画像を選択することができ、回転によって順番に表示されます。

2. 回転設定Rotation Settings "では、以下のオプションを設定できます：
   • オートプレイ(自動再生）：このオプションを有効にすると、画像は自動的に再生されます。
   • 再生速度(速度）：画像切り替えの速度を設定します。
   • ナビゲーションボタン(ナビゲーション）：ユーザーが手動で画像を切り替えられるように、ナビゲーション矢印ボタンを有効にします。
   • ページングボタン(ページネーション）：ページネーションボタンを有効にし、ユーザーがページ下部で異なる画像を切り替えることができるようにします。
   • ループ(ループ）：このオプションを有効にすると、画像は最後の画像で最初の画像に戻り、無限ループを作成します。

ステップ4：アニメーション効果の設定

WPBakeryは、回転に躍動感を与える様々なアニメーション効果を提供します。これは へんかこうか(トランジション効果）のドロップダウンメニューから、別のアニメーション効果を選択することができます：

• スライディングムーブメント(スライド）
• フェードイン・フェードアウト（フェード）
• フリップス(フリップ）

これらの効果により、よりスムーズな画像切り替えが可能になります。

4.スタイルとデザインの調整

ローテーションをページデザインに合わせるために、スタイルでさらにカスタマイズすることができます：

• 画像回転設定パネルで デザインオプション(デザインオプション）。

• 調整中 マージン(マージン）と インナーマージン(Padding)で、パーティボックスの値(px)を調整することで、回転と他の要素との間の距離を変更することができます。

• とおす 背景色(背景）オプションでは、回転の背景色を設定したり、グラデーションの背景を追加したりできます。

• 使う カスタムCSS(カスタムCSS）を使用して、回転がサイト全体のスタイルと一致するように、より詳細なスタイル調整を行うことができます。

5.モバイル最適化

モバイルデバイスでは、画像の回転も正しく表示されるようにしてください：

1. WPBakeryページビルダーは、デバイスごとに異なる表示に設定できます。これは要素の レスポンシブ設定これにより、モバイルやタブレット端末でのパフォーマンスに最適化された回転が可能になります。
2. 回転画像は、各画像に異なるサイズを設定するオプションを使用して、小さな画面に合わせてサイズが調整されていることを確認します。 最小幅(最小幅) を設定することで、異なる画面サイズでも回転が明確に表示されます。

6.保存と公開

すべての設定が完了したら、右上の 更新 ボタンをクリックして変更を保存します。次に、ページをプレビューして、回転がどのように見えるかを確認します。すべてがうまくいったら ポスト.

ElementorとWPBakeryの比較：WordPressのページビルダーはどちらが優れていますか？

8月28日 16:07

05330