About ページを適切にデザインすることは、オンライン ビジネスの全体的なイメージに大きな影響を与えます。

しかし問題が…

正直に言うと、WordPress が提供する標準的なすぐに使えるページの外観は、目的がインパクトである場合には役に立ちません。基本的にそこで得られるのは、ページの本文に 1 つのメイン コンテンツ ブロックを含む、単なるクラシックなページ レイアウトです (使用しているテーマには関係ありません)。

もっと良くできるよ！そして、ご想像のとおり、次のように実行します。

• あなたのお気に入りのページビルダー (そして私たちのページビルダーも)、
• 無料の Hestia テーマ (Hestia は Beaver Builder との互換性を念頭に置いて構築されていますが、この方法はどの高品質のテーマでも機能するはずです)。

このガイドでは、優れたマテリアル デザインの About ページを構築する方法を段階的に説明します。私たちが目指す最終的な効果は次のとおりです。

このようなページの作成は、一見したよりもはるかに簡単です。手順は次のとおりです。

優れた自己紹介ページに必要なもの

About ページを作成するときは、いくつかの重要な目的を達成することを目指す必要があります。

• 訪問者にあなたのビジネス/ブランドを紹介し、
• 自分のストーリーを語って、
• ビジネスの内容を簡単に要約し、
• 人気の製品やコンテンツを紹介し、
• あなたについてもっと知ることができる場所を人々に伝えてください。

すべてが適切な位置に収まる様子は次のとおりです。

まずは、Beaver Builder と Hestia テーマを入手してください

まだお持ちでない場合は、ここをクリックして Beaver Builder を入手してください。無料版 (ここから) を使用することもできますが、これにより、About ページに配置できるコンテンツ ブロックの種類が制限されます。

Hestia は無料のテーマで、ここからダウンロードできます (または WordPress ダッシュボードから直接見つけます)。

では、なぜヘスティアなのでしょうか？完全に開示すると、私はテーマを構築した会社で働いています。これが、Hestia が Beaver Builder と非常にうまく統合されていることを私が知っている理由でもあり (実際にはページ ビルダーを念頭に置いて作成されています)、また Beaver Themer によって公式にサポートされている数少ないテーマの 1 つでもあります。

注記。先ほども述べたように、この方法は Hestia に限定されたものではなく、他のテーマの 90%、少なくとも高品質のテーマ(ウインク!)にも同様に機能するはずです。

Beaver Builder (プロまたは無料) と Hestia をサイトにインストールすると、実際のページの作成を開始できます。

空白の概要ページを作成する

WordPress をしばらく使用している場合、最初の手順は驚くべきことではありません。

まずは通常通りに新しいページを作成します。

Beaver-Builder に最適化されたエクスペリエンスを完全に得られるようにするには、ページ テンプレートを「Page Builder 全幅」に切り替えます。下書きを保存します。

これにより、テーマのデフォルトのスタイルの大部分が削除され、ヘッダーとフッターのみが残ります。

今度は、Beaver Builder を起動します。

メイン見出しとウェルカムブロックを作成する

まず、ページの上部に「About Us」を配置することをお勧めします。

新しい1 列の行を作成してこれを実行しましょう。

見栄えをよくするために、固定コンテンツ幅で全幅に設定しましょう。同様に:

見栄えの良い画像を背景にも配置しましょう。

見た目をより均一にするために、背景オーバーレイを追加しましょう。色はあなた次第で、あなたのブランドの公式色に合わせてください。

通常は、不透明度を80% ～ 90%に設定するのが最適です。

この行について最後にもう 1 つ注意してください。タブを[スタイル]から[詳細]に切り替えて、上マージンを調整しましょう。 Hestia テーマの場合、新しいブロックを上部のメニュー バーからずっと広げたい場合は、上部マージンを-50px程度に設定する必要があります。行の高さを少し高くするには、上部と下部のパディング値を設定することもできます。

次に、実際の見出しブロックを行に追加しましょう。ここに「About Us」を入力するとよいでしょう。さらに視認性を高めるために、テキストの色を白に設定しましょう。

メイン ページの見出しが完成したら、ウェルカム ブロックを追加しましょう。

そのために、もう1 列の行を追加します。今回は幅をFixedに設定してみましょう。

その行内に 2 つのモジュールを追加しましょう。

• 見出し– ウェルカム メッセージのタイトル
• テキストエディタ– 実際のメッセージ用

Hestia と Beaver Builder の統合の優れた点は、見栄えを良くするためにこれらのモジュールの設定を調整する必要がないことです。必要なのは、コピーを追加することだけです。私がここでやったように：

あなたの製品やサービスについて何か伝えてください

あなたのビジネスが何であるかを人々に伝える時が来ました。これには通常、製品やサービスを紹介したり、一般的になぜあなたと取引する必要があるのか​​を人々に伝えたりすることが含まれます。

そのための一般的な方法は、3 つのビジュアル コンテンツ ブロックを並べて配置することです。次のようなもの:

この効果を得るには、新しい行を追加することから始めますが、今回は3 列の行です。

すべてを読みやすくするには、行全体の幅を広げることもお勧めします。私の場合は固定幅1100pxがちょうど良いようです。

次に、個々の列の入力を開始しましょう。私が使用した正確なモジュールは次のとおりです。

• 写真
• 見出し
• テキストエディタ

各モジュールの設定はほぼデフォルトです。見栄えを良くするために、あまり調整する必要はありません。そしてもちろん、それらのブロックにどのような画像やコピーを入れるかはあなた次第です。

