Elementorを使用してWordPressで垂直スクロールタブを作成する方法

垂直スクロールタブを使用すると、タブ付きコンテンツを背の高いサイドごとのレイアウトに表示できます。タブは左側または右側に積み重ねられたままですが、各タブのコンテンツが反対側に表示されます。訪問者は、タブを下にスクロールして、内部のコンテンツを探索できます。

これにより、ページがきれいになり、現在のページを離れることなく多くの情報を表示できます。テキストを表示できるだけでなく、垂直スクロールタブに画像、ビデオ、テンプレートを表示することもできます。ユーザーは、タブをクリックまたはタップしてリンクされているコンテンツを表示できますが、他のセクションは隠されたままです。

Elementorは人気のないコードのWebサイトビルダーです。このプラグインを使用すると、ドラッグアンドドロップ機能を使用してWebサイト全体をゼロから構築できます。このチュートリアルの投稿では、WordPressでElementorを使用して垂直スクロールタブを作成する方法を紹介します。

垂直スクロールタブのユースケース

垂直スクロールタブは、小さなスペースで大量のコンテンツを整理するのに役立ちます。彼らは、訪問者が新しいページをロードせずにトピックを移動できるようにします。このレイアウトは、デスクトップとモバイルの両方で使いやすいです。以下の垂直スクロールタブのユースケースを見てみましょう。

a。製品またはサービスの詳細

多くの製品またはサービスの説明を並べて表示できます。各タブは、仕様、価格、機能、またはレビューを保持できます。訪問者は、ページを離れることなく、さまざまなオプションをすばやく比較できます。

b。よくある質問（FAQ）

垂直タブはFAQに最適です。同様の質問を1つのタブの下にグループ化し、別のタブの下に回答できます。読者は、興味のある質問のみをスクロールしてクリックできます。

c。段階的なガイドまたはチュートリアル

プロセスを多くのステップで共有したい場合は、垂直タブが各ステップを明確に保ちます。ユーザーは各タブをクリックして、ガイドに順番に従うことができます。これにより、学習が簡単になり、ページがきれいになります。

d。チームメンバーまたはスタッフプロファイル

各メンバーにタブを提供して、チームを専門的な方法で紹介します。各タブは、写真、役割、および短いバイオを表示できます。訪問者はリストをスクロールして、乱雑なしで全員について学ぶことができます。最高のチームページの例をいくつか探ってください。

e。ポートフォリオまたはプロジェクトショーケース

垂直タブに作業やプロジェクトを表示して、スペースを節約します。各タブは、画像、説明、および詳細へのリンクを表示できます。これにより、訪問者は1つのページから多くのプロジェクトを探索できます。

Elementorで垂直スクロールタブを作成する方法

理論的な部分は終わりました。垂直スクロールタブが何であるか、そのユースケースが何であるかについて明確なアイデアを得ることができます。今すぐチュートリアルの部分について説明します。このセクションでは、WordPressにElementorを使用して垂直スクロールタブを作成する方法について説明します。読み続けてください！

チュートリアルを開始するための前提条件

Elementorを使用したWordPressで垂直スクロールタブを作成するには、サイトに次のプラグインがインストールされ、アクティブ化される必要があります。

• Elementor Free
• HappyAddons無料
• HappyAddons Pro

注： Elementorにはスクロールタブを作成するための組み込みオプションがないため、HappyAddons Proが必要です。 HappyAddons Proは、垂直スクロールタブを簡単に作成できるスコロールタブと呼ばれるウィジェットを提供しています。

これらのプラグインがサイトで準備ができたら、以下に説明するチュートリアルに従ってください。

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

垂直スクロールタブを作成するElementorを使用してページを開くだけです。

ステップ02：キャンバスにスクロールタブウィジェットをドラッグアンドドロップする

Elementorパネルにスクロールタブウィジェットを見つけます。 Elementorキャンバスにドラッグアンドドロップします。

スクロールタブウィジェットには、デフォルトのコンテンツが付属しています。ウィジェットがキャンバスに追加されると、このデフォルトのコンテンツが表示されます。

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

スクロールタブウィジェットにコンテンツを追加し、多くの方法でレイアウトをスタイライズできます。このステップでそれらを探索してください。

＃スクロールタブウィジェットにタイトルを追加します

すべてのWebセクションには、含まれるコンテンツの種類を明確に伝えるタイトルが必要です。したがって、スクロールタブウィジェットセクションのタイトルを記述する必要があります。

[コンテンツ]> [タブ]> [タイトル]に移動します。タイトルを書くためのスペースが得られます。 「Stylish Watch Insights」というタイトルを書いたことがわかります。

＃ウィジェットの説明を書きます

タイトルの下に書くと、ウィジェットの説明を書くことができます。説明が必要ない場合は、削除するだけです。

＃タブにコンテンツを追加します

カーソルをタブに持って行って、それをクリックします。これにより、タブが展開され、コンテンツを追加できます。

＃タブのタイトルを書きます

タブごとにタイトルを書く必要があります。タブが展開されると、NAVテキストの下にボックスが表示されます。ここでは、タブのタイトルを書くことができます。

＃タブのアイコンを変更します

