Elementorを使用してWordPressでポートフォリオページを作成する方法

ポートフォリオページは、オンラインで作業を紹介する最良の方法の1つです。このページは、個人だけでなく、組織や機関にとっても重要です。このページでは、誰でも魅惑的な方法で完了したプロジェクトを強調して、より多くの顧客やクライアントを引き付けることができます。

ポートフォリオサイトを持つことは、あなたが著名な従業員であろうと雇用市場の新鮮であろうと、この現代世界で一般的な標準となっています。このように、世界中のクライアントはあなたを見つけ、あなたとつながり、新しいプロジェクトを提供することができます。したがって、それはあなたに無限の機会を開くことができます。

WordPressとElementorを使用すると、ポートフォリオWebページを作成するのはとても簡単です。コーディングせずにドラッグアンドドロップだけでできるからです。このチュートリアルの投稿では、WordPressでElementorを使用してポートフォリオページを作成する方法について説明します。始めましょう！

ポートフォリオのWebページとは何ですか？

ポートフォリオのWebページは、仕事、スキル、成果を表示できる専用のページです。それはデジタルショーケースのように振る舞い、訪問者があなたができること、そしてあなたが過去に何をしたかを見ることができるようにします。画像、ビデオ、ケーススタディ、証言、および能力を証明するその他のコンテンツを含めることができます。

ポートフォリオのウェブサイトは、デザイナー、写真家、作家、開発者、アーティストなどのクリエイティブな専門家の間で人気があります。ポートフォリオのウェブサイトの主な目標は、潜在的なクライアントまたは雇用主を感動させ、あなたを雇うか、あなたと協力することを奨励することです。

ポートフォリオのウェブサイトとポートフォリオのウェブページの違い

多くの人々は、ポートフォリオのウェブサイトとポートフォリオのWebページの間で混乱しています。それらは似ているように聞こえますが、彼らがあなたの作品をオンラインで提示する方法が異なります。これらの違いを理解することは、オンラインプレゼンスを構築する際にどのようなニーズに合ったかを決定するのに役立ちます。

WordPressでElementorを使用してポートフォリオWebサイトを作成する方法を確認してください。

ポートフォリオのWebページには要素があります

通常、ポートフォリオページには完全なWebサイトよりもコンテンツが少ないことがわかっているように、作品を明確に示す最も重要な部分に焦点を当てる必要があります。以下は、ポートフォリオのWebページに表示することを検討することです。

1.簡単な紹介

あなたが誰であり、あなたがどんな仕事をしているのかを示す簡単な紹介。これにより、訪問者は長いバイオを読むことなく、すぐにあなたとつながることができます。

2。ポートフォリオギャラリー

これは、プロジェクトを表示するためのメインセクションです。短いタイトルまたは説明のあるクリア画像またはビデオを使用します。訪問者があなたの最高のスキルを簡単に見ることができるように、あなたの仕事をうまく整理してください。 Elementor Image Galleryの使用方法を学びます。

3。情報またはボタンの連絡先

フォームやメールにリンクする電子メールアドレス、電話番号、または連絡先ボタンなど、人々が連絡する簡単な方法を追加します。

4。行動を促す（CTA）

次に何をすべきかについて訪問者を導きます。それがあなたを雇っているか、詳細を求めているか、より多くの仕事を見るかに関わらず、明確なCTAは訪問者をクライアントに変えるのに役立ちます。

Elementorを使用してWordPressでポートフォリオページを作成する方法：ステップバイステップガイド

ポートフォリオページはWebサイトの一部であることを忘れないでください。すでに述べたように、ポートフォリオページは任意のWebサイト用に作成できます。したがって、ポートフォリオページを設計したい場合は、ウェブサイトの他のページを設計または変更する必要性を感じることがよくあります。これで、Elementorを使用してポートフォリオページを設計するには、次のプラグインが必要になります。

• Elementor
• Elementor Pro
• HappyAddons
• HappyAddons Pro

HappyAddonsは、Elementorプラグインの有名なアドオンです。 130以上の追加ウィジェットと数十の強力な機能が搭載されており、Elementorプラグインの制限を克服し、Webサイトのデザインを強化できます。どちらもあなたのサイトに無制限の可能性を生み出すことができます。

これらのプラグインがサイトにインストールされ、アクティブ化されたら、以下で説明する手順に従ってください。

ステップ01：ポートフォリオページに表示する要素を決定する

設計を開始する前に、ポートフォリオページに何を含めたいかを決定することが重要です。このページはきれいで集中する必要があるため、作業を効果的に強調する最も重要な要素のみを選択する必要があります。私たちはすでにページに何を含めるかをあなたに話しました。

• 簡単な紹介
• ポートフォリオギャラリー
• 連絡先情報またはボタン
• 行動を促す

ステップ02：Elementor Canvasでページを開きます

次に、Elementor Canvasのページを開きます。ここでは、要素をドラッグアンドドロップして、適切なコンテンツを追加する必要があります。

注：上部に表示されるテーマビルダーを備えたヘッダーをすでに作成しました。

ステップ03：簡単な説明を追加します

コンテンツが必要とする可能性のある幅に基づいて、キャンバスの適切な列サイズを選択します。単一列容器を選択しています。

コンテナの設計をヘッダーに合わせるために、その背景色を変更します。これを行うには、コンテナの上にある6倍のアイコンを押し、 [スタイル]タブに移動し、背景セクションの下の色オプションをクリックします。

次に、コンテナの色を選択します。

希望の色がコンテナの背景に適用されたら、容器に見出しウィジェットを見つけて追加します。

このウィジェットは、タイトルを書くか、ページに向かっているスペースを作成します。それをしてください。

