Se connecter Recherche

EVOLUTION

SHORTCODES PACK


Informations générales

EVOLUTION intègre un ensemble de shortcodes qui vous permettrons de créer des présentations uniques.

L’ensemble de ces shortcodes est disponible après l’installation et l’activation du thème EVOLUTION et du plugin EVOLUTION Shortcodes Pack. Ces shortcodes peuvent être utilisés dans tous les champs editables (widget dédié, metabox, content, WooCommerce product description, …) d’intégration de contenu. Ils peuvent être imbriqués afin de construire une mise en page de contenu avancée.

L’accès aux shortcodes se fait par le bouton Insert shortcode present sur l’éditeur visuel WordPress et sur le widget dédié. Chaque shortcode dispose d’option de création qui vous permettrons de créer l’élément donc vous avez besoin.

epica design

Liste des shortcodes

Interface et sélection de shortcodes

L’interface d’utilisation des shortcodes à été réalisée de façon à être la plus intuitive possible.

Au clic sur le bouton Insert shortcode, une fenetre pop-up apparaitra en vous proposant ces diverses fonctionnalités:

  • Un lien vers la documentation des shortcodes (ici donc)
  • Un lien vers le forum de support
  • Un lien vers epicadesign.fr, éditeur du plugin
  • Un champ de recherche vous permettant de filtrer les shortcodes
  • Les filtres permettant de reduire l’affichage selon vos choix
  • L’ensemble des shortcodes disponibles présentés sous forme icones + nom

pour insérer un shortcode dans votre contenu:

  1. Cliquez sur le shortcode de votre choix
  2. Definissez les différents paramètres et contenu de ce shortcode dans l’interface dédiée.
  3. Cliquez sur insérer le shortcode
  4. Le shortcode à été ajouté à votre contenu de page.


epica design

Imbrication de shortcodes

Vous pouvez parfaitement imbriquer des shortcodes les uns dans les autres afin de créer votre contenu. Par contre, vous ne devez jamais imbriquer 2 shortcodes identiques. Exemple:

[ fullsection …][ notifications …] Your Content …[ /notifications][ /fullsection]
[ fullsection …][ fullsection …] Your Content … [ /fullsection][ /fullsection]

Cas particuliers

Certains shortcodes ont des spécificités d’utilisation afin de maximiser leur rendu coté visiteur, détaillons les:

Shortcodes série Columns

Le moteur de shortcodes vous permet de générer des colonnes responsives de largeur equivalentes à 100%, 66%, 50%, 33% ou 25% de la largeur de l’élément dans lequel elles sont insérées. Pour un affichage visuel correct (alignement de contenu ou utilisation partielle de la largeur du conteneur), vous pouvez placer votre shortcode insertcolumns dans le shortcode Clear Columns. Cette étape n’est pas obligatoire mais vous permettra d’optimiser l’insertion des colonnes avec l’ensemble de votre contenu (suppression d’éventuels déplacement d’éléments).

Exemple:

[ cleanerwrapper][ insertcolumn style= »50% » …]Your Content …[ /insertcolumn][ /cleanerwrapper]
[ insertcolumn style= »25% »]Your Content …[ /insertcolumn] [ insertcolumn style= »25% »]Your Content …[ /insertcolumn]

La seconde ligne vous permettra tout de même d’afficher votre contenu sous forme de colonnes, mais un léger décalage de contenu peut se produire. Celui peut néanmoins vous être utile selon vos besoins.


Shortcodes série Tabs

Le shortcode Tabs permet de générer une list à onglet en créant une base formée de 3 onglets et 3 contenus liés. En utilisant le shortcode Tab, vous pouvez y ajouter autant d’onglets que voulu à condition d’insérer le shortcode Tab entre les balises [Tabs]

Exemple:

[ tabs style= »default »][ tab title= »Title 1″]Content 1 …[ /tab] [ tab title= »Title 2″]Content 2 …[ /tab] [ tab title= »Title 3″]Content 3 …[ /tab][ /tabs]
[ tabs style= »default »][ tab title= »Title 1″]Content 1 …[ /tab] Content 2 …[ /tab] [ tab title= »Title 3″]Content 3 …[ /tab][ tab title= »My other tab »]Tab content …[ /tab][ /tabs]

[ tabs style= »default »][ tab title= »Title 1″]Content 1 …[ /tab] [ tab title= »Title 2″]Content 2 …[ /tab] [ tab title= »Title 3″]Content 3 …[ /tab][ /tabs]

[ tab title= »My other tab »]Tab content …[ /tab]

Une ligne de shortcode [ Tab] utilisé en dehors des balises [ Tabs] ne sera pas pris en compte et ne sera pas affichée coté visiteur du site.


Paramètre de shortcode de type source: media xxxx

Le pack de shortcodes utilise l’id (id_attachement) des images dans le retour informations affiché sur votre éditeur. Si vous souhaitez modifier une image enregistrée dans un shortcode, il vous faut auparavant récupérer son id. Pour récupérer un id_attachement:

  1. Rendez au menu medias > library
  2. Sélectionnez l’image dont vous voulez récupérer l’id
  3. sur la page vous affichant l’image, cliquez sur obtenir le lien court
  4. une fenetre pop-up s’ouvre. l’id attachement est le chiffre indiqué à la fin de l’url

epica design
epica design

Valeurs globales

Valeurs des animations

Voici les valeurs des animations pouvant etre utilisées dans les shortcodes

NoAnimation, rollIn, rollOut,hinge,flash,rubberBand, bounce, shake, tada, swing, wobble, pulse, flip, flipInX, flipOutX, flipInY, flipOutY, fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig, fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig, slideInDown, slideInLeft, slideInRight, slideOutUp, slideOutLeft, slideOutRight, bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight, bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, lightSpeedIn, lightSpeedOut.

vous pouvez voir les animations en démonstration en suivant ce lien voir la liste des animations


Valeurs des icones (Font awesome V4.02)

EVOLUTION utilise la police d’icones Font Awesome, vous offrant ainsi le choix dans une liste de plus de 450 icones. Vous pouvez les visualiser en suivant ce lien voir la liste des icones

Voici les valeurs des icones pouvant etre utilisées dans les shortcodes

