Sélectionner une page


Mise à jour du 8 décembre 2016: Divi est maintenant en version 3.1 et cet article est très obsolète. Nous laissons cela ouvert pour le moment car il peut avoir une certaine valeur pour les utilisateurs utilisant les versions précédentes de Divi. Cependant, n’essayez pas de l’utiliser avec les nouvelles versions de Divi.

Mettre à jour:: Cet article a été mis à jour pour Divi 2! Cependant, avec autant d’options pour les logos / titres centrés, etc., il est pratiquement impossible d’écrire un guide qui anticipe toutes les possibilités. Si vous avez vous-même apporté des modifications CSS à l’en-tête ou au menu, cela peut également affecter vos résultats. Si vous êtes bloqué, j’essaierai de vous aider, mais il y a une limite à ce que je peux faire car le débogage du code d’autres personnes prend beaucoup de temps. Veuillez vérifier les commentaires ci-dessous pour voir si quelqu’un a eu le même problème que vous.

Notre site Web Nerd Nomads est basé sur le thème Divi d’Elegant Themes. Cependant, nous avons apporté quelques modifications au look prêt à l’emploi de Divi. Nous étions récemment Pleins feux sur le blog Elegant Themeset une demande commune des commentateurs était une ventilation de la façon dont j’ai personnalisé le logo. Voici un bref aperçu de la façon de redimensionner le logo Divi, qui, espérons-le, vous permettra de démarrer.

Un petit mot d’avertissement

Avant de commencer, je dois vous demander de faire attention à la modification des fichiers de thème. Enregistrez des sauvegardes de tout avant de commencer et n’essayez pas de le faire sur un site de production en direct à moins que vous ne sachiez vraiment ce que vous faites et comment l’annuler! Vous pouvez faire ce tutoriel même si vous ne connaissez pas CSS, mais c’est beaucoup plus facile si vous apprenez HTML et CSS. Je suis membre de Lynda.com, Un site Web de formation par didacticiel vidéo qui m’a beaucoup appris sur le développement et la conception Web. Si vous voulez l’essayer, vous pouvez l’essayer ici Entièrement gratuit pendant 10 jours.

Toujours là? OK allons-y!

Je travaille sur une nouvelle installation de Divi. J’ai créé un sous-sujet et je ne toucherai pas aux fichiers originaux. Je vous recommande fortement d’utiliser un sous-sujet lorsque vous effectuez des changements comme celui-ci. Bien que nous n’allions ajouter du code CSS que pour la première partie de cette ventilation, il est possible d’y renoncer. Si vous ne savez pas comment créer un sujet enfant, Voici un lien pour savoir comment procéder.

C’est Divi tout droit sorti de la boîte::

divi1

Le logo est un peu petit, alors Téléchargez un fichier de logo plus volumineux. Le logo Nerd Nomads mesure 322 x 160 pixels.

divi2

Hmm, pas tout à fait ce que nous voulons, non? Creusons là-dedans CSS, et Ajoutez ce qui suit (Ceci est basé sur les dimensions de notre logo. Votre valeur pour la hauteur maximale dépend de la hauteur de votre logo.):

 .et_fixed_nav #logo {
max-height: 160px;
}

Cela nous donne ce qui suit:

divi4

Mieux, mais l’effet de réduction lors du défilement vers le bas ne fonctionne pas. Vous ne voudrez peut-être pas l’effet de rétrécissement lorsque vous avez terminé! Félicitations 🙂

Si vous voulez l’effet de rétrécissement, nous devons fournir une taille minimale. La taille dépend de votre logo. Ajoutez le CSS suivant::

 .et-fixed-header #logo {
  max-height: 90px !important;
 padding:0 !important;	 
}

D’accord, l’effet de rétrécissement fonctionne maintenant!

Note latérale: Selon la taille de votre logo, l’effet de rétrécissement peut être trop rapide ou peut-être trop lent maintenant. Pour modifier la vitesse à laquelle il se réduit, vous pouvez expérimenter en ajoutant le code suivant. Assurez-vous de modifier la valeur 0.4s sur la durée de la transition:

#logo {
Transition: toutes les 0,4 s entrée-sortie facile;
}}

Maintenant, c’est vraiment à vous – comment aimeriez-vous le styliser? Vous pouvez terminer ici si votre logo se marie mieux avec ce style que le nôtre 🙂

Allons un peu plus loin. Souhaitez-vous que le logo affleure le haut? Ajouter au CSS::

#logo {
	position: relative;
	top:-18px;
}
divi5

Souhaitez-vous qu’il surplombe le contenu principal comme nous l’avons fait? Juste Changer la position CSS: par rapport à la position: absolue.

#logo {
	position: absolute;
	top:-18px;
}

