WordPressで画像用のライトボックスを簡単に作成する方法

公開: 2022-09-22

WordPress で個々の画像用のライトボックスを作成しますか?

シンプルなライトボックスを使用すると、パフォーマンスやページ速度に影響を与えることなく、サイトにフルサイズの画像を表示できます. この記事では、WordPress に画像用のライトボックスを追加する方法を順を追って説明します。

WordPressのライトボックスとは？

ライトボックスは、Web サイトのコンテンツに重ねて表示される気を散らすものがないポップアップです。ライトボックスを開くと、Web ページの背景がグレー表示されるため、ユーザーは「X」アイコンをクリックしてオーバーレイを終了するまで、ライトボックスのコンテンツに注意を向けることができます。

オーバーレイは Web サイトの上に表示されるため、ユーザーはコンテンツを表示するために別のページをクリックする必要はありません。

画像ライトボックススタイルオーバーレイは、Web サイトの速度に影響を与えずに大きな画像サイズを表示する優れた方法です。サムネイルまたは小さなサイズの画像を使用して画像ギャラリーを作成すると、Web ページの読み込みが速くなり、閲覧者は小さな画像をクリックして開いて、ライトボックスに大きな高解像度バージョンを表示できます。

いつライトボックスを使用する必要がありますか?

ビジネス Web サイトでライトボックスの使用が理にかなっている状況がいくつかあります。たとえば、e コマース Web サイトでライトボックスを使用して、閲覧者がより多くの製品の詳細を確認できるようにすることができます。

WordPress 画像ライトボックスを使用できるその他の例を次に示します。

写真ポートフォリオを紹介する
あなたの文章例のスクリーンショットをハイライトします
商品の詳細を表示する
YouTube/Vimeo ビデオを見る

ライトボックスポップアップを使用してリードを生成することもできることをご存知ですか? OptinMonster のような強力なリードジェネレーションツールを使用すると、レスポンシブライトボックスポップアップを作成して、ターゲットユーザーが離れようとしているときにメールアドレスを収集できます。

WordPress で exit-intent ポップアップを作成するためのガイドを次に示します。

そうは言っても、WordPressで画像用のライトボックスを作成する2つの方法を段階的に見てみましょう.

SeedProd を使用して WordPress でライトボックスを作成する方法
- ステップ 1. SeedProd をインストールしてアクティブ化する
- ステップ 2. WordPress のテーマまたはランディングページを作成する
- ステップ 3. 画像ライトボックスを追加する場所を決定する
- ステップ 4. 変更を公開する
ギャラリープラグインで画像ライトボックスを作成する方法

SeedProd を使用して WordPress でライトボックスを作成する方法

最初に、最高の WordPress ウェブサイトビルダーである SeedProd を使用して、WordPress で画像ライトボックスを作成する方法を紹介します。

SeedProd には、数回クリックするだけで WordPress Web サイトのデザインを作成できる、既製の Web サイトキットとランディングページテンプレートが付属しています。次に、ドラッグアンドドロップページビルダーとカスタマイズ可能な WordPress ブロックとセクションを使用して、Web サイトをカスタマイズできます。

SeedProd の Image ブロックを使用すると、ライトボックスを有効にして、WordPress ギャラリーの画像の大きなバージョンを表示できます。これは、次のチュートリアルで紹介するこれらの機能です.

先に進む前に、SeedProd で他にできることを次に示します。

(404、セールス、スクイーズ、ウェビナー、サンキュー、ログイン) を含む、コンバージョンにつながるランディングページを作成する
オンラインストア用のカスタム WooCommerce サイトを構築する
近日公開ページまたはメンテナンスモードページをバイパスできるユーザーを制御する
動的テキストを使用してランディングページをパーソナライズする
メールマーケティングの統合とサブスクライバー管理ダッシュボードを使用して、メールリストを拡大します
そして、はるかに。

このウェブサイトビルダープラグインは、速度と SEO を最適化するため、ウェブサイトは肥大化することなく常にすばやく読み込まれます。

