Modifier à l'aide de Fusion Builder dans le thème WordPress Avada

MISE À JOUR Novembre 2016 : ThemeFusion a mis à jour Avada vers la version 5.0. Cette mise à jour sépare le générateur Fusion en un plugin individuel, au lieu d'être incorporé au plugin Fusion Core. Fusion Builder a été complètement repensé et est très différent des versions précédentes.

Lorsque l'on vous demande de mettre à niveau Avada, BACKUP de l'ensemble de votre site, y compris le premier plugin Fusion Core, et soyez prêt à passer du temps à réorganiser vos pages, car elles ne se déplacent pas de manière transparente.

Si vous avez déjà effectué la mise à niveau d'Avada 5.0 et que vos pages sont cassées, mettez la main sur une version antérieure d'Avada. À l'aide de FTP, accédez au dossier wp-content/themes et sauvegardez la nouvelle version. Renommez-le ensuite et FTP la version précédente. Vous devriez récupérer la version la plus nette de vos pages.

Ce message concerne la version 2.0.3 ou antérieure.

Utilisation du thème Avada

Si vous avez le thème Avada sur votre installation WordPress, il est possible d'utiliser Fusion Builder pour créer vos articles et pages, ce qui est assez différent d'une mise à jour de page standard.

Fusion Builder est un plugin développé par ThemeFusion, les développeurs d'Avada, qui permet une mise en page réactive au sein du thème.

Cela peut être un peu déroutant pour les débutants.

J'ai écrit quelques instructions pour vous aider à éditer des pages ou des articles, en utilisant Fusion Builder dans le thème WordPress Avada.

Sauvegardez toujours avant d'apporter des modifications

Ne mettez jamais à jour le noyau, les thèmes ou les plugins de WordPress sans d'abord effectuer une sauvegarde complète des plugins, des thèmes, des téléchargements et de la base de données.

Les mises à jour peuvent entraîner la panne d'autre chose et vous devez pouvoir revenir en arrière ou déboguer facilement. Je recommanderais de faire des mises à jour majeures sur un site de développement afin que vous puissiez le tester en premier.

Activer Fusion Builder d'Avada

Activez d'abord Fusion Builder sur la page ou la publication, en utilisant le bouton bleu au-dessus de la zone de modification du contenu.

Si votre concepteur de sites Web a déjà configuré les pages, il a peut-être déjà cliqué sur le bouton. Cela changera l'apparence de votre éditeur de contenu, comme ci-dessous.

En utilisant Fusion Builder d'Avada, vous pouvez créer des pages Web réactives.

Comment modifier des pages à l'aide de Fusion Builder

Connectez-vous à votre back-end WordPress.

Parcourez les pages ou publiez, en utilisant les onglets sur le côté gauche, puis modifiez.

La zone Fusion Builder doit se trouver en haut de votre écran d'édition de page. Les boutons en haut sont étiquetés « Options de colonne », « Éléments de création », « Modèles personnalisés » et « Modèles prédéfinis ».

Nous allons ignorer les modèles personnalisés et les modèles de pré-construction pour cet article.

Commencer

Options de la colonne Fusion Builder

Choisissez une option de colonne lorsque vous souhaitez diviser votre page en colonnes. Cela insère une structure de colonnes dans votre page, dans laquelle vous placez ensuite des éléments de construction. Les tailles et les nombres de colonnes peuvent être modifiés ultérieurement.

Une fois que vous avez choisi une option de colonne, cette option apparaît dans l'espace blanc ci-dessous. Pour créer votre page, pensez comme si vous assembliez un puzzle.

Si vous avez ajouté une colonne de 5 x 6e à gauche, la seule autre option qui conviendra à droite est 1 x 6e.

Vous pouvez faire glisser une colonne de la gauche de la page vers la droite de la page.

Cliquez sur le bouton moins sur n'importe quelle option de colonne pour diminuer le nombre de colonnes que cet élément prendra. Le bouton plus est exactement le contraire.

Éléments du générateur de fusion

Des éléments de construction peuvent être ajoutés sans choisir d'abord une option de colonne. Les éléments seront insérés sur une ligne qui s'étend sur l'ensemble de votre page. Ceux-ci peuvent ensuite être glissés dans une colonne si nécessaire.

Il existe un éventail d'options d'éléments de construction dans Avada. Commençons par le texte. Une fois que vous avez ajouté vos colonnes, comme ci-dessus, vous pouvez ajouter un bloc de texte à une colonne.

Cliquez simplement sur le bouton Builder Element, recherchez TEXTE, puis cliquez et faites-le glisser dans votre colonne.

Survolez l'élément, puis cliquez sur l'icône de pinceau qui apparaît en haut à droite pour ajouter ou modifier du texte.

Tous les éléments peuvent être modifiés en utilisant la même icône d'édition.

Modifiez le texte ou le support dans l'élément, puis cliquez sur ENREGISTRER, la boîte se fermera.

Une fois cette fenêtre fermée, cliquez sur le bouton bleu MISE À JOUR pour enregistrer vos modifications.

