Knop Shortcodes

3 Verschillende maten

Small Button Medium Button Big Button
Verkrijg de code

[button size="small" link="/" icon="heart"]Small Button[/button]

[button size="medium" link="/" icon="heart"]Medium Button[/button]

[button size="big" link="/" icon="heart"]Big Button[/button]

2 Alternatives Styles

Simple Button Solid Button
Verkrijg de code

[button size="medium" link="/" style="simple" icon="heart"]Simple Button[/button]

[button size="medium" link="/" style="solid" icon="laptop"]Solid Button[/button]

2 Different Types

Simple Button Wide Button
Verkrijg de code

[button size="medium" link="/" type="simple" style="simple"]Simple Button[/button]

[button size="medium" link="/" type="wide" style="simple"]Wide Button[/button]

Multiline label

Small button Second Line Medium button Second Line Big button Second Line

Small button Second Line Medium button Second Line Big button Second Line

Verkrijg de code

[button size="small" link="/"]Small button <klein>Second Line</klein>[/button]
[button size="medium" link="/"]Medium button <klein>Second Line</klein>[/button]
[button size="big" link="/"]Big button <klein>Second Line</klein>[/button]

[button size="small" link="/" style="simple"]Small button <klein>Second Line</klein>[/button]
[button size="medium" link="/" style="simple"]Medium button <klein>Second Line</klein>[/button]
[button size="big" link="/" style="simple"]Big button <klein>Second Line</klein>[/button]

Linking Methods

Open in a same window Open in a new window
Open Image in a lightbox Open Movie in a lightbox Open Google Map in a lightbox

Verkrijg de code

[button size="medium" link="http://vimeo.com/12613824" linking="default"]Open in a same window[/button]
[button size="medium" link="http://vimeo.com/12613824" linking="new-window"]Open in a new window[/button]

[button size="medium" link="/wp-content/uploads/2013/05/photo_08_v01.jpg" linking="lightbox" style="simple"]Open Image in a lightbox[/button]
[button size="medium" link="http://vimeo.com/12613824" linking="lightbox" style="simple"]Open Movie in a lightbox[/button]
[button size="medium" style="simple" link="http://maps.google.pl/maps?q=New+York&hl=pl&sll=51.127065,16.991864&sspn=0.08845,0.264187&hnear=Nowy+Jork,+Stany+Zjednoczone&t=m&z=13" linking="lightbox"]Open Google Map in a lightbox[/button]

Custom Color Scheme

Yellow Orange Red Purple Blue Green

Verkrijg de code

[button size="medium" link="/" bg_color="#f1c40f" text_color="#ffffff"]Yellow[/button]
[button size="medium" link="/" bg_color="#e67e22" text_color="#ffffff"]Orange[/button]
[button size="medium" link="/" bg_color="#e74c3c" text_color="#ffffff"]Red[/button]
[button size="medium" link="/" bg_color="#9b59b6" text_color="#ffffff"]Purple[/button]
[button size="medium" link="/" bg_color="#3498db" text_color="#ffffff"]Blue[/button]
[button size="medium" link="/" bg_color="#2ecc71" text_color="#ffffff"]Green[/button]

Shortcode Documentation

  • ID kaart
    Het id-kenmerk specificeert een id voor een HTML-element.
    Het moet uniek zijn binnen het HTML-document.
    (Voornamelijk voor aanvullende styling / scripting-doeleinden)
  • klasse
    Het class attribuut specificeert een class naam voor een HTML element.
    (Voornamelijk voor aanvullende styling / scripting-doeleinden)
  • linking
    What to do when user clicks the button?
    Beschikbare opties:
    • default - open in the same window
    • new_window - open in a new window
    • lightbox - open in a lightbox
  • link
    The destination to which the link leads
  • lightbox_group
    Fill in this field, if you want different elements to be in one gallery
  • align
    Beschikbare opties:
    • left
    • center
    • right
  • grootte
    Beschikbare opties:
    • klein
    • medium
    • groot
  • type
    Beschikbare opties:
    • standard
    • wide
  • style
    Beschikbare opties:
    • simple
    • solid
  • icoon
    Beschikbare opties:
    Alle pictogrammen zijn beschikbaar op Lettertype Awesome site
  • title
  • tekst kleur
    Tekst kleur
  • bg_color
    Achtergrond kleur