Intégration de schémas de grille CSS simples dans WordPress
Obtenir une mise en page cohérente et solide dans WordPress peut être un processus simple si vous utilisez les bons outils. Dans ce didacticiel, vous apprendrez étape par étape comment configurer rapidement un système de grille dans WordPress très léger et facile à modifier. Nous allons garder la conception simple afin de pouvoir nous concentrer sur l'utilisation des bons outils pour configurer votre grille, mais gardez à l'esprit que vous pouvez la personnaliser vous-même si nécessaire..
J'utiliserai un thème de Pool par défaut dans WordPress pour ce tutoriel, juste pour vous montrer une approche "à partir de zéro" pour obtenir les grilles parfaitement adaptées.
Étape 1: Déterminez votre largeur de grille
Avant de commencer, vous devez déterminer la largeur de votre réseau. Pour mon site WordPress, je peux voir que la largeur de ma colonne principale est de 450 pixels par seconde en utilisant la fonctionnalité "Inspecter un élément" de Google Chrome lorsque vous cliquez avec le bouton droit de la souris sur un objet. C’est le moyen le plus rapide que j’ai trouvé pour déterminer rapidement la largeur et la hauteur d’un objet sur une page Web..
Étape 2: Concepteur de grille
Au lieu de construire manuellement une grille, ce que vous pouvez faire si vous le souhaitez, je suggère d'utiliser l'un des nombreux outils de générateur de grille disponibles. Pour ce tutoriel, j'utiliserai le générateur de grille de MindPlay. C'est un générateur de grille très simple et léger.
Je veux un affichage sur trois colonnes et je dois m'assurer que mes pixels sont à 450. Réglez en conséquence et passez à l'onglet "Exporter". Nous ne reviendrons pas sur *typographie fonctionnalités de ce tutoriel, bien que cela vaille la peine d’être exploré seul.
Dans l'onglet Exporter, utilisez le cadre le plus haut "Feuille de style" et faites défiler jusqu'à ce que le commentaire "Grille" apparaisse. Vous allez tout copier du commentaire au bas de ce cadre. Il devrait y avoir environ 30 lignes de .
Étape 3: Mise à jour de votre feuille de style WordPress
Connectez-vous à votre site WordPress et accédez à Apparence> Editeur.
En bas à droite du panneau Editeur, vous verrez un Styles.css fichier (ou quelque chose de similaire, en fonction de votre thème). Cliquez dessus pour l'ouvrir.
Faites défiler l'écran vers le bas et collez votre pré depuis MindPlay.dk:
Étape 4: Mise en œuvre de la grille
Pour utiliser la grille, vous créez simplement un Voici quelques exemples que vous pouvez coller pour vous aider à démarrer: Colonne de gauche Colonne du milieu Colonne de droite Voici à quoi ça ressemble dans WordPress: Enregistrez / mettez à jour la page et regardez les résultats. Dans mon cas, voici la page d'accueil du site: Comme vous pouvez le voir sur la capture d'écran ci-dessus, nous avons nos trois colonnes et tout est exactement là où nous nous attendons. Vous pouvez ajouter autant de lignes que vous le souhaitez en commençant simplement par ce qui suit. Colonne de gauche Colonne du milieu Colonne de droite Rangée gauche 2 Rangée du milieu # 2 Rangée droite n ° 2 Voici à quoi cela ressemble jusqu'à présent: Vous pouvez maintenant ajouter des images ou du texte et donner à chaque ligne le style que vous souhaitez.. Vous pouvez rencontrer des problèmes dans certains navigateurs lorsque vous avez plusieurs lignes. Pour résoudre ce problème, vous devrez laisser la marge à l'extrême droite ( Cela fera en sorte que votre Si vous souhaitez appliquer un style à l’arrière-plan de la grille entière, vous devez ajuster la hauteur de la grille. En fonction de la version du générateur de grille MindPlay.dk que vous utilisez, le site ne générera peut-être pas le ".grid-m4" et vous devrez plutôt utiliser Colonne de gauche Colonne du milieu Colonne de droite Voici à quoi ressemblent mes résultats finaux avec deux lignes et quelques graphiques simples: Amusez-vous à concevoir et rappelez-vous que vous pouvez styler votre grille comme vous le souhaitez. Note de l'éditeur: Cet article est écrit par Tara Hornor pour Hongkiat.com. Tara est diplômée en anglais et écrit sur le marketing, la publicité, la stratégie de marque, le graphisme et la publication assistée par ordinateur. En plus de sa carrière d'écrivain, Tara aime passer du temps avec son mari et ses deux enfants..
:
Conseils pour peaufiner
.grille-m4, dans notre cas) à la hauteur souhaitée pour chaque rangée. Si vous utilisez des images de 250 pixels sur 250 pixels, définissez la hauteur des lignes dans le champ .grille-m4 être 250px:.grid-m4 float: left; largeur: 20px; hauteur: 250px;
.grille-m1 sur le côté gauche de la rangée suivante ne flotte pas jusqu'à la rangée au-dessus..la grille classe. Alors disons que vous avez quatre lignes sur votre grille, chacune à 250px. Vous voudrez ajouter de la hauteur à la classe .grid à 1000px pour que tous les éléments de style que vous ajoutez couvriront l'intégralité de la grille...grille largeur: 450px; hauteur: 1000px; marge: auto;
.grille-m1 après .grille-c3 pour vous assurer que votre réseau s'étend au bon endroit:Résultats finaux
