Blog

  • Mais que sont donc les shortcodes, au juste ?

    What-Are-Shortcodes-AnywaySi vous avez remarqué, l’une des règles d’or de WordPress est de toujours, absolument toujours rendre les choses un peu plus faciles pour tout le monde – débutants comme développeurs chevronnés. L’un des moyens d’atteindre cet objectif réside dans l’utilisation des shortcodes.

    La page d’assistance de WordPress.com les définit ainsi :

    shtCela semble assez simple. Maintenant, si vous n’aviez jamais entendu parler des shortcodes avant cet article et que vous ne savez pas à quoi ils ressemblent, ce sont ces textes archaïques ressemblant à du code et entourés de crochets.

    Par rapport au code normal, qui ressemble généralement à ceci :

    HTML5-video-tag-sample-code
    (Euh… Quoi ?)

    shortcodes ressemblent généralement un peu à ceci :

    embed_shortcode
    (Un jeu d’enfant.)

    …et si vous êtes développeur (ou même, que diable, quelqu’un qui a déjà approché un ordinateur au moins deux fois), vous conviendrez probablement que le simple fait de taper au clavier et de cliquer pour accomplir une tâche insignifiante peut vous faire perdre beaucoup de temps. Pour la même raison que nous avons des raccourcis clavier, les shortcodes existent pour nous faciliter la vie à tous, afin que nous gagnions du temps pour faire et créer de meilleures choses ; ils sont très semblables aux raccourcis clavier dans la mesure où ils partagent exactement le même objectif.

    Revenons maintenant à ce shortcode précis, le même que ci-dessus :

    embed-shortcode Celui-ci en particulier s’appelle le shortcode embed et est intégré par défaut dans WordPress. Il intègre la vidéo à partir de l’URL directement dans votre contenu. Si vous êtes actuellement sur WordPress, vous pouvez copier et coller le shortcode ci-dessus sur votre site si vous souhaitez le tester.

    Les shortcodes ne sont toutefois pas la solution miracle pour gagner du temps. Dans notre article précédent, nous analysons plus en détail pourquoi les shortcodes ont leur propre lot d’inconvénients, et ce que l’équipe Sandwich vous mijote pour y remédier.

    Pour l’instant, n’hésitez pas à faire des essais avec les shortcodes et à voir tout ce qu’ils peuvent faire pour vous.

    Bonne création de site !

  • Mappage de shortcodes : comment PBS prendra en charge plus de 800 extensions et 2 000 shortcodes

    How-PBS-Supports-800-Plugins-2000-ShortcodesWhen I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

    Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

    I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

    I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

    I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

    Ces dernières semaines, l’équipe de PBS a ajouté un élément de carte, ainsi qu’un élément d’onglets.

    Maintenant, il serait assez facile et banal pour nous de nous contenter d’ajouter un nouvel élément tous les deux jours.

    But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

    And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

    I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

    Well, the simple answer is yes. Yes it is.

    And we’ve managed to achieve this feat through shortcode mapping.

    What is Shortcode Mapping?

    Shortcode mapping
    Shortcode mapping makes building shortcodes more friendly.

    Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

    Les avantages d’un tel système sont tout à fait considérables :

    1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

    2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

    3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

    4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

    5.) Overall faster page building time!

    Le mappage de shortcodes n’est pourtant pas nouveau, et plusieurs constructeurs de pages en disposent déjà. Qu’est-ce qui rend le nôtre différent, alors ?

    Comment fonctionne le mappage de shortcodes dans les autres constructeurs de pages

    Lonely times
    Each person/site does their own shortcode mapping.

    Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

    Dans ce scénario, la charge du mappage des shortcodes vous incombe entièrement, à vous, l’utilisateur. Si vous souhaitez que tous vos shortcodes soient complètement mappés avec tous leurs attributs (et avec les jolis sélecteurs de couleurs et autres fonctionnalités), vous devrez veiller à renseigner chaque moindre détail de chacun des shortcodes.

    What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

    Comment fonctionne le mappage de shortcodes dans Page Builder Sandwich

    Shortcode mapping is centralized
    Shortcode mappings are shared across all users.

    Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

    Cela nous apporte de nombreux avantages appréciables :

    1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
    2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
    3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
    4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
    5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
    6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!

    In case you’re interested in reading into how we made all of this possible,  we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

    Inscrivez-vous à notre newsletter !

    You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

    So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!

  • Ajouter des cartes élégantes à votre page est une expérience interactive

    Adding-Stylish-Maps-to-your-Page-is-an-Interactive-Experience-2Vous pouvez désormais intégrer des cartes dans la conception de vos pages grâce à Page Builder Sandwich !

    C’est curieux de s’enthousiasmer pour des cartes. On récupère l’URL de Google Maps, puis on l’intègre. Ou alors, on trouve une extension de carte en ligne et on insère un shortcode. Ou peut-être que votre autre constructeur de page en propose déjà une et que vous pouvez en ajouter une dès que vous le souhaitez. Mais si nous sommes si enthousiastes, c’est parce que nous avons porté l’ajout de cartes à un tout autre niveau.

    Voici un aperçu :

    L’ancienne façon ennuyeuse d’ajouter une carte

    Voici comment vous ajoutez une carte avec un constructeur de page classique :

    1. Vous faites glisser un nouvel élément de carte,
    2. Vous saisissez la latitude et la longitude dans les champs,
    3. Vous entrez d’autres valeurs dans les champs comme la hauteur de la carte, la largeur de la carte, cochez la case du style de route, etc.,
    4. Vous cliquez sur aperçu, vérifiez à quoi cela ressemble et décidez que vous devez modifier quelque chose pour le rendre plus attrayant,
    5. Vous retournez dans le constructeur de page et modifiez les valeurs, puis vous répétez l’étape 4 ci-dessus.

    La méthode Page Builder Sandwich pour ajouter une carte

    Les cartes sur les sites web sont interactives – vous pouvez vous déplacer, zoomer et dézoomer sur la carte. Nous nous sommes donc dit, pourquoi ne pas éliminer toutes les approximations et permettre tout simplement d’interagir directement avec la carte lors de la création de votre page ?

    Voici comment vous ajoutez une carte avec Page Builder Sandwich :

    1. Vous ajoutez un élément de carte,
    2. Vous saisissez la latitude et la longitude ou l’adresse sur laquelle vous souhaitez centrer la carte,
    3. Vous déplacez la carte et effectuez un zoom avant ou arrière pour obtenir le rendu souhaité,
    4. Vous ajoutez de superbes couleurs à vos cartes pour les adapter à votre style,
    5. Vous cliquez sur enregistrer.

    Notre méthode est bien plus amusante et intuitive. En gros, vous interagissez avec la carte exactement comme vous le feriez avec un Google Maps standard.

    Cartes colorées ou personnalisation avec SnazzyMaps

    Une fonctionnalité formidable que nous avons intégrée est la possibilité de teinter et de colorer vos cartes, et c’est ultra simple. (Ceci est réservé à la version premium). Si vous souhaitez colorer votre carte, cliquez simplement sur notre sélecteur de couleurs et choisissez une couleur, et votre carte changera instantanément.

    En voici une que nous avons teintée en rose :

    Page Builder Sandwich prend également en charge des combinaisons de couleurs plus élaborées via SnazzyMaps. Ils disposent d’une immense sélection de thèmes de couleurs créés par les utilisateurs, et ils vous permettent de concevoir le vôtre si vous souhaitez un contrôle accru sur les couleurs.

    Trouvez simplement la palette de couleurs qui vous plaît, puis copiez le code et collez-le dans Page Builder Sandwich. La palette de couleurs s’appliquera aussitôt à votre carte.

    Voici un superbe thème de couleurs appelé papuportal dark de SnazzyMaps:

    Placez des cartes où vous le souhaitez

    Il y a bien d’autres choses intéressantes que vous pouvez faire avec les cartes – comme les ajouter dans des rangées en pleine largeur pour un effet plus spectaculaire. Vous pouvez également les intégrer dans un carrousel si vous le souhaitez, ou dans des onglets (une fonctionnalité à venir).

    Si vous n’avez pas encore Page Builder Sandwich, vous pouvez essayer la version premium en cliquant sur le lien « Live Demo » ci-dessus.

  • Le problème passé sous silence des shortcodes

    The-Unspoken-Problem-of-Shortcodes

    Les shortcodes sont l’un des piliers de WordPress. Ils constituent le pont entre les développeurs et les créateurs de sites, permettant d’insérer des éléments de contenu élaborés pratiquement n’importe où. Les créateurs d’extensions adorent les shortcodes, car ils offrent plus de flexibilité quant à la manière et à l’endroit où leurs utilisateurs affichent leur contenu.

    Si vous ne savez pas ce que sont les shortcodes ni à quoi ils ressemblent, il s’agit de ces fragments de texte archaïques semblables à du code, entourés de crochets. Ils ressemblent à ceci :

    Celui-ci en particulier s’appelle le shortcode embed et est intégré par défaut dans WordPress. Il permet d’intégrer la vidéo de l’URL dans votre contenu. Copiez et collez simplement le shortcode ci-dessus sur votre site si vous souhaitez l’essayer.

    En coulisses, lorsque WordPress rencontre un shortcode dans votre contenu, il le traite et le convertit en autre chose. Dans notre exemple ci-dessus, dès qu’un shortcode

    est détecté, WordPress récupère l’URL contenue dans le shortcode et la compare à une liste de fournisseurs de contenu pris en charge. Lorsqu’il en trouve un, il récupère alors le code d’intégration iframe approprié et l’affiche à la place.

    Alors, quel est le problème ici ? Cela semble assez simple : il suffit de saisir un court texte entre crochets et le tour est joué.

    C’est là qu’intervient l’API Shortcode..

    Des shortcodes à foison

    L’API Shortcode ouvre la création de shortcodes aux développeurs. Grâce à cela, les développeurs peuvent ajouter leurs propres shortcodes au sein de leurs extensions.

    C’est formidable : désormais, avec un simple petit extrait de code (d’où le nom « shortcode »), les débutants comme les utilisateurs avancés peuvent insérer virtuellement n’importe quel type de contenu où ils le souhaitent.

    Par défaut, WordPress ne propose qu’une poignée de shortcodes. Il est facile de les taper de mémoire car ils sont très peu nombreux. Mais si vous installez quelques extensions, le nombre de shortcodes grimpe rapidement à une douzaine ou plus, et dans certains cas à plus d’une centaine. Chaque shortcode possède son propre ensemble d’attributs et ses instructions d’utilisation. Chaque extension dispose très probablement d’une forme de documentation expliquant le fonctionnement de tous ses shortcodes et répertoriant tous les paramètres disponibles pour chacun d’eux. Mais il faudrait être fou pour essayer de mémoriser tous les shortcodes et leurs attributs.

    Le problème est qu’il n’existe aucun endroit centralisé pour découvrir tous les shortcodes disponibles sur votre site et savoir comment les utiliser.

    Certains tentent de résoudre le problème

    Certaines extensions tentent de résoudre ce problème en présentant tous leurs propres shortcodes dans un menu déroulant facile d’accès. Cliquer sur l’un d’eux affiche alors le shortcode, accompagné de tous les attributs possibles. Il n’est plus nécessaire de le mémoriser, ce qui est une bonne chose.

    Screen-Shot-2016-06-22-at-11.27.09-AM

    D’autres vont plus loin et ajoutent un formulaire contextuel de réglages avec des cases à cocher et des sélecteurs de couleur pour renseigner les attributs du shortcode.

    Screen-Shot-2016-06-22-at-11.28.54-AM

    Cette solution fonctionne en quelque sorte. Cependant, chaque extension n’énumère que ses propres shortcodes. Ainsi, si chaque extension crée sa propre version de sélecteur de shortcodes, vous risquez inévitablement de vous retrouver avec plusieurs sélecteurs de shortcodes sur votre écran (cela m’est déjà arrivé).

    Screen-Shot-2016-06-22-at-11.22.41-AM

    En d’autres termes, chaque extension fait ce qu’elle veut dans son coin et implémente sa propre solution pour ses propres shortcodes. Certaines extensions ajoutent soit un nouveau bouton à côté du bouton « Ajouter un média », soit un nouveau bouton dans TinyMCE.

    Vous pourriez alors vous demander : « Pourquoi ne pas également rassembler les shortcodes des autres extensions et les inclure aussi dans votre menu déroulant / sélecteur de shortcodes ? » Eh bien, c’est exactement ce que j’ai pensé. Mais c’est plus facile à dire qu’à faire. Je vais vous expliquer pourquoi dans un instant, mais examinons d’abord à quoi ressemblerait une solution idéale.

    La solution idéale

    Le plan parfait serait de créer une extension qui rassemble tous les shortcodes disponibles sur votre site, vous présente la liste et vous aide également à remplir tous les attributs. Et chaque fois que vous installeriez une nouvelle extension, tous ces nouveaux shortcodes introduits vous seraient également présentés.

    Imaginez un emplacement centralisé où tous vos shortcodes seraient regroupés pour un accès facile. Chaque shortcode décrirait son rôle et l’extension à laquelle il appartient. Ensuite, pour chaque attribut disponible, imaginez que chacun dispose d’un libellé, d’un moyen adapté pour choisir une valeur et d’une description. Vous verriez des menus déroulants, des sélecteurs de couleur, des boutons radio, des boutons à bascule et tout le reste.

    Une telle solution faciliterait la vie des créateurs de sites web et de contenu. Fini de consulter différentes documentations ou différentes parties de votre tableau de bord d’administration juste pour copier un shortcode généré pour un diaporama que vous souhaitez utiliser.

    Le bémol

    Malheureusement, il est assez difficile de faire quelque chose de ce genre actuellement. Il n’existe aucun moyen infaillible de connaître tous les détails d’un shortcode. Vous pouvez obtenir une liste de tous les shortcodes, mais seulement leurs balises/noms réels ; vous ne pouvez obtenir aucun détail supplémentaire à leur sujet, comme une liste d’attributs, ce qu’ils font et leurs types – comme une chaîne de caractères, une couleur ou un nombre. Vous ne pouvez pas non plus obtenir un semblant de description pour chaque attribut.

    Avis aux développeurs : oui, il existe un troisième argument récemment ajouté à la fonction shortcode_atts, mais ce n’est pas un argument obligatoire. Par conséquent, à moins que chaque développeur d’extensions au monde ne l’implémente, nous n’aurons toujours aucun moyen sûr de déterminer tous les attributs d’un shortcode.

    L’API Shortcode ne fournit aucun mécanisme pour ajouter des descriptions de shortcodes, typer les attributs ou fournir des descriptions d’attributs. Et à moins que WordPress lui-même n’ajoute un espace centralisé pour accéder aux shortcodes, je doute qu’un tel mécanisme voie le jour.

    Conclusion

    Pour l’instant, la tâche d’organiser les shortcodes est laissée à chaque développeur. À moins qu’une méthode centralisée ne soit développée au sein de WordPress, attendez-vous à continuer de voir de multiples boutons « Ajouter un shortcode » dans votre administration. La question de savoir si une telle fonctionnalité devrait être intégrée au cœur de WordPress fait l’objet d’un autre grand débat en soi.

    Une alternative

    Il existe des extensions de constructeur de page qui abordent cela différemment. Au lieu de détecter les shortcodes de manière programmatique, elles disposent de mappeurs de shortcodes où les utilisateurs peuvent renseigner manuellement chaque détail d’un shortcode. Une fois cela fait, il devient disponible au sein du constructeur de page. Bien que  cela fonctionne, ils ne sont disponibles que sur votre propre site.

    Chez Page Builder Sandwich, nous créons actuellement quelque chose qui pourra, nous l’espérons, résoudre ce casse-tête des shortcodes. Abonnez-vous à notre newsletter ci-dessous pour être tenu informé de nos progrès.

  • 5 raisons pour lesquelles l’espace blanc est important

    Reasons-Why-Whitespace-MattersFondamentalement, l’espace blanc, dans sa définition la plus simple, est l’ espace autour et entre tous les éléments d’une composition qui est laissé vide. Ce n’est pas simplement une perte d’espace à l’écran, comme le pensent la plupart des propriétaires de sites Web. Lorsqu’ils sont bien utilisés, les espaces blancs peuvent en réalité offrir des avantages pour mieux promouvoir un produit. C’est un élément clé pour créer un bon design et cela améliore un site Web à tous les égards.

    Bien que le terme espace blanc suggère que l’espace est blanc, il n’a pas toujours besoin d’être littéralement blanc. L’espace blanc peut en fait être de n’importe quelle couleur — il peut même comporter un motif discret ou une texture. C’est une zone sur laquelle vous ne voulez pas que l’œil se focalise. On l’appelle également un espace négatif.

    Alors, pourquoi l’espace blanc est-il important ?

    newsfeed
    Source de l’image : Fil d’actualité

    Raison n°1 : Améliore la lisibilité

    L’espace blanc entre les lignes de base et les paragraphes aide réellement les utilisateurs à lire confortablement l’ensemble du contenu du site. Ajuster de petits détails de votre site (comme l’interligne ou l’espacement des lettres) peut faire une énorme différence pour faciliter la lecture.

    L’objectif est d’inciter les gens à continuer leur lecture en concevant des mises en page agréables pour les yeux.

    hpmagicwords
    Source de l’image : HP Magic Words

    Raison n°2 : Accélère l’interaction

    Soyons honnêtes : la plupart de vos visiteurs n’auront pas assez de patience pour explorer minutieusement un site Web. Lorsqu’un site Web a l’air encombré, cela empêche les utilisateurs de trouver facilement ce qu’ils recherchent.

    Les espaces blancs doivent guider le regard du visiteur à travers la page. Moins d’éléments rivalisant pour attirer l’attention et une bonne utilisation des espaces blancs permettent d’éviter les distractions qui ralentissent les visiteurs.

    google
    Source de l’image : Google

    Raison n°3 : Attirer l’attention sur les bons éléments

    L’espace blanc peut donner aux utilisateurs des repères visuels sur l’endroit où ils doivent regarder. Lorsqu’ils sont utilisés de manière appropriée, les espaces blancs aident à mettre en valeur les informations et à attirer l’attention sur une zone particulière de votre site Web.

    Rappelez-vous : si tout se démarque, rien ne ressort.

    Source de l’image : Pocket Penguins

    Raison n°4 : Les premières impressions comptent

    L’aspect visuel et l’ambiance d’un site Web sont la clé principale pour faire une bonne première impression. Une bonne première impression entraîne souvent une durée de visite plus longue. Trop peu d’ espace blanc peut donner à votre site Web un aspect bon marché et peu fiable. Les visiteurs ne considéreront pas le site ou la marque comme crédible à moins qu’il ne soit attrayant. Avoir une bonne quantité d’espace blanc aide à créer le bon ton pour votre site Web. L’espace blanc peut être un moyen de communiquer l’ingéniosité, la fraîcheur et, parfois, l’élégance.

    Astuce : voici une idée pour rendre votre conception Web simple et familière.

    flockknitwear
    Source de l’image : Flock Knitwear

    Raison n°5 : Aide à créer un espace de respiration et de l’équilibre

    Un design équilibré n’est pas forcément synonyme de symétrie. Un grand élément de design peut être équilibré par quelques éléments plus petits. Ajouter de l’espace blanc est un excellent moyen d’équilibrer des éléments de différentes tailles sur votre page. Créez une fluidité pour que les yeux des utilisateurs ne partent pas dans tous les sens. Un bon design doit être capable de guider l’utilisateur d’un point à un autre sans désorienter le visiteur.

    Conclusion

    La prochaine fois que vous visiterez un site Web et que vous vous surprendrez à y rester un moment, pensez à ce qui vous a poussé à rester et à lire. Pensez-vous que l’interligne rend un article plus facile à lire ? L’expérience vous donne-t-elle envie de revenir régulièrement ? Avez-vous eu des difficultés à repérer la navigation ?

    Prenez note de la bonne utilisation de l’espace blanc sur le site Web. Si vous pensez que cela peut également fonctionner sur votre site Web, apprenez à doser et à gérer l’espace que vous devriez allouer à vos éléments jusqu’à ce que vous ayez l’impression d’avoir transmis le bon ton et la bonne lisibilité sans sacrifier la « fluidité » souhaitée pour votre site Web.

    Le but ultime de tout site Web est la communication. L’attrait visuel va de pair avec le succès de votre site Web.

  • 5 conseils simples pour rendre votre site web attrayant

    5-Simple-Ways-To-Make-Your-Website-Look-GoodIn general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

    Voici quelques conseils de base sur ce que vous pouvez faire pour améliorer le design de votre site Web.

    Add high-quality images

    You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

    Choisissez les bonnes couleurs

    booneselections
    Lawrence Boone Selections uses black to add a sense of luxury and value to their website
    juicebox
    Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

    La palette de couleurs d’un site Web joue un rôle majeur dans la création du ton et de l’ambiance adaptés à votre marque. Choisir une jolie couleur ne signifie pas nécessairement que c’est la bonne. Chaque couleur transmet un message et suscite une réaction différents. Les couleurs font partie des premières choses que les visiteurs remarquent et elles peuvent réellement avoir un impact sur le succès de votre site Web.

    Choisissez deux à trois couleurs de base tout au plus pour votre design. Si vous ressentez le besoin d’ajouter plus de couleur, vous pouvez utiliser les teintes claires et les nuances sombres de vos couleurs de base. En théorie des couleurs, une teinte claire (tint) est le mélange d’une couleur avec du blanc, ce qui augmente la luminosité, tandis qu’une ombre (shade) est le mélange d’une couleur avec du noir, ce qui réduit la luminosité.

    Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

    Utilisez des polices contrastées

    Font Pairing There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

    Associer deux polices peut s’avérer difficile, même pour des designers. Vous pouvez faire simple en combinant deux graisses ou styles différents issus d’une même famille de polices. Si une seconde police est nécessaire, choisissez-en une qui contraste bien avec la première. En règle générale, associer une police avec empattement (serif) et une sans empattement (sans-serif) fonctionne très bien. Un autre conseil important est de choisir des polices qui correspondent au style de votre entreprise. Vous pourriez avoir la plus belle police du monde, mais utilisée dans le mauvais contexte, le rendu pourrait tout de même être désastreux.

    Restez épuré grâce aux espaces blancs

    Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

    Optimisez pour les appareils mobiles

    People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

    Conseil supplémentaire : L’utilisation de Page Builder Sandwich sur votre site Web activera automatiquement l’affichage mobile et l’adaptera à la taille des écrans mobiles.

    Conclusion

    Rappelez-vous : sous-estimer le pouvoir du design est l’une des pires erreurs que vous puissiez commettre lors de la création de votre site Web. Vous n’avez pas besoin de déployer des efforts démesurés lors de la conception de votre site, bien sûr, mais en attendant, le simple fait de suivre ces conseils garantira que votre site ne suscitera aucun sentiment de réprobation auprès de votre public.

  • WordPress.com VS WordPress.org

    Wordpress-Com-VS-Wordpress-OrgSi vous êtes relativement novice dans la création de sites web, il y a de fortes chances que vous ne connaissiez pas le grand débat WordPress.com vs WordPress.org. Vous ne saviez peut-être même pas que l’un ou l’autre existait, ni les différents avantages et inconvénients de chacun. Alors, quel est donc ce grand débat entre l’utilisation de WordPress.com et celle de WordPress.org ? L’un d’eux n’est-il qu’une pâle copie bon marché qui attend d’être poursuivie en justice ?

    Eh bien, non.

    Le débat, en résumé, porte sur lequel de ces deux services WordPress est le plus adapté au site web que vous essayez de créer. Aucun des deux n’est une copie de l’autre, et les deux sites appartiennent à WordPress ; c’est simplement que l’un (.com) est une version plus accessible aux non-développeurs que l’autre, et .org présente beaucoup moins de limitations en matière de création de site que .com.

    « Comment savoir de laquelle j’ai besoin, alors ? »

    La réponse à cette question dépend entièrement des besoins de votre futur site web. Aucune entité WordPress n’est objectivement la « meilleure » ou même la version « idéale » à utiliser. Les deux possèdent leurs propres fonctionnalités uniques, et autant d’avantages que d’inconvénients.

    WordPress.com : Pourquoi et quand devrais-je l’utiliser ?

    WordPress.com s’occupe de l’essentiel pour vous, ce qui vous permet de vous concentrer davantage sur le contenu de votre site. C’est un créateur de site entièrement géré et hébergé par une entreprise appelée Automattic. Vous bénéficiez d’un hébergement de premier ordre, de sauvegardes, de sécurité, etc. Cela signifie que vous pouvez vous concentrer sur le contenu de votre site beaucoup plus facilement, au lieu de devoir passer des heures entières à le construire de zéro.

    Notez cependant que WordPress.com s’accompagne également de ses propres limites. Bien que vous n’ayez pas à vous soucier autant de la maintenance des rouages internes de votre site, vous devez garder à l’esprit que vous n’aurez probablement pas autant de liberté que vous le souhaiteriez. Bien que la personnalisation de l’interface de votre site ne pose aucun problème (WordPress.com propose une multitude de thèmes, par exemple), l’ajout de certaines fonctionnalités et d’éléments sous forme d’extensions peut devenir problématique, en particulier si votre site nécessite des fonctionnalités spécifiques qui ne sont pas disponibles sur WordPress.com.

    La manière de maintenir un site web est une toute autre histoire. Cela dépend grandement du fait que 1.) vous n’êtes pas développeur WordPress 2.) vous n’avez aucune intention d’apprendre à coder, ou 3.) vous avez peu ou pas de temps à y consacrer.

    WordPress.org : Quand est-il temps de l’envisager ?

    Une règle empirique lorsqu’il s’agit d’envisager WordPress.org est d’être au moins un peu familiarisé avec le fonctionnement du code, ou d’être prêt à investir du temps pour l’apprendre. Comme WordPress.org est une version auto-hébergée de WordPress, vous pouvez mettre la main à la pâte autant que vous le souhaitez. De plus, vous avez la liberté de bricoler autant ou aussi peu que vous le voulez. Vous seriez responsable de trouver votre propre hébergeur, de configurer vos propres sauvegardes de sécurité et, de manière générale, de maintenir le site web par vous-même – et surtout, selon vos propres conditions.

    « Mais attendez, pourquoi voudrais-je cela ? Le but de WordPress n’est-il pas de faciliter la création de sites ? »

    …Pas exactement. Voyez les choses ainsi : The Daily Post dresse une excellente analogie entre WordPress.org et WordPress.com, de sorte que même le plus grand débutant (comme moi) en saisit immédiatement l’essentiel.

    Selon eux, vous devez considérer WordPress.com comme quelque chose dont vous n’êtes pas entièrement propriétaire. Prenez par exemple l’adolescent de 15 ans que vous étiez, vivant encore chez ses parents. Si vous vouliez peindre votre chambre, vous deviez d’abord demander la permission à vos parents (qui sont, bien sûr, les propriétaires exclusifs de la maison, y compris de votre chambre). Techniquement, la chambre est à vous, mais au bout du compte, eh bien… pas vraiment.

    Ainsi, si vous devez ou souhaitez effectuer des changements radicaux (comme peindre vos murs ou agrandir la pièce), vous devez tout de même en discuter et/ou trouver un compromis avec les véritables propriétaires de la maison, alias papa et maman. L’avantage, en revanche, c’est que lorsque les plombs sautent au sous-sol ou que la climatisation tombe en panne, ce sont vos parents qui s’en occupent, et vous n’avez à vous soucier de rien.

    WordPress.org, en revanche, est quelque chose que vous pouvez librement personnaliser et bricoler à votre guise. On peut comparer cela au moment où vous quittez enfin le nid familial à 18 ans et emménagez dans votre propre appartement. Comme vous êtes le seul propriétaire de votre logement, vous n’avez à faire de compromis avec personne pour peindre vos murs de cette couleur que votre mère a toujours redoutée ; vous avez la liberté de prendre la décision et/ou d’engager quelqu’un qui répond à vos exigences pour le faire à votre place. De plus, vous avez également la liberté de choisir exactement l’appareil de climatisation que vous souhaitez pour votre salon. Seulement, s’il tombe en panne, vous devrez faire appel à un réparateur ou comprendre par vous-même ce qui ne va pas et comment le réparer (ce qui n’est pas si mal, car après tout, on apprend de ses erreurs, et apprendre est une bonne chose).

    À présent, vous avez, espérons-le, une idée plus précise des nettes différences entre WordPress.com et WordPress.org. Mais en résumé :

    installer autant ou aussi peu que vous le souhaitez les thèmes sont limités uniquement aux thèmes WordPress, vous devez payer des frais pour vous débarrasser des publicités.Vous avez un contrôle quasi total de votre site ; vous pouvez ajouter, personnaliser ou même créer vos propres thèmes.

    Le contrôle du contenu est limité ;

    WordPress.com WordPress.org
    Entièrement hébergé par WordPress ; tous les éléments essentiels sont pris en charge. Auto-hébergé ; choisissez vos propres éléments essentiels, ou choisissez-en de meilleurs.
    Les fonctionnalités sont limitées à ce que WordPress.com propose Des milliers de fonctionnalités sous la forme d’extensions ;

    Voici quelques-unes des comparaisons qui ressortent de l’évaluation des différences entre les deux. Choisir entre les deux revient en fin de compte au degré de liberté que vous souhaitez pour la création de votre site, et à la quantité de ressources (temps, efforts, argent, etc.) que vous êtes prêt à y consacrer. N’oubliez pas que ce sont deux options très cruciales à soupeser avant de décider quelle plateforme WordPress vous convient le mieux. Alors, ne précipitez pas votre décision !

    Bonne création de site web !

  • Pourquoi WordPress ?

    Why-WordpressUn élément essentiel à prendre en compte lors de la création de votre premier site web – que vous soyez une entreprise, un·e indépendant·e ou qui que ce soit d’autre – est que tout le monde ne maîtrise pas le code et le développement informatique. Vous pouvez être, par exemple, un chef qui souhaite partager ses recettes en ligne. Vous pourriez aussi être étudiant·e aux Beaux-Arts ayant besoin d’un portfolio professionnel, ou une start-up qui a besoin de son propre site. Quelle que soit votre situation, le constat reste le même : si certains d’entre nous maîtrisent les bases du code, nous ne sommes pas tous développeurs ou développeuses à temps plein, et quiconque a besoin ou envie d’un site ne sait pas forcément le concevoir de A à Z. C’est là que WordPress entre en jeu. La question se pose alors : « Pourquoi WordPress ? »

    RAISON N° 1

    WordPress est un système de gestion de contenu, ce qui le rend parfaitement accessible.

    La première chose à savoir, c’est que WordPress est un système de gestion de contenu (ou CMS pour Content Management System). En clair, cela signifie que WordPress permet à ses utilisateurs et utilisatrices de créer des sites web sans avoir à coder à partir de zéro. Son interface systématique et ordonnée vous permet de garder en permanence le contrôle sans avoir à retoucher au code sans arrêt.

    Contrairement à la création d’un site en partant de zéro, qui ressemblerait généralement à ceci :

    screenshot-1 Avec un système de gestion de contenu, vous démarrez avec une interface de ce type :

    WordPress
    L’interface d’administration de WordPress. Gérer et créer des sites devient bien plus facile avec un CMS.

    Vous pourriez toutefois vous demander : « WordPress a l’air formidable, mais que faire s’il ne propose pas les fonctionnalités dont j’ai besoin pour mon site ? » ou « et si je veux une carte, un lecteur audio, un moteur de mise en cache ou un système de sécurité plus fiable ? »

    …Techniquement parlant, WordPress propose très probablement la fonctionnalité recherchée, sous la forme d’une extension WordPress.

    RAISON N° 2

    Les extensions : la cerise sur le gâteau WordPress

    Si vous craignez que WordPress n’intègre pas une fonctionnalité spécifique pour votre site, rassurez-vous : c’est sans doute déjà le cas.

    Les extensions sont des modules complémentaires conçus pour enrichir les possibilités de votre site WordPress. Si vous créez une entreprise et avez besoin d’un formulaire de contact, notez que WordPress n’en propose pas par défaut, mais des dizaines d’extensions s’en chargent parfaitement. Et comme WordPress est open source – ce qui signifie que tout le monde peut contribuer à son développement –, de nouvelles extensions voient le jour régulièrement. Obtenez ainsi votre formulaire de contact, et bien plus encore. Vous avez toute latitude pour ajouter d’autres extensions : boutons de partage pour les réseaux sociaux, cartes géographiques ou mesures de sécurité supplémentaires, parmi une multitude d’autres options. Avouez que c’est tentant.

    À ce jour, WordPress compte des dizaines de milliers d’extensions de ce type, dont beaucoup sont gratuites ou proposent des versions gratuites, y compris PBS.

    RAISON N° 3

    L’open source : la communauté WordPress

    WordPress est open source. Cela signifie que chacun est libre de contribuer à son développement et d’étudier son code source pour approfondir ses connaissances en programmation et sur WordPress lui-même. Certaines entreprises se consacrent même entièrement à la création et au développement de produits liés à WordPress, tels que des extensions et des thèmes (comme nous !)

    WordPress étant open source, de nombreux utilisateurs, développeurs et designers collaborent en continu et s’entraident face aux difficultés techniques. Vous profitez ainsi d’une aide concrète apportée par de vraies personnes, tout en apprenant les uns des autres. C’est un avantage que les services d’assistance client traditionnels peuvent rarement offrir.

    RAISON N° 4

    WordPress est une référence reconnue.

    CNN, le blog officiel de Star Wars, Time Magazine, et même (eh oui !) Beyoncé font tous tourner leur site sous WordPress, parmi beaucoup d’autres. Ces références prestigieuses ne sont pas les seules à attester de la fiabilité de WordPress : selon Treehouse.com, environ 25 % des sites web sont propulsés par WordPress. Compte tenu du nombre de millions de sites en ligne… 25 %, c’est énorme.

    RAISON N° 5

    Des options de personnalisation à profusion !

    WordPress propose une immense sélection de thèmes pour votre site. Libre à vous de choisir parmi des versions gratuites ou payantes, voire de concevoir votre propre thème (ou d’engager quelqu’un pour le réaliser à votre place !).

    RAISON N° 6 :

    C’est gratuit.

    Oui, vous avez bien lu. Grâce au développement local, WordPress est entièrement gratuit, et vous pouvez l’installer sur votre ordinateur d’un simple clic. De même, au lieu d’embaucher un développeur ou une développeuse, vous pouvez utiliser vos connaissances actuelles en code pour mieux comprendre le fonctionnement de WordPress (et apprendre est toujours une bonne chose).

    … Sans oublier que si vous n’avez pas le temps de vous plonger dans WordPress et la création de sites, vous pouvez toujours vous procurer une extension pratique de création de pages et essayer la nôtre.

    Gardez à l’esprit que les possibilités offertes par WordPress sont infinies, et qu’il ne faut pas être un génie pour comprendre comment tout fonctionne !

    Utiliser WordPress peut vous faire économiser beaucoup de temps, d’argent et d’énergie. Et en cette période où ces ressources se font rares, n’oubliez pas que les sites WordPress, leurs extensions (comme PBS !), leurs thèmes et surtout leur communauté peuvent vraiment vous aider et vous faciliter la tâche.

    Bonne création de site !

  • 3 choses à considérer avant de vous lancer dans les constructeurs de pages

    3-Things-to-Consider-Before-Diving-Into-Page-BuildersIl y a de fortes chances que vous soyez ici parce que vous avez entendu dire que PBS est très probablement l’un des raccourcis les plus rapides pour créer un site. Même si les constructeurs de pages existent généralement pour vous faciliter la tâche, il y a tout de même quelques éléments que vous devriez prendre en compte avant de vous plonger plus profondément dans cet univers particulier du développement WordPress.

    Apprendre WordPress : un prérequis essentiel pour les constructeurs de pages

    C’est probablement le point le plus évident de cette liste, mais cela reste le plus important. Les constructeurs de pages ne peuvent malheureusement pas être achetés séparément. Ils se présentent sous la forme d’extensions dans WordPress, que vous devrez installer et apprendre à utiliser afin de les manipuler. Rassurez-vous, WordPress est l’un des moyens les plus simples et les plus reconnus pour créer un site Web. Vous ne regretterez pas d’acquérir des connaissances techniques, compte tenu de l’époque à laquelle nous vivons. Il existe une différence entre WordPress.com et WordPress.org, et  savoir lequel répond à vos besoins vous fera également gagner du temps !

    Si vous vous sentez un peu intimidé par l’abondance de certains termes techniques dans cet article, ne vous inquiétez pas pour autant. Il existe quelques sites utiles que vous pouvez consulter pour vous aider à démarrer. Parmi eux, on trouve le Codex WordPress et Treehouse. Ils proposent des conseils sur WordPress et la création de sites Web, selon vos besoins et votre niveau de connaissances.

    Vous devriez peut-être tâter le terrain d’abord, juste pour être sûr

    C’est toujours une bonne idée d’essayer les versions gratuites et/ou d’évaluation avant de faire d’importants achats que vous pourriez finir par regretter à l’avenir. Heureusement, la plupart des constructeurs de pages proposent des versions gratuites ou de démonstration. Bien sûr, vous pouvez aussi consulter une multitude d’avis fiables sur les constructeurs de pages tandis que d’autrescomparent et opposent les constructeurs de pages.  Assurez-vous de bien peser vos options !

    En plus de parcourir les articles et les avis, l’une des choses que nous apprécions avec WordPress est l’immense communauté qui le soutient. Des particuliers, des équipes et même des entreprises sont prêts à donner un coup de main aux autres utilisateurs de WordPress, en particulier aux nouveaux venus comme vous ! La communauté fonctionne principalement sur le principe de l’entraide désintéressée plutôt que sur le donnant-donnant.

    Le design fait toute la différence

    Donna Fontenot Cavalier, passionnée de WordPress, souligne un point très pertinent concernant les constructeurs de pages par glisser-déposer et l’importance des notions de base en design. Même si les constructeurs en glisser-déposer comme PBS peuvent vous faire gagner beaucoup de temps, un savoir-faire de base et au moins une certaine sensibilité esthétique sont d’autres aspects cruciaux à prendre en compte lors de la création de sites Web. Imaginez le scénario : supposons que vous mettiez la main sur un constructeur de page astucieux de votre choix : c’est formidable ! Mais disons ensuite que vous n’avez pas vraiment l’œil pour l’art, le design et la fonctionnalité : oups.

    Ne vous inquiétez pas pour autant. Page Builder Sandwich n’est pas seulement un constructeur de pages ; notre équipe s’efforce également d’aider les autres utilisateurs de WordPress. Alors, si vous rencontrez quelques difficultés avec le design, rassurez-vous : nous avons une série d’articles ici sur le blog de PBS avec plein de conseils utiles pour vous aider à démarrer. De cette façon, vous pourrez en faire plus, en apprendre plus et vous faire moins de soucis.

    N’oubliez pas, si vous avez des questions ou des doutes concernant les constructeurs de pages ou quoi que ce soit en rapport avec les points ci-dessus, n’hésitez pas à nous laisser un message dans la section des commentaires ci-dessous. Nous sommes toujours ravis d’aider nos clients.

    Bonne création de site !

  • Comment créer des en-têtes Hero de base en 3 étapes faciles

    How-to-Create-Basic-Hero-Headers-2

    061716_PBS_Jihan_How to Create Basic Hero Headers_Done

    When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

    Que sont les Hero Headers ?

    The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

    Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

    Pour commencer à créer votre tout premier hero header avec PBS, suivez les étapes rapides ci-dessous :

    Étape 1 : Insérer une colonne et ajuster la largeur de la ligne

    061716_PBS_Jihan_How-to-Create-Basic-Hero-HeadersClick 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-1-b_Revised-1Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

    What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

    Row Width-Normal

    Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

    Row Width-Full-Width

    Full-Width – Background, text and other elements fill the entire width of your browser window

    Row Width-Full-Width Retain

    Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

    In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

    Étape 2 : Ajuster la marge pour créer un espace vide

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-2-revisedIncrease the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

    Étape 3 : Ajouter un arrière-plan avec des superpositions de texte et d’éléments

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-aTo add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

    061716_PBS_Jihan_How to Create Basic Hero HeadersTip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

    061716_PBS_Jihan_How-to-Create-Basic-Hero-Headers_Step-3-cType in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

    Conseil n° 2 : Pour les éléments d’image de marque, pensez à utiliser un logo blanc ou noir afin qu’il ne jure pas avec une image d’arrière-plan colorée.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-dYou can also add buttons by clicking on Button below the Insert Content tab.

    N’oubliez pas d’enregistrer votre travail et le tour est joué !

    Félicitations pour la création de votre premier hero header avec PBS ! Mais si ce n’est pas le cas, pas d’inquiétude ; repartir de zéro est sans doute plus facile avec PBS, donc cela ne devrait pas poser trop de problèmes.

    Bonne création de site web !