Elementor を使用して WordPress で素晴らしいコンテンツ タイムラインを作成する

コンテンツ タイムラインは、あらゆるイベントの連続情報を表示するための優れたツールですが、WordPress Web サイトでこのようなタイムラインを作成するには、適切なツールをフル コマンドで使用する必要があります。

コンテンツ タイムラインを構築するために任意の WordPress ツールを選択した場合、そのツールは平均を下回り、安っぽいデザインの外観になる可能性があります。

WordPress でコンテンツのタイムラインを作成する最適な方法を見つけるために、徹底的な分析を行いました。何だと思う？この記事では、Elementor を使用して WordPress でコンテンツ タイムラインを作成する最も簡単な方法をまとめました。

コンテンツのタイムラインを理解する

コンテンツ タイムラインは、情報を時系列形式で表します。これは、視覚的に印象的な方法で情報を共有するためのシンプルですが効果的な方法です。

コンテンツ タイムラインの主な目的は、時間間隔内でイベントのアクションを順番に示すことです。読者は瞬く間により多くの情報を得ることができます。

一般に、コンテンツ タイムラインには、ポイントとその周囲の情報を含む長いバーが含まれています。このバーは垂直にも水平にもなります。どのような方向であっても、タイムライン バーに十分なリソースが含まれていることを確認してください。関連する画像、アイコン、数字、クリック可能なテキスト、またはその他のインタラクティブな要素を使用してバーを改善できます。

コンテンツ タイムラインをどこで使用する必要がありますか?

コンテンツ タイムラインは多目的ツールです。このツールはほぼどこでも使用でき、タスクをスムーズに実行できます。このタイムラインが最も効果的に機能する主要な分野を見てみましょう。

コンテンツのタイムラインを作成する方法

適切なタイムラインを作成するには、時間と労力が必要です。ここでは、タイムラインを作成する簡単なプロセスを示します。

ステップ #1: トピックを分析する

まず、トピックを選択し、そのトピックに関する必要な情報を収集します。タイムラインに表示する情報は徹底的に選択する必要があります。

ステップ #2: タイムラインに名前を付ける

タイムラインの名前を選択するときは注意してください。 「タイムライン名」はタイムラインの目的を表す必要があります。

名前が誰にでも見えるように、タイムラインは常にタイムラインの一番上に配置してください。

ステップ #3: 大まかなタイムラインを描く

この時点で、紙に大まかなタイムライン構造を描きます。いくつかの点とともに水平線または垂直線を描くだけです。すべての点は、プロジェクトの日付またはマイルストーンを示します。

次に、プロジェクトに関するテキストやその他の関連情報を追加します。以上です！

ステップ #4: トピックを完成させる

大まかなスケジュール計画はすでにお手元にあると思います。ここで、少し休憩して、テーマについてもう一度徹底的に調査してください。したがって、ばかげた問題を見つけて修正することができます。

ステップ #5: タイムラインをカスタマイズする

タイムラインをカスタマイズすると、視覚的に美しくなるだけでなく、理解しやすくなります。これを行うために、いくつかのアイコンまたはメディア ファイルを追加できます。

Elementor コンテンツ タイムラインを WordPress ウェブサイトに追加するにはどうすればよいですか?

これで、コンテンツ タイムラインとそのアプリケーション、およびタイムラインの作成プロセスについて明確に理解できました。  

次に、コンテンツ タイムラインを WordPress Web サイトに統合します。では、どうすればできるでしょうか？

わかった！

WordPress でコンテンツ タイムラインを作成するには、主に 2 つの異なる方法があります。下にスクロールして、プロセスの詳細を確認してください。

手動プロセス (困難な方法)

手動プロセスは、Web サイト上にコンテンツ タイムラインを作成する従来の方法です。コンテンツ タイムラインを作成するには、画像または GIF ファイルが必要です。では、どうすればできるでしょうか？

単純！手順に従ってください。

