Diviで大胆でカラフルなウェブサイトを作成するための7つのテクニック

公開: 2018-08-24

あなたのウェブサイトに大胆でカラフルなデザインスタイルを使用することはあなたのウェブサイトをポップにするための素晴らしい方法です。それはあなたがあなたのウェブサイトにポジティブな雰囲気をもたらすのを助けます、そしてそれはどんな種類のウェブサイトにも適合しませんが、それは間違いなくそれらの多くに適合します。

この投稿では、Diviの組み込みオプションのみを使用して大胆でカラフルなWebデザインを作成する方法に関する7つの異なるDiviテクニックを紹介します。最初に、さまざまな手法を実行し、その後、説明に一致する例を再作成します。

これは、4つの異なるWebサイトスタイルと、Diviを使用してそれらを実現する方法を扱った投稿シリーズの最後の投稿です。

クリーン＆アブストラクト
最小限
フラット
大胆でカラフル

それを手に入れよう！

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

1.行を列のあるセクションに「変換」します

大胆でカラフルなWebデザインを作成するために使用できる最初の手法は、行をセクションに変換することです。セクションと行の間のデフォルトのパディングをすべて削除することで、2つの間に明らかな違いを残すことはありません。これは、側溝の幅を削除することと組み合わせて、2つの列を一緒に押すことができます。

大胆でカラフル

2.グラデーション+背景テクスチャ

Webサイトでグラデーションの背景を使用すると、すばらしい結果が得られます。しかし、これらの色をさらに強化するのに役立つのは、テクスチャのある背景と組み合わせることです。バランスを保つために、この組み合わせは1つの列にのみ使用してください。モダンなタッチのために、2番目のカラムを清潔で軽量に保ちます。

大胆でカラフル

3.半透明のグラデーションカラー+セクションディバイダーの下

行をセクションに変換した後、列の背景にセクションの仕切りを追加することもできます。コンテンツを重ねずに仕切りが透けて見えるようにするには、列にわずかに透明なグラデーションカラーを使用します。

大胆でカラフル

4.モジュールの水平列オーバーラップ

あなたはしばしばウェブサイトが垂直オーバーラップを使用しているのを見ます。一方、水平方向のオーバーラップは、絶対に驚くべき結果をもたらす可能性はありますが、あまり使用されません。この種の結果を達成するには、右の列の要素が左の列の要素よりも階層的に有利であることを知っておくことが重要です。左側の列に要素を配置すると、同じ結果を達成することはできません。

大胆でカラフル

5.完全な位置合わせのためにコピーを分割する

完璧な配置を持つことほど満足のいくものはありません。これは、良い設計と悪い設計を区別する主要な設計原則の1つです。 2つの列を重ねるときにこの配置が完全であることを確認するには、コピーを異なるテキストモジュールに分割してみてください。これにより、特にその単語または文に負の左マージンを一致させることにより、完全な配置を作成できます。

大胆でカラフル

6.黒と半透明のテキストの色を組み合わせる

Webサイトに太字の側面を追加するには、共有するコピーに大きなフォントサイズを使用し、非常に太字のテキストフォントの太さを使用します。また、大胆さのバランスをとるために、黒のテキストカラーと半透明のテキストカラーを切り替えることができます。これにより、Webサイトに十分な深さとバリエーションを作成できます。

大胆でカラフル

7.セクションを結合するために上部または下部のボックスシャドウを回避します

ボックスシャドウオプションを試してみると、ページ上の2つのセクションを簡単に結合できます。まず最初に、非常に微妙なボックスシャドウを使用します。つまり、十分なぼかし強度、負の広がり強度、および非常に明るいボックスシャドウカラーを使用することを意味します。微妙なボックスシャドウを作成したら、垂直位置で遊んでください。ページの最初のセクションでは、セクションの下部にボックスの影が表示されなくなるまで、垂直位置を移動してください。前のセクションにも同じことが当てはまりますが、代わりに、上部に表示されないようにしてください。

大胆でカラフル