adjust, anchor, archive, arrows, arrows-h, arrows-v, asterisk, car, ban, university, bar-chart-o, barcode, bars, beer, bell, bell-o, bolt, bomb, book, bookmark, bookmark-o, briefcase, bug, building, building-o, bullhorn, bullseye, taxi, calendar, calendar-o, camera, camera-retro, car, caret-square-o-down, caret-square-o-left, caret-square-o-right, caret-square-o-up, certificate, check, check-circle, check-circle-o, check-square, check-square-o, child, circle, circle-o, circle-o-notch, circle-thin, clock-o, cloud, cloud-download, cloud-upload, code, code-fork, coffee, cog, cogs, comment, comment-o, comments, comments-o, compass, credit-card, crop, crosshairs, cube, cubes, cutlery, tachometer, database, desktop, dot-circle-o, download, pencil-square-o, ellipsis-h, ellipsis-v, envelope, envelope-o, envelope-square, eraser, exchange, exclamation, exclamation-circle, exclamation-triangle, external-link, external-link-square, eye, eye-slash, fax, female, fighter-jet, file-archive-o, file-audio-o, file-code-o, file-excel-o, file-image-o, file-video-o, file-pdf-o, file-image-o, file-image-o, file-powerpoint-o, file-audio-o, file-video-o, file-word-o, file-archive-o, film, filter, fire, fire-extinguisher, flag, flag-checkered, flag-o, bolt, flask, folder, folder-o, folder-open, folder-open-o, frown-o, gamepad, gavel, cog, cogs, gift, glass, globe, graduation-cap, users, hdd-o, headphones, heart, heart-o, history, home, picture-o, inbox, info, info-circle, university, key, keyboard-o, language, laptop, leaf, gavel, lemon-o, level-down, level-up, life-ring, lightbulb-o, location-arrow, lock, magic, magnet, share, reply, reply-all, male, map-marker, meh-o, microphone, microphone-slash, minus, minus-circle, minus-square, minus-square-o, mobile, money, moon-o, graduation-cap, music, bars, paper-plane, paper-plane-o, paw, pencil, pencil-square, pencil-square-o, phone, phone-square, picture-o, plane, plus, plus-circle, plus-square, plus-square-o, power-off, print, puzzle-piece, qrcode, question, question-circle, quote-left, quote-right, random, recycle, refresh, reply, reply-all, retweet, road, rocket, rss, rss-square, search, search-minus, search-plus, paper-plane, paper-plane-o, share, share-alt, share-alt-square, share-square, share-square-o, shield, shopping-cart, sign-in, sign-out, signal, sitemap, sliders, smile-o, sort, sort-alpha-asc, sort-alpha-desc, sort-amount-asc, sort-amount-desc, sort-asc, sort-desc, sort-numeric-asc, sort-numeric-desc, sort-asc, space-shuttle, spinner, spoon, square, square-o, star, star-half, star-half-o, star-o, suitcase, sun-o, tablet, tachometer, tag, tags, tasks, taxi, terminal, thumb-tack, thumbs-down, thumbs-o-down, thumbs-o-up, thumbs-up, ticket, times, times-circle, times-circle-o, tint, caret-square-o-down, caret-square-o-left, caret-square-o-right, caret-square-o-up, trash-o, tree, trophy, truck, umbrella, university, unlock, unlock-alt, sort, upload, user, users, video-camera, volume-down, volume-off, volume-up, exclamation-triangle, wheelchair, wrench, file, file-archive-o, file-audio-o, file-code-o, file-excel-o, file-image-o, file-video-o, file-o, file-pdf-o, file-powerpoint-o, file-audio-o, file-text, file-text-o, file-video-o, file-word-o, circle-o-notch, refresh, spinner, check-square, check-square-o, circle, circle-o, dot-circle-o, minus-square, minus-square-o, plus-square, plus-square-o, square, square-o, btc, jpy, eur, gbp, inr, jpy, krw, money, rub, try, usd, align-center, align-justify, align-left, align-right, bold, link, chain-broken, clipboard, columns, eraser, file, file-o, file-text, file-text-o, files-o, floppy-o, font, header, indent, italic, link, list, list-alt, list-ol, list-ul, outdent, paperclip, paragraph, clipboard, repeat, undo, scissors, strikethrough, subscript, superscript, table, text-height, text-width, th, th-large, th-list, underline, angle-double-down, angle-double-left, angle-double-right, angle-double-up, angle-down, angle-left, angle-right, angle-up, arrow-circle-down, arrow-circle-left, arrow-circle-o-down, arrow-circle-o-left, arrow-circle-o-right, arrow-circle-o-up, arrow-circle-right, arrow-circle-up, arrow-down, arrow-left, arrow-right, arrow-up, arrows, arrows-alt, arrows-h, arrows-v, caret-down, caret-left, caret-right, caret-square-o-down, caret-square-o-left, caret-square-o-right, caret-square-o-up, caret-up, chevron-circle-down, chevron-circle-left, chevron-circle-right, chevron-circle-up, chevron-down, chevron-left, chevron-right, chevron-up, hand-o-down, hand-o-left, hand-o-right, hand-o-up, long-arrow-down, long-arrow-left, long-arrow-right, long-arrow-up, arrows-alt, backward, compress, eject, expand, fast-backward, fast-forward, forward, pause, play, play-circle, play-circle-o, step-backward, step-forward, stop, youtube-play, adn, android, apple, behance, behance-square, bitbucket, bitbucket-square, btc, codepen, css3, delicious, deviantart, digg, dribbble, dropbox, drupal, empire, facebook, facebook-square, flickr, foursquare, git, git-square, github, github-alt, github-square, gittip, google, google-plus, google-plus-square, hacker-news, html5, instagram, joomla, jsfiddle, linkedin, linkedin-square, linux, maxcdn, openid, pagelines, pied-piper, pied-piper-alt, pinterest, pinterest-square, qq, rebel, reddit, reddit-square, renren, share-alt, share-alt-square, skype, slack, soundcloud, spotify, stack-exchange, stack-overflow, steam, steam-square, stumbleupon, stumbleupon-circle, tencent-weibo, trello, tumblr, tumblr-square, twitter, twitter-square, vimeo-square, vine, vk, weibo, weixin, windows, wordpress, xing, xing-square, yahoo, youtube, youtube-play, youtube-square, ambulance, h-square, hospital-o, medkit, plus-square, stethoscope, user-md, wheelchair, angellist, area-chart, at, bell-slash, bell-slash-o, bicycle, binoculars, birthday-cake, bus, calculator, cc, cc-amex, cc-discover, cc-mastercard, cc-paypal, cc-stripe, cc-visa, copyright, eyedropper, futbol-o, google-wallet, ils, ioxhost, lastfm, lastfm-square, line-chart, meanpath, newspaper-o, paint-brush, paypal, pie-chart, plug, slideshare, toggle-off, toggle-on, trash, tty, twitch, wifi, yelp

Si vous rectifiez votre valeur d’icones à partir de la page officielle de Font Awesome, veuillez n’utiliser que la dénomination d’icones indiquée. Exemple :

 <i class="fa fa-building"></i> fa-building

pour obtenir dans votre code de shortcode une valeur similaire à

