- \n
- En raison de sa nature glisser-d\u00e9poser, il n\u2019est pas n\u00e9cessaire d\u2019avoir une connaissance remarquable du codage. Il est possible de modifier l\u2019aspect du site Web, d\u2019ajouter, de modifier ou de supprimer des \u00e9l\u00e9ments, d\u2019ajouter des widgets, etc. \u00e0 partir du panneau de configuration.<\/li>\n
- La plupart des mod\u00e8les sont optimis\u00e9s pour les moteurs de recherche. Cela signifie qu'un futur site Web r\u00e9pond d\u00e9j\u00e0 \u00e0 certaines exigences des moteurs de recherche et a plus de chances de prendre une position plus \u00e9lev\u00e9e dans les r\u00e9sultats de recherche.<\/li>\n
- Ses solutions toutes faites sont adaptatives. Ainsi, un site Web s'affichera de mani\u00e8re fluide sur n'importe quel navigateur \/ appareil.<\/li>\n
- La vari\u00e9t\u00e9 de mod\u00e8les pour diff\u00e9rents go\u00fbts et exigences est large. Par exemple, plus de 900 mod\u00e8les de sites Web d\u2019entreprises<\/a> sont disponibles sur notre site Web.<\/li>\n<\/ul>\n<\/div>\n
De plus, les chances d'\u00eatre satisfait du r\u00e9sultat augmentent parce que vous \u00eates propri\u00e9taire de la situation. Tous les concepteurs de sites Web n'imaginent pas le site Web comme vous le faites. Si vous cr\u00e9ez vous-m\u00eame un site, il r\u00e9pondra probablement \u00e0 vos attentes.<\/p>\n
En fin de compte, vous en tirez parti car la cr\u00e9ation d'un site Web avec un mod\u00e8le est :<\/p>\n
<\/div>\n- \n
- facile<\/li>\n
- rapide<\/li>\n
- sans stress (facteur humain - vous ne faites pas face aux \u00e9ch\u00e9ances manqu\u00e9es, aux promesses non tenues, aux malentendus, etc.)<\/li>\n
- fiable<\/li>\n<\/ul>\n<\/div>\n
Si votre d\u00e9cision est d'utiliser un mod\u00e8le, ce guide \u00e9tape par \u00e9tape sur la cr\u00e9ation d'un site Web HTML5 sera extr\u00eamement pratique.<\/p>\n
En tant qu'exemple, j'ai choisi ce\u00a0mod\u00e8le HTML polyvalent<\/a>. Cette solution multipage comporte 11 configurations pour diff\u00e9rents cr\u00e9neaux d\u2019affaires. En outre, il contient :<\/p>\n
<\/div>\n- \n
- Plus de 100 pages HTML5 pr\u00e9d\u00e9finies<\/li>\n
- Novi Builder et Visual Page Editor<\/li>\n
- superbes mod\u00e8les de blog et de galerie<\/li>\n
- plusieurs mises en page de commerce \u00e9lectronique<\/li>\n
- Plus de 100 \u00e9l\u00e9ments et blocs pr\u00e9fabriqu\u00e9s<\/li>\n
- Parallax Effect<\/li>\n
- Flexbox Grid System<\/li>\n
- une large gamme de plugins et de widgets<\/li>\n<\/ul>\n<\/div>\n
De plus, si vous recherchez un constructeur de site Web facile \u00e0 utiliser et de conception intuitive, il est logique d\u2019envisager d\u2019utiliser Novi<\/a> Builder. Il est bon pour les d\u00e9butants et les utilisateurs exp\u00e9riment\u00e9s. Avec son aide, il est possible de :<\/p>\n
- \n
- cr\u00e9er ou dupliquer des pages en quelques clics (en raison de la nature du glisser-d\u00e9poser et des \u00e9l\u00e9ments de contenu pr\u00e9d\u00e9finis)<\/li>\n
- cr\u00e9er vos propres pr\u00e9r\u00e9glages pour gagner du temps en cr\u00e9ant des blocs de contenu similaires \u00e0 l'avenir<\/li>\n
- utiliser l'un des centaines de mod\u00e8les Zemez<\/li>\n
- cr\u00e9er rapidement des sauvegardes et enregistrer les informations et la conception sur votre site Web<\/li>\n
- \u00e9diter le code source \u00e0 l'aide de l'\u00e9diteur qui fonctionne avec HTML, CSS et JS<\/li>\n
- d\u00e9couvrir le site dans diff\u00e9rentes r\u00e9solutions<\/li>\n
- utiliser l'un des nombreux plug-ins Novi et outils d'\u00e9dition visuelle<\/li>\n<\/ul>\n<\/div>\n
\n<\/div>\nComment installer Novi Builder<\/h3>\n
L'installation de Novi Builder comprend trois \u00e9tapes simples. Il est similaire au processus lorsque vous t\u00e9l\u00e9chargez un th\u00e8me HTML sur l'h\u00f4te :<\/p>\n
- \n
- Dans le dossier racine de votre site Web, cr\u00e9ez un nouveau r\u00e9pertoire appel\u00e9 \u201cbuilder<\/em>\u201d.\n<\/div>\n
![\"new](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/new-folder-builder.png?x54449\")
<\/p>\n<\/div>\n<\/li>\n- Transf\u00e9rez les fichiers de g\u00e9n\u00e9rateur dans le r\u00e9pertoire que vous venez de cr\u00e9er (les fichiers de g\u00e9n\u00e9rateur se trouvent dans le package de t\u00e9l\u00e9chargement du th\u00e8me, dans le dossier de g\u00e9n\u00e9rateur).<\/li>\n
- Suivez le lien :\u00a0https:\/\/yourwebsite.com\/builder\/<\/a>.<\/li>\n<\/ol>\n
Vous pouvez maintenant utiliser le g\u00e9n\u00e9rateur sur votre h\u00e9b\u00e9rgement.<\/p>\n
<\/div>\n
\n<\/div>\n\n
<\/div>\n
\n<\/div>\n<\/h3>\n
Comment installer et \u00e9diter un th\u00e8me Brave<\/h3>\n
Personnaliser ce th\u00e8me avec Novi Builder est aussi simple que de le faire avec l\u2019aide d\u2019Elementor Builder (ou m\u00eame plus facilement). Sa conception intuitive permet m\u00eame aux utilisateurs d\u00e9butants de se sentir \u00e0 l'aise lorsqu'ils cr\u00e9ent leur propre site Web.<\/p>\n
<\/div>\n![\"Install](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/install-edit-brave-theme.png?x54449\")
<\/p>\n<\/div>\nAu fait, vous pouvez essayer l'\u00e9dition<\/a>\u00a0de tout \u00e9l\u00e9ment de contenu du th\u00e8me Brave sans t\u00e9l\u00e9charger le constructeur directement sur son site.<\/p>\n
Pour installer le th\u00e8me Brave, d\u00e9compressez son package de t\u00e9l\u00e9chargement. Vous y trouverez le r\u00e9pertoire appel\u00e9 \u00ab builder \u00bb. Ce r\u00e9pertoire comprend tous les skins que contient le th\u00e8me.<\/p>\n
Avant de personnaliser le th\u00e8me, il est important d\u2019installer \u00e0 la fois le fichier de th\u00e8me et le fichier de construction. Apr\u00e8s cela, suivez ce lien pour lancer le processus d\u2019\u00e9dition : https:\/\/yourwebsite.com\/builder\/skin-name\/<\/a>.<\/p>\n
Ainsi, comme cela a d\u00e9j\u00e0 \u00e9t\u00e9 mentionn\u00e9, la conception intuitive est l\u2019un des principaux avantages du constructeur. Sur le panneau sup\u00e9rieur, vous trouverez toutes les r\u00e9f\u00e9rences et les outils dont vous aurez besoin.<\/p>\n
Toutes les pages contenues dans le th\u00e8me Brave seront affich\u00e9es dans la partie gauche du tableau de bord. Le c\u00f4t\u00e9 droit comprendra le visualiseur sensible, les param\u00e8tres de page et le bouton d\u2019enregistrement. \u00c0 l'aide du bouton au centre du tableau de bord, vous pouvez basculer entre les modes :<\/p>\n
- \n
- Preview mode<\/strong> montre la version mise \u00e0 jour du site.<\/li>\n
- Edit mode<\/strong> fournit les outils et les options pour modifier le th\u00e8me ou le site Web.<\/li>\n
- Design mode<\/strong> donne acc\u00e8s \u00e0 l'\u00e9diteur de codez.<\/li>\n<\/ul>\n
<\/div>\n
\n<\/div>\nComment \u00e9diter le texte<\/h3>\n
Une fois que vous ouvrez la d\u00e9mo<\/a>\u00a0du th\u00e8me, vous verrez ces ic\u00f4nes au bas de la page :<\/p>\n
<\/div>\n![\"How](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/brave-theme-edit-text.png?x54449\")
<\/p>\n<\/div>\nVous pouvez supprimer le texte existant, taper le v\u00f4tre, puis le modifier. Il est possible de changer la police, la couleur, de cr\u00e9er un lien actif, de changer la position du texte, de le mettre en gras, soulign\u00e9 ou en italique.<\/p>\n
<\/div>\n![\"How](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/edit-text.png?x54449\")
<\/p>\n<\/div>\n
\n<\/div>\nComment dupliquer les \u00e9l\u00e9ments de contenu<\/h3>\n
Tout est super facile. Il suffit de s\u00e9lectionner un morceau de texte ou un \u00e9l\u00e9ment visuel, de cliquer avec le bouton droit de la souris et de choisir l\u2019option de duplication<\/strong>.<\/p>\n
<\/div>\n![\"How](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/duplicate-option.png?x54449\")
<\/p>\n<\/div>\n
\n<\/div>\nComment ajouter un bloc<\/h3>\n
Le bouton bleu Plus sur l'image pr\u00e9c\u00e9dente est utilis\u00e9 pour cr\u00e9er les pr\u00e9r\u00e9glages.\u00a0En cliquant dessus, vous ouvrirez le Presets Manager<\/strong> montrant de nombreux blocs pr\u00e9fabriqu\u00e9s.<\/p>\n
<\/div>\n![\"How](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/add-a-block.png?x54449\")
<\/p>\n<\/div>\nPour cr\u00e9er une page, vous pourrez utiliser l'un de ces pr\u00e9r\u00e9glages. Elementor Builder a une option similaire, mais ses utilisateurs se plaignent souvent des erreurs qui apparaissent lors de la cr\u00e9ation d'une nouvelle page.<\/p>\n
<\/div>\n
\n<\/div>\nComment personnaliser l'arri\u00e8re-plan<\/h3>\n
Avec l'aide de Novi Builder, il est possible de changer la couleur dans la section inf\u00e9rieure.<\/p>\n
<\/div>\n![\"How](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/customize-background.png?x54449\")
<\/p>\n<\/div>\nApr\u00e8s avoir survol\u00e9 la section, vous verrez une petite fen\u00eatre avec diff\u00e9rentes options. Le cercle color\u00e9 sert \u00e0 modifier la couleur. Lorsque vous cliquez dessus, vous verrez une autre fen\u00eatre avec les param\u00e8tres. Il vous permet de changer la couleur ou de cr\u00e9er un fond d\u00e9grad\u00e9.<\/p>\n
<\/div>\n![\"How](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/gradient-background.png?x54449\")
<\/p>\n<\/div>\n
\n<\/div>\nComment cr\u00e9er une nouvelle page<\/h3>\n
Sur le c\u00f4t\u00e9 gauche de la page, vous verrez le\u00a0Page Manager<\/strong>. En cliquant sur Pages, vous verre ces options :<\/p>\n
<\/div>\n![\"Page](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/page-manager.png?x54449\")
<\/p>\n<\/div>\nPour cr\u00e9er une nouvelle page, cliquez sur le bouton appropri\u00e9, donnez un nom \u00e0 la page, puis cliquez sur le bouton Create Page.<\/p>\n
<\/div>\n![\"Create](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/create-page-button.png?x54449\")
<\/p>\n<\/div>\nApr\u00e8s cela s'ouvrira le Presets Manager. Vous pourrez choisir les blocs de contenu pour votre nouvelle page.<\/p>\n
<\/div>\n![\"Presets](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/presets-manager.png?x54449\")
<\/p>\n<\/div>\nSi vous faites d\u00e9filer vers le bas, vous verrez la collection de diff\u00e9rents \u00e9l\u00e9ments tels que le bouton Call to Action 6 :<\/p>\n
<\/div>\n![\"Call](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/call-to-action-6-button.png?x54449\")
<\/p>\n<\/div>\nEn mode cr\u00e9ation (design mode), la page ressemblera \u00e0 ceci :<\/p>\n
<\/div>\n![\"design](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/design-mode.png?x54449\")
<\/p>\n<\/div>\nVous pouvez \u00e9galement personnaliser l\u2019arri\u00e8re-plan, modifier la police, etc. Par exemple, vous pouvez supprimer l\u2019arri\u00e8re-plan du d\u00e9grad\u00e9\u00a0 #191337 et choisir une autre couleur #fff. Vous pouvez \u00e9galement modifier la police et choisir Montserrat, par exemple :<\/p>\n
<\/div>\n![\"choose](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/choose-montserrat.png?x54449\")
<\/p>\n<\/div>\nPour modifier un \u00e9l\u00e9ment de contenu, s\u00e9lectionnez-le (la phrase enti\u00e8re, sa partie, l'image, l'arri\u00e8re-plan) et cliquez avec le bouton droit de la souris.<\/p>\n
<\/div>\n![\"to](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/make-changes-content-element.png?x54449\")
<\/p>\n<\/div>\nIl est possible de remplacer l\u2019image du bloc de contenu par une autre. Cliquez sur le gars puis cliquez sur l'ic\u00f4ne de l'image ci-dessous:<\/p>\n
<\/div>\n![\"replace](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/replace-image.png?x54449\")
<\/p>\n<\/div>\nS'ouvrira la\u00a0Media Gallery<\/strong>. Ici, vous pouvez choisir toute image enutilisant la recherche Novi. Par exemple, choisissons l\u2019image iMac dans le dossier Produits. Cliquez sur le bouton Ins\u00e9rer une image en bas de la fen\u00eatre et profitez du r\u00e9sultat :<\/p>\n
<\/div>\n![\"replace](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/01\/replace-image-result.png?x54449\")
<\/p>\n<\/div>\nJ'ai essay\u00e9 de couvrir les principaux aspects de la cr\u00e9ation d'un site Web HTML \u00e0 l'aide du th\u00e8me Brave et de Novi Builder. Pour m\u00e9moire, s'il y a des questions, je vous recommande de regarder ce tutoriel vid\u00e9o d\u00e9taill\u00e9<\/a>. Il prouve une fois de plus \u00e0 quel point il est facile de cr\u00e9er et d\u2019\u00e9diter des pages avec ces produits.<\/p>\n
De plus, Novi Builder n\u2019a pas besoin du mat\u00e9riel serveur aussi puissant que celui requis par WordPress. Afin de cr\u00e9er un site Web complet et \u00e9l\u00e9gant avec Elementor, vous utiliserez probablement des dizaines de plug-ins qui ralentissent le travail du site. Les sites Web HTML n\u2019ont pas la base de donn\u00e9es volumineuse et se chargent donc plus rapidement.<\/p>\n
Si auparavant, cr\u00e9er un site HTML de mani\u00e8re autonome \u00e9tait compliqu\u00e9 et fastidieux, vous pouvez maintenant \u00eatre s\u00fbr que les choses ont chang\u00e9. De tels constructeurs et mod\u00e8les pr\u00e9d\u00e9finis facilitent le processus et permettent aux personnes ne disposant pas de sites de lancement de connaissances substantiels de conception attrayante et professionnelle.<\/p>\n
C\u2019est pourquoi les mod\u00e8les de site Web cr\u00e9\u00e9s par Novi Builder constituent un bon choix pour cr\u00e9er un site Web.<\/p>\n
- Edit mode<\/strong> fournit les outils et les options pour modifier le th\u00e8me ou le site Web.<\/li>\n
- Dans le dossier racine de votre site Web, cr\u00e9ez un nouveau r\u00e9pertoire appel\u00e9 \u201cbuilder<\/em>\u201d.\n
![\"html](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2017\/05\/html-banner.jpg?x54449\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"