ある ウッドマートのテーマホームページローテーターを追加することで、ページのビジュアルパフォーマンスを向上させるだけでなく、コアコンテンツの表示にも集中することができます。以下では、2つの一般的な設(shè)定を紹介し、実用的な読み込み最適化テクニックを提供することで、見栄えが良く、遅延のないホームページを作成するのに役立ちます。
![畫像[1]-WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604110449528-image.png)
ホームページのスライドショーに回転畫像を追加する
方法1:WoodMartの內(nèi)蔵スライダーを使う
- WordPressのバックエンドにログインし、"Pages "をクリックしてホームページを見つけ、"Elementorで編集 "をクリックする。
![畫像 [2] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604141136887-image.png)
- ページ上部の "+"マークをクリックして新しい行を作成し、"WoodMart Slider "コンポーネントを挿入します(またはWPBakeryの同等のコンポーネントを使用します)。
![畫像 [3] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604111006148-image.png)
- スライダーのアクセサリーを選択するか、"スライダーを選択 "をクリックして新しい回転エリアを作成します。
![畫像 [4] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604134909412-image.png)
- 見せたいものをアップロードするスライド畫像は、1920×800など、統(tǒng)一されたサイズを推奨する。
![畫像 [5]-WoodMart ホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604140302890-image.png)
- 各スライドにタイトル、ボタン、ジャンプリンクなどを追加する。
- 切り替えアニメーション(フェードイン、スライドなど)、切り替え間隔時間(約5秒を推奨)、自動再生を有効にするかどうかを設(shè)定します。
![畫像 [6] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604140615981-image.png)
- Update」をクリックしてフロントエンドのページに戻り、効果を確認(rèn)する。
方法2:Slider Revolutionプラグインを使う
WoodMartには、複雑なアニメーションやレイヤーオーバーレイを必要とする回転シーンのための強(qiáng)力なSlider Revolutionプラグインが組み込まれています。
- スライダーを編集するには、バックエンドの左側(cè)にある "Slider Revolution "をクリックしてください。
![畫像 [7] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604150352869-image.png)
- スライダーのサイズを設(shè)定します。例えば、幅1920px、高さ800pxです。
![畫像 [8] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604144023364-image.png)
- スライドショーの追加:背景畫像をアップロードし、テキストレイヤー、ボタン、リンクなどを追加します。
![畫像 [9] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604143727378-image.png)
- 各レイヤーをクリックしてアニメフェード、ズーム、ディレイタイムなどのモード。
![畫像 [10]-WoodMart ホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604145520994-image.png)
- 完了したら、右下の「保存」ボタンをクリックします。
![畫像 [11]-WoodMart ホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604145541908-image.png)
- Elementorエディターに戻り、ホームページに "Revolution Slider "モジュールを挿入し、先ほど作成したスライダーの名前を選択します。
![畫像 [12]-WoodMart ホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604150034648-image.png)
- ページを保存し、フロントエンドを更新すると結(jié)果が表示されます。
読み込み速度を最適化するためのヒント
スライドショーの視覚的な魅力は強(qiáng)いですが、畫像サイズが大きすぎたり、無理な方法で読み込まれると、ホームページを開く速度が遅くなります。最適化のための実踐的な提案をいくつかご紹介します:
圧縮畫像
回転畫像はすべてWebP形式で、150KB以內(nèi)に圧縮することを推奨します。以下のツールが使用できます:
- タイニーPNG
- スクーッ
- ShortPixelプラグイン(WordPressプラグイン)
遅延ロードを有効にする
支出 エレメンタル?プロ 別のビルダーを使用している場合は、次のようにインストールできます。 WPロケット プラグインを使用して、畫像の遅延読み込みを有効にします。最初のスライドを遅延読み込みそのため、最初の畫面が真っ白になるのを避けるため、殘りの読み込みを遅らせている。
![畫像 [13]-WoodMart ホームページのスライドショーの設(shè)定と読み込み速度の最適化](http://gqxi.cn/wp-content/uploads/2025/06/20250604114358698-image.png)
スライド數(shù)のコントロール
積み重ねを避けるため、3枚以上のスライドを追加することはお勧めしません。3枚以下であれば、重要なポイントを示し、焦點(diǎn)を絞りやすくなります。
アニメーションとレイヤーの効率化
Revolution Sliderは豊富なアニメーション機(jī)能を提供しますが、読み込みコストが高くなります。レンダリング時間を短縮するために、冗長なレイヤーアニメーションをオフにし、シンプルなトランジションのみにすることをお勧めします。
結(jié)語
ウッドマート 強(qiáng)力な互換性と美學(xué)で、ホームページの回転畫像を追加する複數(shù)の方法をサポートしています。シンプルな設(shè)定を好むか、または複雑な視覚的なパフォーマンスを必要とするかどうかにかかわらず、把握畫像の最適化また、アニメーションコントロールも可能で、読み込みが速く、かつ魅力的なホームページを簡単に作成することができます。
お問い合わせ | |
---|---|
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業(yè)サイトのための無料ヘルプ! |
![]() カスタマーサービス WeChat
|
① 電話:020-2206-9892 | |
② QQ咨詢:1025174874 | |
三 Eメール:info@361sale.com | |
④ 勤務(wù)時間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttp://gqxi.cn/ja/57289この記事は著作権で保護(hù)されており、必ず帰屬表示を付けて複製してください。
コメントなし