Diviのテーマビルダーで404ページテンプレートを作成する方法
公開: 2019-11-12Diviのテーマビルダーと組み込みのデザインオプションにより、多くの新しい扉が開かれました。 これまで以上に、顧客がアクセスするすべてのページをカスタマイズできるようになりました。 これには、404ページの設定が含まれます。 このチュートリアルでは、美しい404ページのテンプレートを作成し、それをWebサイトにすぐに適用する方法を紹介します。 Diviの組み込みオプションのみを使用し、テンプレートJSONファイルを無料でダウンロードすることもできます。 このチュートリアルが、次の404ページのデザインで創造性を発揮するきっかけになることを願っています。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
404ページテンプレートを無料でダウンロード
無料の404ページテンプレートを入手するには、まず下のボタンを使用してテンプレートをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
1. Diviテーマビルダーに移動し、新しいテンプレートを作成します
Diviテーマビルダーに移動します
404ページテンプレートの作成を開始するには、Divi設定でDiviテーマビルダーに移動します。
新しいテンプレートを作成する
[新しいテンプレートの追加]をクリックして、404ページの新しいテンプレートを設定します。
- 使用：404ページ
ヘッダーとフッターエリアを非表示
目のアイコンをクリックして、404ページのカスタムヘッダーとフッターを非表示にして続行します。
グローバルボディを構築する
これまでのすべての手順を完了したら、[カスタムボディの構築]を選択して404ページのボディの構築を開始できます。
2.404ページ本文の作成を開始します
新しいセクションを追加
背景色
テンプレートエディタに入ると、ページにセクションが表示されます。 このセクションを開き、白い背景色を追加します。
- 背景色：#FFFFFF
ボトムディバイダー
セクションの[デザイン]タブに移動し、下部の仕切りを追加します。
- 仕切りスタイル：リストで検索
- 仕切りの色：＃ffee00
- 仕切りの高さ：25vw（デスクトップ）、77vw（タブレット）、90vw（電話）
- 仕切りフリップ：垂直
- 仕切りの配置：セクションコンテンツの下
間隔
次に、さまざまな画面サイズにカスタムパディング値を追加します。
- トップパディング：4.6vw（デスクトップ）、23vw（タブレット）、25vw（電話）
- ボトムパディング：4.6vw（デスクトップ）、13vw（タブレット）、11vw（電話）
行＃1を追加
カラム構造
セクションの設定が完了したら、最初の行を追加できます。 次の列構造を選択します。
サイジング
モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
間隔
次に、行の上部と下部のパディング値を変更します。
- トップパディング：2vw
- ボトムパディング：2vw
テキストモジュール1を列に追加
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 必要な最初のモジュールはテキストモジュールです。 選択した段落コンテンツを挿入します。
テキスト設定
モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：モノトン
- テキストの色：＃000000
- テキストサイズ：24vw（デスクトップ）、35vw（タブレットと電話）
- テキスト行の高さ：1em
- テキストの配置：中央
テキストモジュール＃2を列に追加
コンテンツを追加する
次のモジュール、つまり別のテキストモジュールに進みます。 お好みのコンテンツを追加してください。
テキスト設定
それに応じてモジュールのテキスト設定を変更します。
- テキストフォント：Montserrat
- テキストの色：＃000000
- テキストサイズ：1.2vw（デスクトップ）、2.6vw（タブレット）、3vw（電話）
- テキスト行の高さ：1.8em
- テキストの配置：中央
間隔
カスタムの上下マージンを追加して、モジュールの設定を完了します。
- トップマージン：2vw
- 下マージン：6vw
行＃2を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
行設定を開き、次のようにサイズ設定を調整します。
- 幅：32vw（デスクトップ）、50vw（タブレットと電話）
- 最大幅：100％
間隔
間隔の設定も変更します。
- トップマージン：7vw（デスクトップ）、22vw（タブレット）、59vw（電話）
- トップパディング：0vw
- ボトムパディング：0vw
1列目と2列目の設定
デフォルトの背景色
一般的な行の設定が完了したら、各列を個別に開いて、背景色から始めていくつかの変更を加えることができます。
- 背景色：#FFFFFF
背景色にカーソルを合わせる
ホバー時に背景色を変更します。
- 背景色：＃fffa00
国境
いくつかの丸い角も追加します。
- 丸みを帯びた角：20px（すべての角）
デフォルトのボックスシャドウ
ボックスシャドウ設定に移動し、次の変更を適用します。
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0）
ホバーボックスシャドウ
ホバー時に影の色を変更します。
- 影の色：rgba（0,0,0,0.12）
デフォルトの変換スケール
次に、変換スケール設定に移動し、デフォルト値が「100％」のままであることを確認します。
- 右：100％
- 下：100％
ホバー変換スケール
ホバー時に変換スケール値を変更します。
- 右：110％
- 下：110％
列1にテキストモジュールを追加
コンテンツを追加する
行と列の設定が完了したら、選択した段落の内容を含むテキストモジュールを列1に追加します。
リンクを追加
次に、モジュールへのリンクを追加します。
- モジュールリンクURL：＃
- モジュールリンクターゲット：同じウィンドウ内
テキスト設定
モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：Montserrat
- テキストフォントの太さ：太字
- テキストフォントスタイル：大文字
- テキストの色：＃000000
- テキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- テキスト文字の間隔：1px
- テキスト行の高さ：1.8em
- テキストの配置：中央
間隔
次に、間隔の設定に移動し、さまざまな画面サイズにカスタムの上部と下部のパディング値を適用します。
- トップパディング：2vw（デスクトップ）、3vw（タブレット）、4vw（電話）
- 下部のパディング：2vw（デスクトップ）、3vw（タブレット）、4vw（電話）
テキストモジュールのクローンを作成し、列2に複製を配置します
テキストモジュールとそのすべての設定が完了したら、モジュール全体のクローンを作成し、複製を列2に配置できます。
コンテンツの変更
重複するモジュールの内容を必ず変更してください。
リンクを変更
リンクも変更してください。
3.テーマビルダーの変更を保存します
デザインが完了したら、テンプレートのすべての設定を保存できます。 それでおしまい！
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、404ページのテンプレートを設定および作成する方法を紹介しました。 Diviのテーマビルダーと組み込みのデザインオプションを使用すると、カスタマイズされたテンプレートを使用してWebサイトのすべてのページに触れることができます。 すべてのDiviテーマビルダーチュートリアルを楽しんでいただければ幸いです。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。