background preloader

Personnalisez votre widget texte avec WordPress

Personnalisez votre widget texte avec WordPress
11 personnalisations pour vos widgets textes Parlons code HTML aujourd’hui…Mais ne partez pas tout de suite Le codage HTML n’est sans doute pas le sujet que vous préféreriez voir aborder, mais ce sera ici pour la bonne cause que nous nous familiariserons avec cet outil, dans le but de vous donner plus de liberté dans la présentation de votre site. Nous nous concentrerons en effet sur la seule utilisation du widget texte qui, sous des dehors humbles, cache pourtant beaucoup de puissance et de modularité. Ce module n’est pas un plugin car il est livré par défaut dans toutes les installations WordPress. Un widget, qu’est-ce que c’est ? Widget est une mot valise formé à partir de Windows et Gadget. Attention, certains thèmes ne pas ‘Widgetizable’ et n’offrent pas la possibilité d’ajouter des widgets dans votre site. Les ateliers pratiques 1 | Ajoutez du texte C’est bien évidemment la destination première de ce widget. 2 | Multiples images dans un widget 3 | Ajoutez une vidéo Voici le résultat Related:  webmastering fab

Comment ajouter une image dans votre sidebar Wordpress Cela peut paraître surprenant, mais WordPress n’offre pas de façon native la possibilité de mettre une image dans la sidebar. Il existe bien quelques plugins pour faire ça. Jetpack propose d’ailleurs cette fonctionnalité. Je vous en parlerai dans un prochain article. Aujourd’hui, je vais tout simplement vous montrer comment mettre cette image avec le widget le plus utile de WordPress : Texte. Positionner le widget texte Depuis votre Tableau de bord WordPress, rendez-vous sur Apparence > Widgets. Il faut ensuite Glisser/Déposer le widget texte dans la sidebar, comme sur l’image suivante.Il faut ensuite aller chercher votre image dans votre bibliothèque de médias. C’est alors que la partie technique s’engage ! Je plaisante, évidemment. Le HTML est un langage informatique. Pour afficher une image, il faut utiliser la balise <img>. Détaillons cette ligne html : C’est suffisant pour afficher une image. Associer votre image à un lien Voyons un peu de détail :

Choisir les indicateurs du tableau de bord Composer le tableau de bord Il est devenu coutumier d'adjoindre à juste titre au terme d'indicateur de performance le qualitatif de "clé", vraisemblablement depuis que le concept de KPI occupe une place de choix au coeur des ouvrages de management anglo-saxons. C'est dire si la phase de sélection et de construction est primordiale. Choisir les indicateurs, le dossier A ce stade de la réalisation du tableau de bord, on ne peut se contenter de ratios de gestion ou d'indicateurs puisés ici ou là sans discernement. Un KPI Qu'est-ce que c'est exactement ? Quelques recommandations pour mieux choisirAfin d'affiner le processus de sélection. Objectifs mal choisisEn fait, tout commence par le choix des objectifs. Indicateurs mal choisisLa théorie à propos des questions de la pertinence et de l'aide à la décision est un filet bien fragile qui ne suffit pas pour orienter la phase de choix dans le bon sens. Les deux livres à lire pour mieux comprendre Commentaires lecteurs...

Principe et exemples de rollover en CSS (pseudo-classe :hover)- CSS Débutant Pour tout effet de rollover (c'est à dire de changement d'aspect d'un élément au survol de la souris), la pseudo-classe CSS à utiliser est :hover. On fait tout avec ça : changements d'apparence de texte, de couleur de fond, d'apparition (ou de disparition) d'image, de zoom d'image, etc. Enfin, en théorie... Ce tutoriel va donc passer en revue différentes options les plus recherchées et quelques petites choses plus "exotiques" en matière de rollover. Sommaire Fonctionne avec : Tous les navigateurs graphiques Attributs utilisés : color text-decoration background-color background-image Transformation d'apparence d'un lien Le B.A-BA du langage CSS : le lien qui change d'apparence au survol de la souris. Code (x)html <a href="toto.html">Le Site de Toto</a> Par défaut, les liens sont en bleu soulignés et restent tels quels au passage de la souris. Code CSS Bien évidemment les choix de couleurs sont immenses et text-decoration peut prendre d'autres valeurs. Haut Transformation d'apparence de fond du lien

Optimiser la vitesse de chargement de votre site | Flora de Latour Nous, les webmasters, avons un combat à mener…. Eh oui !!!! contre la temps de chargement d’un site. Effectivement, il faut avoir en tête qu’ « un temps de chargement de 3 secondes vous fera perdre 57 % d’internautes, 100 % après 5 secondes et 80 % de ceux-ci ne reviendront jamais. Et c’est aussi moins de pages « crawlées » par Google à chaque passage de ses robots puisque Google accorde un certain de temps de crawl de votre site régulièrement, et non un certain nombre de pages. Plus votre site sera long à charger, moins le nombre de pages analysées sera important. » Extrait de l’excellentissime livre « Webmarketing – Définir, mettre en pratique et optimiser sa stratégie 2.0″ de Guillaume EOUZAN. Vous pouvez vérifier votre vitesse de chargement via GT Metrix, un site fort intéressant à ajouter à vos favoris ! Tout ceci pour vous dire pourquoi, j’ai choisi d’installer le plugin Wp Super Cache sur mon blog et que j’apprécie particulièrement. About Flora de la Tour WordPress:

Image Alt Attribute– Relevant for SEO and Usability? | WooRank Blog Images are used for various purposes on the web. On a standard website, graphics are used for navigational buttons, bullet points, icons, text graphics or other ways to supplement the text. Most users of the web are able to understand and interpret images by looking at them but there are many users that are unable to view them. Blind users that utilize screen readers to understand web content.Users that disabled the images on their browser.Users with slow internet that cannot download images.Users of standard browsers with text-only mode.Search engine crawlers that cannot interpret the graphic content. HTML provides us with the image alt attribute to describe the image in readable text format. Image alt attribute is certainly significant for SEO and usability. Demonstrating the Use of Image Alt Text with a Google Image Search The following are some factors that help to optimize your images for usability and SEO. Tips For Your Images: Tips For Your Alt Text Content: Improper Usage:

6 Effets de Rollover avec jQuery et CSS3 - Fredods Quelques Effets de Rollover avec jQuery et CSS3 Aujourd’hui je vais vous montrez quelques effets de « mouse over » intéressants utilisant jQuery et CSS3. Les effets de « mouse over », rollover, pour peu qu’il soit bien géré sont très attirant pour vos visiteurs qui prendront plaisir à la navigation sur votre site, l’expérience utilisateur en sera bien meilleur. À Noter : Ces effets marcheront uniquement sur les navigateurs qui supportent ces fonctions, donc pensez à faire les mises à jour de vos navigateurs si ils sont obsolètes. Direction-Aware Hover Effect Un effet des plus sympa sur une mosaïques d’images, la première image que vous survolerez va définir la manière dont la prochaine miniature va interagir au survol de cette dernière.Plusieurs effets sont possibles : Normal, Delay et Inverse. Demo | Source | GitHub jQuery.popeye jQuery popeye est un script utilisant la librairie Javascript de jQuery pour générer une galerie d’image avancée. Demo | Source | Plugin WordPress Demo | Source

Which Jetpack Modules Should I Disable? Jetpack combines multiple goodies for your WordPress site all in one plugin and it’s developed by the team behind WordPress itself, Automattic. There’s so many reasons to get this plugin, and most people will want Jetpack for a couple features (I wanted stats and improved comments). The question becomes what modules should you enable and disable in this huge Jetpack salmagundi? I’ve included notes on the Jetpack modules I’ve enabled / disabled and why I’ve done so. Jetpack Modules that I’ve Installed WordPress.com Stats & Notifications WordPress.com Stats is a great feature especially if you don’t want to go through setting up Google Analytics. Jetpack Comments (& Subscriptions) I was using LiveFyre, but a couple issues I had with their service (most troubling was not having a simple way to disallow comments on static pages) made me adopt Jetpack Comments instead. One problem I had was that the new Jetpack style comments were not showing on my blog. Enhanced Distribution

Test utilisateur et test d'ergonomie : des investissements rentables Pourquoi vouloir optimiser la qualité d’utilisation de votre site web? Simplement pour vous assurer que votre visiteur va trouver ce qu’il est venu chercher et que ce qu’il trouvera va le satisfaire. Dans quel objectif? Augmenter le taux de conversion et favoriser la fidélisation. Quelle que soit la taille de votre projet, impliquer vos usagers en interrogeant leurs besoins pour valider la cohérence de votre système d’information et la pertinence de vos contenus est toujours une stratégie payante. Comprendre et répondre précisément aux attentes des usagers en terme de contenu et d’utilisabilité est aujourd’hui incontournable. Avec le tri de carte, co-contruisez votre rubriquage avec vos utilisateurs Ce test simple et ludique permet de construire un rubriquage intuitif avec un groupe test représentatif de vos utilisateurs potentiels. Grâce au test de navigation, validez votre architecture avant la mise en ligne Le test d’utilisabilité pour identifier concrètement les problèmes

Harmonic | A theme to make your content sing

Related: