ElementorとWordPressでタイムラインを作成する方法

タイムラインは、イベント、マイルストーン、または時系列のステップを表示する視覚的な方法を提供します。彼らは、訪問者やユーザーが一連のイベントやプロセスを理解しやすくする線形フローで情報を提示するのに役立ちます。それらを使用して、会社の旅、プロジェクトのロードマップ、または明確に個人的なストーリーを紹介できます。

WordPressにタイムラインを追加すると、コンテンツをより魅力的で簡単にフォローしやすくすることで、ユーザーエクスペリエンスを向上させることができます。これが、タイムラインを使用することが多くのウェブサイトでトレンドになった理由です。 Elementorは非常にユーザーフレンドリーなプラグインであるため、WordPressの投稿やページにタイムラインを作成して追加するために使用できます。

この記事では、WordPressでElementorを使用してタイムラインを作成する方法に関する段階的なガイドを紹介します。その前に、今日のトピックに関するいくつかの理論的な部分をカバーします。

タイムラインの種類とそのユースケース

タイムラインには、水平と垂直の2種類があります。それぞれに、ウェブサイトにバリューを異なる方法で追加する特定のユースケースがあります。以下の議論でそれらとそのユースケースを探りましょう。

1。垂直タイムライン

垂直のタイムラインは、通常、ページの左または中央に沿って、上から下までイベントと情報を表示します。これは、デスクトップデバイスとモバイルデバイスの両方でシームレスに動作するスクロールに優しい形式です。ユーザーがページを下にスクロールすると、クリーンで読みやすいレイアウトで時系列の順序に従います。

垂直タイムラインのユースケース：

• 会社の歴史または成長の旅
• 履歴書またはキャリアのハイライト
• ブログ投稿シリーズまたは記事の進行
• 段階的なプロセスの説明
• 製品開発マイルストーン

2。水平タイムライン

水平方向のタイムラインは、サイドスクロールまたはスライド形式に続いて、イベントを左から右に表示します。通常、スペースが背が高いよりも広い場所で使用されます。この形式は、より短いタイムラインに最適です。または、幅広で見やすいレイアウトでいくつかの重要なイベントを表示する場合に最適です。

水平タイムラインのユースケース：

• プロジェクトロードマップまたは計画段階
• イベントスケジュール
• マーケティングキャンペーンまたは製品の発売
• ポートフォリオプレゼンテーション
• 教育のタイムラインまたは歴史的概要

ElementorとWordPressでタイムラインを作成する方法

すでに述べたように、Elementorはドラッグアンドドロップページビルダープラグインです。しかし、悲しいニュースは、タイムラインを作成するウィジェットが含まれていないことです。ただし、プラグインには、Core Elementorプラグインの機能を拡張できるアドオンがたくさんあります。

HappyAddonsもその一人です。 Elementorの多くの欠点を克服できる130以上のウィジェットと22以上の機能が付属しています。そのため、HappyAddonsプラグインをインストールすることにより、サイトでより多くのデザイン機能を有効にすることができます。多くの場合、HappyAddonsがあればElementor Proも必要ありません。

次に、ElementorとHappyAddonsを使用してWordPressでタイムラインを作成する方法を探りましょう。

WordPressで水平タイムラインを作成する方法

水平方向のタイムラインが何であるかをすでに知っていることを願っています。 HappyAddonsには水平方向のタイムラインウィジェットがあり、完全に自由に使用できます。そのため、Webサイトで最初にインストールしてアクティブ化する必要があります。

• Elementor
• HappyAddons

サイトにプラグインをインストールしてアクティブにしたら、以下のチュートリアルで説明した手順に従ってください。

ステップ01：Elementorキャンバスにセクションを作成します

Elementorで投稿またはページを開きます。目的のFlexBoxカラム構造を使用してセクションを作成して、タイムラインを作成します。

ステップ02：水平タイムラインウィジェットをキャンバスに追加する

Elementorパネルで水平タイムラインウィジェットを見つけます。見つけたら、ウィジェットをキャンバスにドラッグアンドドロップします。

デフォルトのレイアウトで、水平タイムラインウィジェットがキャンバスに追加されたことがわかります。

ステップ03：ウィジェットのプリセットを選択します

プリセットは、事前に定義されたデザインスタイルまたはレイアウトで、迅速なカスタマイズのためにウィジェットに即座に適用できます。ウィジェットをゼロからデザインしたくない場合は、プリセットを選択できます。水平タイムラインウィジェットには6つのプリセットが付属しています。

