Comment créer votre premier site HTML5: Guide pas à pas

Vous envisagez de créer un site Web avec HTML5 ? L'une des meilleures décisions, dans ce cas, serait d'utiliser un modèle HTML prêt à l'emploi :

• En raison de sa nature glisser-déposer, il n’est pas nécessaire d’avoir une connaissance remarquable du codage. Il est possible de modifier l’aspect du site Web, d’ajouter, de modifier ou de supprimer des éléments, d’ajouter des widgets, etc. à partir du panneau de configuration.
• La plupart des modèles sont optimisés pour les moteurs de recherche. Cela signifie qu'un futur site Web répond déjà à certaines exigences des moteurs de recherche et a plus de chances de prendre une position plus élevée dans les résultats de recherche.
• Ses solutions toutes faites sont adaptatives. Ainsi, un site Web s'affichera de manière fluide sur n'importe quel navigateur / appareil.
• La variété de modèles pour différents goûts et exigences est large. Par exemple, plus de 900 modèles de sites Web d’entreprises sont disponibles sur notre site Web.

De plus, les chances d'être satisfait du résultat augmentent parce que vous êtes propriétaire de la situation. Tous les concepteurs de sites Web n'imaginent pas le site Web comme vous le faites. Si vous créez vous-même un site, il répondra probablement à vos attentes.

En fin de compte, vous en tirez parti car la création d'un site Web avec un modèle est :

• facile
• rapide
• sans stress (facteur humain - vous ne faites pas face aux échéances manquées, aux promesses non tenues, aux malentendus, etc.)
• fiable

Si votre décision est d'utiliser un modèle, ce guide étape par étape sur la création d'un site Web HTML5 sera extrêmement pratique.

En tant qu'exemple, j'ai choisi ce modèle HTML polyvalent. Cette solution multipage comporte 11 configurations pour différents créneaux d’affaires. En outre, il contient :

• Plus de 100 pages HTML5 prédéfinies
• Novi Builder et Visual Page Editor
• superbes modèles de blog et de galerie
• plusieurs mises en page de commerce électronique
• Plus de 100 éléments et blocs préfabriqués
• Parallax Effect
• Flexbox Grid System
• une large gamme de plugins et de widgets

De plus, si vous recherchez un constructeur de site Web facile à utiliser et de conception intuitive, il est logique d’envisager d’utiliser Novi Builder. Il est bon pour les débutants et les utilisateurs expérimentés. Avec son aide, il est possible de :

• créer ou dupliquer des pages en quelques clics (en raison de la nature du glisser-déposer et des éléments de contenu prédéfinis)
• créer vos propres préréglages pour gagner du temps en créant des blocs de contenu similaires à l'avenir
• utiliser l'un des centaines de modèles Zemez
• créer rapidement des sauvegardes et enregistrer les informations et la conception sur votre site Web
• éditer le code source à l'aide de l'éditeur qui fonctionne avec HTML, CSS et JS
• découvrir le site dans différentes résolutions
• utiliser l'un des nombreux plug-ins Novi et outils d'édition visuelle

---

Comment installer Novi Builder

L'installation de Novi Builder comprend trois étapes simples. Il est similaire au processus lorsque vous téléchargez un thème HTML sur l'hôte :

1. Dans le dossier racine de votre site Web, créez un nouveau répertoire appelé “builder”.

   
2. Transférez les fichiers de générateur dans le répertoire que vous venez de créer (les fichiers de générateur se trouvent dans le package de téléchargement du thème, dans le dossier de générateur).
3. Suivez le lien : https://yourwebsite.com/builder/.

Vous pouvez maintenant utiliser le générateur sur votre hébérgement.

---

---

Comment installer et éditer un thème Brave

Personnaliser ce thème avec Novi Builder est aussi simple que de le faire avec l’aide d’Elementor Builder (ou même plus facilement). Sa conception intuitive permet même aux utilisateurs débutants de se sentir à l'aise lorsqu'ils créent leur propre site Web.

Au fait, vous pouvez essayer l'édition de tout élément de contenu du thème Brave sans télécharger le constructeur directement sur son site.

Pour installer le thème Brave, décompressez son package de téléchargement. Vous y trouverez le répertoire appelé « builder ». Ce répertoire comprend tous les skins que contient le thème.

Avant de personnaliser le thème, il est important d’installer à la fois le fichier de thème et le fichier de construction. Après cela, suivez ce lien pour lancer le processus d’édition : https://yourwebsite.com/builder/skin-name/.

