Diviのテーマビルダーで作成された無料の最小限のヘッダーとフッターのコンボデザインをダウンロードする

公開: 2020-04-20

グローバルフッターとヘッダーをデザインするときは、ウェブサイトの全体的なデザインスタイルを考慮することが重要です。たとえば、空白が多い最小限のWebサイトを構築している場合、最善の策は最小限のヘッダーとフッターも使用することです。今日のチュートリアルでは、無料の最小限のヘッダーとフッターのコンボデザインを共有します。これは、作成したWebサイトで、制限なしに自由に使用できます。また、レクリエーションのプロセスを段階的にご案内します。

それを手に入れましょう。

プレビュー

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

最小限のヘッダーフッターコンボ

最小限のヘッダーとフッターコンボのデフォルトのウェブサイトテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

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

https://youtu.be/EUtzKvn6PUI

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

1.グローバルヘッダーを作成します

Diviテーマビルダーに移動します

まず、Divi Theme Builderに移動し、[グローバルヘッダーの追加]をクリックします。

最小限のヘッダーフッターコンボ

グローバルヘッダーの作成を開始します

次に、グローバルヘッダーの作成を開始します。

最小限のヘッダーフッターコンボ

セクション＃1を変更する

間隔

テンプレートエディタに入ると、セクションが表示されます。セクション設定を開き、デフォルトの上部と下部のパディングをすべて削除します。

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

最小限のヘッダーフッターコンボ

新しい行を追加

カラム構造

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

最小限のヘッダーフッターコンボ

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
幅：80％（デスクトップ）、90％（タブレットと電話）

最小限のヘッダーフッターコンボ

間隔

デフォルトの上下のパディングをすべて削除します。

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

最小限のヘッダーフッターコンボ

国境

下の境界線も使用します。

下の境界線の幅：1px
下の境界線の色：＃333333

最小限のヘッダーフッターコンボ

主な要素

次に、[詳細設定]タブに移動し、行のメイン要素に1行のCSSコードを追加します。これにより、小さい画面サイズで列を並べて表示できます。

display: flex;

最小限のヘッダーフッターコンボ

すべての列間隔

次に、行のすべての列にカスタムパディングを追加します。

最小限のヘッダーフッターコンボ

トップパディング：1％
ボトムパディング：1％

最小限のヘッダーフッターコンボ

1列目と2列目の境界線

1列目と2列目にも右の境界線を追加します。

最小限のヘッダーフッターコンボ

右ボーダー幅：1px
右の境界線の色：＃333333

最小限のヘッダーフッターコンボ

ソーシャルメディアフォローモジュールを列1に追加

ソーシャルネットワークを追加する

1列目のソーシャルメディアフォローモジュールから始めて、モジュールを追加します。選択したソーシャルネットワークを追加します。

最小限のヘッダーフッターコンボ

各ソーシャルネットワークの個別の背景色を削除する

個々のレベルで各ソーシャルネットワークの背景色を削除して続行します。

最小限のヘッダーフッターコンボ

配置

次に、一般的なモジュール設定に戻り、[デザイン]タブでモジュールの配置を変更します。

モジュールの配置：中央

最小限のヘッダーフッターコンボ

アイコン設定

次にアイコンの設定を変更します。

アイコンの色：＃000000
カスタムアイコンサイズを使用：はい
アイコンのフォントサイズ：16px（デスクトップ）、14px（タブレットと電話）

最小限のヘッダーフッターコンボ

間隔

そして、トップマージンを追加してモジュール設定を完了します。

トップマージン：2％

最小限のヘッダーフッターコンボ

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

コンテンツを追加する

2番目の列では、選択したコンテンツを含むテキストモジュールを追加します。

最小限のヘッダーフッターコンボ

テキスト設定

[デザイン]タブに移動し、モジュールのテキスト設定を次のように変更します。

テキストフォント：Roboto Mono
テキストの色：＃000000
テキストサイズ：17px（デスクトップ）、15px（タブレット）、13px（電話）
テキストの配置：中央

最小限のヘッダーフッターコンボ

間隔

トップマージンも追加します。

トップマージン：3％

最小限のヘッダーフッターコンボ

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

コピーを追加

最後の列に移ります。選択したコピーを含むボタンモジュールを追加します。

最小限のヘッダーフッターコンボ

ボタンの配置

モジュールの[デザイン]タブに移動し、それに応じて配置を変更します。

ボタンの配置：中央

最小限のヘッダーフッターコンボ

ボタンの設定

次に、ボタン設定に移動し、次のようにボタンのスタイルを設定します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：20px（デスクトップ）、16px（タブレット）、13px（電話）
ボタンのテキストの色：＃670fff
ボタンの境界線の幅：0px

最小限のヘッダーフッターコンボ

ボタンフォント：Roboto Mono
ボタンのフォントの太さ：太字
ボタンアイコンの配置：左
ボタンのホバー時にアイコンのみを表示：いいえ

最小限のヘッダーフッターコンボ