• まずはデジタルで内容を描きます。 Photoshop、Gimp、Paint などの写真編集ソフトウェアを使用してタイムラインを描画できます。プロジェクトが完了したら、画像または gif ファイルを保存します。
• 次に、Web サイト上にページまたは投稿を作成し、そのページに画像/GIF ファイルを配置します。次に、必要なコンテンツを追加して公開します。 

ブーム！以上です。完了です。

このプロセスの欠点:

このプロセスは非常に簡単に見えるかもしれません。でも、まだ冷めないでください！実際の生活では、このプロセスで多くの問題に直面することになります。重大な欠点を以下に示します。

• Web サイト管理ダッシュボードから公開されたタイムラインを更新することはできません。
• インタラクティブなタイムラインを作成することはできません。
• アイコンや画像のカスタマイズは面倒です。

自動プロセス（最も簡単な方法 - ElementsKit pro）

コンテンツのタイムラインを最大限に活用するには、次のようにします。 ElementsKit。これは、WordPress Web サイトでコンテンツ タイムラインを構築するのに便利なプレミアム Elementor アドオンです。

このセクションでは、Elementor コンテンツ タイムラインを数分で作成するプロセスを紹介します。始めましょう。

ウェブサイト管理パネルにアクセスする

手動の方法と同様に、写真編集ソフトウェアでタイムラインを描く必要はありません。Web サイトの管理者パネルのダッシュボードからすべてを実行できます。

管理パネルのダッシュボードにログインするだけです。一般に、ダッシュボードの URL は Yourdomain.com/wp-admin のようになります。

Elementor と ElementsKit をインストールする

管理者ダッシュボードにログインしたら、Elementor をインストールして、 エレメンターアドオン エレメンツキット。タイムラインを自動的に作成するには、これらの両方が必要です。

新規または既存の Web ページを開く

Elementor と ElementsKit をアクティブ化したら、投稿またはページでそれらを使用します。したがって、クリックして新しい投稿を作成します 投稿 > 新規追加.

クリックしてください "表題を加える” をブロックしてタイトルを追加してください。投稿にプレーンテキストや画像を追加することもできます。

エレメンターを起動する

ここで、「」をクリックしてください。Elementorで編集する」と入力すると、Elementor エディタで新しい投稿が開きます。 Elementor エディタは、投稿をより専門的に編集するために使用されます。

ElementsKit タイムラインの起動

「Elementor」パネルを下にスクロールして、「タイムライン」アドオンをリストに追加します。それ以外の場合は、Elementor パネルで「タイムライン」を検索するだけです。

ElementsKit タイムラインの起動

次に、タイムライン ウィジェットを投稿にドラッグ アンド ドロップするだけです。投稿内にサンプル タイムラインが表示されます。

デフォルトでは、タイムライン ポイントは 3 つあります。これらをすべて削除して、独自のタイムラインの作成を開始することもできます。それ以外の場合は、これらの既存のポイントの内容を編集し、必要に応じてポイントを追加することもできます。

次のステップは、コンテンツ タイムラインのテキスト、アイコン、またはスタイルを変更することです。

タイムラインコンテンツのカスタマイズ

「コンテンツ」タブでは、タイムラインスタイル、コンテンツスタイル、タイムラインコンテンツなどをカスタマイズできます。コンテンツタブから複数のオプションを変更できます。これらの主要なオプションを見てみましょう。

1. タイムラインのスタイル

これは、[コンテンツ] タブの最初のセクションです。垂直の Elementor タイムラインまたは水平の Elementor タイムライン スタイルを選択できます。デフォルトでは、垂直スタイルが選択されます。やりたいときにいつでもスタイルを変更できます。

2. コンテンツスタイル

コンテンツ スタイル タブでは、サイドを選択できます。すべてのコンテンツを同じ側または両方に表示できます。

コンテンツ タイムラインの見通しはこれで完了です。このセクションでは、タイムラインのテキスト、画像、またはアイコンを更新する必要があります。

