TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter et personnaliser des boutons dans le site Weebly ?

49

Les boutons sur un site Weebly sont l’un des éléments importants utilisés à des fins d’appel à l’action. Par exemple, vous pouvez ajouter un bouton demandant aux utilisateurs de télécharger un document PDF. Étant donné que Weebly a un nombre très réduit de thèmes, il est courant que vous puissiez aimer l’ensemble du thème, mais le bouton de ce thème peut avoir un style intrusif. Dans un tel scénario, il est facile de remplacer le style de l’élément de bouton Weebly par défaut par votre propre CSS personnalisé ou par le style de bouton d’un autre thème. Cet article explique les possibilités de personnalisation de l’élément de bouton Weebly par défaut.

Ajout d’un élément de bouton par défaut

Weebly propose par défaut un élément de bouton glisser-déposer qui peut être personnalisé en quatre types différents. L’élément de bouton est regroupé sous la catégorie d’éléments « structure ». Par défaut, les utilisateurs peuvent ajouter deux styles de petits boutons et deux styles de gros boutons.

Comment ajouter et personnaliser des boutons dans le site Weebly ?

Styles de boutons par défaut de Weebly

Sur tous les thèmes non réactifs, Weebly utilise des images pour créer un bouton et sur tous les thèmes réactifs, le style des boutons est contrôlé sous le fichier "main.less". Une fois le glisser-déposer, cliquez sur le bouton de votre zone de contenu pour voir les options de personnalisation suivantes :

  • Texte du bouton – texte à afficher sur le bouton.
  • Style de bouton – choisissez l’un des quatre styles disponibles.
  • Position – alignement au centre, à droite ou à gauche du bouton.
  • Lien – ajouter des liens au texte du bouton.
  • Espacement – ​​ajustez les marges supérieure et inférieure.

Comment ajouter et personnaliser des boutons dans le site Weebly ?

Options des éléments du bouton Weebly

En plus de l’élément de bouton glisser-déposer, Weebly propose également un bouton d’appel à l’action sur les modèles de page de destination.

Remplacez ou modifiez les styles de boutons sous "main.less" pour personnaliser les boutons de votre site Weebly à l’aide de thèmes réactifs.

Réactif Vs Non Réactif

Avant d’essayer de changer le style de vos boutons, vérifiez quel type de thème vous utilisez actuellement. Il existe trois types de boutons utilisés sur les thèmes Weebly :

  • Boutons CSS sur les thèmes réactifs – exemple de thème Slick, Cento.
  • Boutons CSS sur les thèmes non réactifs – exemple de thème Cleancut.
  • Boutons d’image sur des thèmes non réactifs – exemple de thème Ville.

Thèmes non réactifs avec des boutons d’image – ici, l’élément de bouton utilise une image et le CSS appelle simplement cette image comme arrière-plan, l’exemple de thème est City.

Thèmes non réactifs avec boutons CSS – des thèmes comme Cleancut utilisent des boutons CSS complets sans images bien qu’il s’agisse d’un thème non réactif.

Thèmes réactifs – tous les derniers thèmes comme Slick, Cento, Paper, etc. sont complètement réactifs et l’élément de bouton est généré à partir du code CSS.

Nous verrons comment changer le style du bouton sur les thèmes responsive et non responsive.

Cas 1 – Ajout d’images de boutons personnalisées sur des thèmes non réactifs

La caractéristique importante de l’élément de bouton Weebly est sa capacité à s’adapter à la longueur du texte. Le bouton s’ajustera automatiquement en fonction de la longueur du texte saisi. Ceci est réalisé en divisant un bouton en deux images. Avant d’aller plus loin, suivez les étapes ci-dessous pour comprendre où sont les images de boutons stockées dans un site Weebly.

  • Connectez-vous à votre compte Weebly et choisissez le site à modifier.
  • Accédez à l’onglet "Thème" et cliquez sur le bouton "Modifier HTML / CSS".
  • Dans la section « Actifs », vous verrez différentes images de boutons, comme indiqué ci-dessous :

Comment ajouter et personnaliser des boutons dans le site Weebly ?

Images de boutons sur les thèmes Weebly non réactifs

Nous avons remarqué que tous les thèmes non réactifs utilisant des images pour les boutons ont 9 ensembles d’images (total 18) pour les boutons plus petits et plus grands, mais utilisent 2 images spécifiques en CSS comme arrière-plan d’un bouton. Vérifiez "main_style.css" et découvrez quelles sont les images utilisées pour les boutons. L’exemple ci-dessous sur le thème City montre que "button-highlight.png" et "button-highlight-large.png" sont utilisés respectivement pour les boutons plus petits et plus grands.

