Diviのコンテンツのフローティングコーナーデザインを作成する方法

フローティングコーナーデザインの作成は、カスタムコードなしでは不可能だと思われていたかもしれない、Diviモジュールに少しクリエイティブなスタイルを追加するためのシンプルで簡単な方法です。 朗報です！ Diviでは、仕切りと宣伝文を使用して、Diviの組み込みオプションを使用してモジュールの四隅のスタイルを設定できます。 そして、さまざまな可能性を試すのはとても楽しいことです。

このチュートリアルでは、Diviでコンテンツのフローティングコーナーデザインを作成する方法を紹介します。 要素を配置したら、無数の形状、アイコン、色でそれらのコーナーをスタイリングできます！

始めましょう！

スニークピーク

これは、このチュートリアルから可能なフローティングコーナーデザインのスニークピークです。

フローティングボーダーのデザイン例のレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

それでは、チュートリアルに取り掛かりましょう。

入門

このチュートリアルに必要なのはDiviだけです。 これらの例は、DiviBuilderのフロントエンドで最初から作成します。

開始するには、新しいページを作成し、ページにタイトルを付けます。 クリックしてフロントエンドでDiviBuilderを使用し、[Build fromScratch]オプションを選択します。

これで準備が整いました！

フローティングコーナーデザインレイアウトテンプレートの作成

このデザインには無数のデザインの可能性があるため、基本的なレイアウト（またはテンプレート）を作成して作業することは理にかなっています。

このテンプレートでは、テキストモジュールの各コーナーに4つの仕切りを追加します。 次に、レイアウトが配置されると、これらの仕切りを独自のデザインにカスタマイズする新しい方法を模索できるようになります。

まず、1列の行を持つ新しい通常のセクションを作成します。

テキストモジュールを追加する前に、次のように行設定を更新します。

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

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

テキストテキストサイズ：20px
テキスト行の高さ：1.8em
カスタムマージン：上-25px、下-25px、左25px、右25px
カスタムパディング（デスクトップ）：上10％、下10％、左10％、右10％
カスタムパディング（電話）：上20％、下20％
ボーダー幅：4px
ボーダーカラー：#eeeeee

カスタムマージンとパディングは、まもなく追加するディバイダーモジュールの調整に役立ちます。 仕切りの高さと幅は50ピクセルになるため、上下の余白が-25ピクセルになると、これらの仕切りがテキストモジュールの途中まで引っ張られ、対称的なデザインになります（ご覧のとおり）。

上位2つのフローティングコーナーディバイダーを追加する

テキストモジュールを配置したら、仕切りモジュールを使用して、上位2つのフローティングコーナーデザインの追加を開始できます。

新しい仕切りモジュールを作成し、テキストモジュールの上部にドラッグします。

次に、次のように仕切りの設定を更新します。

仕切りを表示：いいえ

背景色：＃7cda24（または任意の色）
高さ：50px
幅：50px

50pxの高さと幅は、フローティングボーダーに使用できる完璧な正方形を提供します。

次に、ボックスシャドウを仕切りに追加して、次のようにフローティング効果を作成します。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：0px
ボックスシャドウブラー強度：0px
ボックスシャドウスプレッド強度：20px
影の色：#ffffff

仕切りモジュールがテキストモジュールの上にとどまる（そしてその後ろに隠れない）ようにするには、次のようにCSSのスニペットをメイン要素に追加する必要があります。

主な要素のCSS：

position: relative

次に、Zインデックスを1に更新します。

次に、仕切りモジュールを複製し、複製した仕切り設定を次のように更新します。

モジュールの配置：右
カスタムマージン：-50pxトップ

これにより、仕切りが右に揃えられ、その上にある仕切りモジュールの正確な高さまで引き上げられます。 これにより、探している正確なコーナー配置が作成されます。

下部のコーナーディバイダーを追加する

2つの下部コーナー仕切りを追加するには、ワイヤーフレームビューモードを展開し、作成した左右の仕切りをコピーして、テキストモジュールの下に貼り付けます（画像に示すように、左側の仕切りが右側の仕切りの上に積み重ねられたままであることを確認してください）未満）。

それでおしまい！ 基本的なレイアウトの最終的なデザインを確認しましょう。

新しいフローティングコーナーデザインの探索

このテンプレートを配置すると、可能ないくつかの異なるデザインを探索できます。 このセクション全体をDiviライブラリに保存して、今後テンプレートとして保持できるようにすることができます。 しかし今のところ、セクションを複製して新しいデザインを調べてみましょう。

グラデーションの背景を持つダイヤモンドの形

