Vous souhaitez placer une Image fixe dans WebAcappella Responsive ? Que votre visiteur puisse cliquer sur cette image et qu’il soit redirigé vers une autre page du site ? C’est possible, et très simple !

Vous souhaitez placer un encart publicitaire, mettre en évidence une des pages clef de votre site ou encore placer un bouton de contact de manière permanente sur votre site. Vous allez pouvoir le faire grâce à une petite ligne de code.

Voici tout d’abord à quoi cela peut ressembler : prévisualiser

Commencez par créer une image aux dimensions qu’il vous plaira. Ouvrez ensuite votre logiciel de connexion FTP et créez un nouveau dossier à la racine de votre serveur (là ou se trouve votre site). Donnez par exemple comme nom “images”. ATTENTION, si vous avez déjà un dossier images, donnez un autre nom comme par exemple : “imagepub”, “imagecontact” ou que sais-je.

Ensuite, ouvrez votre projet WebAcappella Responsive et ajoutez un nouvel “élément html” en haut de la page et placez le code suivant :

<div style='position:fixed; top:100px; bottom:0px; left:0px;'><a href='page2' title='Votre pub ici'><img src='images/pub.gif' width='200' height='200' border='0'></a></div>

Voici maintenant ce que vous pouvez modifier pour personnaliser cet effet :

• top : choisissez l’espace qui sépare le haut du site du haut de l’image
• left : vous pouvez choisir d’avoir l’image à gauche ou à droite, dans ce cas, remplacer “left” par “right”. Vous pouvez également laisser un espace entre le bord du site et l’image auquel cas entrez une valeur en pixels pour décaler l’image.
• href= le nom de la page vers laquelle vos visiteurs sont redirigés au clic de l’image.
• title= le texte de l’info bulle. Lors du survol de l’image avec la souris, une petite bulle apparaît avec un texte à l’intérieur, c’est ce que vous pouvez personnaliser.
• src= nomdudossier/nomdelimage. Vous pouvez utiliser aussi bien des images en jpg, png qu’en gif.
• width : largeur de l’image. Rentrez une valeur en pixels
• height : hauteur de l’image. Rentrez une valeur en pixels

Notez que cette image ne sera pas responsive. T’inquiète pas Régis, le jour où on trouve la solution on te la donne ! Mais en attendant, selon la taille de votre image, il vous faudra peut être appliquer des propriétés de masquage pour masquer l’élément sur certains écrans.

Pour se faire, sélectionnez la box dans laquelle se trouve le code html et cochez les cases dans l’inspecteur à droite.

Voilà, vous avez à présent une Image fixe dans WebAcappella Responsive et tout ça sans efforts, ou presque !

Ce petit effet peut être très utile en complément de templates. Et si vous aimez les effets en tout genre sur les images, le plugin animation texte et images ainsi que le plugin Flip images devraient vous intéresser !

Big Bisous !