3つのリンク設定方法

エレメンターでボタン等にリンクを付与したい時、HTMLコードを書く必要はありません。Elementorビギナーの方も迷わないように、大きく分けて3つの方法と、それぞれの使い分けについて共有します。

 

Elementorでリンクを貼る3つのパターン

パターンおすすめの場面特徴

⚫︎1:ウィジェット設定のボタン、画像、見出しなどでの設定。最も基本的

⚫︎2:テキストエディタ文中の一部だけリンクにする

⚫︎3:セクションやカラム全体そのものをリンクにする

 

【方法1】基本の「ウィジェット設定」

一番よく使う方法です。「ボタン」や「画像」、「見出し」ウィジェットには、最初からリンクを入力する欄が用意されています。

手順
編集したいウィジェット(例:ボタン)をクリックして選択する。
左側のパネルの [コンテンツ] タブを開く。
「リンク」という項目を探す。
ここにURLを貼り付ける。

ポイント:リンクの右側にある「歯車アイコン(リンクオプション)」をクリックすると、「新しいウィンドウで開く(別タブ)」の設定ができます。外部サイトへのリンクなら、これにチェックを入れるのが定石です。

【方法2】文章の一部に貼る(テキストエディタ)

「詳しくはこちらをご覧ください」の「こちら」だけをリンクにしたい場合など、文章の一部にリンクを貼る方法です。

手順
「テキストエディタ」ウィジェットを配置する。
左側のパネルの [コンテンツ] でビジュアル入力パネル内で、リンクを貼りたい文字をドラッグして選択する。
ツールバーにある鎖(チェーン)のアイコン(リンクの挿入/編集)をクリックする。
出てきた入力欄にURLを入れて、適用ボタン(↲)を押す。

 

【方法3】ボックス全体をリンクにする

これは使用頻度としてはボタンよりも頻度は多くないと思いますができるとデザインの幅が広がります。「画像+見出し+説明文」がセットになったカード型デザインなどで、どこをクリックしてもページ移動できるようにする方法です。
手順
リンクにしたいセクションやカラムを選択する(全体を囲っている枠)。
[レイアウト] タブにある「Wrapper Link」を開く。
出てきた入力欄にURLを貼り付ける。

 

ポイント: これを使うと、スマホで見た時にユーザーがタップしやすくなるので(クリック領域が広い)、ユーザビリティ(使い勝手)がグッと上がります。

 

リンク方法まとめ

どの方法を選ぶべき?

⚫︎ ボタンや画像単体なら → 【方法1】ウィジェット設定(一番手軽で基本的)
⚫︎ 文章の中の言葉なら → 【方法2】テキストエディタ
⚫︎ カード全体をクリックさせたいなら → 【方法3】セクション・カラムリンク

 


次回:リンク設定時の注意

recent post

スマホで見ると文字がデカい!を解決するレスポンシブなフォントサイズ調整(px・rem・vwの違い)

超簡単!サイト全体に「トップへ戻るボタン」を設置するScroll to Top機能(※HappyAddons)

画像を好きな形に切り抜く「マスク機能」の使い方

謎のすき間の正体は?ウィジェットスペースとカラムギャップ設定の使い分け

「背景オーバーレイ」で画像上の文字の可読性を上げる方法

Making Design Make Sense.
デザインを、感覚から理解へ。
© Design Decode. 901