CREER UN MENU SUR UN SITE ONE PAGE (ASTRA ac Vlogger Template)

WordPress :6.4
Statut : résolu

Ce sujet contient 19 réponses, 2 participants et a été mis à jour pour la dernière fois par Cirkl Services, le il y a 1 année.

5 sujets de 16 à 20 (sur un total de 20)

← 1 2

Auteur

Messages
19 février 2024 à 22 h 27 min #2468220
Cirkl Services
Participant

Padawan WordPress
57 contributions
Bonsoir,

Sur PC :

Les nouveaux codes CSS ont bien harmonisé les distances entre les bords des conteneurs et leurs contenus.

J’ai refait le conteneur Conception-Rédaction Copywriting (il m’avait en effet échappé), ce qui a réglé son problème.

Néanmoins, ces problèmes de distances entre les titres et les contenus en dessous sont toujours là pour le conteneur Rédaction Web.

Sur Mobile :

Le premier conteneur en dessous du titre s’est décalé sur la gauche.

Quant au menu, je l’avais fait par la voie habituelle, selon le chemin que vous avez indiqué, comme vous le verrez sur les pièces jointes.

Ma liste d’extension :
- Akismet Anti-spam: Spam Protection
- Backuply
- FileOrganizer
- Imagify
- Limit Login Attempts Reloaded
- Loginizer
- Modèles de démarrage
- Newsletter, SMTP, Email marketing and Subscribe forms by Brevo
- o2switch – WpTiger
- Redirection
- Spectra
- UpdraftPlus – Sauvegarde/Restauration
- Wordfence Security
- WP 2FA – Two-factor authentication for WordPress
- WP Statistics
- Yoast SEO
Je les ai désactivé une par une, puis refresh le site à chaque fois sur mobile, et ça n’a rien changé, le menu n’y fonctionne toujours pas.

J’ai fait quelques recherches aussi pour voir si des extensions pouvaient poser des problèmes avec les menus, et je n’ai rien trouvé.

D’avance, merci.
- Cette réponse a été modifiée le il y a 1 année par Cirkl Services.
20 février 2024 à 18 h 30 min #2468289
Rock4Temps
Participant

Maître WordPress
1189 contributions
Bonsoir,

Supprimer les codes précédent, e entrez celui-ci/
```
/* 1ère section en dessous du header 
   suppression du décalage a gauche */
@media only screen and (max-width: 767px){
	.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-98c7537a > .uagb-container-inner-blocks-wrap {
		flex-wrap: nowrap!important;
	}
}


@media(max-width:600px){
	
	/* Icônes Réseau sociaux */
    .wp-block-uagb-container.uagb-block-22cc32af .wp-block-image img{
        width:65px!important;
    } 
	
	/* Logo header */
	header .custom-logo-link img {
        max-width: 90px!important;
    }
    
	/* titre header */
    h1.wp-block-heading{
        font-size:32px!important;
    }

	/* titre header */
    h1.wp-block-heading:first-child{
        margin-top:4em!important
    }
	
	/* titre H2 */
	h2.wp-block-heading{
        font-size:40px!important;
    }
	
	/* titre H3 */
	h3.wp-block-heading{
        font-size:35px!important;
    }
	
	/* Inversion colonne sur mobile
	   classe columns-reverse à ajouter
	   aux paramètres avancé du bloc colonnes */
	.columns-reverse{
		display: -webkit-flex!important;
		display: -ms-flex!important;
		display: flex!important;
		-webkit-flex-direction: column-reverse!important;
		-ms-flex-direction: column-reverse!important;
		flex-direction: column-reverse!important;
	}
	
}

.wp-block-uagb-container:not(:first-child){
    padding:2em!important;
}
```
• Régler le problème de décalage a gauche de la 1èrer section sous le Header.
• J’ai modifié les tailles pour les titres H2 & H3 sur mobile qui étaient trop imposante.
• J’ai ajouté une régle CSS pour inverser les colonnes sur mobiles.
vous avez en terme de WebDesign une mosaique c’est a dire une sucession de différentes section avec:
Image Texte
Texte Image
Image Texte

Ce qui doit donner pour les Mobile sur une colonne:
Image
Texte
Image
Texte
Image
Texte

hors ce n’est pas le cas, car vous devez inverser les colonnes par exemple pour les sections:
Rédaction WEB, Autres formes d’écriture etc..
Pour cela comme c’est expliqué dans le code ajouter dans les paramétres avancés du bloc colonnes
par exemple pour la section Rédaction WEB la classe: columns-reverse
cela marche pour toutes les sections excepté Ecriture Publique, est elle construite différement des autes section ?

Pour le menu Mobile, je ne sais pas, il n’ y a pas d’erreur javascript dans la console de chrome.
Faite d’abord une sauvegarde de votre site avec UpdraftPlus,
puis désinstaller votre thème Astra, puis l’installer à nouveau.
Sinon essayer en activant un autre thème léger comme GeneratePress
20 février 2024 à 19 h 13 min #2468293

Cirkl Services
Participant

Padawan WordPress
57 contributions

Bonsoir,

Merci pour le nouveau CSS, cela a effectivement recentré le sous-titre du site.

Pour la suite, je ne vous suis plus. L’alternance des images et du texte dans les différentes sections est volontaire, pourquoi devrais-je changer cela ? Cela donne une alternance image-texte-texte-image sur mobile, qui reflète ce que donne le site sur ordinateur, pourquoi est-ce une mauvaise chose ?

Quant à la section Ecriture Publique, elle n’a rien de différent des autres, elle est construites à partir des mêmes éléments, et de la même façon ; tout comme les sections Conception-Rédaction et Rédaction Web, qui ont toujours cette inexplicable distance entre le titre de la section et le reste du contenu.

Sinon, j’ai désinstaller/réinstaller le thème Astra et rien n’a changé, le menu est toujours inutilisable sur mobile.

D’avance, merci.

20 février 2024 à 19 h 59 min #2468304
Rock4Temps
Participant

Maître WordPress
1189 contributions
L’alternance Image Texte Image Texte est préférable sur mobile
cela évite d’avoir de long pavé de texte a lire comme avec l’alternance
Image Texte Texte Image.

Aprés ce que je vous propose n’est pas une obligation, mais en régle générale
du même ordre on ne fait pas des paragraphes de plus de 4 lignes.
Pas plus de 80 caractères par ligne, car un retour a ligne plus fréquent
évite la fatigue oculaire, c’est une régle d’ergonomie.

Quand on fait un site WEB, il y a des régles de WebDesign, d’Ergonomie,
d’Accessibilité a respecter.

Je trouve seulement qu’il y a trop de marge, pour la 1ère section avec le header
et la section Conception-redaction que l’on peut rectifier avec ce code:
```
.wp-block-uagb-advanced-heading.uagb-block-039d9eb0{
	margin: 0!important;
}
```
Pour le menu sur mobile, je n’ai pas de solution a votre problème.
21 février 2024 à 11 h 59 min #2468353

Cirkl Services
Participant

Padawan WordPress
57 contributions

Bonjour,

Merci pour vos conseils en matière de web design (ce n’est clairement pas mon métier), j’ai fait les modifications nécessaires.

Il ne reste qu’un seul et éternel problème : le menu qui ne fonctionne pas sur mobile.

Je vais ouvrir un nouveau sujet pour traiter ce problème en particulier.

Merci beaucoup, vous m’avez été d’une grande aide.
Auteur

Messages