Diviで会社のロゴを表示するためのシンプルでクリエイティブな方法

あなたのウェブサイトに会社のロゴを表示する理由はたくさんあります。 会社のロゴの「注目」セクションは、潜在的な投資家やパートナーに影響を与える可能性があります。 または、「クライアントに含める」セクションは、訪問者との貴重な社会的証明を確立することができます。 しかし、理由が何であれ、これらのロゴをWebサイトに追加する方法を知ることは重要です。 このチュートリアルでは、Diviを使用してWebサイトに会社のロゴを追加するための3つの異なる方法について説明します。 Diviモジュールにロゴギャラリーを追加する方法も紹介します。

このチュートリアルで取り上げる内容は次のとおりです。

• ロゴ画像の準備
• 簡単なドラッグアンドドロップでロゴを表示するためのDiviギャラリーモジュールの使用
• WordPressギャラリー埋め込みを使用してロゴを表示する
• DiviBuilderを使用してロゴのカスタムレイアウトを作成する

始めましょう！

スニークピーク

これは、このチュートリアルの手法を使用して可能な設計のいくつかを示しています。

ロゴ画像の準備

ウェブサイトに表示するロゴを準備するときは、サイトに追加する前に、フォトエディタを使用して画像のサイズを調整することが重要です。 これにより、カスタムの幅、パディング、またはマージンを使用してロゴのサイズと位置を設定する際の頭痛の種を減らすことができます。 私を信じて。 あなたがそうする必要がなければ、あなたはその道を下りたくない。

すべてのロゴには固有のサイズがあるため、すべてのロゴを正確な寸法にすることはほとんど不可能です。 ここでフォトエディタが役に立ちます。 たとえば、Photoshopを使用して、新しいファイルを作成し、ドキュメントのサイズをすべてのロゴ画像のサイズ（この場合は226px x 100px）に設定できます。

次に、ロゴ画像をドキュメントに追加し、画像のサイズを変更して中央に直接配置します。 背景が透明なpng画像ファイルであることを確認してください。

次に、画像をpngファイルとしてエクスポートして、背景を透明に保ちます。

次に、残りのロゴについてこのプロセスを繰り返します。

ロゴの元の色を保持するか、フォトエディタを使用してロゴを任意の色に変更できます。 Divi（つまり、画像モジュールまたは画像ギャラリー）を使用してロゴを追加する場合は、いつでもDiviの組み込みフィルター効果を使用して色を調整できます。

私たちのYoutubeチャンネルを購読する

＃1 Divi Galleryモジュールを使用して会社のロゴを表示する（単純なドラッグアンドドロップ）

Diviを使用してサイトに会社のロゴを追加するこの最初の方法は、非常に簡単です。 Diviのドラッグアンドドロップ機能を使用すると、すべての会社のロゴをDivi Builderにドラッグして、ロゴをグリッドに表示するためのギャラリーを即座に作成および画像化できます。

これを行うには、新しいページを作成し、DiviBuilderをデプロイしてフロントエンドでビルドします。 「最初からビルド」オプションを選択します。 Divi Builderが起動して実行されたら、すべての画像を含むフォルダーを開き、それらを選択します。 次に、DiviBuilderを使用してそれらをブラウザウィンドウにドラッグするだけです。

Diviは、これらの画像を新しいギャラリーモジュールに自動的に追加し、ギャラリー設定を開いて、カスタマイズプロセスをすぐに開始します。

8つのロゴ画像を追加していて、タイトル、キャプション、ページ付けを表示したくないので、以下を更新できます。

画像番号：8
タイトルとキャプションを表示：いいえ
ページ付けを表示：いいえ

デフォルトでは、ギャラリーモジュールは各画像のアイコン付きのホバーオーバーレイを追加します。 ズームアイコンの色、ホバーオーバーレイの色、またはホバーアイコンのオーバーレイ設定を調整できます。

物事をクリーンでシンプルに保つために、ズームアイコンの色とホバーオーバーレイの色を透明に設定することで、ホバーオーバーレイを取り除くことができます。

