Diviでカスタムフォトギャラリースライダーを作成する方法

公開: 2019-06-10

スライダーは、折り目の上の1つの便利な場所にある注目のサービス、製品、またはページでユーザーを引き付けるのに最適であることは誰もが知っています。一部のサイト（写真家だと思います）では、ホームページに1つ以上のフォトギャラリーを掲載する必要があります。これにスライダーを使用するのは良いオプションかもしれません。ただし、このようなスライダーでフォトギャラリーを表示することを検討していない可能性があります。

このチュートリアルでは、Diviイメージギャラリーをスライドに埋め込んで、Diviで完全にカスタムのフォトギャラリースライダーを作成する簡単な方法を紹介します。秘訣は、スライダーのコンテンツ領域にWordPress画像ギャラリーを作成することです。次に、デフォルトのWordPressギャラリースタイルの代わりにDiviギャラリーを使用するオプションを確認して選択する必要があります。実装がとても簡単で楽しいです。

始めましょう。

スニークピーク

これは、このチュートリアルで作成するフォトギャラリースライダーのスニークピークです。

diviフォトギャラリースライダー

カスタムフォトギャラリースライダーレイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次の設定が必要です。

Diviテーマがインストールされ、アクティブになっています
フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
スライダー画像とフォトギャラリーに使用する約6〜8枚の画像

その後、Diviでいくつかのホバータブの作成を開始するための空白のキャンバスが作成されます。

DiviテーマオプションでDiviギャラリーオプションを有効にする

Diviを使用すると、デフォルトのWordPressギャラリー表示をDiviギャラリー表示に置き換えることができます。そのため、WordPressギャラリーを作成してモジュール内に埋め込むと、Diviギャラリーモジュールを使用してギャラリーがギャラリーのように表示されます。これにより、基本的にDiviイメージギャラリーをDiviBuilderの任意のモジュールに追加できます。この例では、DiviGalleryをスライダーモジュールに追加します。

設定を変更するには、[Divi]> [テーマオプション]に移動します。次に、[全般]タブで、[Diviギャラリー]オプションをクリックして有効にします。

diviフォトギャラリースライダー