テンプレートの複製を配置したら、複数選択機能を使用して4つの仕切りモジュールすべてを選択します。 次に、選択した仕切りの1つにある設定歯車アイコンをクリックして、要素設定モーダルを展開します。 このステップではクリックモードを使用すると役立つ場合があります。

要素設定で、以下を更新します。

グラデーションの背景左の色：＃7cda24
グラデーションの背景の正しい色：＃edf000
グラデーション方向：45度

次に、変換オプションを使用して、仕切りをひし形に回転させます。

変換回転Z軸：45度

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

歪んだ仕切り

変換スキューオプションを使用して仕切りをスキューし、さらにユニークなデザインにすることもできます。 分周器ごとに個別のスキューデザインを追加するか、複数選択を使用して、X軸とY軸で-37度だけ4つすべての変換スキューを同時に更新できます。

これがどのように見えるかです。

暗い背景デザイン

テキストモジュールに暗い背景色を追加して、ユニークなフローティングコーナーデザインを試すこともできます。 これは、変換なしの回転またはスキューを使用した、背景色が＃002130のテキストモジュールの例です。

丸みを帯びたエッジコーナー

デザインにいくつかの丸い角を配置するには、次のように行に丸い角を追加するだけです。

丸みを帯びた角：20px

サークルフローティングコーナー

これらの四角い角を円に変えるには、次のカスタムCSSスニペットを各仕切りのメイン要素に追加します。

border-radius: 50%;

仕切りは50x50ピクセルなので、これで完璧な円のデザインが作成されます。

ご覧のとおり、これらの要素を微調整して無数の新しいコーナーデザインを作成する方法はたくさんあります。

それでは、ディバイダーモジュールの代わりにフローティングコーナーに宣伝文句アイコンを使用してみましょう。

宣伝文句アイコンを使用したフローティングコーナーの作成

テキストモジュールの各隅に宣伝文句アイコンを追加すると、さらにユニークなデザインを作成できます。 チュートリアルの最初に作成したものと同じレイアウトテンプレートを使用できます。 唯一の違いは、四隅に仕切りモジュールの代わりに宣伝文句モジュールを使用することです。

先に進み、セクションレイアウトテンプレートの複製を展開します。

次に、テキストモジュールの上下にある仕切りモジュールを削除します。

上位2つの宣伝文のアイコンコーナーを追加する

宣伝文句モジュールを使用して単一のアイコンを表示するだけなので、サイズと間隔が正しいことを確認して取得する必要があります。

テキストモジュールの上に宣伝文モジュールを追加し、タイトルと本文のテキストを取り出します。 次に、クリックして画像の代わりにアイコンを使用し、サークルのFacebookアイコンを選択します。

次に、次の宣伝文句の設定を更新します（これらの設定は、最初の例で仕切りモジュールに追加した設定と非常によく似ています）。

背景色：#ffffff
アイコンフォントサイズ：50px
幅：50px
カスタムマージン：0px下
丸みを帯びた角：50％
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：0px
ボックスシャドウブラー強度：0px
ボックスシャドウスプレッド強度：20px
影の色：#ffffff

主な要素のCSS：

position: relative;

宣伝文の画像CSS：

margin-bottom: 0px

Zインデックス：1

次に、宣伝文モジュールを複製して、現在の宣伝文のすぐ下に別のモジュールを作成し、以下を更新します。

モジュールの配置：右
カスタムマージン：-50pxトップ

次に、上の2つの宣伝文モジュールをコピーして、テキストモジュールの下に貼り付けます（左側の宣伝文が右側の宣伝文の上にスタックされたままであることを確認します）。

次に、各宣伝文のアイコンを好きなように更新できます。

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

宣伝文句のフローティングコーナーで他のデザインを探索する

この設定を使用すると、多くのユニークなデザインを探索できます。 アイコンを変更したり、さまざまな色の組み合わせを使用したり、変換オプションを使用してアイコンを拡大縮小または回転したりすることもできます。

これは、テキストモジュールに暗い背景色とさまざまなアイコン色を使用したデザインの例です。

複数の列レイアウトで機能

要素をまとめている限り、これらのフローティングコーナーレイアウトを複数の列に追加できます。

まとめ

Diviでコンテンツのフローティングコーナーデザインを作成することは、Diviビルダーの力を実際に示しています。 利用可能なすべての組み込みオプションを使用すると、1つの基本的なレイアウトテンプレートから無数のデザインバリエーションを作成できます。 これがあなた自身の新しいデザインを探求する楽しみを持っていることをあなたに刺激することを願っています。

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

乾杯！