その後、すべてのデザインオプションを調べて、画像ギャラリーの独自のデザインを作成できます。 たとえば、微妙なボックスの影で境界線を追加できます。

画像の境界線の幅：1px
画像の境界線の色：#dddddd
イメージボックスの影：スクリーンショットを参照

さまざまなブラウザサイズで最終的なデザインがどのように表示されるかを次に示します。

また、このギャラリーは任意の列構造に追加できるため、会社のロゴに独自のレイアウトを簡単に作成できます。 これは、左側にテキストモジュール、右側に画像ギャラリーモジュール（ロゴ付き）がある2列のレイアウトの例です。 別の外観を表示するために、背景のグラデーションを追加しました。

＃2 WordPressギャラリー埋め込みを使用して会社のロゴを表示する（任意のDiviモジュールを使用）

WordPress Image Galleryショートコードを使用して、Webサイトに会社のロゴを追加することもできます。 これは驚くほど簡単で、ほとんどの場合、画像にカスタムスタイルを追加する必要がないため、ロゴに最適です。 この方法の優れている点は、ブラウザウィンドウに合わせてロゴを最大9列展開できることです。これにより、モバイルでも列構造を維持できます。

これがその方法です。

Divi Builderで、4分の1、4分の3の列構造を持つ新しいセクションを作成します。

6列のギャラリーの会社のロゴの左側にテキストを表示するとします。 まず、左側の列にテキストモジュールを追加し、以下を更新します。

内容：「特集」
テキストフォント：Montserrat
テキストフォントの太さ：太字
テキストテキストサイズ：26px
テキストの向き：中央

次に、右側の列に別のテキストモジュールを追加します。 [コンテンツ]タブで、現在そこにあるモックコンテンツを削除し、コンテンツエディターボックスの上部にある[メディアの追加]ボタンをクリックします。

これにより、メディアギャラリーポップアップが表示されます。 次に、ポップアップの左側にある[ギャラリーの作成]リンクをクリックします。 次に、ギャラリーに含めるロゴ画像を選択します（この例では8つの画像を使用しています）。 [ギャラリーの作成]ボタンをクリックします。

これにより、ポップアップに[ギャラリーの編集]ページが表示されます。 右側のサイドバーのギャラリー設定を次のように更新します。

リンク先：なし
列：8（これは、1行に残るように、ギャラリー内の画像の数と同じである必要があります）
サイズ：フルサイズ

次に、[新しいギャラリーを作成]ボタンをクリックします。

これにより、WordPressに組み込まれている必要なギャラリーショートコードが埋め込まれ、テキストモジュール内にギャラリーが表示されます。

次に、行の設定を開き、以下を更新します。

この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい

この設定により、ロゴを呼吸するためのスペースが増えます。 あとは、左側のテキストを調整して、右側のロゴと垂直方向に揃えるだけです。 これを実現するために必要なカスタムパディングを左側の列に追加できますが、両方のモジュールが垂直方向の中央に配置されるようにするには、[行設定の詳細設定]タブのメイン要素に次のカスタムCSSを追加できます。

align-items: center;

このCSSが機能するのは、[列の高さを均等化]を[はい]に設定して、行の「display：flex」プロパティを有効にするためです。 詳細については、Diviでコンテンツを垂直方向に配置する方法を確認してください。

また、画像の周囲の灰色の境界線を取り除くには、次のCSSスニペットをページ設定に追加する必要があります。

.gallery img {
border: none !important;
}

これが最終的なデザインです。

これは、行に黒い背景が追加されたものです。

モバイルでは、どの画面サイズでも列が途切れることはありません。 画像は単純に小さいサイズに拡大縮小されます。 私は認めます。 画像が非常に小さくなるため、スマートフォンでは8列が多すぎる可能性があります。

任意のDiviモジュールにロゴギャラリーを埋め込む

これはショートコードの埋め込みであるため、このギャラリーをほぼすべてのDiviモジュールに追加して、さまざまな可能性を開くことができます。

たとえば、トグル、アコーディオン、さらにはタブモジュール内にロゴ画像を追加できます。