Modification des zones de contenu dans Avada

Les zones de contenu se trouvent sous Éléments du générateur. Ceux-ci sont utiles car ils sont vraiment flexibles.

Au sein d'un élément « Boîtes de contenu », il peut y avoir plusieurs « boîtes enfants », ou « Éléments », qui peuvent être ajoutés en faisant défiler tout en bas de l'écran Boîte de contenu.

L'écran principal de la zone de contenu modifie les options de toutes les zones enfants, à moins que « l'enfant » n'ait son propre style.

Accédez à l'écran d'édition de votre zone de contenu à l'aide de l'icône en forme de pinceau.

Les options de la zone de contenu sont les suivantes :

Paramètres parent/enfant
Les paramètres « Niveau parent » contrôleront tous les styles de boîte ensemble. Les paramètres « Niveau enfant » contrôleront chaque style de boîte individuellement.

Disposition de la zone de contenu
Sélectionnez la mise en page pour la zone de contenu

Le nombre de colonnes
Définissez le nombre de colonnes par ligne.

Alignement du contenu
Fonctionne avec les options de mise en page « Icône classique avec titre » et « Icône classique sur le côté ».

Taille du titre
Contrôle la taille du titre. Laissez vide pour la sélection des options de thème. En pixels ex : 18px.

Couleur de police du titre
Contrôle la couleur de la police du titre. Laissez vide pour la sélection des options de thème. ex : #000

Couleur de la police du corps
Contrôle la couleur de la police du corps. Laissez vide pour la sélection des options de thème. ex : #000

Couleur d'arrière-plan de la zone de contenu
Laissez vide pour la sélection des options de thème.

Fond d'icône
Choisissez d'afficher un arrière-plan derrière l'icône. Sélectionnez par défaut pour la sélection des options de thème.

Rayon d'arrière-plan de l'icône
Choisissez le rayon de la bordure de l'arrière-plan de l'icône. Laissez vide pour la sélection des options de thème. En pixels (px), ex : 1px, ou « rond ».

Couleur de l'icône
Laissez vide pour la sélection des options de thème.

Couleur d'arrière-plan de l'icône
Laissez vide pour la sélection des options de thème.

Couleur de bordure intérieure de fond d'icône
Laissez vide pour la sélection des options de thème.

Taille de la bordure intérieure de l'arrière-plan de l'icône
Laissez vide pour la sélection des options de thème.

Couleur de la bordure extérieure de l'arrière-plan de l'icône
Laissez vide pour la sélection des options de thème.

Taille de la bordure extérieure de l'arrière-plan de l'icône
Laissez vide pour la sélection des options de thème.

Taille de l'icône
Contrôle la taille de l'icône. Laissez vide pour la sélection des options de thème. En pixels ex : 18px.

Type d'animation de survol d'icône
Sélectionnez le type d'animation pour l'icône en survol. Sélectionnez par défaut pour la sélection des options de thème.

Survolez la couleur de l'animation
Sélectionnez une couleur d'accent pour l'animation de survol. Laissez vide pour la sélection des options de thème.

Type de lien
Sélectionnez le type de lien qui doit s'afficher dans la zone de contenu. Sélectionnez par défaut pour la sélection des options de thème.

Zone de lien
Sélectionnez la zone à laquelle le lien sera affecté. Sélectionnez par défaut pour la sélection des options de thème.

Cible du lien
_self = ouvrir dans la même fenêtre
_blank = ouvrir dans une nouvelle fenêtre. Sélectionnez par défaut pour la sélection des options de thème.

Retard d'animation
Contrôle le délai d'animation entre chaque élément d'un ensemble. En millisecondes, 1000 = 1 seconde.

Décalage de l'animation
Choisissez quand l'animation doit commencer.

Type d'animation
Sélectionnez le type d'animation à utiliser sur le shortcode

Direction de l'Animation
Sélectionnez la direction entrante pour l'animation

Vitesse d'animation
Tapez la vitesse de l'animation en secondes (0,1 - 1)

Marge Haut
En pixels (px), ex : 1px.

Marge inférieure
En pixels (px), ex : 1px.

Classe CSS
Ajoutez une classe à l'élément HTML d'emballage.

Identifiant CSS
Ajoutez un identifiant à l'élément HTML d'emballage.

Modification d'une zone de contenu « enfant »

Cliquez sur l'icône du pinceau pour modifier la zone de contenu.

Faites défiler vers le bas pour trouver « Ajouter une nouvelle zone de contenu », ou éventuellement « Élément de zone de contenu 1+ », s'il y a déjà un élément dans la zone de contenu.

Modifiez le texte, les images, ajoutez des icônes et modifiez de nombreuses options sur la zone de contenu « enfant » ici. Ces paramètres écraseront les paramètres parent.

Cliquez maintenant sur le bouton bleu ENREGISTRER. La boîte d'édition se fermera.

N'oubliez pas de cliquer sur le bouton MISE À JOUR sur le côté droit pour enregistrer la page.

Liens utiles

Informations de mise à jour Avada