Diviを使用してコピーに変換されたシャドウを追加する

Diviの新しい変換オプションを使用すると、すべての変換設定をリアルタイムで表示しながら、美しいWebデザインを作成できます。 また、さまざまなモジュールを相互に組み合わせることで、作業中のセクションのルックアンドフィールを向上させるのに役立つ、いくつかのユニークでシームレスな効果を実現できます。 この特定の投稿では、Diviの組み込みオプションのみを使用して、コピーの変換されたシャドウを作成することに焦点を当てます。 サンプルのJSONファイルも無料でダウンロードできます。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

Transformed Shadows Hero SectionLayoutを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

ヒーローセクションの再現を始めましょう

新しいセクションを追加

間隔

最初に行う必要があるのは、新しい通常のセクションを新しいページまたは既存のページに追加することです。 セクション設定を開き、デフォルトの上部と下部のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

オーバーフロー

[詳細設定]タブに移動し、セクションのオーバーフローが非表示になっていることを確認します。 この投稿の後半で、いくつかの変換オプションを使用し、オーバーフローを非表示にすると、セクションコンテナを超えるものがないことを確認します。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、次の設定を適用して、行が画面幅全体を占めるようにします。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：100％
• 最大幅：100％

間隔

間隔設定に移動し、デフォルトの下部パディングを削除して、行の左側と右側にカスタムスペースを追加します。

• ボトムパディング：0px
• 左パディング：4vw
• 右パディング：4vw

テキストモジュール＃1を列1に追加します

コンテンツを追加する

テキストモジュールから始めて、さまざまなモジュールの追加を開始します。 お好みのコピーを入力してください。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：プレイフェアディスプレイ
• テキストの配置：右
• テキストの色：#ffffff
• テキストサイズ：11vw
• テキスト行の高さ：1em

• テキストシャドウの垂直方向の長さ：0.02em
• テキストシャドウブラー強度：0.16em
• テキストの影の色：rgba（0,0,0,0.44）

クローンテキストモジュール＃1

コンテンツの変更

最初のテキストモジュールが完成したら、それを複製して、複製のコピーを変更できます。

テキストモジュール＃1の上に新しいテキストモジュールを追加する

コンテンツを追加する

次のモジュール、つまり別のテキストモジュールに進みます。 今回は、モジュールを列の上部に配置します。 次の手順では、このテキストモジュールを、次に来るモジュールの変換されたテキストシャドウに変換します。 同じコピーを使用していることを確認してください。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：プレイフェアディスプレイ
• テキストフォントの太さ：太字
• テキストの配置：右
• テキストの色：rgba（94,150,187,0.28）
• テキストサイズ：11vw
• テキスト文字の間隔：4.5px
• テキスト行の高さ：1em

変換翻訳

次のモジュールの変換されたテキストシャドウのように見えるようにモジュールを変換する時が来ました！ 間隔設定に移動し、変換変換値を変更します。

• 右：13.9vw
• 下：-2.1vw

変換回転

モジュールも回転させます。

• 中心：291度

トランスフォームスキュー

そして、下のスキュー値を増やします。

• 下：30度

変換されたテキストモジュールのクローンを作成し、テキストモジュール＃2の上に配置します

コンテンツの変更

変換されたテキストシャドウモジュールの作成が完了したら、それを複製して、列の3番目のテキストモジュールの上に配置できます。 必ずコピーを変更してください。

テキスト設定の変更

デザインタブに移動し、テキストの色を変更します。

• テキストの色：＃f3e4df

間隔を追加する

変換されたテキストシャドウモジュールによって作成された余分なスペースを補うために、負の上部マージンを追加します。

• トップマージン：-12vw

説明テキストモジュールを列1に追加

コンテンツを追加する

列1に必要な次のモジュールは、別のテキストモジュールです。 選択した説明を入力します。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Open Sans
• テキストの配置：右
• テキスト行の高さ：2.3em

サイジング

サイズ設定で、さまざまな画面サイズでモジュールの幅を変更します。

• 幅：53％（デスクトップ）、70％（タブレット）、90％（電話）
• モジュールの配置：右

ボタンモジュールを列1に追加

コピーを追加

列1の次の最後のモジュールであるボタンモジュールに進みます。 お好みのコピーを入力してください。

配置

デザインタブに移動し、ボタンの配置を変更します。

• ボタンの配置：右

ボタンの設定

ボタンの設定も変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：20px
• ボタンの背景色：＃5e96bb
• ボタンの境界線の幅：0px
• ボタンの境界線半径：50px
• ボタンフォント：プレイフェアディスプレイ

間隔

そして、間隔の設定をいじって、ボタンのスタイルを完成させます。

• トップマージン：2vw
• 下マージン：3vw
• トップパディング：20px
• ボトムパディング：20px
• 左パディング：50px
• 右パディング：50px

イメージモジュール＃1を列2に追加します

1：1の画像をアップロード

2列目へ！ ここでは、2つの画像モジュールが必要です。 最初の画像モジュールから始めて、1：1の比率で画像をアップロードします。 これは、幅と高さの両方が同じピクセル値を持つ必要があることを意味します。 画像が正方形であることを確認すると、次の手順で画像を円に変えるのに役立ちます。

サイジング

イメージモジュールのサイズ設定に移動し、[全幅を強制]オプションを有効にします。

• 全幅を強制：はい

間隔

また、トップマージンも追加しています。

• トップマージン：2vw

国境

イメージモジュールを円に変換するために、各コーナーに「50vw」を追加します。 非常に高い値を使用すると、さまざまな画面サイズで円形を維持するのに役立ちます。

ボックスシャドウ

最後になりましたが、次の設定を使用して、画像モジュールにボックスシャドウを追加します。

• ボックスシャドウの水平位置：-300px
• ボックスシャドウの垂直位置：-300px
• 影の色：rgba（94,150,187,0.28）

イメージモジュール＃2を列2に追加します

1：1の画像をアップロード

列2の2番目の画像モジュールに移ります。ここでも、アップロードする画像の比率が1：1であることを確認しています。

サイジング

デザインタブに移動し、幅を変更します。

• 幅：62％

国境

このイメージモジュールの各コーナーにも「50vw」を追加します。

ボックスシャドウ

カスタムボックスシャドウも追加します。

• ボックスシャドウの水平位置：-200px
• ボックスシャドウの垂直位置：150px
• 影の色：＃d4c1bd

変換翻訳

最後になりましたが、変換変換オプションを使用してイメージモジュールの位置を変更すれば完了です。

• 右：-13vw
• 下：19vw

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、複製されたテキストモジュールをクリエイティブに使用して、変換されたテキストシャドウを作成する方法を示しました。 これは、コピーにスポットライトを当て、別の観点からDiviの組み込みオプションを使用するための興味深い方法です。 このチュートリアルを楽しんでいただけたでしょうか。質問や提案がある場合は、下のコメントセクションにコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。