WoodMartホームページのスライドショー設(shè)定と読み込み速度の最適化

ある ウッドマートのテーマホームページローテーターを追加することで、ページのビジュアルパフォーマンスを向上させるだけでなく、コアコンテンツの表示にも集中することができます。以下では、2つの一般的な設(shè)定を紹介し、実用的な読み込み最適化テクニックを提供することで、見栄えが良く、遅延のないホームページを作成するのに役立ちます。

畫像[1]-WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化

ホームページのスライドショーに回転畫像を追加する

方法1:WoodMartの內(nèi)蔵スライダーを使う

  • WordPressのバックエンドにログインし、"Pages "をクリックしてホームページを見つけ、"Elementorで編集 "をクリックする。
畫像 [2] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • ページ上部の "+"マークをクリックして新しい行を作成し、"WoodMart Slider "コンポーネントを挿入します(またはWPBakeryの同等のコンポーネントを使用します)。
畫像 [3] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • スライダーのアクセサリーを選択するか、"スライダーを選択 "をクリックして新しい回転エリアを作成します。
畫像 [4] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • 見せたいものをアップロードするスライド畫像は、1920×800など、統(tǒng)一されたサイズを推奨する。
畫像 [5]-WoodMart ホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • 各スライドにタイトル、ボタン、ジャンプリンクなどを追加する。
  • 切り替えアニメーション(フェードイン、スライドなど)、切り替え間隔時間(約5秒を推奨)、自動再生を有効にするかどうかを設(shè)定します。
畫像 [6] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • Update」をクリックしてフロントエンドのページに戻り、効果を確認(rèn)する。

方法2:Slider Revolutionプラグインを使う

WoodMartには、複雑なアニメーションやレイヤーオーバーレイを必要とする回転シーンのための強(qiáng)力なSlider Revolutionプラグインが組み込まれています。

  • スライダーを編集するには、バックエンドの左側(cè)にある "Slider Revolution "をクリックしてください。
畫像 [7] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • スライダーのサイズを設(shè)定します。例えば、幅1920px、高さ800pxです。
畫像 [8] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • スライドショーの追加:背景畫像をアップロードし、テキストレイヤー、ボタン、リンクなどを追加します。
畫像 [9] - WoodMartホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • 各レイヤーをクリックしてアニメフェード、ズーム、ディレイタイムなどのモード。
畫像 [10]-WoodMart ホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • 完了したら、右下の「保存」ボタンをクリックします。
畫像 [11]-WoodMart ホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • Elementorエディターに戻り、ホームページに "Revolution Slider "モジュールを挿入し、先ほど作成したスライダーの名前を選択します。
畫像 [12]-WoodMart ホームページのスライドショーの設(shè)定と読み込み速度の最適化
  • ページを保存し、フロントエンドを更新すると結(jié)果が表示されます。

読み込み速度を最適化するためのヒント

スライドショーの視覚的な魅力は強(qiáng)いですが、畫像サイズが大きすぎたり、無理な方法で読み込まれると、ホームページを開く速度が遅くなります。最適化のための実踐的な提案をいくつかご紹介します:

圧縮畫像

回転畫像はすべてWebP形式で、150KB以內(nèi)に圧縮することを推奨します。以下のツールが使用できます:

  • タイニーPNG
  • スクーッ
  • ShortPixelプラグイン(WordPressプラグイン)

遅延ロードを有効にする

支出 エレメンタル?プロ 別のビルダーを使用している場合は、次のようにインストールできます。 WPロケット プラグインを使用して、畫像の遅延読み込みを有効にします。最初のスライドを遅延読み込みそのため、最初の畫面が真っ白になるのを避けるため、殘りの読み込みを遅らせている。

畫像 [13]-WoodMart ホームページのスライドショーの設(shè)定と読み込み速度の最適化

スライド數(shù)のコントロール

積み重ねを避けるため、3枚以上のスライドを追加することはお勧めしません。3枚以下であれば、重要なポイントを示し、焦點(diǎn)を絞りやすくなります。

アニメーションとレイヤーの効率化

Revolution Sliderは豊富なアニメーション機(jī)能を提供しますが、読み込みコストが高くなります。レンダリング時間を短縮するために、冗長なレイヤーアニメーションをオフにし、シンプルなトランジションのみにすることをお勧めします。

結(jié)語

ウッドマート 強(qiáng)力な互換性と美學(xué)で、ホームページの回転畫像を追加する複數(shù)の方法をサポートしています。シンプルな設(shè)定を好むか、または複雑な視覚的なパフォーマンスを必要とするかどうかにかかわらず、把握畫像の最適化また、アニメーションコントロールも可能で、読み込みが速く、かつ魅力的なホームページを簡単に作成することができます。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業(yè)サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨詢:1025174874
Eメール:info@361sale.com
勤務(wù)時間: 月~金、9:30~18:30、祝日休み
? 複製に関する聲明
この記事はリトル?リンが執(zhí)筆した。
終わり
好きなら応援してください。
クドス1448 分かち合う
おすすめ
解説 ソファ購入

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

    コメントなし