“Link Designer”

B) Configuration - top

It is fairly simple to configure, the Link Designer plugin. Link Designer is based on the default WordPress custom post type. You create a link settings like create any new post. You just copy the shortcode generated in each link settings and paste it in any post/ page. Lets begin by going though all the settings.

• Begin by giving an appropriate title to your link settings. For example: My Link Button
• Link designer has only two easy settings, a Link Designer Configuration metabox and a Shortcode Information meta box.
• Link Designer Configuration: This is where you do all the link configurations. Each settings is grouped in tabs for easy access. We have seven tabs to begin with.
  • Content: This is where you add all the content for the button.
    • Primary Text: This is the initial visible text for the link or button.
    • Secondary Text: This is the hidden text that is shown for some templates.
    • Title Text: This is the text show as title of the given link.
    • Tooltip Text: This is the text show on hover. You can add small text or images here.
    • URL: You can add your link address here. It supports # and javascript:void(0);
    • Search: For quick access you can use the search feature to search for any posts that you have created. Simply click on the search result title to add its URL to the URL field. You can use the Recent and Sort buttons as well.
    • Open in new tab?:You can check this to open link in a new tab
    • Make download button?:You can check this to make the button a download link. You can add the downloadble file path in the URL field.
    • rel= :You can specify link relation here.
    • onclick= :Add javascript function call here. You can later write the custom js in the custom js tab
  • Design: You can select a default template or choose to modify the default template here.
    • Select Templates: The plugin comes with 30+ prebuilt templates you can select any one of them and they are all ready to go links.
    • Customize: You can modify certain design aspects of any default templates. Checking Customize lets you access to additional design tabs such as
      • Colors: You can set color values for the backgound, text and border. You can use sold color or add a gradient color. You can even include images as button background. You can set color for default, hover, active and visited state.
      • Icons: You can add icons along site the text content. Not all templates support both Primary and Secondary icons. For some icon based templates, a primary icon is mandatory. You can use font icons or custom icons. You can also set icon color as solid or gradient.
      • Spacing: You can set custom margin, padding and border radius value. You can use the lock system to provide unform values.
      • Shadow: You can set box shadow and text shadow to your links.
  • Typography: You can set fontfamily, text-transform, text align, text decoration, size, letter spacing and line height to the text in your link.
  • Display: You have option to hide the particular button as ver device size and also set user permission settings.
  • Wrapper: You can wrap your link with an external wrapper. You can set it's width, show it as inline or block, set content alignment and add background to the wrapper.
  • Custom CSS: If you think we have missed any design settings or you need to make additional css changes to make the plugin compatible with the theme you are using you can add your custom css code here.
  • Custom JS: As mention earlier, you can trigger custom scripts using the link. You can add your custom function here.

C) Understanding Shortcode - top

Here is a basic structure to the shortcode

Here 5 is the post id of the link designer post.