divi6

Si vous voulez qu’il reste sur la gauche de l’écran comme nous l’avons fait, le moyen le plus simple de le faire est d’apporter un petit changement au header.php Déposer.

C’est là que le thème des enfants entre en jeu! Copiez simplement le fichier header.php du répertoire Divi dans votre répertoire enfant Divi.

Et apportez le changement suivant: Déplacez la ligne 120 et collez-la sur la ligne 129.
Capture d'écran 2014-05-22 à 23:51:43

Cela déplace la classe de conteneur, qui est responsable du positionnement central, sous le logo. De cette façon, le logo n’est plus centré. de même Modifiez un peu le CSS du logo pour positionner correctement le logo verticalement::


#logo {
	position: absolute;
	top:0px;
}

divi8

Vous souhaiterez peut-être déplacer le contenu principal plus bas, en fonction de ce que vous avez en haut de votre page.

Astuce bonus

Si le logo est aussi grand, il peut devenir trop grand pour vous lorsque vous l’affichez sur des écrans plus petits, des téléphones portables, etc. Le cas échéant, Ajoutez ce qui suit pour mettre à l’échelle le logo en fonction de la taille de l’écran (Expérimentez les valeurs en fonction de la taille de votre logo et de ce qui va avec votre conception.)

#logo {
  max-width: 30%;
  min-width:150px;
}

Maintenant, le logo s’adapte à la taille de l’écran!

Le code complet de notre logo ressemble donc à ceci:

#logo {
	position: absolute;
	top:0px;
	max-width: 30%;
	min-width:150px;
}

.et_fixed_nav #logo {
	max-height: 160px;
}

.et-fixed-header #logo {
    max-height: 90px !important;
	 padding:0 !important;	 
}


Mises en page encadrées dans Divi 2.0

Pour Divi 2.0 Elegant Themes, il était possible d’utiliser une mise en page de boîte sur nos sites Web. Pour ce faire, une nouvelle classe de conteneur externe de largeur fixe a été ajoutée à la page entière. Si vous utilisez la fonction de mise en page encadrée, vous obtiendrez un résultat différent à la dernière étape que nous avons examinée ci-dessus concernant le déplacement du logo vers la gauche de l’écran. Le logo est limité par la nouvelle classe de conteneur externe et est situé au ras de la gauche dans la disposition de la boîte au lieu de la gauche dans la fenêtre du navigateur. En fonction de votre logo, c’est un autre look possible.

Capture d'écran 2014-05-23 au 04-04-49

2. Astuce bonus pour la mise en page de la boîte avec Divi 2.0

Si vous souhaitez utiliser la disposition de la boîte et que le logo soit aligné à gauche de la fenêtre du navigateur, il est probablement préférable d’essayer de définir le logo sur Position: Fixed que d’essayer de déplacer des éléments dans le fichier header.php. Cela positionne le logo par rapport à la fenêtre du navigateur. Je ne suis pas un grand fan de cela car le logo reste en haut de la fenêtre du navigateur, quoi qu’il arrive. Par exemple, il est caché derrière votre barre d’outils WordPress lorsque vous êtes connecté.

Si vous souhaitez essayer ceci, remplacez la classe #logo par:

#logo {
	position: fixed;
	top:0px;
        left:0px;
}

Le résultat sera:

Capture d'écran 2014-05-23 à 01:31:15

Apprendre encore plus

Si vous voulez que votre site Web ressemble exactement à ce que vous voulez, apprendre du CSS et du HTML est une bonne idée. C’est simple et il y a des tonnes de ressources, bonnes et mauvaises.

Je suis membre de Lynda.com. Lynda.com est un moyen formidable et professionnel d’en savoir plus sur WordPress et HTML / CSS. Leurs vidéos de formation sont très bien réalisées et comprennent également des fichiers de cours et des relevés de notes pour ceux qui préfèrent apprendre en lisant.

Mis à part le développement Web, ils offrent des cours sur à peu près tout, y compris l’écriture, la photographie, la gestion d’entreprise, etc. Avec de nouveaux cours ajoutés chaque semaine, c’est un endroit idéal pour étudier. Et ils ont 10 jours essai entièrement gratuit!

J’espère que cela a été utile! Dites-nous ce que vous pensez dans les commentaires ci-dessous, et si vous avez d’autres questions.

Amusez-vous à peaufiner Divi! 🙂

Certains de ces liens sont des liens d’affiliation. Si vous décidez d’acheter l’un de ces cours, cela nous aidera beaucoup si vous magasinez via l’un de nos liens. Nous gagnons une petite commission qui nous aide à gérer ce site Web sans encourir de frais supplémentaires. Alors merci beaucoup!



Source link

Recent Posts