ウィジェットに好きなプリセットを選択します。

ステップ04：水平タイムラインウィジェットにコンテンツを追加します

タイムラインセクションを展開します。ここでは、ウィジェットにコンテンツを追加するオプションを取得します。デフォルトでは、4つのタブが表示されます。タブをクリックして展開します。これにより、目的の情報を配置して追加できる多くのフィールドが開きます。

タブが展開されたら、イベント日付、アイコン、画像、画像解像度、タイトル、および説明をそれぞれのタブに追加できます。

水平ウィジェットのそれぞれのセクションにコンテンツを追加したことがわかります。

同様に、すべてのタイムラインタブにコンテンツを追加します。以下に添付されている画像で作成したことがわかります。

ウィジェットにタブを追加するには、[タイムライン]タブの下の+アイテムの追加ボタンをクリックします。

ステップ05：水平タイムラインウィジェットの設定を構成します

コンテンツパーツが完了したら、[コンテンツ]タブの下に[設定]セクションを展開します。タイトルHTMLタブ、コンテンツアラインメント、コンテンツ矢印の非表示、ライトボックスの有効化、アニメーション速度、表示するスライド数、アイコンなどを構成できます。

これらはとても簡単に構成できます。私たちはあなたが彼らだけでそれらをすることができることを願っています。

ステップ06：水平タイムラインウィジェットを様式化します

ウィジェットを様式化するには、Elementorパネルの[スタイル]タブに移動します。

まず、タイムラインセクションを展開します。

ラインの厚さ、線の色、日付間隔、日付タイポグラフィ、色、アイコン、ボーダー半径、ボーダータイプ、ボーダー幅、背景色などをカスタマイズするオプションがあります。

それらを探索し、必要なカスタマイズを行います。

水平のタイムラインにいくつかの変更を加えたことがわかります。

次に、矢印セクションを展開します。ここから、矢印アイコン、その位置、サイズ、境界幅、半径などをカスタマイズできます。

同様に、[スタイル]タブのコンテンツセクションを展開します。境界線の半径、パディング、内容の間のスペース、ボーダータイプ、境界幅、色、影、タイポグラフィなどをカスタマイズできます。

必要な変更を行います。

ステップ07：水平タイムラインウィジェットをプレビューします

プレビューページに移動し、すべてが正常に機能するかどうかを確認します。デモの水平方向のタイムラインが不具合なく正常に動作していることがわかります。

WordPressで垂直タイムラインを作成する方法

HappyAddonsを使用すると、無料の水平タイムラインを作成できますが、プラグインのプレミアムバージョンにアップグレードして垂直タイムラインを作成する必要があります。したがって、サイトで次のプラグインが利用できることを確認してください。

• Elementor
• HappyAddons
• HappyAddons Pro

それらがあなたのサイトで利用可能になったら、以下で説明するチュートリアルに従ってください。

ステップ01：タイムラインウィジェットをElementorキャンバスにドラッグアンドドロップする

検索ボックスにタイムラインを入力します。水平タイムライン以外のタイムラインウィジェットを選択します。 Elementorキャンバスにドラッグアンドドロップします。

デフォルトのレイアウトを備えたキャンバスに垂直方向のタイムラインが作成されます。

ステップ02：垂直タイムラインウィジェットのプリセットを選択します

私たちがすでに上記で説明したように、あなたがすでにプリセットとは何かを知っていることを願っています。垂直のタイムラインをゼロから設計したくない場合は、プリセットを選択します。

ステップ03：垂直タイムラインにコンテンツを追加します

タイムラインセクションを展開します。デフォルトでは、2つのタブが表示されます。上記のようにクリックしてタブを展開します。

ここであまり話す必要がないことを願っています。水平タイムラインの場合にできるのと同じタイプのコンテンツを頂点に追加できるからです。

アイコンを追加し、アイコンタイプを変更し、時間を定義し、タイトルを設定し、画像を追加するなど、各タイムラインセクションにできます。自分でニーフルなことをしてください。

タイムラインへのコンテンツの追加を完了します。上記のように+追加アイテムをクリックして、より多くのアイテムをタイムラインに追加することもできます。

ステップ04：垂直タイムラインウィジェットの設定を構成します

