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

【elementor】好きなアイコンで区切りを作る

【elementor】好きなアイコンで区切りを作る

Figmaを使って、Wordpressの人気ページビルダーツール「elementor」で使える区切りの作り方を紹介します。

elementorには、無料版でも使える「区切り」ウィジェットがありますが、その種類には限りがあります。Figmaを使って、好きなアイコンを並べた画像を作り、それを区切りとして使う方法です。
(あくまでも見た目を可愛くするための荒技です。)

⇧のような、好きなアイコンで、サイトの区切りを作ることができます!

1. 好きなアイコンをダウンロードする

まず、区切りとして使いたいアイコンをダウンロードします。
今回は、Flaticonというサイトからアイコンをダウンロードします。

「Flaticon」から、好きなアイコンを探します

今回は猫のアイコンで区切りを作りたいので、「cat」と検索します。
20000以上の猫のアイコンから、好きなものを選びます。

PNG形式でダウンロードします
「Free Download」を選択する

区切りで使いたいアイコンを選んだら、PNG形式でダウンロードします。
右側の「Free download」をクリックすると、自動的にダウンロードが始まります。

2. Figmaで画像を作る

◇画像の枠を作る

ダウンロードした画像 をFigmaで開きます。

ダウンロードした画像を、Figmaで開きます。
エクスプローラーまたはFinderからドラッグ&ドロップ、もしくはコピー&ペーストどちらでも貼り付けできます。

Frameを作る

画像を貼り付けたら、区切りとして使う画像の枠を作ります。
左上の「井」のようなマークを選択し、「Frame」をクリックします。

区切りとして使用するので、細長いフレーム(枠)を作る
サイズは細長ければ適当でも大丈夫だが、2048x65で作成する

区切り用の画像を作るので、細長いフレーム(枠)を作ります。細長ければサイズは適当で大丈夫ですが、今回は2048×65で作成します。

「Frame1」を選択した状態だと、画面の右側に上のようなサイズ設定できる画面が表示されるので、「W (=幅)」と、「H (=高さ)」を調整することもできます。

◇アイコンのサイズを調整する

作った枠のサイズに合わせて、アイコンを調整する

枠のサイズに合わせて、アイコンのサイズを調整します。

「Control+D」または、「Command+D」を使って、アイコンを複製します。

最初のアイコンを選択した状態で、「Control+D」または、「Command+D」を押した後に、適当な間隔を開けてアイコンをドラッグします。

「Control+D」または、「Command+D」を使って、アイコンを複製します。

その後にショートカットキー「Control+D」または、「Command+D」を使って、アイコンを複製します。自動的に1個目と2個目の間隔で、アイコンが複製されていきます

◇背景を透明にする

アイコンを枠いっぱいになるまで複製したら、枠の中の背景を透明にします。
「Frame1」を選択した状態で、画面右側のパネルの「Fill」を選択します。

枠の背景を透明にする

「Hex」の列の一番右の数値「0%」にすると、背景透過されます。

◇画像をエクスポート(ダウンロード)する

アイコンの区切り画像をエクスポートする

画面右下の「Export」で、画像をダウンロードします。
PNG形式またはJPEG形式で、「Export Frame1」をクリックします。

わかりやすい名前をつけて、画像を保存します。

3. elementorに画像として挿入する

画像をダウンロードしたら、elementorに挿入します。
挿入の方法は、通常の画像を挿入する方法と同じです。

elementorで画像を挿入します

セクション(またはコンテナ)を追加、もしくは「+」ボタンをクリックします。
ウィジェットから、画像を選択、もしくはドラッグ&ドロップします。

区切りが挿入できました!

先ほど作成した「区切り画像」をアップロードします。
サイズは「Large」「フル」どちらでも大丈夫です。

可愛い猫のアイコンで区切りを作ることができました!
ぜひ参考にしてみてください。