Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Nous publions généralement un nouveau modèle Bootstrap chaque mois. En ce moment, il y a 50 thèmes et modèles de bootstrap gratuits et premium soigneusement préparé pour votre usage personnel ou commercial.

Presque tous les sujets sont écrits en Bootstrap 4et certains des forfaits incluent également le leur Bootstrap 3 anciennes versions pour les utilisateurs qui doivent prendre en charge les navigateurs les plus anciens. Les versions de Bootstrap 5 seront bientôt disponibles.

Tous les sujets bootstrapious sont codé avec soin, entièrement réactif, et Compatible avec tous les navigateurs. Beaucoup d’entre eux ont également plus de 5 options de couleurs à choisir. Profitez-en et amusez-vous!

Apprenez à changer les modèles

Cependant, presque tout le monde pourra modifier les modèles Bootstrapious Vous avez besoin de connaissances de base et de compréhension du HTML et du CSS. Mes modèles sont soigneusement codés et leur code est facile à lire. De nombreux fans de Bootstrapious utilisent mes sujets pour apprendre Bootstrap. Il n’y a donc vraiment rien à craindre.

Dans les prochains paragraphes Je vais essayer de décrire comment apporter les modifications les plus élémentaires et utiliser mes modèles rapidement.

1. Téléchargez un éditeur de texte

Vous pouvez utiliser un éditeur de texte simple comme le Bloc-notes, mais je recommanderais l’un de ces trois: Texte en relief, atome ou alors Code VS. Ils sont tous très vite, Ils mettront en évidence votre syntaxe HTML et CSS et peut être étendu avec de nombreux plugins supplémentaires. J’utilise personnellement VS Code sous Windows 10.

2. Extrayez les fichiers de modèle

Tous les téléchargements Bootstrapious sont livrés sous forme de fichiers ZIP. Pour travailler avec les fichiers modèles, Extrayez-les sur votre disque dur. Vous pouvez maintenant commencer à apporter des modifications au modèle.

3. Modifications du contenu

3.1. Édition HTML de base

Pour modifier une page d’accueil sur votre nouveau site Web, ouvrez un index.html Fichier dans votre éditeur de texte et éditez-le là.

3.2. la navigation

N’oubliez pas de modifier les liens dans votre barre de navigation en conséquence. Sauf si vous créez un site Web d’une page, une page active doit en avoir une .active Classez dans la barre de navigation pour être correctement mis en évidence. Malheureusement, il n’y a pas de moyen facile de le faire automatiquement en HTML, vous devez donc le faire manuellement.

4. Changements d’apparence

4.1. Un fichier pour enregistrer les modifications CSS

Pour ajouter de nouvelles déclarations CSS ou mettre à jour les feuilles de style actuelles, vous pouvez a) modifier le fichier source d’origine (par exemple, style.default.css) ou enregistrer vos modifications dans un custom.css déposer (conseillé).

La raison Je recommande d’écraser le CSS dans un fichier séparé est en raison des futures mises à jour du modèle. Lorsqu’une nouvelle mise à jour est publiée pour le modèle, vous pourrez le faire Remplacez simplement les fichiers originaux mais Vos modifications sont conservées dans un fichier custom.css distinct. Les modèles Bootstrapious utilisent également cette approche en ce qui concerne le framework Bootstrap – tout est stocké dans un fichier séparé.

4.2. Changer la couleur du modèle

Presque tous les modèles Bootstrapious, à la fois gratuit et premium, venir avec 5 ou 6 options de couleur hors de la boîte. Pour passer à une variante de couleur différente, voir <link href="css/style.default.css"> dans vos modèles <head> et remplacez-le par ex. <link href="css/style.green.css">. Ce simple changement formate non seulement tous les éléments du modèle, mais également toutes les fonctionnalités d’amorçage standard telles que la pagination, les guillemets, les boutons, les onglets, etc.

4.3. {LESS} compilation de fichiers

Les modèles Premium contiennent également {LESS} fichiers source. Celles-ci sont idéales pour apporter des modifications majeures aux feuilles de style CSS ou simplement créer vos propres variantes de couleurs. Vous avez besoin d’un compilateur {LESS} pour compiler les fichiers en fonction de vos modifications de CSS. j’utilise WinLess (Windows seulement)Un autre bon choix est Koala (Multi plateforme).

5. Paramètres et modifications JavaScript

Chaque modèle utilise un ensemble différent de plugins, et vous pouvez voir la liste complète des plugins JS dans le fichier readme.txt de votre fichier de téléchargement. Les plugins sont initialisés et spécifiés dans le fichier front.js dans un dossier js. Si vous souhaitez modifier les paramètres d’un plugin particulier, consultez à nouveau le fichier readme et vérifiez l’URL du projet du plugin.

6. Composants supplémentaires

6.1. Formulaires de contact

Certains modèles contiennent également un squelette pour un formulaire de contact, mais généralement aucun code backend n’est inclus.

Si vous souhaitez choisir PHP pour le backend de votre formulaire, je l’ai créé un guide étape par étape À ce sujet. Avant de mettre en œuvre cette solution, assurez-vous que votre hébergement prend en charge PHP 5.3+.

6.2. Google Maps

Certains modèles contiennent également des sections ou des pages Google Maps. Depuis 2017, Google Maps nécessite une clé API pour fonctionner correctement sur votre site Web. Une clé API est fournie dans certains modèles, mais elle est limitée au développement local et au domaine Bootstrapious.com. Vous devez donc de toute façon le générer pour votre utilisation en production. Comment obtenir votre tête d’API Google Maps Ici. Lorsque vous avez votre clé API prête, collez-la simplement dans votre appel Google Maps JS comme dans l’exemple ci-dessous.

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu5nZKbeK-WHQ70oqOWo-_4VmwOwKP9YQ"></script>

Pour plus d’informations sur Google Maps et comment les intégrer dans mes modèles, consultez mon Tutoriel Google Maps.

6.3. Symboles sociaux

Souhaitez-vous avoir des icônes sociales sur votre page? Beaucoup de mes modèles de bootstrap ont les icônes préparées, il vous suffit de leur donner vie.

Il existe deux solutions simples. La première consiste à ajouter des liens vers des scripts de partage de réseaux sociaux pour en savoir plus à leur sujet Partager des icônes et des URL sur les réseaux sociaux dans mon tutoriel. Je recommande cette solution car elle n’ajoute aucune charge de données supplémentaire à votre site Web et tout est agréable et rapide.

La deuxième solution est les boutons de libération de SumoMe. En savoir plus sur Installation de SumoMe Share.

6.4. Recueillir des e-mails

Beaucoup de mes thèmes Bootstrap gratuits sont également fournis avec un formulaire de collecte d’adresses e-mail. Le formulaire n’est pas défini pour un fournisseur de messagerie, mais il est très simple et simple à mettre en place. L’un des fournisseurs de messagerie les plus courants est MailChimp. Plus d’informations sur Intégration Bootstrap et MailChimp dans mon tutoriel.

6.5. Polices de symboles

Presque tous les modèles Bootstrap que vous trouverez ici utilisent la police Font Awesome Symbol. Cet ensemble d’icônes contient près de 700 icônes utiles. Pour savoir de quoi il s’agit, jetez un œil à ceci Aide-mémoire Font Awesome. J’utilise également des jeux d’icônes de Pixeden ou alors Icônes plates. Si vous souhaitez ajouter plus d’icônes ou modifier un peu le style d’une icône, consultez le mien liste organisée de polices d’icônes gratuites.



Source link

Recent Posts