不要な場合はアイコンを削除できます。ただし、アイコンを変更するには、NAVアイコンの下に表示できるアイコンをクリックします。

アイコンライブラリはすぐに開かれます。好きなアイコンを選択して、挿入ボタンを押します。

アイコンが変更されたことがわかります。

＃エディター経由でタブにコンテンツを追加します

各タブを使用すると、2種類のコンテンツを追加できます。エディターを使用するかテンプレートを使用するかを選択できます。

最初にエディターオプションを選択しましょう。

このエディターを使用して、あらゆるタイプのテキストと画像を追加できます。これは、それぞれのタブのキャンバスに即座に表示されます。

＃タブ付きコンテンツの背景色を変更します

タブ内のコンテンツをよりよく強調するために、その背景色を変更できるため、タブに追加したすべてのコンテンツとよく整合します。

＃テンプレート経由でタブにコンテンツを追加します

上記のように、このウィジェットでは、エディターとテンプレートを介してタブにコンテンツを追加できます。テンプレートを使用してコンテンツを追加する方法を見てみましょう。

コンテンツタイプからテンプレートオプションを選択します。すでに設計されたテンプレートがサイトに保存されている場合、このオプションが適しています。

次のドロップダウンアイコンをクリックして、テンプレートを選択します。次に、タブに表示するテンプレートを選択します。

目的のテンプレートがすでにタブに追加されていることがわかります。

同様に、スクロールタブウィジェットのすべてのタブにコンテンツを追加します。

ステップ04：スクロールタブウィジェットの設定を構成します

コンテンツパーツが完了したら、設定セクションを展開します。

このセクションから、さまざまなアライメント調整を含む、ナビゲーターパネルの幅とコンテンツパネルの高さを変更できます。

＃NAVパネルの幅を調整します

スクロールタブウィジェットには、ナビゲーターパネル（NAVパネル）とコンテンツパネルの2つの部分があります。

このオプションの下でスケールをドラッグすることで、ナビゲーターパネルの幅を変更できます。また、その位置とアライメントを調整することもできます。このプロセスは、以下に添付されているビデオクリップに示されています。

＃コントロールパネルの高さを調整します

同様に、コントロールパネルの高さを調整します。また、コンテンツが垂直に適切に整列されていることを確認します。

ステップ05：スクロールタブウィジェットを様式化します

[スタイル]タブに来てください。最初にナビゲーターパネルの背景色を設定しましょう。

＃NAVパネルのコンテンツのタイポグラフィをカスタマイズします

ナビゲーターパネルに追加したコンテンツごとに、タイポグラフィを1つずつ更新します。必要に応じて、フォントファミリ、サイズ、重量、ラインの高さなどを変更できます。

＃タブを様式化します

境界型、境界線幅、パディング、境界線の色、境界線の半径、テキストの色、背景色を追加することで、タブを様式化して、次の画像のように表示できます。あなたがこれを自分で行うことができることを願っています。

同様に、コンテンツパネルとスクロールセクションに関連するコンテンツを展開および様式化します。

ステップ06：携帯電話のスクロールタブウィジェットを最適化する

モバイル画面サイズのウィジェットを最適化するには、トップバーのモバイルポートレートモードに移動します。

ナビゲータータブがデフォルトで上に表示されることがわかります。

＃モバイルデバイスのコンテンツパネルの高さを調整します

既存の高さは、コンテンツパネルには不十分な場合があります。この場合、タブ内のすべてのコンテンツがモバイル画面サイズで完全に確認できるように、高さを上げる必要があります。

ステップ07：タブレットのスクロールタブウィジェットを最適化します

同様に、タブレットのポートレートモードに切り替えて、タブレットの画面サイズに最適な表示のためにコンテンツを最適化します。

以下に添付されているビデオクリップでは、タブレット画面でウィジェットが既によく見えることがわかります。だから、とにかくそれを変更する必要はありません。

ステップ08：スクロールタブウィジェットをプレビューします

プレビューページにアクセスして、ウィジェットが正常に動作しているかどうかを確認してください。ウィジェットが私たちの側でうまく機能することがわかります。

したがって、WordPressでElementorを使用して垂直スクロールタブを作成できます。

最後のテイクアウト！

垂直スクロールタブは、多くの情報を共有しながら、Webページをきれいに保つためのスマートな方法です。彼らは、訪問者に新しいページにジャンプすることなく、必要なものを見つけさせます。上記の手順に従った後、これらのタブをElementorとHappyAddons Proで簡単に設計できます。

これにより、サイトはモダンな外観を提供し、ユーザーがコンテンツを探索する方法を改善します。ただし、このセクションを作成する際には、いくつかのベストプラクティスを念頭に置いてください。タブごとにクリアタイトルを使用して、ユーザーが何を期待するかを知っているようにします。テキスト、画像、ビデオが軽いので、ページが速く読み込まれるようにしてください。

さまざまな画面サイズで設計を確認し、モバイルユーザーの間隔を調整します。サイトのスタイルと一致する色とフォントを保持してください。そうすれば、タブは残りのデザインと自然にブレンドします。これらの小さな詳細は、すべての訪問者にスムーズでプロフェッショナルエクスペリエンスを作成するのに役立ちます。

Elementorを使用してWordPressでフリップボックスを設計する方法を学びます。