CATALOGUE Webmarketing Personnaliser un thème WordPress 4.x avec le framework Genesis Comment Appliquer des Styles aux Widgets

Comment Appliquer des Styles aux Widgets

Appliquer un style à ces nouvelles zones de Widget

Vidéo non disponible ! Réessayez plus tard

5h 35min

54 leçons

Transcription

54,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

5h 35min

54 leçons

54,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Étapes pour Personnaliser les Widgets

Objectifs

Les objectifs de cette vidéo sont d'expliquer comment :

Utiliser l'inspecteur de navigateur pour identifier et modifier des éléments HTML et CSS
Appliquer de nouvelles classes CSS pour personnaliser les widgets
Enregistrer les modifications de style dans un fichier CSS

Résumé

Apprenez à appliquer des styles aux nouvelles zones de widgets créées en utilisant l'inspecteur de navigateur dans Google Chrome.

Description

Dans ce tutoriel, nous expliquerons de manière détaillée comment appliquer des styles spécifiques aux nouvelles zones de widgets créées sur une page d'accueil. Vous apprendrez à utiliser les outils de développement de Chrome pour inspecter et modifier les éléments HTML et CSS.

Nous créerons une nouvelle classe CSS pour différencier les zones de widgets et nous verrons comment ajuster la largeur, ajouter une marge interne (padding), et un arrière-plan pour personnaliser l'apparence de ces zones. Finalement, ces styles seront enregistrés dans le fichier style.css pour pérenniser les modifications effectuées.

Questions - réponses

Comment ouvrir l'inspecteur d'éléments dans Google Chrome ?

Vous pouvez ouvrir l'inspecteur d'éléments en faisant un clic droit sur la page et en sélectionnant 'Inspecter l'élément'.

Quel est l'intérêt d'utiliser des classes spécifiques pour les widgets ?

Utiliser des classes spécifiques permet de personnaliser chaque widget indépendamment, sans affecter les autres éléments de la page.

Comment enregistrer les modifications de style dans un fichier CSS ?

Après avoir déterminé les styles dans l'inspecteur de navigateur, vous devez les copier et les coller dans votre fichier style.css, puis enregistrer les modifications.

Programme détaillé

Accueil de la formation

Module 1 - Structure WordPress

Les quelques requis 00:58

Activation d'un thème basique WordPress 03:17

Éditer les fichiers WordPress avec un éditeur de code 03:53

Comprendre les principales règles d'écriture du PHP 04:30

Comprendre les variables et les conditions 05:23

Intégration du HTML dans le PHP 05:19

Analyse des fichiers d’un thème WordPress 05:37

Fonctionnement des différents modèles et la hiérarchie WordPress 06:19

Modifier un modèle pour une catégorie 07:08

Trouver les éléments de modèle 03:24

La boucle basique WordPress 05:36

La boucle WordPress selon la hiérarchie des modèles 06:07

Les éléments de la boucle 06:40

Créer un modèle de page 07:20

Intégration des éléments de la boucle dans le modèle de page 05:01

Module 2 - Utiliser le framework de Thème Genesis

Qu'est-ce qu'un framework de thème ? 04:33

Pourquoi utiliser le framework Genesis 04:48

Principe du thème enfant dans WordPress 02:51

Acheter et télécharger Genesis 03:51

Trouver et choisir un thème Premium qui repose sur Genesis 05:02

Module 3 - Mise en place d'un thème Enfant Genesis

Traduire Genesis en français 06:07

Réglages de mise en page dans Genesis 04:59

Réglages des menus dans Genesis 03:33

Réglages des archives Genesis 06:20

Autres réglages dans Genesis 04:30

Régler le SEO intégré dans les options de Genesis 05:23

Exporter et importer les réglages Genesis 01:44

Utilisation du Widget Genesis Article à la une 06:53

Utilisation du Widget Genesis Page à la une 05:53

Le réglage des pages d'accueil dans Genesis 08:25

Utiliser le widget texte 05:09

Création de barres latérales avec le plugin Genesis Simple Sidebar 06:00

Modification des shortcodes stratégiques d'un thème Genesis 05:17

Créer une page sur mesure avec un Page Builder 10:26

Installer et utiliser le plugin Genesis Responsive Slider sur la page d'accueil 07:27

Module 4 - Personnalisation avancées d'un thème Genesis

Comprendre les modèles du thème dans Genesis 08:11

Principes des hooks dans Genesis 04:48

Ajouter un contenu sur mesure en utilisant le hook add_action de Genesis 07:53

Modifier du contenu en utilisant le hook add_filter de Genesis 07:22

Changer l'ordre d'affichage du contenu HTML avec les hooks de Genesis 05:39

Personnalisation du back-office avec Advanced Custom Field 09:24

Affichage des nouveaux champs personnalisés créés 06:44

Ajouter un conditionnel si ACF n'est pas actif 05:42

Analyser la construction d'une page d'accueil dans Genesis 08:24

Créer des nouvelles zones de Widget dans Genesis 08:57

Appliquer un style à ces nouvelles zones de Widget 05:50

Comprendre les boucles WordPress sur mesure 09:12

Créer une boucle WordPress sur mesure dans un modèle de page 11:26

Créer un format d'image personnalisé 06:00

Créer des contenus personnalisés avec Custom Post Type UI 08:29

Créer une interface sur mesure dans le back-office pour des contenus personnalisés 06:54

Affichage d'un contenu personnalisé dans hiérarchie du site 10:16

Affichage des archives des contenus personnalisés 09:16

Centralisation des actions appliquées avec la fonction get_template_part 09:17