Diviでレスポンシブアイコンナビゲーションホームページを作成する方法
公開: 2019-03-07WordPressを使用してWebサイトを構築している場合、ユーザーがWebサイトに直接アクセスしたときに最初に表示されるページをいつでも選択できます。 ほとんどのWebサイト作成者は、訪問者をすぐにホームページに送ります。 ただし、ホームページとしてアイコンナビゲーションページを追加することで、訪問者がWebサイトのどのページに最初にアクセスするかを選択できる別のアプローチを選択することもできます。 選択したページにクリックスルーすると、ページ上部にメニューバーが表示され、他のページに移動できる通常のWebサイトエクスペリエンスが再び得られます。 つまり、最初の操作の後でこのアイコンナビゲーションページを通過した後は、このアイコンナビゲーションページに戻る必要はありません。
このチュートリアルでは、すべての画面サイズで見栄えのする、最新の100％レスポンシブアイコンナビゲーションホームページを作成する方法を紹介します。 また、これをWebサイトのホームページにし、最初の操作でプライマリメニューバーとフッターを削除するのを支援します。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
新しいページを作成する
私たちのYoutubeチャンネルを購読する
新しいページを追加
WordPressWebサイトに新しいページを追加することから始めます。
ページにタイトルを付けて公開する
ページにタイトルを付けて、すぐにページを公開してください。
ページをホームページとして設定
ウェブサイトの閲覧設定に移動
次に、Webサイトの読み取り設定に移動します。
新しいページをホームページとして設定
ここでは、新しいアイコンナビゲーションページをWebサイトのホームページとして選択します。
アイコンナビゲーションページでプライマリメニューバーとフッターを非表示にする
アイコンナビゲーションページに戻り、Diviのビジュアルビルダーを有効にする
ホームページを選択したので、アイコンナビゲーションページの作成を開始できます。 作成したページに戻り、DiviのVisualBuilderに切り替えます。
そうすると、3つの可能性が得られます。 ゼロから構築を開始したり、事前に作成されたレイアウトを選択したり、既存のページのクローンを作成したりできます。 最初のオプションを選択します。
カスタムCSSを追加して、このページでのみプライマリメニューバーとフッターを非表示にします
これはナビゲーションページであるため、手動で作成したメニュー項目に焦点を当てたいと思います。 そのため、このページではプライマリメニューバーとフッターを非表示にします。 人々がウェブサイトにアクセスし続けると、彼らはメインメニューバーとフッターを取り戻します。
#main-header, #main-footer {
display: none;}
デザインを始めましょう！
セクション＃1を追加
Diviでレスポンシブデザインの作成を始めましょう！ 最初の通常のセクションを追加します。
行を追加する
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定で[この行を全幅にする]オプションを有効にします。
- この行を全幅にする：はい
画像モジュールの追加
会社のロゴをアップロードする
この行で必要な最初のモジュールは画像モジュールです。 会社のロゴをアップロードして、正しいWebサイトにアクセスしたことを人々に知らせます。
配置
次に、デザインタブで画像の配置を変更します。 [モバイルでは常に画像を中央揃えにする]オプションを必ず無効にしてください。
- 画像の配置：左
間隔
次に、カスタムの下マージンを追加します。
- 下：10vw（デスクトップ）、20vw（タブレットと電話）
テキストモジュールを追加
H1コンテンツを追加する
次に必要なモジュールはテキストモジュールです。 選択したH1コンテンツをいくつか追加します。
H1テキスト設定
デザインタブでH1テキスト設定を変更して続行します。
- 見出しフォント：Didact Gothic
- 見出しフォントの太さ：太字
- 見出しテキストの配置：左
- 見出しのテキストの色：＃333333
- 見出しのテキストサイズ：5vw（デスクトップ）、6vw（タブレット）、7vw（電話）
- 見出し線の高さ：0.8em
サイジング
次に、サイズ設定を変更します。
- 幅：68％（デスクトップ）、80％（タブレット）、88％（電話）
- モジュールの配置：左
仕切りモジュールを追加
可視性
この行で必要な次の最後のモジュールは、Dividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
色
次に、[デザイン]タブに移動し、アイコンの色を変更します。
- 色：＃333333
サイジング
モジュールのサイズ設定も変更します。
- 仕切りの重量：10px
- 幅：8％（デスクトップ）、20％（タブレット）、25％（電話）
- モジュールの配置：左
セクション＃1を追加
次のセクションに進みましょう！ 前のセクションの下に通常のセクションを追加します。
行を追加する
カラム構造
セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
次に、間隔の設定に移動し、さまざまな画面サイズでいくつかの変更を加えます。
- ボトムパディング：0.2vw
- 左パディング：4vw（デスクトップ）、2vw（タブレット）、1vw（電話）
- 右パディング：25vw（デスクトップ）、2vw（タブレット）、1vw（電話）
- 列1の右パディング：0.2vw
- 列2左パディング：0.1vw
- 列2右パディング：0.1vw
- 列3左パディング：0.2vw
カスタムCSS
[詳細設定]タブのメイン要素に1行のCSSコードを追加することで、タブレットと電話であっても、すべての列が隣り合って表示されるようにしています。
display: flex;
列1に宣伝文モジュールを追加する
表題を加える
これで、モジュールの追加を開始できます。 新しい宣伝文モジュールを最初の列に追加し、タイトルを入力します。
アイコンを選択
次に、お好みのアイコンを選択します。
リンク
モジュールへのリンクも追加します。 訪問者が訪問したいページを参照できる正しいURLを使用していることを確認してください。
- モジュールリンクURL：https：//www.yourwebsite.com/homepage
グラデーションの背景
次にグラデーションの背景を追加します。
- 色1：＃4b42ff
- 色2：rgba（255,255,255,0）
- グラデーションタイプ：ラジアル
- 半径方向：中心
- 開始位置：60％
- 終了位置：60％
背景画像
背景画像と一緒に。 次の画像をデスクトップに保存します。
また、次の背景設定と組み合わせて使用してください。
- 背景画像の位置：中央
- 背景画像の繰り返し：繰り返しなし
アイコン設定
デザインタブのアイコン設定を変更して続行します。
- アイコンの色：#ffffff
- アイコンの配置：上
- アイコンのフォントサイズを使用：はい
- アイコンのフォントサイズ：4vw（デスクトップ）、6vw（タブレット）、8vw（電話）
タイトルテキスト設定
タイトルテキストの設定も変更します。
- タイトルフォント：Didact Gothic
- タイトルテキストの配置：中央
- タイトルテキストの色：#ffffff
- タイトルテキストサイズ：2vw（デスクトップ）、3vw（タブレット）、4vw（電話）
- タイトル文字の間隔：-2px
- タイトル行の高さ：0em
間隔
また、さまざまな画面サイズに合わせて、カスタムの上部と下部のパディング値を追加します。
- トップパディング：9vw（デスクトップとタブレット）、12vw（電話）
- 下部のパディング：9vw（デスクトップとタブレット）、12vw（電話）
宣伝文句モジュールを2回クローンし、残りの列に複製を配置します
列1の宣伝文句モジュールの変更が完了したら、先に進んでモジュールのクローンを2回作成できます。 行の残りの列に重複を配置します。
宣伝文の内容を変更する
もちろん、各複製のタイトルを変更する必要があります。
宣伝文のアイコンを変更する
アイコンと一緒に。
宣伝文のリンクを変更する
新しい宣伝文モジュールを、正しいページにつながる一意のURLと一致させます。
- モジュールリンクURL：https：//www.yourwebsite.com/about
宣伝文のグラデーションの背景を変更する
次に、両方の複製のグラデーション背景の最初の色を変更します。
- 色1：＃f9f9f9
- 色1：＃ff445d
列2の宣伝文モジュールのアイコンとテキストの色を変更する
そして、宣伝文句モジュールのアイコンとテキストの色を新しいグラデーションの背景色と一致させます。
- アイコンの色：＃000000
- タイトルテキストの色：＃000000
行全体のクローンを作成する
行が完成したら、完全に複製できます。
列2の宣伝文句モジュールのクローン
列2の宣伝文モジュールのクローンを作成します。
ライトバックグラウンド宣伝文モジュールを列1と列3に配置します
そして、明るい背景の宣伝文句モジュールを列1と3に配置します。
カラーバックグラウンド宣伝文モジュールを列2に配置します
色の背景の宣伝文句モジュールの1つを2番目の列に移動します。
残りの宣伝文句モジュールを削除する
そして残りの宣伝文句モジュールを削除します。
宣伝文の内容を変更する
繰り返しになりますが、各宣伝文モジュールのタイトルを変更する必要があります。
宣伝文のアイコンを変更する
アイコンと一緒に。
宣伝文のリンクを変更する
そしてリンクも。
- モジュールリンクURL：https：//www.yourwebsite.com/shop
列2の宣伝文句モジュールのグラデーション背景を変更します
最後になりましたが、列2の宣伝文モジュールのグラデーション背景の最初の色を変更します。
- 色1：＃000000
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
最終的な考え
この投稿では、アイコンナビゲーションページを作成してホームページとして使用する方法を紹介しました。 このアプローチにより、訪問者はWebサイトのコンテンツを表示する前に、ナビゲートするページを選択できます。 誰かがメニュー項目をクリックすると、プライマリメニューバーを介した通常のナビゲーションが再び体験されます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！