それが最初のコラムです。他の 2 つを作成する最も簡単な方法は、実際に各モジュールを複製し、所定の位置にドラッグ アンド ドロップすることです。同様に:

あなたのストーリーを語ってください

これは私たちが作成している About ページであるため、ページ上に別のセクションを設けて、ビジネスがどのように始まったのか、チームのメンバーなどのストーリーを伝えることをお勧めします。

ページ全体のデザインの一貫性を保つために、最初の行、つまりページの主要な見出しが含まれる行を再利用できます。

ページの一番上までスクロールして、最初の行を複製するだけです。次に、必要な場所までドラッグします。同様に:

ここで見出しを編集して、「About」から「Our Story」などの意味のあるものに変更できます。

センスをさらに高めるために、見出しのすぐ下にセパレーターを置くのも好きです。

私が変更する唯一の設定は次のとおりです。

• 色–白 (#ffffff)
• 高さ–4px
• 幅-カスタム
• カスタム幅– 10%

これらにより、上でご覧のような効果が得られます。

私のストーリー セクションを構成する最後の 2 つのモジュールは、単純なテキスト エディター(実際のストーリー用。テキストの色は白に変更) とボタン(行動喚起用) です。

完全なブロックは次のとおりです。

人気のコンテンツを紹介する

About ページは、トップコンテンツの一部を宣伝するのに最適な場所です。結局のところ、訪問者はクリックスルーして概要ページを見ることを決めているので、サイトの背後にいるのが誰であるかに非常に関心があり、興味を持っていることがわかります。したがって、彼らはおそらくあなたのコンテンツ、特に最高のコンテンツをさらに見ることに興味を持つでしょう。

それを示すために、Beaver Builder のクールなトリックを実行できます。

まず、新しいブラウザタブでメインの WordPress ダッシュボードを再度開き、 [投稿]に移動します。投稿に新しいカテゴリを作成し、 「注目」または「ベスト」という名前を付けます。公開済みの投稿を確認し、最も優れていると思われる投稿を 3 ～ 6 つ選択します。それらを新しいカテゴリに追加します。

ビーバービルダーに戻ります。新しい1 列の行を作成します。まず、そこに新しい見出しと区切り文字を追加します。

見出しはデフォルト設定で、セパレータは再び4pxの高さと10%のカスタム幅に設定されます。今回はセパレーターの色を黒( #000000)に設定します。

ここで最も重要な部分は、 Postsというモジュールを通じて実際の投稿を追加することです。

このモジュールは本当に賢いです。投稿のレイアウトの選択、投稿の注目の画像を表示するかどうかの決定、表示する投稿の数の設定、実際の投稿のフィルターなどを行うことができます。

私のページの最終的な効果は次のとおりです。

私が行った設定。 「レイアウト」タブから始めます。

• レイアウト→石積み
• 等しい高さ→はい
• ポストの配置→中央
• 画像→表示
• 画像サイズ→ヘスティアブログ
• 著者→非表示
• 日付→非表示
• コメント→非表示
• コンテンツ→非表示

「スタイル」タブ:

• ポストボーダータイプ→なし

「コンテンツ」タブ:

• フィルター→カテゴリ→「注目」(これにより、そのカテゴリに割り当てられた投稿のみが表示されます)

「ページネーション」タブ:

• ページネーションスタイル→なし
• ページあたりの投稿数→6

上記の設定の多く (特に最後のページネーションタブ) は、紹介したい投稿の数と魅力的な画像があるかどうかに基づいて、あなた次第です。

ソーシャルメディアであなたをフォローするよう人々に奨励する

最後に、ページ全体を締めくくるために、訪問者にソーシャル メディアでフォローするよう促しましょう。それを実現するために、先ほど作業した「ストーリー」ブロックを再利用しましょう。

まず、「ストーリー」行全体を複製し、一番下までドラッグします。

次に、見出しのコピーをソーシャルメディア関連のものに変更し、元のテキスト エディターとボタンモジュールも削除します。

代わりに、新しいモジュールIcon Groupを追加しましょう。これは、いくつかの個別のソーシャル メディア アイコンを紹介し、プロフィールにリンクできるため、この仕事に最適です。

まずはモジュール全体の設定から始めましょう。特に、 「スタイル」タブに切り替えて以下を設定しましょう。

ほとんどの設定と同様、これは個人の好みによって決まりますが、上記の値はブロック全体の良好な明瞭さと読みやすさを保証するようです。

[アイコン]タブに戻りましょう。ここで個々のアイコンを追加できます。

これを行うには、 [アイコンの編集]をクリックしてから、 [アイコンの選択] をクリックします。表示されるのは、選択できるアイコンがたくさんある、検索可能なパネルです。まず必要なのはFacebookアイコンです。

アイコンを選択した後、自分の特定のソーシャル メディア プロフィールを指すようにLinkパラメーターを設定することを忘れないでください。

最後に、 [スタイル]タブに切り替えて、アイコンのさまざまな色の設定を調整して、すべてが収まるようにします。

完了したら、 「保存」をクリックします。

ここで複数のアイコンを追加するには、 [アイコンの追加]をクリックしてこのプロセスを繰り返します。結局、 Facebook、Twitter、 YouTubeの 3 つのアイコンを使用することになりました。

最終的な効果は次のとおりです。

終わり！

この時点で、マテリアル デザインの About ページが完成しました。

ここにもその栄光のすべてが詰まっています。

もう 1 つの利点は、そのページを他の目的にも再利用できることです。いくつかの小さな調整を加えることで、製品のランディング ページやホームページとして使用することもできます。

カロル K について

Karol K. は、WordPress の著名人、ブロガーであり、『WordPress Complete』の著者でもあります。