Elementor（エレメンター）は、動きのあるパーツを作るのにとても便利なエディターです。
特に動きにこだわりたい「ボタン」類は、Elementor（エレメンター）なら、面倒なスタイルシートなどを書かなくてもノーコードで実装できます。
ボタンウィジェットは有料版のElementor（エレメンター）にしなくても、使えます。
Elementor（エレメンター）の標準ボタンウィジェット
あらかじめ「タイプ」から・デフォルト・情報・成功・警告・危険から得選べます。色が変わります。
ボタンの色や枠線を変更すれば、フレームだけのボタンも簡単です。
下のボタンは、
・背景透明
・枠線1px、黒
・テキスト色、黒
・アイコンあり
・マウスオーバーで背景黒、テキスト色白
「ホバー時のアニメーション」を設定すれば、下のボタンのように動きがあるボタンもつくれます。※下のボタンにマウスを当ててみてください。
動きのあるボタンを作るのに便利なプラグイン「The Plus Addons for Elementor」
「The Plus Addons for Elementor」は、エレメンターにウィジェットを追加してくれるアドオンですが、ボタンのスタイルが多彩でおしゃれなボタンが多いです。スタイルがあらかじめ20も用意されているので、そこから選んで、ボタンテキストや色味を変更するだけでスタイリッシュなボタンを作ることができます。
https://ja.wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/
ちなみに「The Plus Addons for Elementor」は、グーテンブルグ用のブロックエディタの「The Plus Blocks for Block Editor | Gutenberg」もあるので、エレメンターを使わないページでも、似たような要素を実装できます。※ボタンのデザインは少し異なるよう。
https://ja.wordpress.org/plugins/the-plus-addons-for-block-editor/
The Plus Addons for Elementorをインストールするだけでボタンの挙動（アニメーション）が変わるかも・・
後で気が付いたのですが、「The Plus Addons for Elementor」をインストールすると、標準のスタイルシートと同名の宣言があるため、ボタンの挙動が変わる場合があるとわかりました。
例えば、ボタンを「開始アニメーション」を「pulse」にした場合、通常1回の動きに対して、「The Plus Addons for Elementor」内のスタイルシートが「.pulse」の名前で「永遠に動く」という宣言がされているため、1度ではなく永遠に動き続けます。
当初、標準の動きだと思っていたのですが、「The Plus Addons for Elementor」の仕様だとわかりました。
切り替えの選択があるわけではないので、良し悪しかなと思います。※今のところ「Pulse」だけっぽいです。
アップデートしたら直りました！！
コメント