Diviで画像とテキストの反射をデザインする方法
公開: 2019-05-19画像やテキストの反射をデザインすることは、Webページのコンテンツにスパイスを加えるために使用できる古典的なデザイン手法です。 また、Diviを使用すると、フォトエディタを使用せずに、DiviBuilderからこれらの反射を簡単に作成できます。
このチュートリアルでは、Diviで画像とテキストの反射をデザインする方法を紹介します。 反射を作成するための鍵は、Diviの変換スケールオプションを使用して、要素のミラーバージョンを作成することです。 その後、テキストモジュールの操作方法を示すカスタムオーバーレイを追加できます。
始めましょう！
スニークピーク
これは、このチュートリアルで作成するデザインの概要です。
テキストと画像の反射レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
私たちのYoutubeチャンネルを購読する
始めるために必要なもの
始めるために必要なのはDiviだけです。 Diviテーマがインストールされ、アクティブになっていることを確認してください。 フロントエンドのDiviBuilder（ビジュアルビルダー）を使用して、ゼロからデザインを作成します。 このチュートリアルでは、いくつかのモック画像も必要になります（1920px x600px前後の背景画像と500pxx 350px前後の別の画像）。
準備ができたら、WordPressダッシュボードに移動し、[ページ]> [新規追加]に移動します。 新しいページにタイトルを付け、フロントエンドにDiviBuilderをデプロイします。 「最初からビルド」オプションを選択します。 これで準備が整いました！
Diviで画像とテキストの反射を作成する背後にある基本的な考え方
Diviで反射デザインを作成する背後にある基本的な考え方には、次の3つのステップが含まれます。
- 画像またはテキストを使用してモジュールを作成する
- モジュールを複製し、変換スケールを使用して鏡像またはテキストを作成します
- 絶対位置の仕切りまたはテキストモジュールを使用して、ミラーリングされた要素にグラデーションオーバーレイを追加します。
この設計手法は、個々のモジュールに限定されません。 このメソッドを使用して、Divi内の行全体に実際に反射を追加できます。これは、一意のヘッダーデザインを作成するのに役立ちます。 このチュートリアルの後半で、テキストリフレクションデザインの行にリフレクションを追加します。 しかし、今のところ、画像反射を作成する方法から始めましょう。
画像反射を作成する方法
画像の反射を作成するには、1列の行を持つ新しい通常のセクションを作成することから始めましょう。
次に、画像モジュールを行に追加します。
メディアギャラリーから画像モジュールに必要な画像をアップロードします。 次に、次の画像設定を更新します。
最大幅：600px
モジュールの配置：中央
カスタムマージン：0px下
鏡像を作成する
反射効果を作成するには、最初に画像の真下に画像のミラーリングされた複製を作成する必要があります。
これを行うには、イメージモジュールを複製します。 次に、複製イメージの設定を次のように更新します。
不透明度：40％
変換スケールX軸：-100％
変換スケールプロパティは、画像を魔法のように垂直方向と水平方向に反転させて、画像のミラーバージョンを作成するものです。
これにより、基本的な反射設計が処理されます。 ただし、よりリアルな反射デザインのために、下の画像にグラデーションオーバーレイを追加することができます。
テキストモジュールを使用してグラデーションオーバーレイを追加する
下の画像にグラデーションオーバーレイを追加するには、テキストモジュールを使用できます。 テキストモジュールに絶対位置を指定して、下の画像の上に配置することができます。 次に、グラデーションの背景をテキストモジュールに追加できます。 （仕切りの代わりに）テキストモジュールを使用すると、必要に応じて、後で反射画像の上にコンテンツを追加するというボーナスオプションが提供されます。
先に進み、下の画像の下にテキストモジュールを作成します。
デフォルトのコンテンツを削除して、テキストモジュールを空にします。
次に、テキストモジュールの設定を次のように更新します。
背景グラデーションの左の色：rgba（255,255,255,0）
背景のグラデーションの正しい色：#ffffff
幅：100％
高さ：50％
次に、次のカスタムCSSをメイン要素に追加します。
position: absolute !important; top: 50%;
テキストモジュールのこの絶対位置は、行の下半分のテキストモジュールにオーバーレイします。
これまでのデザインを見てみましょう。
背景色の追加
白い背景が必要ない場合は、他の背景色を試して、独自の全幅反射デザインを作成できます。
これを行うには、行設定を開き、以下を更新します。
背景色：＃000000
幅：100％：
最大幅：100％;
カスタムパディング：0px上、0px下
それでは、結果を確認してみましょう。
テキストモジュールオーバーレイへのテキストの追加
下の画像のオーバーレイとしてテキストモジュールを使用しているので、必要に応じてコンテンツを追加できることを忘れないでください。
これを行うには、テキストモジュールの設定を開き、以下を更新します。
内容：「イメージリフレクション」
テキストテキストの色：#ffffff
テキストテキストサイズ：30px
テキストの向き：中央
最終設計
これが画像反射の最終的なデザインです。
Diviでテキストリフレクションを作成する
この次の例では、テキスト反射デザインを作成します。 このプロセスは、画像の反射を作成する方法と非常によく似ています。 ただし、この例では、行全体のリフレクションを作成します。 これにより、テキストと背景画像の両方を反映して、優れたヘッダーデザインを実現できます。
これがその方法です。
まず、1列の行を持つ新しい通常のセクションを作成します。 次に、テキストモジュールを行に追加します。
「Reflection」という単語でコンテンツを更新します。
次に、次のように設計設定を更新します。
テキストフォント：Oswald
テキストフォントスタイル：TT
テキストテキストの色：＃333333
テキストテキストサイズ：10vw
テキスト行の高さ：.9em
テキストの向き：中央
カスタムマージン：0px下
カスタムパディング：4vwトップ
行設定を更新します
テキストモジュールがカスタマイズされたので、次は行の設定を更新します。
行設定を開き、以下を更新します。
背景画像：背景画像を挿入
側溝幅：1
幅：100％
最大幅：100％
カスタムパディング：0px上、0px下
これまでのデザインは次のようになります。
リフレクションテキスト行の作成
このデザインの反射テキストを作成するには、行全体を反射して、反射に背景画像を含めることができるようにします。
行を複製し、以下を更新します。
変換スケールY軸：-100％
下の行は上の行の鏡像です。 これで、オーバーレイを追加するだけです。
テキストモジュールを使用してグラデーションオーバーレイを追加する
一番下の行のテキスト反射にグラデーションオーバーレイを追加するには、上記の最初の画像反射デザインで行ったようにテキストモジュールを使用できます。 前と同じように、テキストモジュールに絶対位置を指定して、行全体を埋め、他のテキストモジュールの上に反射テキストを配置することができます。 次に、グラデーションの背景をテキストモジュールオーバーレイに追加できます。
先に進み、下の行のテキストモジュールの下に新しいテキストモジュールを作成します。
新しいテキストモジュール設定を開き、コンテンツを削除して、テキストモジュールが空になるようにします。
次に、次のように設定を更新します。
背景グラデーションの左の色：#ffffff
背景グラデーションの右の色：rgba（255,255,255,0.13）
開始位置：38％
幅：100％
高さ：100％
次に、次のカスタムCSSをメイン要素に追加します。
position: absolute !important; top: 0;
それでおしまい！
最終結果
最終結果を確認してください。
これは、背景画像のない同じデザインです。
最終的な考え
時間をかけて正しい方法で反射を設計すると、反射は非常にクールに見えます。 ありがたいことに、Diviにはそれを実現するためのツールがあります。 CSSリフレクションを作成する方法は他にもありますが、残念ながら、クロスブラウザーのサポートが不足している傾向があります。 このチュートリアルのデザインは、すべてのブラウザーで見栄えがします。
私は、ページヘッダーやポートフォリオ作品の画像の展示で反射が見栄えがすることを発見しました。 そして、他にも多くの実装があると確信しています。
コメントでお返事をお待ちしております。
乾杯！