プレビュー

さまざまなテクニックをすべて試したので、今度は物事を実践します。次のデザインを再作成します。

大胆でカラフル

作成を始めましょう：標準セクション＃1を追加します

セクション設定

トップディバイダー

標準セクションを含む新しいページを追加し、セクション設定をすぐに開きます。最初に必要なのは上部の仕切りです。

仕切りスタイル：リストで検索
仕切りの色：rgba（0,0,0,0.13）
仕切りの高さ：900px
仕切りフリップ：垂直
仕切りの配置：セクションコンテンツの下

大胆でカラフル

ボトムディバイダー

同様の下部仕切りも追加して続行します。

仕切りスタイル：リストで検索
仕切りの色：rgba（0,0,0,0.13）
仕切りの高さ：900px
仕切りの配置：セクションコンテンツの下

大胆でカラフル

間隔

次に、セクションに余裕を持たせ、デフォルトのパディングを削除します。

上マージンと下マージン：50px
左右のマージン：50px
トップ＆ボトムパディング：0px
左右のパディング：0px

大胆でカラフル

丸い角

次に、境界線の設定を開き、丸みを帯びた角をいくつか追加します。

左上：20px
右上：20px

大胆でカラフル

ボックスシャドウ

次の調整を行うことにより、セクションの上部に微妙なボックスシャドウを使用しています。

ボックスシャドウの垂直位置：-23px
ボックスシャドウブラー強度：37px
ボックスシャドウスプレッド強度：-29px
影の色：rgba（0,0,0,0.22）
ボックスシャドウの位置：外側のシャドウ

大胆でカラフル

新しい行を追加

カラム構造

セクション設定の変更が完了したわけではありません。2列の行を追加することで続行できます。

大胆でカラフル

列1のグラジエントバックグラウンド

モジュールをまだ追加せずに、行の設定を開きます。そこで最初に行う必要があるのは、最初の列にグラデーションの背景を追加することです。

色1：rgba（255,191,0,0.76）
色2：rgba（153,0,255,0.87）

大胆でカラフル

列1テクスチャ背景画像

このグラデーションの背景をテクスチャ背景と組み合わせます。私が使用している画像は、DiviのMeetup LayoutPackの一部です。次の画像を右クリックしてデスクトップに保存します（これは白いテクスチャのpngファイルであり、コンピュータで開くか、Webサイトで使用するまで、どのように表示されるかを確認することはできません。）：：

大胆でカラフル

メディアライブラリに画像をアップロードした後、列1の背景画像サイズとしても「フィット」を選択していることを確認してください。

大胆でカラフル

列2の背景色

次に、2番目の列に「＃F7F7F7」の背景色を付けます。

大胆でカラフル

サイジング

セクションの幅全体を占めるようにすることで、行をセクションに「変換」します。

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

大胆でカラフル

間隔

行がセクションの幅全体を占めるようにすることに加えて、セクションの上部と下部のパディングも削除する必要があります。

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

大胆でカラフル

Dividerモジュールを列1に追加します

仕切りを隠す

モジュールの追加を始めましょう！最初に必要なのは、最初の列のディバイダーモジュールです。このモジュールは、最初の列に必要なスペースを作成するためにのみ使用しています。実際に表示したくありません。モジュールを追加したら、必ず「ShowDivider」オプションを無効にしてください。

大胆でカラフル

間隔

次に[間隔]設定に移動し、次のカスタムパディングを仕切りに追加します。

トップパディング：200px（デスクトップとタブレット）、150px（電話）
下部のパディング：200px（デスクトップとタブレット）、150px（電話）

大胆でカラフル

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

コピーを追加

これで、2番目の列に進むことができます。ここでは、3つの異なるテキストモジュールを削除して、両方の列にオーバーラップさせます。モジュールを2つ以上の列にオーバーラップさせる場合は、常に右側の列にモジュールを配置する必要があります。これが階層構造の仕組みです。最初のテキストモジュールを追加し、コピーを追加します。