內容簡介
這款外掛以新增一個鈕扣元件來擴充 Elementor，具有驚人的特色和滑鼠滑過效果！
外掛示範
點擊這裡觀看外掛示範
概述
這款外掛以新增一個鈕扣元件來擴充 Elementor，具有驚人的特色和滑鼠滑過效果！
您可以利用這些新的鈕扣效果來吸引觀眾，以提高點擊率和轉換率！
特色
在 Elementor 中新增「Magic Button」元件
15 種獨家的滑鼠滑過效果和動畫
易於自定義，具有許多選項可供選擇
與 Elementor (Magic Button Widget) 相容
與任何頁面建構器相容 (如果您使用簡碼)
與 Gutenberg 相容 (如果您使用簡碼)
安裝說明 / 如何使用
將 magic-buttons-for-elementor 資料夾上傳至 /wp-content/plugins/ 目錄
透過 WordPress 中的「外掛」選單啟用外掛
使用 Elementor 編輯頁面
將「Magic Button」元件拖放至您的頁面中。
使用元件選項自訂元件，並發佈該頁面。
完成！您的魔法鈕扣已完成！=)
如何使用簡碼來顯示可過濾的作品集網格
「Magic Button」元件將可在 Elementor 元件中使用，只需將其拖放至您的網站上，然後選擇自訂選項即可🙂
您還可以使用簡碼在頁面 / 文章上顯示作品集網格，或是使用 Gutenberg 和其他頁面建構器：
[magic-button]
[magic-button link=”‘.$linkurl.'” target=”‘.$target.'” nofollow=”‘.$nofollow.'” align=”‘.$align.'” style=”‘.$style.'” text=”‘.$text.'” icon=”‘.$iconvalue.'” icon_position=”‘.$icon_align.'” size=”‘.$size.'”]
您可以使用以下選項進行自訂：
link：設定按鈕的連結 (例如：link=”http://wordpress.org”)
target：您可以使用它來在新窗口中開啟連結。選項：true/false (例如：target=”true”)
nofollow：使用它來設置連結為「nofollow」。選項：true/false (例如：nofollow=”true”)
align：按鈕對齊方式。選項：center/left/right (例如：align=”center”)
style：按鈕的滑鼠滑過效果。選項：參閱 https://pwrplugins.com/magic-buttons-for-elementor-addon-and-widget-plugin-demo/ (例如：style=”nina”)
size：按鈕的大小。選項：sm/md/lg (例如：size=”lg”)
請注意，簡碼選項目前非常有限。您可能需要使用 CSS 自訂顏色和字型。
採用 Elementor，您可以使用元件選項自訂全部內容。
參考資訊
滑鼠滑過效果啟發自 Tympanus 的經典文章，請參閱：https://tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects/
外掛標籤
開發者團隊
原文外掛簡介
This plugin extend Elementor by adding a new button widget, with awesome features and hover effects!
Plugin Demo
Click here to see the plugin demo
Overview
This plugin extend Elementor by adding a new button widget, with awesome features and hover effects!
You can impress your audience with new button effects, and thus increase your clicks and conversions!
Features
A new “Magic Button” widget available with Elementor
15 exclusive hover effects and animations
Easy to customize, lot’s of options available
Compatible with Elementor (Magic Button Widget)
Compatible with any page builder (if you use the shortcode)
Compatible with Gutenberg (if you use the shortcode)
Installation Instructions / How to use
Upload magic-buttons-for-elementor folder to the /wp-content/plugins/ directory
Activate the plugin through the ‘Plugins’ menu in WordPress
Edit a page with Elementor
Drag and drop the Magic Button widget to your page.
Customize it using the widget options and publish the page.
Done! Your magic button is ready! =)
How to display the filterable portfolio grid using a shortcode
The Magic Buttob widget will be available in Elementor items. Just drag it to your website and select the customization options 🙂
You can also use dthe shortcode to display the portfolio grid on a page/post, or using Gutenberg and other page builders:
[magic-button]
[magic-button link=”‘.$linkurl.'” target=”‘.$target.'” nofollow=”‘.$nofollow.'” align=”‘.$align.'” style=”‘.$style.'” text=”‘.$text.'” icon=”‘.$iconvalue.'” icon_position=”‘.$icon_align.'” size=”‘.$size.'”]
You can customize it using these options:
link: Set the link of the button (eg: link=”http://wordpress.org”).
target: You can use it to open the link in a new window. Options: true/false.(eg: target=”true”).
nofollow: Use it to set the link as “nofollow”. Options: true/false (eg: nofollow=”true”).
align: The aligment of the button. Options: center/left/right. (eg: align=”center”).
style: The hover effect of the button. Options: see https://pwrplugins.com/magic-buttons-for-elementor-addon-and-widget-plugin-demo/. (eg: style=”nina”).
size: Size of the button. Options: sm/md/lg (eg: size=”lg”).
Please note that the shortcode option is very limited for now. You may need to customize colors and fonts using CSS.
With Elementor, you can customize everything using the widget options.
Reference
The hover effects are inspired on this awesome article from Tympanus: https://tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects/
