Elementorのタブウィジェットの使い方

執筆者 | 更新日 2020年05月29日 | Elementorの使い方 | 2 コメント

Elementor タブウィジェットの使い方

タブウィジェットは、ナビゲーションに説明文がついたようなものです。複数用意して、タブを切り替えることができます。

【限定】Elementorの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツのタブ設定

Elementor タブウィジェット コンテンツ設定

タイトル・説明

上の欄にタイトル、下の欄に説明の文章を入力します。説明文は、WordPressの編集画面と同じような使い方です。ボールド(太文字)したり、斜体にしたり、ブレッド形式にしたり、アンダーラインを引いたりできます。また、 HTMLで文章を作成することもできます。それを使いたい場合は、「テキスト」に切り替えて、コードを入力していきます。

タイプ

「水平」か「垂直」に設定できます。「水平」は横並びに、「垂直」は縦並びになります。

タブを新しく追加したい場合は、「+ 項目を追加」ボタンをクリックします。既存のタブを複製したい場合は書類アイコンをクリックし、削除したい場合はバツアイコンをクリックします。

スタイルのタブ設定

Elementor タブウィジェット スタイル設定

ボーダー幅

上の欄にタイトル、下の欄に説明の文章を入力します。

ボーダー色

タブの周りを囲んでいるボーダーの色を設定します。

背景色

タイトルタブの背景色を設定します。

タイトルの色

タイトルの通常時の色を設定します。

タイトルの有効時の色

タブが有効になった時のタイトルの色を設定します。

タイトルの書体

Elementor Pro コールトゥーアクション 書体

  • フォント
  • サイズ
  • 太さ
  • 変換
  • スタイル
  • 装飾
  • 行の高さ
  • 字間

タイトルの書体を設定します。上記の8項目が設定可能になっているので、好きなように設定してみてください。

コンテンツの色

説明文の色を設定します。

コンテンツの書体

説明文の書体を設定します。

モバイル(スマホ)でも水平(横並び)に表示する方法

タブウィジェットは、タイプが「水平」と「垂直」の2種類ありますが、モバイル(スマホ)だと必ず垂直に表示されてしまいます。どうしても水平に表示したい場合は、コードが必要になってきますので、以下の手順で設定をしてみてください。

まずは、こちらからCSSのコードをコピーします。

外観のカスタマイズ

そしたら、「外観」の「カスタマイズ」から

カスタマイズの追加CSS

「追加CSS」に移動し、

Elementorのタブウィジェットでモバイル(スマホ)でも水平(横並び)に表示するためのコード

コピーしてきたコードを入力します。

タブウィジェットの「高度な設定」で「CSS ID」に「horizontal」と入力

そしたら、タブウィジェットの「高度な設定」にある「CSS ID」に「horizontal」という単語を入力してみてください。

Elementorのタブウィジェットでモバイル(スマホ)でも水平(横並び)に表示する

すると、モバイルでも水平に表示されます。

根本 耕輔

根本 耕輔

WordPressを使ったオンラインビジネスの構築が得意。

KClubマーケティング、KClubショーケースを運営。

Elementorの使い方を学びませんか?

Elementorの各ウィジェットの使い方からページの作り方まで網羅的にカバーしたコースが無料で受講できます。(通常¥980)

2 コメント

  1. 佐々木

    突然のコメント失礼します。タブのメニューをスマホで横表示にすることは可能ですか?

    返信する
    • 根本耕輔

      コメントありがとうございます。記事を更新いたしましたので、ご確認ください。動画も後日追加いたします。

      返信する

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?