3. タイムラインコンテンツ

タイムラインのコンテンツでは、タイトル、説明、リンク、日付、アドレス、アイコンなどの複数のオプションを変更できます。この機能は、タイトル名をクリックするだけで有効にできます。

初期設定では3つのタイトルが存在します。これらのタイトルは追加または削除できます。タイトルをクリックすると、コンテンツ編集オプションが表示されます。

タイムライン コンテンツ セクションでは、次のオプションを変更できます。

• タイトル
• 字幕
• タイトルリンク
• 説明
• タイトルアイコン
• 日付
• 住所
• 字幕の色
• コンテンツボックスの背景
• アイコンの文字色と
• アイコンの背景
  

4. リピーターアイテムスタイル

このセクションでは、コンテンツの色やテキストとアイコンの背景を変更できます。最も重要なのは、このセクションからホバー スタイルも変更できることです。

開発者に敬意を表します!

5. アニメーション設定

設定オプションでは、日付とアドレスのアイコンとアニメーションを変更できます。この Elementor タイムライン ウィジェットを使用すると、フェード、ズーム、バウンス、スライド、回転、シェイク、ウォブル、ジェロ、ロールインなど、複数のズーム スタイルを選択できます。

タイムラインのコンテンツをカスタマイズする方法は以上です。次に、コンテンツにスタイルを追加します。次のフェーズに従って、スタイルの追加に関する詳細を確認します。

タイムラインのスタイルをカスタマイズする

[スタイル] タブでは、コンテンツ スタイル、線スタイル、コンテナ スタイルをカスタマイズできます。下にスクロールすると、これらの機能の詳細な概要が表示されます。

1. コンテンツタブ:

[コンテンツ] タブでは、コンテンツをカスタマイズする機会が数多く提供されます。たとえば、配置、パディング、内側のパディング、境界線の半径、テキストの色、サブタイトル、タイムラインのスタイルなどを制御できます。

これらの設定はすべて、デスクトップ、タブレット、モバイル バージョンなどのプラットフォームごとにカスタマイズできます。コンテンツ タブの下にある機能を明確に理解するには、以下の画像を確認してください。

それだけでなく！テキストの色、アンカー テキストの色、サブタイトルの色、マージン スペース、タイポグラフィ、丸いアイコンなど、他の複数のオプションを変更することもできます。この丸いアイコンのアイコンと背景色の両方をこのセクションから変更できます。

これまでに、Web サイトのテキストの複数のスタイルを調整しました。ただし、ElementsKit Elementor タイムライン ウィジェットではさらに多くのことができます。

タイムライン バーの色、アイコン サイズ、余白、タイポグラフィ、アドレスなどをシームレスに変更することもできます。

2. ラインタブ

[ライン] タブを使用すると、コンテンツ タイムラインに 4 つのカスタマイズ スタイルを追加できます。これらは -

• ● 線の色 –水平または垂直のElementorタイムラインバーの色を変更します
• ● ピンの色 – ピンの色を変更します
• ● アクティブなピンの色 – アクティブ化されたピンの色の色を変更します
• ● ピンポイントカラー – ピンポイントの色を変更します

3. コンテナタブ

コンテナタブを使用すると、コンテンツの間隔を変更できます。これには、住所または日付の間隔、および項目の下部の間隔の変更が含まれます。

高度なカスタマイズ

Web サイトのカスタマイズは、「コンテンツ」タブと「スタイル」タブを使用するだけで完了できます。ただし、より高度なカスタマイズを行う場合は、[詳細] タブを使用する必要があります。

それでは、[詳細] タブでは何が得られるのでしょうか?

詳細タブでは、ElementsKit の条件、効果、スティッキー要素、モーション効果、応答性、背景の種類、パディング、およびマージンのカスタマイズ機能が利用できます。

これらの機能を一つずつ紹介していきます。

1. ElementsKit の条件