Ainsi, comme cela a déjà été mentionné, la conception intuitive est l’un des principaux avantages du constructeur. Sur le panneau supérieur, vous trouverez toutes les références et les outils dont vous aurez besoin.

Toutes les pages contenues dans le thème Brave seront affichées dans la partie gauche du tableau de bord. Le côté droit comprendra le visualiseur sensible, les paramètres de page et le bouton d’enregistrement. À l'aide du bouton au centre du tableau de bord, vous pouvez basculer entre les modes :

• Preview mode montre la version mise à jour du site.
• Edit mode fournit les outils et les options pour modifier le thème ou le site Web.
• Design mode donne accès à l'éditeur de codez.

---

Comment éditer le texte

Une fois que vous ouvrez la démo du thème, vous verrez ces icônes au bas de la page :

Vous pouvez supprimer le texte existant, taper le vôtre, puis le modifier. Il est possible de changer la police, la couleur, de créer un lien actif, de changer la position du texte, de le mettre en gras, souligné ou en italique.

---

Comment dupliquer les éléments de contenu

Tout est super facile. Il suffit de sélectionner un morceau de texte ou un élément visuel, de cliquer avec le bouton droit de la souris et de choisir l’option de duplication.

---

Comment ajouter un bloc

Le bouton bleu Plus sur l'image précédente est utilisé pour créer les préréglages. En cliquant dessus, vous ouvrirez le Presets Manager montrant de nombreux blocs préfabriqués.

Pour créer une page, vous pourrez utiliser l'un de ces préréglages. Elementor Builder a une option similaire, mais ses utilisateurs se plaignent souvent des erreurs qui apparaissent lors de la création d'une nouvelle page.

---

Comment personnaliser l'arrière-plan

Avec l'aide de Novi Builder, il est possible de changer la couleur dans la section inférieure.

Après avoir survolé la section, vous verrez une petite fenêtre avec différentes options. Le cercle coloré sert à modifier la couleur. Lorsque vous cliquez dessus, vous verrez une autre fenêtre avec les paramètres. Il vous permet de changer la couleur ou de créer un fond dégradé.

---

Comment créer une nouvelle page

Sur le côté gauche de la page, vous verrez le Page Manager. En cliquant sur Pages, vous verre ces options :

Pour créer une nouvelle page, cliquez sur le bouton approprié, donnez un nom à la page, puis cliquez sur le bouton Create Page.

Après cela s'ouvrira le Presets Manager. Vous pourrez choisir les blocs de contenu pour votre nouvelle page.

Si vous faites défiler vers le bas, vous verrez la collection de différents éléments tels que le bouton Call to Action 6 :

En mode création (design mode), la page ressemblera à ceci :

Vous pouvez également personnaliser l’arrière-plan, modifier la police, etc. Par exemple, vous pouvez supprimer l’arrière-plan du dégradé  #191337 et choisir une autre couleur #fff. Vous pouvez également modifier la police et choisir Montserrat, par exemple :

Pour modifier un élément de contenu, sélectionnez-le (la phrase entière, sa partie, l'image, l'arrière-plan) et cliquez avec le bouton droit de la souris.

Il est possible de remplacer l’image du bloc de contenu par une autre. Cliquez sur le gars puis cliquez sur l'icône de l'image ci-dessous:

S'ouvrira la Media Gallery. Ici, vous pouvez choisir toute image enutilisant la recherche Novi. Par exemple, choisissons l’image iMac dans le dossier Produits. Cliquez sur le bouton Insérer une image en bas de la fenêtre et profitez du résultat :

J'ai essayé de couvrir les principaux aspects de la création d'un site Web HTML à l'aide du thème Brave et de Novi Builder. Pour mémoire, s'il y a des questions, je vous recommande de regarder ce tutoriel vidéo détaillé. Il prouve une fois de plus à quel point il est facile de créer et d’éditer des pages avec ces produits.

De plus, Novi Builder n’a pas besoin du matériel serveur aussi puissant que celui requis par WordPress. Afin de créer un site Web complet et élégant avec Elementor, vous utiliserez probablement des dizaines de plug-ins qui ralentissent le travail du site. Les sites Web HTML n’ont pas la base de données volumineuse et se chargent donc plus rapidement.

Si auparavant, créer un site HTML de manière autonome était compliqué et fastidieux, vous pouvez maintenant être sûr que les choses ont changé. De tels constructeurs et modèles prédéfinis facilitent le processus et permettent aux personnes ne disposant pas de sites de lancement de connaissances substantiels de conception attrayante et professionnelle.

C’est pourquoi les modèles de site Web créés par Novi Builder constituent un bon choix pour créer un site Web.

---