設定セクションを展開します。日付、時刻、コンテンツ矢印、スクロールツリーを表示するかどうかを構成できます。また、タイトルタグ、アイコンボックスアライメント、ツリーアライメント、および背景色を変更することもできます。

ニーフルな設定を自分で行います。しかし、私たちにとって、デフォルトのアライメントは良さそうです。そのため、チュートリアルのために固執します。

ステップ05：垂直タイムラインウィジェットを様式化します

Elementorパネルのスタイルタブにご覧ください。このタブからウィジェット上のすべてのタイプのコンテンツとビジュアル要素をカスタマイズできます。

まず、コンテンツボックスを展開します。ここから、タイポグラフィ、色、矢印の色、背景タイプ、ボーダータイプ、境界幅をカスタマイズできます。これをしてください。

同様に、アイコンボックスセクションを展開します。ここからウィジェットのアイコンに関連する幅、高さ、ボックススペース、およびその他のオプションを変更できます。デフォルトのスタイリライゼーションに満足している場合は、何も触れないでください。

必要と思われるウィジェットのタイトルを様式化してください。タイポグラフィを変更したことがわかります。

同様に、時間と日付の外観をカスタマイズします。色、重量、タイポグラフィを変更しました。

最後に、ボタンセクションを展開します。背景色、タイポグラフィなどをコピーすることができます。

ステップ06：垂直タイムラインウィジェットをプレビューします

プレビューページにアクセスして、垂直タイムラインが正常に機能するかどうかを確認してください。ウィジェットをスクロールして行います。私たちの側であなたの側でうまく機能することを願っています。

したがって、Webサイトにさまざまなタイプのタイムラインセクションを作成して、さまざまなコンテンツを素晴らしく提示できます。

HappyAddonでもっとできること

HappyAddonsは正直なところ包括的なプラグインです。一度使用した直後にこのプラグインに恋をすることは間違いありません。プラグインでできることを見てください。

a。無料のテーマビルダーを使用します

Elementorにはテーマビルダーもあります。しかし、それはプレミアムユーザーのためだけに予約されています。しかし、HappyAddonsの場合、それは完全に自由に使用できます。 HappyAddonsのテーマビルダーを使用して、ヘッダー、フッター、ブログ投稿テンプレート、アーカイブページを作成できます。 HappyAddonsを使用してブログ投稿テンプレートを無料で作成する方法を確認してください。

b。 woocommerce-frendly

HappyAddonsには、eコマースサイトを強化するために、9つの強力なWoocommerceに優しいウィジェットが付属しています。これらのウィジェットは、製品グリッド、製品カルーセル、製品カテゴリグリッド、製品カテゴリカルーセル、シングル製品、ミニカート、カート、チェックアウト、輸送バーです。

c。クロスドメインのコピーパステ

この機能を使用すると、同じウィジェット、セクション、ページをあるWebサイトから別のドメインに直接コピーできます。これにより、常にゼロから始める必要がないため、貴重な時間を節約できます。次のビデオでは、プラグインのクロスドメインのコピーパステ機能について説明しています。

d。創造的なコンテンツを設計します

画像ホバー、アニメーションリンク、ファンファクター、画像スタックグループ、写真スタック、クリエイティブボタン、テキストスクロール、ロードアイコンなどのウィジェットを使用すると、ユーザーをフックするための魅力的なクリエイティブコンテンツを作成できます。

e。統計情報を表示します

他の多くのElementorアドオンとは異なり、このプラグインはいくつかのチャートウィジェットを提供し、統計情報を紹介し、インフォグラフィックの投稿とページを作成できます。 Elementorでインフォグラフィックページを作成する方法を学びます。

これらすべてに加えて、HappyAddonsプラグインでできることはもっとたくさんあります。

最終的な考え！

タイムラインを作成することは、すべてのWebサイトにとって必須のものではありません。しかし、特定の情報とコンテンツを紹介するための理想的な選択肢である可能性があるため、それらは必要になるかもしれません。したがって、タイムラインを作成する必要性を感じたときはいつでも、このチュートリアルの投稿が使用することを願っています。

この投稿が気に入っている場合は、下のコメントボックスからお知らせください。また、HappyAddonsプラグインに関するクエリがある場合は、チャットボックスにメッセージを残すことができます。私たちのライブサポートエージェントは、できるだけ早くあなたに応答するようになります。

最後まで私たちと一緒にいてくれてありがとう。今後の幸せな一日をお祈りします。