絞れば、出てくる、アイディア。

Elementor無料版でタブやアコーディオンの中に画像を表示させる方法

Elementor無料版でタブやアコーディオンの中に画像を表示させる方法

Elementorのタブやアコーディオンウィジェットは、中にコンテナ配置して画像を表示させることはできませんが、テキストエディタを工夫して、画像を表示させる事ができます。

今回は、まず初めにタブやアコーディオンウィジェットについて簡単に紹介した後に、実際にどのように設定するかを紹介します!

1. タブウィジェット・アコーディオンウィジェットとは

↑Elementorには、タブウィジェットアコーディオンウィジェット無料版にも標準で装備されています。固定ページ、または投稿ページの編集画面での左側「ウィジェット一覧」で、「タブ」「アコーディオン」というボタンがあります。

◇タブウィジェット

タブウィジェットをを挿入すると、このような画面が出てきます。 画面左側の「タブを編集」の画面で、タブの中のテキストや見出しを編集することができます。

タブウィジェットをを挿入すると、このような画面が出てきます。
画面左側「タブを編集の画面で、タブの中テキスト見出しを編集することができます。

↑このようなタブを作ることができます!

◇アコーディオンウィジェット

アコーディオンウィジェットをを挿入すると、このような画面が出てきます。
画面左側「アコーディオンを編集の画面で、アコーディオンの中テキスト見出しを編集することができます。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

その日私はいつになくその店で買物をした。というのはその店には珍しい檸檬れもんが出ていたのだ。檸檬などごくありふれている。がその店というのも見すぼらしくはないまでもただあたりまえの八百屋に過ぎなかったので、それまであまり見かけたことはなかった。

↑このようなアコーディオンを作ることができます!

2. タブ・アコーディオンの中に画像を表示させる方法

タブウィジェットをを挿入すると、このような画面が出てきます。 画面左側の「タブを編集」の画面で、タブの中のテキストや見出しを編集することができます。

タブ(もしくはアコーディオン)ウィジェットを追加し、編集画面を開きます。

編集画面の中央あたり「メディアを追加」を選択します。

編集したいタブアコーディオン)(「タブ#1」など)をクリックして、編集画面の中央あたり「メディアを追加」を選択します。

「ファイルをアップロード」または「メディアを追加」から、追加したい画像を選択します。 この時、追加画面の右下に表示設定画面が出てくるので、配置やサイズなどを調整します。

「ファイルをアップロード」または「メディアを追加」から、追加したい画像を選択します。
この時、追加画面の右下表示設定画面が出てくるので、配置サイズなどを調整します。(後からでも変更可能)

「投稿に挿入」ボタンをクリックします。

画像を挿入できました!今回は「左揃え」で画像を挿入しました。

画像を挿入できました!今回は「左揃え」で画像を挿入しました。

画像の位置を変更したい時は、編集画面の画像の部分をクリックすると、「左寄せ」「中央」「右寄せ」に変更ができます。

中央にした場合は、上の画像にようになります。

まとめ😆

今回は、Elementorの無料版でも使える「タブやアコーディオンウィジェットの中に画像を表示させる方法」を紹介しました。

Elementorは、無料版でも様々な機能を使うことでより多くのレイアウトが可能になっています。
ぜひ、今回紹介した方法を使って、タブやアコーディオンを活用してみてください🍋

2024-10-16
Wednesday

weblemonの筆者

YUKINKO

20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。

 自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。

“ネコとレモンのWEBマーケ&デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋

POPULAR POST

LATEST POST