「私の過去のプロジェクトに触発されている」というページのタイトルを書いたことがわかります。スタイルタブから、そのサイズ、タイポグラフィ、色、その他多くのオプションを様式化できます。

以下に添付されている画像に示すように、見出しウィジェットの下にテキストエディターウィジェットを追加します。これにより、簡単な説明を書くことができます。

同様に、ポートフォリオページに説明を追加し、テキストの適切なアラインメント、タイポグラフィ、および色を設定しました。

ステップ04：ページにボタンを追加します

CTAボタンを使用すると、ユーザーをプッシュして、必要な他のページにアクセスできます。そのため、ポートフォリオセクションを作成する前にボタンを追加することをお勧めします。

[コンテンツ]タブから、ボタンに目的のコピーを追加できます。

パディングを追加します

ボタンの後、ユーザーに信頼性の雰囲気を与える短いテキストを追加しました。

ステップ05：ポートフォリオセクションを作成します

次に、タスクを視覚的に紹介するポートフォリオセクションを作成する時が来ました。これを行うには、最初に最初のセクションの下に新しいコンテナを追加します。

タブウィジェットをポートフォリオセクションに追加します。このウィジェットを使用すると、無制限のタブを作成し、各タブに適切なウィジェットを追加できるようにして、必要なコンテンツを個別に表示できるようにします。

＃タブに名前を付けます

各タブは、カテゴリとして機能するはずです。したがって、名前を変更する必要があります。

タブの名前を変更するには、ウィジェットを選択し、 [コンテンツ]タブに移動し、必要なタブを開き、タイトルの下にタブの名前を書きます。

同様に、すべてのタブに名前を追加します。次に、必要に応じて、 [タブの追加]ボタンをクリックして、ポートフォリオセクションにタブを追加できます。

＃タブウィジェットを様式化します

これで、スタイルタブから、タブに背景色を追加し、タイポグラフィを変更し、境界色の色を追加するなどします。これらの必要なカスタマイズを自分で行います。

ステップ06：タブにコンテンツの追加を開始します

デフォルトのElementor Canvasと同様に、各タブに同様のインターフェイスを取得して、ウィジェットを追加してそれぞれのコンテンツを表示します。プラス（+）アイコンをクリックします。

ポートフォリオセクションの適切な列構造を選択します。 3列ではあるが6コンテナー構造を選択しています。次に、目的のコンテンツを表示できるウィジェットを追加できます。

＃ポートフォリオコンテンツを表示します

たとえば、コンテンツレイアウトを作成するために、画像、見出し、およびテキストエディターウィジェットをコンテナに連続的に追加しました。

これらのウィジェットを使用して、ポートフォリオアイテムを視覚的に表示し、必要なだけテキストコンテンツを添付できます。

コンテナにコンテンツを追加したことがわかります。その後、見出しと説明の色を設定しました。また、ウィジェットとコンテナの境界線に半径を追加しました。あなたがこれらを自分で行うことができることを願っています。

同様に、ポートフォリオコンテンツをすべてのコンテナに追加します。

注：しかし、このコンテンツはすべてとても乱雑に見えるかもしれませんよね？それは彼らが間にスペースがないからです。

＃ポートフォリオページにコンテナ間のスペースを追加します

それらの間にスペースを追加するには、マザーコンテナを選択し、コンテンツタブに移動し、 GAPSオプションにアクセスし、値を入力してコンテナ間にスペースを追加します。

以下に添付されている画像の違いを確認できます。

ステップ07：他のタブにコンテンツを追加します

すべてのタブが同じコンテンツレイアウトに従う必要があるわけではありません。必須ではありません。さまざまなタブに対して異なるレイアウトを作成できます。

たとえば、ギャラリーウィジェットを2番目のタブに追加します。このウィジェットを使用すると、ポートフォリオアイテムを視覚的にのみ表示できます。テキスト情報を表示することはできません。

ギャラリーに画像を追加したことがわかります。

[コンテンツ]タブを少し下にスクロールすることで、画像順序、列番号、間隔、ギャラリータイプ、画像解像度をカスタマイズするオプションが表示されます。

同様に、残りのタブにコンテンツを追加します。したがって、ポートフォリオセクションの作成を完了できます。

ステップ08：ページの最後にフォームを追加（オプション）

したがって、ポートフォリオセクションの準備が整いました。ここでページを終了するか、連絡先フォーム、行動への呼び出しなど、いくつかの要素を追加することもできます。

ページの最後に連絡先フォームを追加したことがわかります。 Elementorで連絡先ページを作成する方法を学びます。

ステップ09：ポートフォリオページをプレビューします

すべてが完了したら、ポートフォリオページにアクセスして、すべてがうまく機能するかどうかを確認します。そのタブウィジェットの下に添付されている短いビデオクリップでは、メインポートフォリオセクションが完璧に機能していることを意味します。それがあなたの側でもうまく機能することを願っています。

したがって、ElementorとHappyAddonsプラグインを使用して、WordPressサイトにポートフォリオページを作成できます。

最後の言葉！

このチュートリアルでは、基本的なポートフォリオページのデモを提示しました。明らかに、それがあなたの番になるとき、あなたは間違いなく包括的でコンテンツが豊富なポートフォリオページを作成しようとします。しかし、ブログ/チュートリアルの投稿ですべてを提示することは決して簡単ではないことを理解できることを願っています。

ポートフォリオページを作成するためにツールとそれらを使用する方法を紹介したかっただけです。私たちはあなたが自分で残りをすることができると確信しています。ただし、Elementor、HappyAddon、およびWebサイトのデザインに関する提案やアドバイスが必要な場合は、以下のコメントボックスに記載することができます。

または、チャットをすることができます。私たちのサポートチームはすぐにあなたに戻ってきます。最後まで私たちと一緒にいてくれてありがとう。良い一日を！