[  vectoricon icon="icon: building" ...

Shortcodes inclus dans le pack

Tous les paramètres de shortcodes avec l’indicatif …theme sont liés aux choix de couleur sélectionné dans le panel d’option du thème


Clear columns

Conteneur d’alignement de contenu pour le shortcode Columns

[  cleanerwrapper anim="fadeIn" style="text-center" class=""]Remove this text and Insert your Row here[  /cleanerwrapper]
Fields Parameters
anim animation – exemple: fadeIn – valeurs acceptées: valeurs des animations
style alignement du contenu – exemple: text-right – valeurs acceptées: text-left, text-center, text-right
class inserer une class CSS personnelle
content Ce champ est prévu pour l’insertion, après validation, des shortcodes Columns entre [ cleanerwrapper …] … [ /cleanerwrapper]


Columns

Créer une colonne de pleine largeur

[  cleanerwrapper class=""][  insertcolumn style="50%"]Content[  /insertcolumn][  insertcolumn style="25%"]Content[  /insertcolumn][  /cleanerwrapper]
Fields Parameters
style largeur de la colonne – exemple: 50% – valeurs acceptées: 25%, 33%, 50%, 66%, 75%, 100%
align alignement du contenu – exemple: text-right – valeurs acceptées: text-left, text-center, text-right
paddinglft écartement du contenu à gauche en pixels – exemple: 40 – valeurs acceptées: nombre
paddingrgt écartement du contenu à droite en pixels – exemple: 40 – valeurs acceptées: nombre
anim animation – exemple: fadeIn – valeurs acceptées: valeurs des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Full Section

Créer une section affichée en pleine largeur d’écran (uniquement si les sidebars verticales de sont pas présentes sur la page) ou pleine largeur du conteneur

[  fullsection margin="32" padding="56" source="media: 2091" backgroundcolor="#b59090" bordertop="5" bordertopcolor="#ecc9c9" borderbottom="4" borderbottomcolor="#d5a3a3" forcefull="yes" animate="fadeIn" class="myclass"]my content[  /fullsection]
Fields Parameters
margintop espacement extérieur haut, en pixels, de l’élément avec le contenu de la page – exemple: 5 – valeurs acceptées: nombre
marginbot espacement extérieur bas, en pixels, de l’élément avec le contenu de la page – exemple: 5 – valeurs acceptées: nombre
paddingtop espacement intérieur haut, en pixels, du contenu avec les bordures de l’élément – exemple: 5 – valeurs acceptées: nombre
paddingbot espacement intérieur bas, en pixels, du contenu avec les bordures de l’élément – exemple: 5 – valeurs acceptées: nombre
sectionbg media image utilisé comme background de l’élément – exemple: http://localhost/epicadesign/wp-content/uploads/2014/07/slide34.jpg – valeurs acceptées: url de l’image
backgroundcolor couleur du background de l’élément – exemple: #91c225 – valeurs acceptées: code couleur hexadecimal
bordertop epaisseur, en pixels, de la bordure du haut – exemple: 5 – valeurs acceptées: nombre
bordertopcolor couleur de la bordure du haut – exemple: #f1592a – valeurs acceptées: code couleur hexadecimal
borderbottom epaisseur, en pixels, de la bordure du bas – exemple: 5 – valeurs acceptées: nombre
borderbottomcolor couleur de la bordure du bas – exemple: #f1592a – valeurs acceptées: code couleur hexadecimal
forcefull element affiché en pleine largeur d’écran – valeurs acceptées: yes, no
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Wrapper

Créer une section personnalisée en utilisant différent paramètres tel que la largeur, les bordure, les espacement, etc …

[  customwrap style="inline-block" blockwidth="76" paddingtop="10" paddingbot="16" paddingright="14" paddingleft="16" border="2" bordercolor="#b27474" bordertype="dotted" borderradius="4" wrapbg="http://localhost/epicadesign/wp-content/uploads/2014/07/slide16.jpg" backgroundcolor="#a43f3f" anim="flipInX" class="yourcustomclass"]Your content[  /customwrap]
Fields Parameters
style alignement du bloc dans le contenu (le style block centre automatiquement l’élément) – exemple: inline-block – valeurs acceptées: block, inline-block
blockwidth largeur de l’élément par rapport à son conteneur, en pourcentage – exemple: 76 – valeurs acceptées: nombre de 1 à 100
paddingtop espacement intérieur haut, en pixels, du contenu avec les bordures de l’élément – exemple: 5 – valeurs acceptées: nombre
paddingbot espacement intérieur bas, en pixels, du contenu avec les bordures de l’élément – exemple: 5 – valeurs acceptées: nombre
paddingright espacement intérieur droite, en pixels, du contenu avec les bordures de l’élément – exemple: 5 – valeurs acceptées: nombre
paddingleft espacement intérieur gauche, en pixels, du contenu avec les bordures de l’élément – exemple: 5 – valeurs acceptées: nombre
border epaisseur, en pixels, de la bordure – exemple: 5 – valeurs acceptées: nombre
bordercolor couleur de la bordure – exemple: #f1592a – valeurs acceptées: code couleur hexadecimal
bordertype style de la bordure – exemple: dotted – valeurs acceptées: solid, dotted, dashed, double
borderradius arrondir les angles de l’élément, en pixels – exemple: 4 – valeurs acceptées: nombre
wrapbg media image utilisé comme background de l’élément – exemple: http://localhost/epicadesign/wp-content/uploads/2014/07/slide34.jpg – valeurs acceptées: url de l’image
backgroundcolor couleur du background de l’élément – exemple: #91c225 – valeurs acceptées: code couleur hexadecimal
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Heading

Créer une séparation, un titre ou un titre de section.

[  headtitle style="general" title="title text" textcolor="clrdark" fontsize="fa-2x" anim="NoAnimation"]subtext for general title[  /headtitle]
Fields Parameters
style style du titre – exemple: general – valeurs acceptées: default, classic, general
title texte du titre
icon insérer un icone avant le texte du titre – exemple: user – valeurs acceptées: valeurs des icones
textcolor couleur du titre – exemple: clrorange – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
fontsize agrandir la police d’écriture du titre, correspond à une multiplication – exemple: fa-2x – valeurs acceptées: fa-1x, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-mass (10x)
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion du texte de sous titre du style general


Separator

Créer une séparation avec titre dans le contenu

[  separator title="Separator title" bdcolor="bdgray" textcolor="clrvt" style="sep-doublethick" size="20" class="myclass"]
Fields Parameters
title titre affiché de la séparation
color couleur des traits/bordures de séparation – exemple: sep-info – valeurs acceptées: bdwt, bdlight, bdgray, bddark, bdbk, bdtq, bdgreen, bdblue, bdbdk, bdorange, bdyellow, bdred, bdvt
textcolor couleur du text – exemple: sep-txinfo – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
style style de trait de séparation – exemple: sep-dotted – valeurs acceptées: sep-stdefault, sep-solid, sep-dotted, sep-double, sep-thick, sep-doublethick, sep-dashed
size espacement vertical externe, en pixels, entre les bords de l’élément et le contenu – exemple: 20 – valeurs acceptées: nombre
class insérer une class CSS personnelle


Divider

Créer une séparation de type division de contenu

[  divider style="bdtq" margintop="20" marginbot="25" class=""]
Fields Parameters
style couleur du trait – exemple: bdtq – valeurs acceptées: bdwt, bdlight, bdgray, bddark, bdbk, bdtq, bdgreen, bdblue, bdbdk, bdorange, bdyellow, bdred, bdvt
margintop espacement vertical externe, en pixels, entre le bord supérieur de l’élément et le contenu – exemple: 20 – valeurs acceptées: nombre
marginbottom espacement vertical externe, en pixels, entre le bord inférieur de l’élément et le contenu – exemple: 20 – valeurs acceptées: nombre
class insérer une class CSS personnelle


Spacer

Créer un écart dans le contenu

[  spacer size="80" class=""]
Fields Parameters
size hauteur de l’élément – exemple: 80 – valeurs acceptées: nombre
class insérer une class CSS personnelle


Dropcap

Créer un paragraphe avec un dropcap

[  dropcap radius="0" use="icone" value="B" color="bggreen" iconcolor="clrgray" icon="icon: ban" iconsize="fa-3x" link="#" title="Title of the dropcap" justify="table" anim="fadeIn" class="yourcustomclass"]Dropcap text content ...[  /dropcap]
Fields Parameters
use type de caractère utilisé, alpha numérique ou icone – exemple: alpha – valeurs acceptées: alpha, icone
radius le dropcap est d’apparence carré ou ronde – exemple: 0 – valeurs acceptées: 0, 50
color couleur du fond du dropcap – exemple: bggreen – valeurs acceptées: bgnone, bgwt, bglight, bggray, bgdark, bgbk, bgtq, bggreen, bgblue, bgbdk, bgorange, bgyellow, bgred, bgvt
iconcolor couleur du contenu du dropcap – exemple: clrgray – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
value utiliser un caractère alpha numérique dans le dropcap – exemple: user – valeurs acceptées: caractères alpha numérique
icon utiliser un icone dans le dropcap – exemple: user – valeurs acceptées: valeurs des icones
iconsize taille du contenu dans le dropcap – exemple: fa-3x – valeurs acceptées: fa-1x, fa-2x, fa-3x, fa-4x, fa-5x
link url du lien par clic sur le dropcap – exemple: # – valeurs acceptées: url
title titre des informations du dropcap – exemple: Dropcap text content …
justify définir l’alignement entre le contenu et le dropcap, en colonne ou un seul block – exemple: table – valeurs acceptées: block, table
reverse Définir si le dropcap est placé à gauche ou à droite – exemple: yes – valeurs acceptées: yes, no
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion du contenu du dropcap


Anchor

Créer une ancre ou un lien vers une ancre

[  anchor type="link" id="anchor1" linktext="anchor link text" targetid="anchor1" class="555"]
Fields Parameters
type créer une ancre ou lien vers une ancre – exemple: link – valeurs acceptées: link, anchor
id id de l’ancre, doit être unique, sans espace ni caractère spéciaux – exemple: anchor1 – valeurs acceptées: texte et/ou nombre
linktext texte affiché pour un lien vers une ancre – exemple: anchor link text – valeurs acceptées: texte
targetid id de l’ancre ciblée par le lien – exemple: anchor1 – valeurs acceptées: texte et/ou nombre
class insérer une class CSS personnelle


Icons

Insérer une icone à partir de Font Awesome

[  vectoricon icon="icon: circle" iconsize="fa-3x" iconeffect="epc-icon-effect-2" bgcolor="bgbdk" iconcolor="clrred" bgsize="epc-icon-medium" link="#" anim="tada" class="yourcustomclass"]
Fields Parameters
icon reference de l’icone insérer – exemple: icon: circle – valeurs acceptées: valeurs des icones
iconsize taille de l’icone – exemple: fa-3x – valeurs acceptées: fa-1x, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-mass
iconeffect effet au survol de l’icone – exemple: epc-icon-effect-2 – valeurs acceptées: epc-icon-noeffect, epc-icon-effect-2
bgcolor couleur du background de l’icone – exemple: bgbdk – valeurs acceptées: bgnone, bgwt, bglight, bggray, bgdark, bgbk, bgtq, bggreen, bgblue, bgbdk, bgorange, bgyellow, bgred, bgvt
iconcolor couleur de l’icone – exemple: clrred – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
bgsize taille du background de l’icone – exemple: epc-icon, – valeurs acceptées: epc-icon-medium, epc-icon, epc-icon-large, epc-icon-mass
link definir un lien au clic de l’icone – exemple: # – valeurs acceptées: url
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle


Notification

Insérer une boite de notification avec animation

[  notification style="alert-success" title="title of notification" close="yes" anim="rubberBand" class="yourcustomclass"]notification text content ...[  /notification]
Fields Parameters
style style pré-enregistré de la notification – exemple: alert-info – valeurs acceptées: alert-info, alert-success, alert-warning, alert-danger
title titre de la notification – valeurs acceptées: texte
close lien de disparition de la notification – exemple: yes – valeurs acceptées: yes, no
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Label

Insérer un label

[  taglabel style="labeldft" bgcolor="bgbdk" bdcolor="bdblue" txtcolor="clrwt" anim="fadeIn" class="customclass"]Label content ...[  /taglabel]

txtcolorcouleur du texte – exemple: clrblue – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone

Fields Parameters
bdcolor couleur des bordures – exemple: bdorange – valeurs acceptées: bdwt, bdlight, bdgray, bddark, bdbk, bdtq, bdgreen, bdblue, bdbdk, bdorange, bdyellow, bdred, bdvt
bgcolor couleur du background – exemple: bgblue – valeurs acceptées: bgnone, bgwt, bglight, bggray, bgdark, bgbk, bgtq, bggreen, bgblue, bgbdk, bgorange, bgyellow, bgred, bgvt
style taille du label – exemple: labelmedium – valeurs acceptées: labelmin, labeldft, labelmedium, labelmax
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Tagline Box

Insérer une boite de contenu d’un autre style avec animation et effet d’ombre

[  tagline bdstyle="bdtop" bdcolor="bdorange" anim="fadeIn" effect="effect2" class="yourcustomclass"]tagline box content ...[  /tagline]
Fields Parameters
bdstyle style de la box – exemple: bdtop – valeurs acceptées: bdmin, bdtop, bdbottom, bdleft, bdright, bdnone
bdcolor couleur des bordures – exemple: bdorange – valeurs acceptées: bdwt, bdlight, bdgray, bddark, bdbk, bdtq, bdgreen, bdblue, bdbdk, bdorange, bdyellow, bdred, bdvt
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
effect ajouter un effet d’ombre à cet élément – exemple: effect3 – valeurs acceptées: effect0, effect1, effect2, effect3, effect4, effect5, effect6, effect7, effect8
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Custom text

Insérer un texte personnalisé.

[  customtxt fontsize="22" fontweight="600" fontstyle="italic" textcolor="#d32727" paddingleft="13" paddingright="24" textalign="center" anim="fadeIn" class="yourcustomclass"]Your custom text ...[  /customtxt]
Fields Parameters
fontsize taille de police du texte, en pixels – exemple: 22 – valeurs acceptées: nombre
fontweight epaisseur du texte – exemple: 400 – valeurs acceptées: 300, 400, 600, 700, 800, 900
fontstyle style de la police – exemple: italic – valeurs acceptées: inherit, normal, italic
textcolor couleur du texte – exemple: #eec1c1 – valeurs acceptées: code couleur hexadecimal
paddingleft écartement interieur à gauche du texte, en pixels – exemple: 30 – valeurs acceptées: nombre
paddingright écartement interieur à droite du texte, en pixels – exemple: 30 – valeurs acceptées: nombre
textalign alignement du texte – exemple: center – valeurs acceptées: left, right, center
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Quote

Insérer une citation, avec ou sans notifier l’auteur

[  quote fontsize="15" cite="" url="" animate="fadeIn" class=""]Quote content[  /quote]
Fields Parameters
font-size taille de police de la citation, en pixels – exemple: 15 – valeurs acceptées: nombre
cite nom de l’auteur
url lien vers l’auteur (page web, site web, …)
animate animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Button

Créer un bouton à partir des styles pré-enregistrés

[  presetbutton btnstyle="btnreverse" btnsize="small" link="http://epicadesign.fr" target="blank" icon="icon: paper-plane" desc="go in epica design" center="yes" anim="fadeIn" class="yourcustomclass"]Our website[  /presetbutton]
Fields Parameters
btnstyle style pré-enregistré du bouton – exemple: btngray – valeurs acceptées: themebutton, btnwhite, btnreverse, btnlight, btngray, btnbk, btntq, btngreen, btnblue, btnbdk, btnyellow, btnorange, btnred, btnvt
btnsize Taille du bouton – exemple: medium – valeurs acceptées: nosize, small, medium, large
link lien vers lequel redirige le bouton – exemple: http://epicadesign.fr
target le lien s’ouvre dans la même ou une nouvelle fenêtre – exemple: self – valeurs acceptées: blank, self
icon reference de l’icone insérer – exemple: icon: desktop – valeurs acceptées: valeur des icones
desc description afficher dans le bouton, en caractères plus petits
center centrer le bouton – exemple: yes – valeurs acceptées: yes, no
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content texte principal du bouton


Image

Insérer une image

[  addimage yourimg="http://localhost/epicadesign/wp-content/uploads/2014/07/slide21.jpg" wrapsize="67" imgalign="block" imgstyle="imgboxed" onzoom="yes" anim="fadeIn" class="yourcustomclass"]description for this image ...[  /addimage]
Fields Parameters
yourimg media image utilisé dans l’élément – exemple: http://localhost/epicadesign/wp-content/uploads/2014/07/slide21.jpg – valeurs acceptées: url de l’image
wrapsize taille du conteneur de l’image, en pourcentage – exemple: 67 – valeurs acceptées: nombre de 1 à 100
imgalign alignement de l’élément – exemple: block – valeurs acceptées: block, inline – (la valeur block centre l’image)
imgstyle style du conteneur – exemple: imgboxed – valeurs acceptées: imgclassic, imgboxed
onzoom activer la lightbox pour cette image – exemple: yes – valeurs acceptées: yes, no
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu de description de l’image (non affiché si vide).


Slider

Créer un slider d’image

[  slider source="media: 2132,2131,2130" limit="24" pattern="pattern_2" height="430" portrait="yes" autoplay="no" hover="no" pagination="true" loader="pie" loaderpos="top" transition="curtainBottomLeft" time="5000" trans="1700" class=""]
Fields Parameters
source medias images utilisés dans l’élément – exemple: media: 2132,2131,2130 – valeurs acceptées: media: attachment_id de l’image
limit nombre maximum d’images utilisés dans l’élément pour recent posts, category and custom taxonomy – exemple: media: 8 – valeurs acceptées: nombre
pattern ajouter un pattern sur les images – exemple: pattern_2 – valeurs acceptées: pattern_no, pattern_1, pattern_2, pattern_3, pattern_4, pattern_5, pattern_6, pattern_7, pattern_8, pattern_9
height hauteur du slider, en pixels – exemple: 430 – valeurs acceptées: nombre
portrait recadrer les images (crop) – exemple: yes – valeurs acceptées: yes, no
autoplay commencer l’animation à l’ouverture de la page – exemple: yes – valeurs acceptées: yes, no
hover mise en pause au survol de la souris – exemple: yes – valeurs acceptées: yes, no
pagination afficher les miniatures d’images (thumbnails) – exemple: true – valeurs acceptées: true, false
loader style du timer d’affichage – exemple: pie – valeurs acceptées: pie, bar, none
loaderpos position du timer d’affichage – exemple: top – valeurs acceptées: top, bottom
transition style des transitions entre les images – exemple: curtainBottomLeft – valeurs acceptées: random, simpleFade, curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop
time delai entre 2 transitions, en ms – exemple: 5000
trans delai d’execution de la transition, en ms – exemple: 1000
class insérer une class CSS personnelle


Carousel

Créer un carousel d’image de type infinite

[  carousel source="media: 115,92,91" style="infcar-default" limit="11" link="post" target="blank" items="4" pages="yes" autoplay="no" playspeed="3000" speed="600" class="yourcustomclass"]
Fields Parameters
source medias images utilisés dans l’élément – exemple: media: 115,92,91 – valeurs acceptées: media: attachment_id de l’image
style style pré-enregistré du carousel – exemple: infcar-default – valeurs acceptées: infcar-default
limit nombre maximum d’images utilisés dans l’élément pour recent posts, category and custom taxonomy – exemple: media: 8 – valeurs acceptées: max 16
link lien attaché à l’image – exemple: infcar-default – valeurs acceptées: none, post, image – none pour aucun lien ; post (pour source = recents post) – lien vers l’article ; image – lien vers image en fullscreen
items nombre d’images visible en même temps – exemple: 3 – valeurs acceptées: nombre de 1 à 6
pages afficher la pagination – exemple: yes – valeurs acceptées: yes, no
autoplay commencer l’animation à l’ouverture de la page – exemple: yes – valeurs acceptées: yes, no
playspeed delai entre 2 transitions, en ms – exemple: 4000
speed delai d’execution de la transition, en ms – exemple: 600
class insérer une class CSS personnelle


Progress bar

Créer une barre de progression

[  progressbar barcolor="#000" textcolor="#fff" value="50" height="22" width="75" striped="yes" class="yourcustomclass"]progress bar text[  /progressbar]
Fields Parameters
barcolor couleur de la barre de progression – exemple: #000 – valeurs acceptées: code couleur hexadecimal
textcolor couleur du texte de la barre de progression – exemple: #fff – valeurs acceptées: code couleur hexadecimal
value valeur de la progression, en pourcentage – exemple: 70 – valeurs acceptées: nombre de 1 à 100
height hauteur de la barre de progression, en pixels – exemple: 22 – valeurs acceptées: nombre
width largeur de la barre de progression, en pourcentage – exemple: 75 – valeurs acceptées: nombre de 1 à 100
stripped activer l’animation – exemple: yes – valeurs acceptées: yes, no
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu.


Round charts

Presentation de valeur avec animation circulaire

[  roundchart value="80" valuecolor="clrblue" title="title of chart" titlecolor="clrgray" fontsize="fa-2x" size="220" sign="%" barcolor="#f1592a" barwidth="22" animtime="4000" class="yourcustomclass"]content after the chart[  /roundchart]
Fields Parameters
value valeur numerique du chart – exemple: 80 – valeurs acceptées: nombre
icon reference de l’icone insérer – exemple: icon: desktop – valeurs acceptées: valeurs des icones
chartcontent Texte inséré dans le chart, affiché après l’icone – valeurs acceptées: texte
valuecolor couleur de la valeur numerique du chart – exemple: clrblue – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
title titre du chart – valeurs acceptées: texte
titlecolor couleur du titre du chart – exemple: clrgray – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
fontsize taille de police de la valeur du chart – exemple: fa-2x – valeurs acceptées: fa-1x, fa-2x, fa-3x, fa-4x, fa-5x, fa-mass
size largeur et hauteur du chart – exemple:220 – valeurs acceptées: nombre de 180 a 1000
barcolor couleur de la barre du chart – exemple: #f1592a – valeurs acceptées: code couleur hexadecimal
barwidth largeur de la barre du chart, en pixels – exemple: 20 – valeurs acceptées: nombre de 18 à 140
animtime durée de l’animation, en milliseconde – exemple: 3000 – valeurs acceptées: nombre de 2000 à 4000
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu de description, informations complémentaire du chart


Counter

Presentation de valeur en compteur animé

[  counter value="540" aftervalue="Hours" icon="icon: cloud" iconcolor="clrgray" iconsize="fa-4x" valuecolor="clrblue" title="title of this counter" titlecolor="clrorange" class="yourcustomclass"]
Fields Parameters
style style du counter: Vertical ou Horizontal – exemple: count-one – valeurs acceptées: count-one (vertical), count-two (horizontal)
value valeur numerique du counter – exemple: 540 – valeurs acceptées: nombre
valuecolor couleur des valeurs alphanumeric du counter – exemple: clrorange – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
aftervalue texte ajouté après la valeur numérique – exemple: Hours – valeurs acceptées: caractères alphanumériques
textsize taille de police des valeurs alphanumérique, en pixels – exemple: 40 – valeurs acceptées: number
icon reference de l’icone insérer – exemple: icon: desktop – valeurs acceptées: valeurs des icones
iconsize taille de l’icone – exemple: fa-3x – valeurs acceptées: fa-1x, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-mass
iconcolor couleur de l’icone – exemple: clrgray – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
title titre du counter – valeurs acceptées: texte
titlecolor couleur du titre du counter – exemple: clrgray – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
boxed Ajouter des bordures autour du counter – exemple: yes – valeurs acceptées: no, yes
class insérer une class CSS personnelle


Service

Présentation de service, avec ou sans lien

[  boxservice style="modetwo" icon="icon: archive" iconsize="fa-3x" bgcolor="bgblue" iconcolor="clrlight" bgsize="epc-icon-large" link="#" title="service title" titlecolor="clrbk" anim="fadeIn" class="yourcustomclass"]service description ...[  /boxservice
Fields Parameters
style style pré-enregistré du service – exemple: modetwo – valeurs acceptées: modeone, modetwo
icon reference de l’icone insérer – exemple: icon: desktop – valeurs acceptées: valeurs des icones
iconsize taille de l’icone – exemple: fa-3x – valeurs acceptées: fa-1x, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-mass
bgcolor couleur du background de l’icone – exemple: bgblue – valeurs acceptées: bgnone, bgwt, bglight, bggray, bgdark, bgbk, bgtq, bggreen, bgblue, bgbdk, bgorange, bgyellow, bgred, bgvt
iconcolor couleur de l’icone – exemple: clrlight – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
bgsize taille du background de l’icone – exemple: epc-icon – valeurs acceptées: epc-icon-medium, epc-icon, epc-icon-large, epc-icon-mass
link mettre un lien sur l’icone – exemple: # – valeurs acceptées: url
title titre du service
titlecolor couleur du titre – exemple: clrorange – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
anim animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Price box

affichage d’informations avec tarifs et spécificités

[  pricebox style="bggreen" headcolor="clrred" size="pricetiers" feat="featured text" title="title of price box" price="149 $" sub="subtitle for this price box" background="#f5f5f5" class="yourcustomclass"]Price Box Content ... USE WP LIST[ /pricebox]
Le champ de contenu peut accepter toutes les entrées. Nous vous conseillons d’utliser une liste de type <ul> disponible dans l’éditeur wordpress, cet élément étant designer pour s’accorder avec le shortcode de price box.
Fields Parameters
style couleur de la price box (header and footer) – exemple: bggreen – valeurs acceptées: bgnone, bgwt, bglight, bggray, bgdark, bgbk, bgtq, bggreen, bgblue, bgbdk, bgorange, bgyellow, bgred, bgvt
headcolor couleur du texte dans le header de la price box – exemple: clrwt – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
size largeur de la price box – exemple: pricetiers – valeurs acceptées: pricefull (fullwidth), pricedemi (1/2), pricetiers (1/3), pricequart (1/4)
feat texte de mise en avant
title titre ou nom du service/produit
price prix, indiquez votre valeur/monnaie
background couleur de fond de la description – exemple: #eec1c1 – valeurs acceptées: code couleur hexadecimal
subtitle sous titre, placé sous le prix
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Members

Box de présentation de membre ou d’équipe avec contenu et lien vers les réseaux sociaux

[  members header="http://localhost/epicadesign/wp-content/uploads/2014/07/slide16.jpg" headerbg="bgorange" cutbg="bgblue" avatar="http://localhost/epicadesign/wp-content/uploads/2014/07/slide29.jpg" member="the member name" funt="the member function" furl="#" turl="#" gurl="#" durl="#" lurl="#" murl="#" animate="fadeIn" class="yourcustomclass"]Members Infos Content ...[  /members]
Les liens vers les réseaux sociaux ne sont affichés que si le champs contient une valeur.
Fields Parameters
header media image utilisé comme background du header de la member box – exemple: http://localhost/epicadesign/wp-content/uploads/2014/07/slide16.jpg – valeurs acceptées: url
headerbg couleur du background du header de la member box – exemple: bgorange – valeurs acceptées: bgnone, bgwt, bglight, bggray, bgdark, bgbk, bgtq, bggreen, bgblue, bgbdk, bgorange, bgyellow, bgred, bgvt
cutbg couleur de la ligne de separation du header de la member box – exemple: bgblue – valeurs acceptées: bgnone, bgwt, bglight, bggray, bgdark, bgbk, bgtq, bggreen, bgblue, bgbdk, bgorange, bgyellow, bgred, bgvt
avatar media image utilisé comme avatar / image du membre – exemple: http://localhost/epicadesign/wp-content/uploads/2014/07/slide29.jpg – valeurs acceptées: url
member nom et prénom du membre
funt fonction du membre
furl facebook url – exemple: https://www.facebook.com/my_page_id
turl twitter url
gurl google url
durl dribble url
lurl linkedIn url
murl email adress (declenche un envoie d’email)
animate animer cet élément – exemple: bounceInRightvoir la liste des animations
class insérer une class CSS personnelle
content Ce champ est prévu pour l’insertion de votre contenu


Tabs

Insérer un contenu affiché sous forme de liste à onglets.

[  tabs style="default" navstyle="nav-justified" class=""][  tab title="Title 1"]Content 1[  /tab] [  tab title="Title 2"]Content 2[  /tab] [  tab title="Title 3"]Content 3[  /tab][  /tabs]
Fields Parameters
style style pré-enregistré – exemple: default – valeurs acceptées: default
navstyle style des items de navigation – exemple: nav-classic – valeurs acceptées: nav-classic, nav-justified, nav-stacked
class insérer une class CSS personnelle
content Base de la liste à onglet, à modifier après insertion du shortcode dans l’éditeur WordPress. Ce champ est prévu pour l’insertion du shortcode Tab


Tab

Insérer un onglet supplémentaire à une liste à onglets Tabs.

[  tabs style="default" class=""] [  tab title="Tab title" class=""]Tab content[  /tab] [  /tabs]
Fields Parameters
title titre de l’onglet
class insérer une class CSS personnelle
content contenu de l’onglet, à modifier après insertion du shortcode dans l’éditeur WordPress.


Spoiler

Insérer un contenu affiché sous forme d’accordéon dépliable.

[  spoiler title="The spoiler title" style="default" open="yes" icon="arrow-down" class="yourcustomclass"]Hidden content[  /spoiler]
Fields Parameters
title titre du spoiler
open Le spoiler est ouvert ou fermé à l’ouverture de la page – exemple: yes – valeurs acceptées: yes, no
style Style pré-enregistré du spoiler – exemple: default – valeurs acceptées: default
icon Ajouter un icon avant le titre – exemple: chevron-down – valeurs acceptées: none, plus, plus-circle, plus-square-o, plus-square, arrow-down, arrow-circle-o-down, arrow-circle-down, chevron-down, chevron-circle-down, caret-down, caret-square-o-down, folder-open-o, folder-open
class insérer une class CSS personnelle
content contenu du spoiler.


List

Insérer une liste.

[  epclist style="listclassic" icon="icon: asterisk" iconcolor="clrblue" textcolor="clrdark" size="16" class="yourcustomclass"] USE WP LIST[ /epclist]
Fields Parameters
style Style pré-enregistré de la liste – exemple: listbasic – valeurs acceptées: listbasic, listclassic
icon Ajouter un icone avant le contenu de l’item de liste – exemple: icon: asterisk – valeurs acceptées: valeurs des icones
iconcolor couleur de l’icone – exemple: clrblue – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
textcolor couleur du texte – exemple: clrwt – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
size taille de police de la liste et icone, en pixel – exemple: 16 – valeurs acceptées: nombre de 8 à 40
class insérer une class CSS personnelle
content Base de la liste, à modifier après insertion du shortcode dans l’éditeur WordPress.


Circle

Insérer un element circulaire avec effets au survol.

[  advdcircle circlestyle="circletwo" frontimg="http://localhost/epicadesign/wp-content/uploads/2014/07/slide27.jpg" bgin="bggray" bgout="bgorange" title="PRINCIPAL TITLE" titlecolor="clrwt" subtitle="The subtitle" subtitlecolor="clrtq" link="Title of link" linkcolor="clrred" url="#" target="blank" anim="fadeIn" class="yourcustomclass"]description for this circle[  /advdcircle]
Fields Parameters
circlestyle Style pré-enregistré de l’élément – exemple: circletwo – valeurs acceptées: circleone, circletwo, circlethree, circlefour, circlefive, circlesix, circlesvn
frontimg image de premier plan – exemple: http://localhost/epicadesign/wp-content/uploads/2014/07/slide27.jpg – valeurs acceptées: url
bgin couleur de premier plan (si aucune image) – exemple: bggray – valeurs acceptées: bgnone, bgwt, bglight, bggray, bgdark, bgbk, bgtq, bggreen, bgblue, bgbdk, bgorange, bgyellow, bgred, bgvt
bgout couleur au survol de la souris – exemple: bgorange – valeurs acceptées: bgnone, bgwt, bglight, bggray, bgdark, bgbk, bgtq, bggreen, bgblue, bgbdk, bgorange, bgyellow, bgred, bgvt
title titre ( affiché au survol de la souris) – valeurs acceptées: texte
titlecolor couleur du titre – exemple: clrblue – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
subtitle sous-titre ( affiché au survol de la souris) – valeurs acceptées: texte
subtitlecolor couleur du sous titre – exemple: clrblue – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
link texte du lien ( affiché au survol de la souris) – valeurs acceptées: texte
linkcolor couleur du lien – exemple: clrred – valeurs acceptées: clrwt, clrlight, clrgray, clrdark, clrbk, clrtq, clrgreen, clrblue, clrbdk, clrorange, clryellow, clrred, clrvt, clrinherit, clrnone
url url du lien – exemple: http://epicadesign.fr – valeurs acceptées: url
target cible du lien ouvert dans une nouvelle fenetre ou dans la meme fenetre – exemple: blank – valeurs acceptées: self, blank
anim animer cet élément – exemple: fadeIn – valeurs acceptées: valeurs des animations
class insérer une class CSS personnelle
content contenu placé après l’élément


Code box

Insérer un contenu de type langage de developpement web.

[  codebox style="javascript" backstyle="okaidia" linecount="yes"]Paste your code here. This box allows you to insert and magnify code. Enjoy ![  /codebox]
Fields Parameters
style type de langage du code – exemple: css – valeurs acceptées: markup (HTML), css, javascript, php
backstyle style de la fenetre de code – exemple: okaidia – valeurs acceptées: novalue, okaidia
linecount activer le comptage de ligne – exemple: yes – valeurs acceptées: yes, no
content Inserez votre code après avoir ajouté le shortcode dans l’éditeur WordPress. Le code doit toujours être écrit lorsque l’éditeur est en mode visuel.
epica design


Modal box

Insérer un contenu affiché en pop-up.

[  modalbox style="classicmd" modaltitle="the modal box title" btnstyle="btnorange" size="small" btntext="The button or link text " class="yourcustomclass"]Your Modal Box content ...[  /modalbox]
Fields Parameters
style Style pré-enregistré de la fenetre pop-up – exemple: modal-medium – valeurs acceptées: modal-small, modal-medium, modal-large
bodystyle Style du contenu de la fenetre pop-up – exemple: md-bd-white – valeurs acceptées: md-bd-white, md-bd-dark
modaltitle Titre de la fenetre pop-up, affiché avant le contenu
btnstyle Style du bouton déclencheur du pop-up – exemple: btnorange – valeurs acceptées: themebutton, btnwhite, btnreverse, btnlight, btngray, btnbk, btntq, btngreen, btnblue, btnbdk, btnwhite, btnyellow, btnwhite, btnorange, btnred, btnvt
size Taille du bouton déclencheur du pop-up – exemple: nosize – valeurs acceptées: small, nosize, medium, large
btntext Texte du bouton d’ouverture du pop-up
class insérer une class CSS personnelle
content contenu de la fenetre pop-up.


Gmap

Insérer une carte Google Map

[  gmap width="65" height="360" center="no" address="central park, new york" class="yourcustomclass"]
Fields Parameters
width largeur de la map, en pourcentage – exemple: 65 – valeurs acceptées: nombre de 1 à 100
height hauteur de la map, en pixels – exemple: 350 – valeurs acceptées: nombre
center centrer l’élément – exemple: yes – valeurs acceptées: yes, no
adress adresse ciblée par le marqueur de la carte
class insérer une class CSS personnelle


YouTube Advanced

Insérer une video ou une playlist de vidéos YouTube

[  youtube_advanced url="http://youtube.com/watch?v=XXXXXX" playlist="ZIlGNwglkDQ , aQT9on38gSA" width="65" center="yes" controls="no" autohide="yes" showinfo="no" autoplay="yes" loop="yes" rel="no" fs="no" modestbranding="no" theme="light" class=""]
Fields Parameters
url url de la page hébergeant la vidéo – exemple: http://youtube.com/watch?v=XXXXXX
playlist id des vidéo en playlist – exemple: ZIlGNwglkDQ – séparer les id par une virgule ,
width largeur de la video, en pourcentage – exemple: 65 – valeurs acceptées: nombre de 1 à 100
center centrer la vidéo – exemple: yes – valeurs acceptées: yes, no
controls afficher les boutons de controle – exemple: yes – valeurs acceptées: no, yes, alt
autohide comportement des boutons de controle – exemple: yes – valeurs acceptées: no, yes, alt
showinfo afficher les informations de la vidéo – exemple: yes – valeurs acceptées: no, yes
autoplay demarrer la vidéo à l’ouverture de la page – exemple: yes – valeurs acceptées: no, yes
loop diffuser la video en boucle – exemple: yes – valeurs acceptées: no, yes
rel afficher la mosaique de video liées à la fin de la lecture – exemple: yes – valeurs acceptées: no, yes
fs permettre de basculer la vidéo en mode plein écran – exemple: yes – valeurs acceptées: no, yes
modestbranding afficher le logo youtube sur la video – exemple: yes – valeurs acceptées: no, yes
theme style pré-enregistré du player de lecture – exemple: dark – valeurs acceptées: light, dark
class insérer une class CSS personnelle


Vimeo

Insérer une video Vimeo

[  vimeo url="http://vimeo.com/89501438" width="55" center="no" autoplay="yes" class=""]
Fields Parameters
url url de la page hébergeant la vidéo – exemple: http://youtube.com/watch?v=XXXXXX
width largeur de la video, en pourcentage – exemple: 65 – valeurs acceptées: nombre de 1 à 100
center centrer la vidéo – exemple: yes – valeurs acceptées: yes, no
class insérer une class CSS personnelle


Facebook stream

Afficher le fil d’informations de votre page Facebook

[  facebookbox url="https://www.facebook.com/FacebookDevelopers" style="dark" width="540" faces="no" header="no" posts="no" border="no"]
Fields Parameters
url url de la page Facebook – exemple: https://www.facebook.com/FacebookDevelopers
style style pré-enregistré du widget – exemple: dark – valeurs acceptées: light, dark
width largeur du widget, en pixels – exemple: 380 – valeurs acceptées: nombre
face afficher l’avatar de vos fans – exemple: yes – valeurs acceptées: yes, no
header afficher le header du widget – exemple: yes – valeurs acceptées: yes, no
post afficher le fil de vos derniers messages postés sur votre page Facebook – exemple: yes – valeurs acceptées: yes, no
border afficher les bordures du widget – exemple: yes – valeurs acceptées: yes, no


Twitter stream

Afficher le fil d’informations de votre page Twitter

[  twitterbox name="Epicadesign" style="dark" width="64" height="500" limit="3" linkcolor="#17b3cb" bordercolor="#dddddd" header="no" footer="no" border="no" background="yes"]
Fields Parameters
name nom d’utilisateur Twitter (ID) – exemple: Epicadesign
style style pré-enregistré du widget – exemple: dark – valeurs acceptées: light, dark
width largeur du widget, en pourcentage – exemple: 380 – valeurs acceptées: nombre
height hauteur du widget, en pixels – exemple: 500 – valeurs acceptées: nombre
limit nombre de tweets à afficher – exemple: 5 – valeurs acceptées: nombre
linkcolor couleur des liens du widget – exemple: #17b3cb – valeurs acceptées: code couleur hexadecimal
bordercolor couleur des bordures du widget – exemple: #666 – valeurs acceptées: code couleur hexadecimal
header afficher le header du widget – exemple: yes – valeurs acceptées: yes, no
footer afficher le footer du widget – exemple: yes – valeurs acceptées: yes, no
border afficher les bordures du widget – exemple: yes – valeurs acceptées: yes, no
background utiliser un background transparent – exemple: yes – valeurs acceptées: yes, no


Google+ post

Afficher une publication en provenance de Google+

[  googlepost url="https://plus.google.com/114048863488330644583/posts/eSXGMSS4Wmg"]
Fields Parameters
url Insérer le lien vers le post (données G+ à récupérer sur le post lui même) – exemple: https://plus.google.com/114048863488330644583/posts/eSXGMSS4Wmg


Loop of post

Afficher la loop de vos derniers articles publiés sur le blog

[  wploop style="masonryloop" layout="3" limit="12"]
Fields Parameters
style style de loop – exemple: fliploop – valeurs acceptées: classicloop, accordianloop, flatloop, moreflatloop, fliploop, pinitloop, puzzleloop, sliderloop
layout nombre de colonnes pour afficher les posts – exemple: 2 – valeurs acceptées: 1, 2, 3 ou 4
limit nombre d’article affichés – exemple: 8 – valeurs acceptées: nombre de 1 à 24

Theme support link

EVOLUTION theme documentation

Evolution demo