Comment ajouter et personnaliser des boutons dans le site Weebly ?

Images utilisées pour les boutons sur les thèmes non réactifs

Si vous n’aimez pas ces boutons, changez simplement l’image en l’une des images disponibles parmi 9 ensembles. Vous pouvez remplacer «button-highlight.png» par «button-purple.png ». Si vous n’aimez aucune des images de boutons existantes, créez vos propres images personnalisées avec des tailles et un style divisés similaires et téléchargez-les dans la section « Actifs ». Assurez-vous d’utiliser le nom de l’image dans "main_style.css" pour la propriété "background".

Cas 2 – Personnalisation des boutons CSS sur des thèmes non réactifs

Si vous ne trouvez aucune image de bouton dans la section « Atouts » de votre thème non réactif, vérifiez le « main_style.css » pour voir la section « Boutons ». Vous trouverez ci-dessous le code CSS du thème Cleancut qui peut être personnalisé en arrière-plan, en couleurs, en effet de survol, etc. selon vos besoins.

/* Buttons --------------------------------------------------------------------------------*/ /* Small structure & regular style */ .wsite-button { background: red; background: -moz-linear-gradient(top,#444 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#333)); background: -webkit-linear-gradient(top,#444 0,#333 100%); background: -o-linear-gradient(top,#444 0,#333 100%); background: -ms-linear-gradient(top,#444 0,#333 100%); background: linear-gradient(top,#444 0,#333 100%); border: 1px solid #000; box-shadow:inset 0 0 15px rgba(0,0,0,0.25); -moz-border-radius: 3px; border-radius: 3px; color: white !important; font-size: 13px; font-weight: 700; padding: 3px 25px; text-align: center; text-decoration: none !important; text-shadow: 0px -1px 1px rgba(0,0,0,0.7); } .wsite-button:hover { background-position:0 0; box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button:active { background-position:0 0; } .wsite-button-inner { color: #fff !important; padding:0; background: none; } .wsite-button:hover .wsite-button-inner { background:none; } .wsite-button:active { padding:4px 25px 2px; } /* Large structure & regular style */ .wsite-button-large .wsite-button-inner { font-size:14px; padding:0; } .wsite-button-large .wsite-button-inner { background: none; } /* Highlighted styles */ .wsite-button-highlight, .wsite-button-large.wsite-button-highlight { background: #0370EA; background: -moz-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0370EA),color-stop(100%,#0370EA)); background: -webkit-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -o-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -ms-linear-gradient(top,#0370EA 0,#0370EA 100%); background: linear-gradient(top,#0370EA 0,#0370EA 100%); border: 1px solid #0052ad; box-shadow:inset 0 0 18px rgba(0,0,0,0.02); } .wsite-button-highlight:hover, .wsite-button-large.wsite-button-highlight:hover { box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button-highlight .wsite-button-inner { background-image: none; } .wsite-button-large.wsite-button-highlight .wsite-button-inner { background-image: none; }

Revenez maintenant à l’éditeur et faites glisser l’élément de bouton vers la zone de contenu. Vous pouvez voir que le bouton sera avec le nouveau style que vous avez défini dans "main.less".

Cas 3 – Personnalisation des boutons Weebly sur des thèmes réactifs

Tous les derniers thèmes Weebly sont réactifs et n’utilisent que des codes CSS pour générer des boutons. Comme expliqué ci-dessus, les styles de boutons CSS pertinents sont définis dans le fichier «main.less» sous la section «/ Buttons / ». Si votre thème utilise la fonction @import dans CSS, consultez le fichier de bouton correspondant pour le CSS. Ici, vous devez remplacer ces codes par votre propre code de bouton CSS personnalisé pour modifier le style de bouton par défaut.

Vous trouverez ci-dessous les définitions de style CSS pour le bouton Weebly :

  • .wsite-button – Petit bouton
  • .wsite-button:hover – Effet de survol pour un petit bouton
  • .wsite-button:active – Effet en cliquant sur le petit bouton
  • .wsite-button-inner – Définir le style des éléments internes comme la taille et la couleur de la police

De même, les boutons plus gros utiliseront la classe CSS .wiste-button-large.

Remarque : Si vous avez ajouté une page de blog sur votre site, certains thèmes peuvent ajouter un bouton .blog de classe CSS supplémentaire pour les boutons des articles de blog.

Vous pouvez modifier ces codes CSS vous-même ou utiliser n’importe quel outil générateur de boutons CSS en ligne pour obtenir le CSS requis. Par exemple, les styles des petits boutons peuvent être modifiés avec un dégradé en remplaçant les codes des petits boutons par défaut par le code CSS ci-dessous :

.wsite-button { border-top: 1px solid #96d1f8; background: #6594d6; background: -webkit-gradient(linear, left top, left bottom, from(#7a3e9c), to(#6594d6)); background: -webkit-linear-gradient(top, #7a3e9c, #6594d6); background: -moz-linear-gradient(top, #7a3e9c, #6594d6); background: -ms-linear-gradient(top, #7a3e9c, #6594d6); background: -o-linear-gradient(top, #7a3e9c, #6594d6); padding: 14.5px 29px; -webkit-border-radius: 39px; -moz-border-radius: 39px; border-radius: 39px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 24px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .wsite-button:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .wsite-button:active { border-top-color: #1b435e; background: #1b435e; }

Le changement d’élément de bouton avec les anciens et les nouveaux codes CSS est affiché dans un exemple de thème comme ci-dessous :

Comment ajouter et personnaliser des boutons dans le site Weebly ?

Nouveau bouton CSS dans Weebly

Remarque : vous pouvez modifier les styles de gros boutons de la même manière. Assurez-vous de modifier les codes CSS pour les styles de petits et grands boutons afin d’éviter que les boutons ne se cassent sur le site publié.

Afin de simplifier la tâche des utilisateurs de Weebly, nous avons trois styles de boutons utilisant les classes CSS Weebly. Vous pouvez remplacer le CSS sous la section "/ Buttons /" de votre "main.less" par l’un des codes ci-dessous pour changer le style des boutons.

Style1 :

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 8px 12px; background: #333333; color: #ffffff; border: 2px solid #333333; border-radius: 1px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Quattrocento Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: normal; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { padding: 12px 16px; font-family: 'Quattrocento Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #ffffff; color: #333333; border: 2px solid #333333; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: #b9b9b9; color: #ffffff; border: 2px solid #b9b9b9; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #a1a1a1; border: 2px solid #a1a1a1; }

Style2 :

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 10px 16px; background: #35A89A; color: white; border-radius: 0; text-transform: uppercase; letter-spacing: .07em; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; line-height: normal; -webkit-transition: all 350ms ease-in; -moz-transition: all 350ms ease-in; -ms-transition: all 350ms ease-in; -o-transition: all 350ms ease-in; transition: all 350ms ease-in; } .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner { padding: 12px 20px; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #177267; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: white; color: #35A89A; border: 2px solid #35A89A; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #35A89A; color: white; }

Style3 :

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { display: inline-block; height: auto; padding: 0; background: none; } .wsite-button:focus, .wsite-editor .wsite-button:focus { outline: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { display: inline-block; height: auto; padding: 8px 16px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { display: inline-block; height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { display: inline-block; height: auto; padding: 12px 24px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button:hover .wsite-button-inner, .wsite-button-large:hover .wsite-button-inner { background: transparent; color: #a1a1a1 !important; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: transparent; color: #808080 !important; border: 2px solid #808080; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #808080; color: white !important; }

Ajout de boutons CSS personnalisés à l’aide de l’élément de code intégré

La personnalisation d’un élément existant est une tâche difficile car Weebly modifie fréquemment le code ainsi que la portée du bouton sera limitée au style existant sans trop d’attrait. Le moyen le plus simple et le plus simple est d’ ajouter vos propres boutons CSS personnalisés au lieu de modifier les codes existants. Cela offre des possibilités infinies d’ajouter différents types de boutons CSS 2D et 3D à votre site Weebly. Mais le problème est que vous devez ajouter à chaque fois l’élément « Embed Code » avec un style prédéfini au lieu d’utiliser l’élément « Button ».

Par exemple, vous pouvez ajouter des boutons de dégradé avec différents styles comme indiqué ci-dessous en ajoutant le code HTML téléchargé dans l’ élément « Embed Code » et le CSS sous la feuille de style principale (« main_style.css » pour les thèmes non réactifs et « main.less » pour les thèmes réactifs. thèmes).

Téléchargez le code CSS/HTML de ce widget de boutons de dégradé Weebly.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails