Divi用の6つの無料モジュールディバイダーをダウンロードして使用する

公開: 2019-01-07

これまでに、Diviに含まれているセクションディバイダーに慣れてきました。 過去のチュートリアルでは、これらのセクション仕切りをモジュールと行に適用する方法も示しました。 ただし、モジュールにのみ接続され、他の設計要素には接続されていないモジュール仕切りを使用する場合は、この投稿が最適です。 構築するあらゆる種類のDiviWebサイトに使用できる6つの無料モジュールディバイダーを共有します。 これらのモジュールディバイダーは、この投稿のさらに下にダウンロードできるイラストレーターファイルに含まれます。 このチュートリアルは、独自の種類のモジュールディバイダーを作成するのにも役立ちます。

それを手に入れよう!

プレビュー

チュートリアルに入る前に、ダウンロードできる6つの異なるモジュール仕切りと、それらがさまざまな画面サイズでどのように見えるかを簡単に見てみましょう。

デスクトップ

モジュールディバイダー

電話

モジュールディバイダー

モジュールディバイダーを無料でダウンロード

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

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

無料でダウンロード

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

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

始めましょう!

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

Illustratorで仕切りの色を変更する

ダウンロードしたフォルダにあるIllustratorファイルを開く

このチュートリアルの最初の部分では、必要なモジュールディバイダーを準備します。 ダウンロードフォルダには、特定の1つのカラーパレットのモジュール仕切りがあります。 ただし、別のカラーパレットを使用する場合は、ダウンロードフォルダーにあるイラストレーターファイルを使用して、必要なモジュール仕切りを作成する必要があります。

モジュールディバイダー

モジュールディバイダースタイルを選択し、レイヤーのロックを解除して可視性を有効にする

イラストレーターファイルを開いたら、先に進み、[レイヤー]タブで選択した仕切りを選択します。 レイヤーのロックを解除し、可視性オプションを有効にして、すぐに開始できるようにします。

モジュールディバイダー

モジュールディバイダーをクリックして色を変更

ここで、ディバイダーを作成するモジュールの数に応じて、必要なモジュールディバイダーの数が異なる場合があります。 たとえば、投稿の冒頭で示した例を再現するには、4つの異なる色のモジュールディバイダーが必要です。 仕切りの色を白に変更して、最初のものから始めます。

  • 仕切りの色:#ffffff

モジュールディバイダー

Web用のPNGモジュールディバイダーのエクスポート

色を変更したら、画像モジュールをWeb用のPNG画像ファイルとして保存して続行できます。

モジュールディバイダー

モジュールディバイダー

必要な色ごとに手順を繰り返します(x4)

前述のように、さまざまなモジュール分周器が必要になります。 色ごとに前の手順を繰り返します。

  • 色1:#ffffff
  • カラー2:#2759f6
  • 色3:#97adf4
  • 色4:#b2ceff

モジュールディバイダー

Diviデザインを作成する

バックエンドプレビュー

すべてのモジュールディバイダーを保存したら、Diviに切り替えます。 作成する最終結果は、バックエンドでは次のようになります。

モジュールディバイダー

新しいセクションを追加

新しいページを追加するか、既存のページを開いて、通常のセクションを追加します。

モジュールディバイダー

新しい行を追加

カラム構造

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

モジュールディバイダー

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定にいくつかの変更を加えます。

  • この行を全幅にする:はい
  • カスタムガター幅を使用:はい
  • 側溝幅:1

モジュールディバイダー

列1に画像モジュールを追加

ホワイトモジュールディバイダーをアップロード

1列目に必要な最初のモジュールは画像モジュールです。 ダウンロードフォルダにある最初のモジュールディバイダーをアップロードするか、独自のカラーパレットに変更したものを選択します。

モジュールディバイダー

背景色

次に、画像モジュールに背景色を追加します。 この色は、次に来るモジュールの背景色と一致する必要があります。

  • 背景色:#2759f6

モジュールディバイダー

サイジング

次に、サイズ設定に移動し、[全幅を強制]オプションを有効にします。

  • 全幅を強制:はい

モジュールディバイダー

列2に宣伝文モジュールを追加する

コンテンツを追加する

列1に必要な2番目のモジュールは、宣伝文句モジュールです。 選択したコンテンツを追加することから始めます。

モジュールディバイダー

アイコンを選択

次に、選択したアイコンを選択します。

モジュールディバイダー

背景色

モジュールディバイダーイメージモジュールに使用したのと同じ背景色を追加して続行します。

  • 背景色:#2759f6

モジュールディバイダー

アイコン設定

次に、アイコン設定に移動し、いくつかの変更を加えます。

  • アイコンの色:#ffffff
  • 画像/アイコンの配置:上
  • アイコンのフォントサイズを使用:はい
  • アイコンフォントサイズ:50px

モジュールディバイダー

テキスト設定

テキスト設定も変更します。

  • テキストの向き:中央
  • テキストの色:明るい

モジュールディバイダー

タイトルテキスト設定

タイトルテキストの外観も変更します。

  • タイトルフォントの太さ:超太字
  • タイトルフォントスタイル:大文字

モジュールディバイダー

間隔

また、カスタムパディングを使用して、モジュール用のスペースを作成します。

  • トップパディング:50px
  • ボトムパディング:50px
  • 左パディング:50px
  • 右パディング:50px

モジュールディバイダー

クローン画像モジュール3回&宣伝文句モジュール2回

最初のイメージモジュール(モジュールディバイダーを含む)とブラーブモジュールの変更が完了したら、先に進んでイメージモジュールを3回、ブラーブモジュールを2回複製できます。 これにより、バックエンドで次の結果が得られます。

モジュールディバイダー

複製を正しい順序で配置する

以下に示すように、複製の順序を変更して、イメージモジュールから開始し、その後に宣伝文モジュールが続くことを確認します。

モジュールディバイダー

宣伝文モジュールの複製の背景色を変更する

次に、宣伝文モジュールの背景色を変更します。

  • 宣伝文モジュール#2:#97adf4
  • 宣伝文モジュール#3:#b2ceff

モジュールディバイダー

イメージモジュールのモジュールディバイダーを変更する

最初の複製イメージモジュールを開き、作成した2番目のモジュールディバイダーをアップロードします(またはダウンロードフォルダーにあるものを選択します)。

モジュールディバイダー

モジュールディバイダーイメージモジュールの背景色を変更します(次の宣伝文モジュールの背景色と一致します)

新しいモジュール仕切りをアップロードしたら、その画像モジュールの背景色も変更する必要があります。 この色を、次に来る宣伝文句モジュールの背景色と一致させてください。

  • モジュールディバイダー#2:#2759f6

モジュールディバイダー

残りの2つのディバイダーモジュールに対して手順を繰り返します

列に残っている2つのモジュール仕切りについて前の手順を繰り返すと、完了です。

  • モジュールディバイダー#3背景色:#97adf4
  • モジュールディバイダー#4背景色:#b2ceff

モジュールディバイダー

プレビュー

すべての手順を完了したので、この投稿の冒頭でダウンロードできた6つの異なるモジュールディバイダーを最後に見てみましょう。

デスクトップ

モジュールディバイダー

電話

モジュールディバイダー

最終的な考え

この投稿では、構築しているあらゆる種類のWebサイトに使用できる6つの無料のモジュール仕切りを共有しました。 これらのモジュール仕切りは、より遊び心のあるデザインを作成し、ユニークで楽しいモジュールを作成するのに役立ちます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください!