Association image et bouton page d'accueil site

Question

Bonjour à tous, 

J'ai crée via Wordpress un petit site internet afin de présenter mon entreprise. Sans être expert de la programmation et du webdesign je sais à peu près m'en sortir pour gérer et modifier quelques données HTML et CSS (désolé si les termes ne sont pas exacts).

Je souhaite à présent modifier ma page d'accueil mais me heurt à deux "difficultés" :

- Je souhaite élargir ma page d'accueil en passant de la fonction "boxed" à "wide" dans la configuration du layout, or ce changement s'applique bien évidemment à l'ensemble des pages chose que je ne veux pas. y'a t'il une possibilité de ne l'appliquer qu'à l'accueil?

- J'aimerai ajouter sur ma grande image de la page d'accueil un bouton de redirection comme dans l'exemple suivant www.fr.tuto.com. Comment associer un bouton avec effet à une image fixe? (après création du bouton sur Photoshop). De plus si mon image est insérée dans un slyder cela sera t'il possible ? 

En m'excusant par avance pour le manque de précision de mes demandes mais encore une fois il s'agit d'une vision d'amateur. Dans l'attente de vos réponses merci à tous.

Bien cordialement

PS : adresse de mon site www.adapsante.fr

Configuration: Windows / Chrome 39.0.2171.65

lemilanais67 · Answer

Quelqu'un aurait une idée ?

lemilanais67 · Answer

Toujours personne pour m'aider ? =(

Pitet · Answer

Salut,

1. Pour modifier le style uniquement sur l'accueil :
Une solution possible est d'utiliser l'attribut class de la balise body, en effet cette classe contient la valeur 'home' sur la page d'accueil, et la valeur est différente sur les autres pages.

Je ne sais pas quelle est la différence entre les options boxed et wide sur ton layout, il faudrait avoir la correspondance en css.
Si par exemple on souhaite modifier la largeur de la page uniquement sur l'accueil, on peut utiliser le code css suivant :

.home .container {
    max-width: none;
}

Il te suffit de trouver l'équivalent css de l'option wide.

2. Un bouton avec effet n'est qu'un ensemble d'image. Il suffit donc de créer un lien hypertexte et de styliser ce lien pour le rendre animé. Par exemple

<a href="#" class="mon-bouton">Mon lien</a>

.mon-bouton {
    width: 200px; height: 120px;
    background-image: url('image-bouton.jpg');
}

/* passage de la souris au dessus du bouton */
.mon-bouton:hover {
    background-image: url('image-bouton-hover.jpg');
}

Concernant l'intégration dans le slider, cela dépend de si celui-ci permet de gérer uniquement des images ou s'il permet de gérer des ensembles d'éléments (un div avec ton lien à l'intérieur).

Bonne journée

lemilanais67 · Answer

Merci pour la réponse ! 

Je m'excuse pour mon manque de connaissance mais le code d'un bouton animé est à ajouter dans le css du site entier ou simplement sur mon slider ?

lemilanais67 · Answer

J'ai tenté sans succès d'ajouter un bouton sur mon slider. J'ai généré un bouton sur un site spécialisé copié le code HTML qu j'ai collé dans l'espace dédié sur mon slider mais je ne vois apparaitre qu'un lien hypertexte qui change de forme des que l'on passe dessus  mais pas le bouton en entier ...

Une idée ?

lemilanais67 · Answer

Lorsque j'ajoute le bouton dans le slider j'ai simplement le texte et non pas l'image du bouton qui s'affiche.

Code HTML du bouton : <a href="#" class="myButton">graphicriver</a>

Code CSS du bouton : .myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
background-color:#007dc1;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #124d77;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
background-color:#0061a7;
}
.myButton:active {
position:relative;
top:1px;
}

J'ai vu que sur mon slider il est possible d'ajouter des boutons deja tout prêt (je ne les aimes pas). Peux être quand modifiant le code de ces boutons je pourrai les mettre à mon goût, mais ou le trouver ?

Merci encore =)

Pitet · Answer

Tu peux facilement retrouver les règles css appliqués à un élément html en utilisant  l'inspecteur web (désormais en natif sur les navigateurs récents).
Voici un article qui présente rapidement l'inspecteur web si tu ne connais pas : https://www.gregoirenoyelle.com/css-utiliser-inspecteur-google-chrome-modifier-sauvegarder-styles/

Association image et bouton page d'accueil site

7 réponses

Votre réponse

Discussions similaires

Newsletters