ElementsKit 条件を有効にすることで、条件付き投稿を Web ページに公開できます。ちなみに、条件に基づいて WordPress Elementor スタイルのタブを介して Web ページの特定の部分を表示するように選択できます。ログインステータス、ブラウザ、曜日、時間などに基づいてさまざまな条件を適用できます。

2. ElementsKit エフェクト

ElementsKit の効果機能を使用すると、テキストにインタラクティブな効果を追加できます。 WordPress にインタラクティブなタイムラインを追加できます。 CSS、チルト、オンスクロール、マウス移動の 4 つの異なる効果スタイルを追加できます。

● CSS 効果

CSS 機能を使用すると、Web テキストに CSS アニメーションを追加できます。アニメーションの外観スタイル、アニメーション速度、方向、反復回数を変更できます。

CSS 変形機能を有効にすると、移動、回転、拡大縮小、傾斜オプションなどの 4 つの変形設定を変更できます。何か問題が発生した場合は、[デフォルトに戻る] ボタンをクリックすると、すべてが前の段階に戻ります。

• ● 傾斜効果

チルト効果を有効にすることで、MaxTilt 機能、画像スケール、軸機能などを変更できます。

• ● スクロール効果

ウェブマスターはオンスクロール効果を使用して、視差スタイル、トランジション、滑らかさ、オフセット設定などを変更できます。

• ● マウス移動効果

マウス移動エフェクトを使用すると、エディタ モードで移動速度やアニメーションのオン/オフを制御できます。

3. ● ElementsKit スティッキー

ここでは、Web サイト要素のスティッキーな動きを制御します。スティッキー コンテンツの配置を選択できます。 [上]、[下]、[列]、および [スクロールアップ] オプションから選択できます。レイアウトからスティッキー オフセット、背景色、スティッキー デバイスを微調整できます。

4. モーションエフェクト:

モーション エフェクト機能を使用すると、アニメーションの開始スタイル、長さ、遅延を選択できます。

ElementsKit は、ズーム、フェード、バウンス、回転、スライド、シェイク、ゼリー、ウォブリング、ロールインなどの複数の入口アニメーション スタイルを提供します。

5. 背景効果

詳細タブの背景オプションを使用すると、背景画像を通常スタイルとホバースタイルの両方で変換できます。

「標準」背景セクションでは、クラシック機能またはグラデーション機能のいずれかを変更することを選択できます。クラシック画像機能を使用すると、画像と色の変更スタイルとトランジション速度も有効になります。

一方、グラデーション セクションでは、背景のタイプ、色、位置、角度、ライナーまたは放射状の背景のタイプを変更する機能が提供されます。

これらのアクションはすべて、ホバー オプションでも実行できます。

6. 国境

コンテンツセクションではすでに多くのことを行ってきました。テキストとボックスの境界線を調整しましょう。

実線、二重、点線、破線、溝などのさまざまな枠線の種類を選択できます。境界線の種類を選択したら、半径を選択します。の 更新された ElementsKit 半径スタイルとボックスシャドウも変更できます。

これらの機能はすべて、「ホバー」セクションでも利用できます。ちなみに、ホバータブで「トランジション期間」を変更することもできます。

7. 位置決め

主に、コンテンツの「幅」と「位置」を変更できます。

幅セクションでは、デフォルトの幅を維持することも、全幅、インライン、自動、またはカスタム セクションに変更することもできます。垂直方向の配置も選択できます。

その後、位置セクションを微調整します。デフォルトのオプションではなく、「絶対」または「固定」オプションを変更できます。どちらを選択しても、サブセクションは同様になります。

たとえば、ピクセル単位でオフセットを変更すると、水平方向と垂直方向を取得できます。

注意： よほど必要な場合を除き、カスタム位置設定機能を使用しないでください。サイトの応答性に影響を与えるためです。使用する場合でも、あまり頻繁に使用しないようにしてください。

8. レスポンシブ

レスポンシブ タブを使用すると、要素の外観を選択できます。デスクトップ、タブレット、モバイルセクションなど、すべてのプラットフォームで設定を変更できます。

9. カスタムCSS

名前が示すように、この機能を使用して投稿にカスタム CSS を挿入できます。ただし、次のものが必要になります。 ElementsKit Pro バージョン カスタム CSS または属性を Web ページに挿入します。

ElementsKit – Elementor ページ ビルダー用のオールインワン アドオンの「コンテンツ タイムライン」ウィジェットで得られるのはこれだけです。

ElementsKit のコンテンツ タイムラインを使用する必要があるのはなぜですか?

わかりました。前のセクションですべての機能を確認できたと思います。では、ElementsKit を使用するべきか、それとも従来のペンと紙を使った方法に固執すべきでしょうか?

まあ、ElementsKitのContent Timelineを使うしかないと思います。この製品を使用する主な理由に焦点を当ててみましょう。

• 使いやすい

ElementsKit を使用してコンテンツ タイムラインを作成するには、コーディングやデザインのスキルは必要ありません。したがって、完全にユーザーフレンドリーになります。

• 時間の節約

新しいタイムラインを作成して手動でカスタマイズするのは、時間のかかるプロセスです。この多目的プラグインを使用すると、数分以内にタイムラインを作成またはカスタマイズできるようになります。

• 組み込みのレイアウト

ElementsKit には複数の組み込みタイムライン スタイルがあります。緊急事態に陥っていてタイムラインを設計する時間がない場合は、当社が対応します。これらの組み込みレイアウトの 1 つを選択し、テキストをカスタマイズして公開するだけです。

• 高度な調整

タイムライン モジュールを使用すると、高度な調整を行って、Web サイトに簡単で目を引くタイムラインを作成できます。高度な調整機能については、「高度なカスタマイズ」セクションですでに説明しました。

• 高速かつ応答性が高い

ElementsKit のタイムライン モジュールは非常に軽量で、読み込みが高速です。レスポンシブな製品なので、画面サイズに関してはどのデバイスにもフィットします。

コンテンツのタイムラインに追加するもの

タイムラインを作成することは大したことではありません。しかし、リソースが豊富で目を引くタイムラインを構築するのは、非常に創造的な作業です。

次のオプションを追加すると、タイムラインがよりリソース豊かになり、すべてのクエリを満たすようになります。タイムラインに含まれる可能性のあるオプションを簡単に見てみましょう。

• 日付

日付のないタイムラインを想像できますか?

いいえ！

そのため、コンテンツのタイムラインに適切な日付を追加する必要があります。そうしないと、単なる時間の無駄になってしまいます。日付のないタイムラインは視聴者にとって何の価値もありません。

• 関連する見出し

タイムラインに名前を付けることを忘れないでください。適切な見出しを付けると、ユーザーはタイムラインの目的をすぐに理解できます。

• グラフィカルアイコン

印象的なイラスト画像、アイコン、その他のグラフィック要素を使用すると、タイムラインが鮮やかで非常に魅力的なものになります。

• デザイン

タイムラインのプレゼンテーションに合わせて、目を引くデザインを選択してください。明瞭さが増し、認識が単純化されます。

• 簡単な説明

短い説明により、ユーザーはタイムライン プロジェクトのマイルストーンを理解できます。

最後の言葉

コンテンツのタイムラインは、プロジェクトのマイルストーンを表すのに最適な要素です。長い期間を扱っていますが、過度な説明で乱雑にしないでください。代わりに、画像や短い説明などを使用して、簡潔にするように努めてください。

この Elementor タイムライン ウィジェットは、ユーザーが手間をかけずにタイムラインを作成およびカスタマイズするのに非常に役立ちます。

Elementor コンテンツのタイムラインについてまだ疑問がある場合は、コメント セクションに質問を投稿してください。できるだけ早くご質問にお答えします。

WordPress サイトでコンテンツ タイムラインの作成を始めましょう。