Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

SoulButtons

开发者 gingersoulrecords
ideag
更新时间 2017年8月6日 06:20
捐献地址: 去捐款
PHP版本: 4.6 及以上
WordPress版本: 4.8

标签

shortcode button call to action button shortcode

下载

0.1.4 0.1.5 0.1.6 0.1.7 0.1.8 0.1.0 0.1.1 0.1.2 0.1.3

详情介绍:

SoulButtons was designed to give WordPress developers a simple, consistent, effective approach to using buttons (and other actionable links) in their layouts. SoulButtons was conceived by a designer who found it difficult to maintain the balance between priority (e.g. how to make more important buttons/links stand out from others), consistency (limiting button styles and their behaviors so that site visitors understand how to find the right information/conversion paths), and ease of use (so non-CSSers and non-UXers could join the party) with respect to custom-coding button styles and behaviors. SoulButtons also makes important (yet complex) button functions available just by assigning a shortcode attribute. Got Google Analytics installed? Add the track attribute and you'll see what buttons your users are clicking on more than others in your Analytics 'events' area. Need to show an element inside a dialog/modal window when a button is clicked? Assign target and targetEvent attributes to a SoulButton and you're all set. For videos and examples, visit https://gingersoulrecords.com/soulbuttons.

安装:

  1. Upload the plugin files to the /wp-content/plugins/soulbuttons directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the 'Plugins' screen in WordPress
  3. Use the Settings -> SoulButtons screen to configure the plugin
  4. Insert buttons into your posts/pages via [soulbutton] shortcode

屏幕截图:

  • SoulButtons in action on Twenty Seventeen theme
  • Shortcode builder
  • Settings page

升级注意事项:

0.1.0 Initial version

常见问题:

How do I create a button?

Use [soulbutton] shortcode or a button in WP Editor to generate it.

How do I use the shortcode?

The same way you use other WordPress shortcodes. Just wrap your button text with [soulbutton] and [/soulbutton] tags. You can use several different attributes to customize appearance and functionality of the button. See them in the next question. Sample usage: [soulbutton link="http://google.com"]Go to Google[/soulbutton]

What attributes does [soulbutton] shortcode have?

Here is the list of available attributes:

  • style - allows to choose button appearance. Available styles currently include solid (default), rounded, border and transparent.
  • link - where button link should point to. Defaults to #.
  • href - an alias of link.
  • css - custom inline CSS styles.
  • class - to add a custom class to the button.
  • id - to add a custom id attribute to the button.
  • color - the color of the button (to override global setting).
  • text - the color of the text in the button (to override global setting).
  • border - the color of the border of the button (to override global setting).
  • track - should button click be recorded on Google Analytics. true/false to override global setting, custom string to set custom button name.
  • icon - allows to insert a Dashicons / Font Awesome icon to be inserted into the button. Define using full name of the icon, i.e. dahsicons-arrow-left or fa-shopping-cart.
  • icon-position - set the icon position within the button. before (default) - icon is inserted before button content. after - icon is inserted after button content.
  • hover - defines additional hover effects. Space-separated list. Available effects include icon-left, icon-right, icon-top, icon-bottom.
  • align - changes text alignment in the button. Available options - center (default), left, right.
  • padding - changes button padding.
  • border-width - changes button border-width.
  • width - changes button minimal width.
  • scrollto - adds a visual "Scroll To" effect for anchor links (true/false).
  • scrollto-speed - set scrollto effect speed (default 0.5).
  • scrollto-offset - add a vertical offset for scrollto effect (default 0).
  • offcanvas-target - define an element (via CSS selector) to take out of DOM and animate as off-canvas item.
  • offcanvas-effect - define which effect should be used the off-canvas target. Available effect include fadeInFromCenter, slideOverFromRight (default), pushOverFromRight
  • offcanvas-open - determine if offcanvas element should initially be in open or closed state (default - false).
  • prevent-default - allows to disable default action of the link (i.e. appending hash values to url) (default -false).

更新日志:

0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0