Elementorでスライダー画像を作成する方法

ほぼすべてのWebサイトにアクセスすると、最初に気付くのは、ページの上部または中央にあるスライダーです。 それらが非常に一般的である主な理由は、サイトの訪問者がそれらを愛し、ウェブサイトの所有者がそれらを非常に役立つと感じていることです。 スライドは、サイトの訪問者の関心を維持する方法でさまざまな情報を表示するための優れた方法です。

Elementorは、わずか数ステップで魅力的なスライダーや画像カルーセルを作成できる便利なツールです。 ガイドが、Webサイト用の最新のElementorスライダーとカルーセルの作成について説明します。

人気のElementorスライダー

Elementorにはいくつかの異なるスライダーがあり、最も人気のあるもののいくつかは次のとおりです。 Elementor Sliderウィジェット、Smart Slider、Layer Slider、およびRevolutionSlider。 基本ユーザーが利用できるカルーセルウィジェットが1つと、プロユーザーが利用できるカルーセルウィジェットがいくつかあります。 アカウントクラスに関係なく、すべてのウィジェットは完全に統合されているため、シームレスなユーザーエクスペリエンスを作成しながら、ウィジェットを簡単にセットアップできます。

最も使いやすいのは、この記事で取り上げるElementorSliderウィジェットです。 一部のユーザーは自分のWebサイトの開発が簡単だと感じるかもしれませんが、他の人々はそれがより難しいと感じるかもしれません。 いずれにせよ、マンチェスターにあるBlue Whale Mediaなどの専用Webサイト設計会社に相談して、Web設計と開発を支援することをお勧めします。

Elementorでスライダーを作成する

Elementorでスライドを作成することは、あなたが思うほど複雑ではありません。 Elementorの基本バージョンを使用している場合は、アカウントパネルからカルーセルウィジェットを選択します。 このウィジェットを使用すると、WebサイトやモバイルバージョンのWebサイトで魅力的に見える基本的な画像でいっぱいの画像ギャラリーを作成できます。 ノートパソコンから新しい画像をアップロードすることも、メディアライブラリから既存の画像を選択することもできます。

画像ギャラリーをクリックしてElementorコンソールにアクセスし、左側のドロップダウンメニューから[ギャラリーの作成]をクリックします。 表示したいすべての画像を選択し、画像をクリックします。 写真の右上にチェックマークが表示され、画面の下部にもコピーが表示されます。 スライダーの画像を選択したら、画像とスライダー自体をさらにカスタマイズできます。

ウィジェットパネルで、表示する画像のサイズと、パネルに並べて表示する画像の数を選択します。 ウィジェットパネルのドロップダウンメニューからスクロール速度を選択することもできます。 一度にスクロールする画像の数を選択します。

たとえば、一度に1つの画像のスクロールを設定したり、一連の画像を同時に次のパネルにスクロールさせたりすることができます。 画像の数が多いスライダーの場合、スクロールごとに2〜3が理想的です。

ElementorProスライダー

アカウントパネルから、ProバージョンのElementorを使用している場合は、いくつかのスライダーウィジェットから選択できます。 これにより、基本的なスライダーと同じことをすべて実行できますが、オプションのセットが拡張されています。 各画像のタイトルと説明を追加するオプションが利用可能です。また、スライドの各画像の下部に表示されるキャプションを作成することもできます。 これは、キーワードを組み込んだり、スライドに行動を呼びかけたりするのに最適な方法です。

Elementor設定パネルにアクセスし、ギャラリーを開きます。 それらをクリックして画像を追加します。 画面の左側に拡張されたオプションのセットがあります。 各スライドの背景に表示する色や画像を選択するか、色付きのオーバーレイを適用することができます。 非常にクリエイティブな気分の場合は、背景のブレンドモードも調整できます。

画像スライダーのカスタマイズ

Elementorイメージスライダーには、さまざまなカスタマイズオプションが用意されています。 これらの機能にアクセスするには、画面の左上にあるスタイルタブをクリックするだけです。 ここから、境界線のサイズと設定、画像の間隔、さらには各画像のフィルターと影を調整できます。 下部にドットまたは矢印を追加して、スライダーを装飾します。 これらの色、サイズ、形状は、[スタイル]タブでも変更できます。 これにより、サイトの訪問者は、スライダー上の画像を手動でスクロールする方法に加えて、スライドに含まれる画像の数を視覚的に確認できます。

Elementor画像スライド作成のショートカット

サイトに画像スライダーを追加したり、Elementorを使用してWordPressを追加したりする簡単な方法を探している場合は、このショートカットが役立ちます。 編集ページをクリックするか、画面の左側に新しいページを追加します。 次に、Elementorボタンで[編集]をクリックします。 ダッシュボードが左側に開き、ダッシュボードからスライダーウィジェットオプションを検索して選択します。 ダッシュボードからウィジェットをドラッグし、要素をページにドロップします。 これにより、スライダーが配置され、スライダーの設定を開くための新しいダッシュボードがトリガーされます。 コンピューターまたはメディアギャラリーから必要な画像をアップロードした後、目的の設定を選択します。 ファイナルを選択したら、[更新]をクリックします。 新しいElementor画像スライドの準備が整いました。

ElementorProで代替画像カルーセルを作成する

Elementorでメディアカルーセルを作成するのは簡単です。 ウィジェットを使用すると、ライトボックスにオプションの大きな画像を含むサムネイルスライダーを生成できます。 通常のスライダーと同様に、メディアスライダーを使用すると、ギャラリーから直接コンテンツを選択して表示し、スクロールするように設定できます。 このウィジェットとの違いは、メディアギャラリーのビデオを使用したり、ライトボックス領域でVimeoおよびYouTubeのビデオURLを使用したりできることです。 このスライダーを設定する手順は、基本およびプロの画像スライダーの手順と同じですが、静止画像の代わりにビデオを使用します。

レビューウィジェットを使用して、画像とテキストを特徴とするスライダーを作成することもできます。 これは、顧客のフィードバックを実際の言葉や製品やサービスについて提供した写真で紹介するのに最適な方法です。 このスライダーは、Webページの上部または下部に設定でき、通常のスライダーと同じようにスクロールするように設定できます。 非常に多くのスライダーオプションが利用可能であるため、レスポンシブで見た目に美しいWebサイトを数回クリックするだけで作成できます。