それでは、完全なチュートリアルに進みましょう。

ステップ 1. SeedProd をインストールしてアクティブ化する

まず、SeedProd の価格ページにアクセスし、ライセンスプランを選択して、SeedProd アカウントを作成します。アカウントダッシュボードに入ったら、[ダウンロード] タブに移動し、SeedProd プラグインファイルをコンピューターにダウンロードします。

すぐに必要になるため、そこにいる間にライセンスキーをコピーします。

プラグインをダウンロードしたら、WordPress Web サイトにインストールしてアクティブ化します。これまでにこれを行ったことがない場合は、WordPress プラグインのインストールに関するこのチュートリアルに従うことができます。

サイトで SeedProd プラグインがアクティブになったら、 SeedProd » 設定に移動し、先ほどコピーしたライセンスキーを関連するフィールドに貼り付けます。 [ Verify Key ] ボタンをクリックして、次のステップに進みます。

ステップ 2. WordPress のテーマまたはランディングページを作成する

次のステップは、WordPress テーマまたはランディングページの作成を開始することです。 SeedProd プラグインでは両方を実行できますが、どちらのオプションを使用すればよいかわからない場合は、次の説明を参照してください。

テーマビルダー– テーマビルダーを使用すると、現在の WordPress テーマを新しいカスタムテーマに置き換えることができます。多くの既成の Web サイトキットから選択して、ワンクリックでデザインをインストールできます。次に、SeedProd がテーマのすべての部分を作成し、ページビルダーでそれらを視覚的にカスタマイズできるようにします。
ランディングページビルダー– ランディングページビルダーを使用すると、現在の WordPress テーマと連携して機能するスタンドアロンのランディングページを作成できます。さまざまなレスポンシブランディングページテンプレートから選択し、ドラッグアンドドロップページビルダーでカスタマイズできます。

どちらのソリューションでも画像ライトボックスをデザインに追加できるため、ニーズに最も適したものを選択してください。開始にサポートが必要な場合は、カスタム WordPress テーマの作成と SeedProd を使用したランディングページの作成に関するチュートリアルをご覧ください。

テンプレートを選択し、ランディングページまたはテーマのフレームワークを構築したら、以下の手順 3 に従って画像ライトボックスをデザインに追加できます。

ステップ 3. 画像ライトボックスを追加する場所を決定する

次に、WordPress の画像ライトボックスを追加する場所を決定します。

このガイドでは、テーマビルダーを使用してカスタムポートフォリオページを含むインテリアデザイン Web サイトを作成しているので、SeedProd でページを編集して、ドラッグアンドドロップビルダーを開きます。

デザインを開くと、左側にブロックとセクション、右側にデザインプレビューを含む 2 列のレイアウトが表示されます。要素をクリック、ドラッグ、ドロップすることで、プレビュー上で要素を移動できます。

ポートフォリオ画像用の新しい列を追加することから始めましょう。サイドバーから列ブロックをページにドラッグし、レイアウトデザインを選択します。

次に、画像ブロックをページセクションの各列にドラッグします。

そこから、各画像ブロックをクリックして、コンピューターまたは WordPress メディアライブラリから画像をアップロードできます。

ギャラリーの各画像にライトボックスを追加できるようになりました。これを行うには、任意の画像ブロックをクリックし、[リンクタイプ] 見出しを見つけて、ドロップダウンメニューから [メディア – ライトボックス] オプションを選択するだけです。

ギャラリー内のすべての画像リンクに対してこれを繰り返し、右上隅にある [保存] ボタンをクリックして変更を保存します。

ステップ 4. 変更を公開する

最後のステップは、レスポンシブライトボックスギャラリーを WordPress Web サイトに公開することです。カスタム WordPress テーマでこれを行うには、WordPress 管理者からSeedProd » Theme Builderに移動し、[SeedProd テーマを有効にする] トグルを [はい] の位置に切り替えます。