これは、ロゴのワードプレスギャラリーショートコードを2つの異なるタブに追加した場合の例です。
この例では、ギャラリーごとに3列の6つのロゴを選択しました。

これは、多くのロゴを必要とするサイトに役立つ可能性があります。

＃3 DiviBuilderを使用して会社のロゴのカスタムレイアウトを作成する

会社のロゴレイアウトをもう少しクリエイティブにしたい場合は、Divi Builderを使用して、想像できるほぼすべてのものをデザインできます。 Diviのrow要素は、最大6列の列レイアウトをサポートします。これは、ほとんどの会社のロゴレイアウトには十分すぎるほどです。 私は、ロゴがモバイルでどのように反応するかという点で、ロゴに最適な6列と4列のレイアウトが好きです。

次のデザインでは、会社のロゴレイアウトを次のレベルに引き上げる方法に関するヒントをいくつか紹介します。

まず、6列の行を持つ新しいセクションの作成から始めましょう。

列に何かを追加する前に、行の設定に移動して、以下を更新します。

カスタム幅：90％
側溝幅：1
列の高さを等しくする：はい

カスタムパディング：4vw上、4vw下

設定を保存する。

次に、最初の列に画像モジュールを追加してから、ロゴ画像の1つを選択します。

次に、次のように各列にロゴ画像を追加し続けます。

列1：1つのロゴ
列2：2つのロゴ
列3：3つのロゴ
列4：3つのロゴ
列5：2つのロゴ
列6：1つのロゴ

この設定で、カスタムCSSのスニペットを使用して垂直方向の配置を調整できます。 コンテンツを垂直方向に中央揃えにする場合は、上記の＃2のロゴギャラリーの横にあるテキストを垂直方向に中央揃えにするために追加したものと同じCSSスニペットを追加できます。 行設定を開き、次のCSSをメイン要素に追加します。

align-items: center;

ご覧のとおり、これによりロゴのレイアウトが丸みを帯びます。

ただし、このレイアウトでは、モジュールを行の一番下に配置します。 したがって、「align-items：center」スニペットを次のように置き換えます。

align-items: flex-end;

これにより、すべてのモジュールが行の一番下に配置され、追加するセクションの仕切りとうまく機能します。

これで、セクションをカスタマイズする準備が整いました。 セクション設定を開き、以下を更新します。

背景：＃2a3443

トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：rgba（255,255,255,0.03）
トップディバイダーの高さ：13vw
トップディバイダーフリップ：垂直

カスタムパディング：0px上、0px下

見出しでは、新しいセクションを作成し、作成したセクションの上に配置します。 1列の行構造を持つ新しい通常のセクションを作成します。

次のようにセクション設定を更新します。

背景色：＃2a3443

ボトムディバイダースタイル：スクリーンショットを参照
ボトムディバイダーカラー：rgba（238,238,238,0.09）
ボトムディバイダーの高さ：13vw

カスタムパディング：0px下

次に、設定を保存し、テキストモジュールを行に追加して、以下を更新します。

コンテンツには、以下を追加します。

<h2>As Featured In</h2>

見出し2フォント：Montserrat
見出し2フォントの太さ：太字
見出し2テキストの配置：中央
見出し2のテキストの色：#ffffff
見出し2テキストサイズ：32px

カスタムマージン：0px下

最後に、テキストモジュールの下に、他の部分よりも目立たせたい会社のロゴが付いた画像モジュールを追加します。 次に、以下を更新します。

画像の配置：中央
カスタムマージン：-75px

最終結果を確認してください。

最終的な考え

会社のロゴのためにあなたのウェブサイトにセクションを作成することは実際には非常に簡単です。 フォトエディタを使用してロゴ画像のサイズを適切に設定すると、Diviが残りの処理を行うことができます。 このチュートリアルで説明する方法は、最小限の労力で達成しようとしているレイアウトを作成するために必要なすべてのものを提供するはずです。 そして、あなたの隅にあるDiviの力で、あなたはあなた自身のいくつかのユニークなレイアウトを作成することを楽しむべきです。

コメントでお返事をお待ちしております。

乾杯！