[Résolu] Thème Ocean WP : personnalisation de la top bar

  • WordPress :5.0
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 35)
  • Auteur
    Messages
  • #2234700
    Julie1402
    Participant
    Padawan WordPress
    64 contributions

    Bonjour,

    Ma configuration WP actuelle :

    • Version de PHP/MySQL : V.5.6
    • Thème utilisé : OceanWP
    • Extensions en place : Child Theme Configurator, Contact Form 7, Elementor, Interior Designs Pro Post Types, TC Title Banner Image, WP Font Awesome.
    • Nom de l’hébergeur : OVH
    • Adresse du site : http://kheopsecurite.eu/

    Bonjour, j’aimerais personnaliser quelques éléments sur mon site… Pourriez-vous m’aider svp ?

    • Sur ma page d’accueil, j’aimerais ajouter un logo au centre de la top bar, entre « Votre sécurité…Notre métier » et les icônes des réseaux sociaux,
    • Enfin, dans le footer, j’aimerais faire apparaître deux liens hypertextes : un pour « mentions légales » et un pour « Comm’Julie ».

    Merci d’avance pour votre aide 🙂

    #2234869
    Noaneo
    Participant
    Maître WordPress
    30003 contributions
    #2235354
    Julie1402
    Participant
    Padawan WordPress
    64 contributions

    Super ! Merci beaucoup, c’est parfait !

    Et dernière chose, j’aimerais remonter la barre de recherche de mon menu vertical… Comment puis-je faire stp ?

    Merci beaucoup 🙂

    #2235362
    Noaneo
    Participant
    Maître WordPress
    30003 contributions

    Bonjour,
    La barre à gauche fonctionne comment, avec des widgets ?
    Vous avez tout créer avec le plugin Elmentor ?
    je vois ceci

    #site-header.vertical-header #vertical-searchform {margin-top: 40px;}

    il faudrait pouvoir mettre 0 à la place de 40.

     

    #2235404
    Julie1402
    Participant
    Padawan WordPress
    64 contributions

    Bonjour,

    Non je n’ai pas tout créé avec Elementor.

    J’ai mis 10px à la place de 40px et c’est parfait !

    Encore une fois merci 🙂

    #2235490
    Noaneo
    Participant
    Maître WordPress
    30003 contributions

    Ravi pour vous, bonne continuation.

    #2236345
    Julie1402
    Participant
    Padawan WordPress
    64 contributions

    Bonjour,

    Je me permets de réouvrir ce sujet car j’ai besoin de deux renseignements supplémentaires :

    • Je souhaiterais ajouter un champ de recherche dans la top barre mais je ne trouve pas de module Elementor permettant d’avoir une barre de recherche… En connaissez-vous un par hasard ? La top barre a été personnalisée avec Elementor.
    • Comment faire pour que le slider de ma page d’accueil soit plus étiré et prenne donc presque toute la largeur de la colonne ? Il a été créé avec Elementor aussi.

    Merci beaucoup !

    🙂

    #2236451
    Noaneo
    Participant
    Maître WordPress
    30003 contributions

    Bonjour,
    Désolé, je n’utilise pas le plugin Elementor.
    –  C’est peut-être une fonction de la version payante du plugin Elementor
    https://elementor.com/widgets/search-widget/

    – Vous avez des options pour le slider ? Je vois largeur (width) est sur 1020px.

    #2236456
    Julie1402
    Participant
    Padawan WordPress
    64 contributions

    Bonjour,

    • Et sans passer par Elementor, c’est possible de positionner une barre de recherche gratuite là où je le souhaite (c’est-à-dire en haut à droite) sur la top barre ?
    • Pour le slider, j’ai comme propositions de taille : 1024 x 1024 (réglage actuel) ou image entière ou personnalisé ou bien plus petit. Mais même lorsque je coche « personnalisé », j’ai beau entrer des tailles supérieures, rien ne bouge. Idem si je coche « entière ».
    #2236457
    Noaneo
    Participant
    Maître WordPress
    30003 contributions

    – Je ne sais pas si, on peut combiner les deux avec et sans Elementor.
    Dans Apparence puis Personnaliser > Header > Menu
    https://docs.oceanwp.org/article/164-header-search

    – Vos images font plus  de 1024 pixels de large ?
    Je reconnais que je ne connais rien en slider, cela ajoute de javascript, donc cela alourdi et ralenti un site.
    S’il y a du texte dedans, souvent cela n’est pas optimisé pour le référencement, les Hn sont mal placés.

    https://gtmetrix.com/reports/kheopsecurite.eu/yF4InCoj

    https://www.webrankinfo.com/outils/balises-h1-h6.php?url=http%3A%2F%2Fkheopsecurite.eu%2F

    Sur OceanWP, on peut désactiver les marges des pages
    https://docs.oceanwp.org/article/135-disable-page-margins

    #2237660
    Julie1402
    Participant
    Padawan WordPress
    64 contributions

    Ah oui effectivement pour le slider… merci beaucoup pour l’info.

    Mes images font effectivement 1024 x 621 mais si je les agrandis encore, ça va encore plus alourdir non ?

    Pour la barre de recherche, je peux effectivement la positionne dans le header, en bas du menu vertical mais je souhaite la positionner dans la top barre, en haut à droite de la page… Je ne sais pas si c’est possible ?

    #2237709
    Julie1402
    Participant
    Padawan WordPress
    64 contributions

    Aussi, j’ai ajouté un plugin pour rappeler les clients qui s’appelle Callpage.

    Je l’ai placé en haut à droite mais j’aimerais le remonter encore alors j’ai essayé le code suivant :

    #div.cp-widget-button {margin-top: 0px;}

    mais ça ne fonctionne pas… une idée ?

    #2237738
    Noaneo
    Participant
    Maître WordPress
    30003 contributions

    Bonjour,
    Vous avez fait que le header (en-tête) ressemble à une colonne latérale (sidebar).
    Du coup, ce que j’ai proposé ne va pas.
    Mais j’avais, où vous vouliez la barre de recherche, j’ai oublié la configuration de votre site, désolé.
    Il est dommage de ne pas pouvoir mettre le widget Recherche de WordPress.
    Ou un code HTML, comme

    <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    
    <div><label class="screen-reader-text" for="s">Search for:</label>
    
    <input type="text" value="" name="s" id="s" />
    
    <input type="submit" id="searchsubmit" value="Search" />
    
    </div>
    
    </form>

    L’aspect mobile vous convient ?
    http://quirktools.com/screenfly/#u=http%3A//kheopsecurite.eu/&w=320&h=568&a=37

    – Oui, si vous grandissez vos images, elles seront plus lourdes.  D’après  ce que j’ai lu, une image doit avoir la taille que l’on veut voir, si elle doit s’afficher sous la taille 1024 x 621 pixels, elle doit avoir retaillé à la tille 1024 x 621  pixels.
    Il ne faut surtout pas avec un code, vouloir agrandir ou diminuer la taille d’une image, cela n’est pas optimisé pour le référencement.
    Avec la fonction « Inspecter » de chrome, on voit ce code.

    .elementor-section.elementor-section-boxed>.elementor-container {
    max-width:1140px;
    }

    Cette partie de contenu est très large

    .container {
        width: 4096px;
    }

    Et après on voit

    .container {
        max-width: 90%;
    }

    Mais il y a des marges (margin). Je ne vois pas où diminuer ou supprimer ces marges.
    Rien dans les options « Advanced » du plugin Elementor ?
    Résultat de recherche d'images pour "Elementor+margin"

    – Callpage, pourquoi ne pas le mettre dans topbar ? Peut être ce code.

    #callpage, #callpage a, #callpage abbr, #callpage acronym, #callpage address, #callpage applet, #callpage area, #callpage article, #callpage aside, #callpage audio, #callpage b, #callpage big, #callpage blockquote, #callpage button, #callpage canvas, #callpage caption, #callpage cite, #callpage code, #callpage col, #callpage colgroup, #callpage datalist, #callpage dd, #callpage del, #callpage dfn, #callpage div, #callpage dl, #callpage dt, #callpage em, #callpage fieldset, #callpage figcaption, #callpage figure, #callpage footer, #callpage form, #callpage h1, #callpage h2, #callpage h3, #callpage h4, #callpage h5, #callpage h6, #callpage header, #callpage hr, #callpage i, #callpage iframe, #callpage img, #callpage input, #callpage ins, #callpage kbd, #callpage label, #callpage legend, #callpage li, #callpage main, #callpage map, #callpage mark, #callpage menu, #callpage meta, #callpage nav, #callpage object, #callpage ol, #callpage optgroup, #callpage option, #callpage output, #callpage p, #callpage pre, #callpage progress, #callpage q, #callpage samp, #callpage section, #callpage select, #callpage small, #callpage span, #callpage strike, #callpage strong, #callpage sub, #callpage summary, #callpage sup, #callpage svg, #callpage table, #callpage tbody, #callpage td, #callpage textarea, #callpage tfoot, #callpage th, #callpage thead, #callpage time, #callpage tr, #callpage tt, #callpage ul, #callpage var, #callpage video {top: -20px!important}

     

    #2237759
    Julie1402
    Participant
    Padawan WordPress
    64 contributions

    Dommage pour la fonction recherche, je crois que je vais donc devoir m’en passer… J’essaie quand même un dernier truc ^^

    Je vais les laisser à cette taille les images pour ne pas alourdir encore plus et je vais voir si je peux en supprimer au moins 4, ce serait pas mal déjà 😉

    Non, l’aspect mobile ne me convient pas mais je ne l’ai pas encore configuré, tout comme je n’ai pas fait le référencement comme vous pouvez le constater avec l’anarchie des balises 🙂

    J’ai trouvé pour le widget Callpage, le code était le suivant :

    #callpage .cp-button-section {
    transform: translateY(-15px);
    }

    Merci beaucoup pour votre aide précieuse en tout cas.

     

    #2237763
    Noaneo
    Participant
    Maître WordPress
    30003 contributions

    -Topbar est faite avec Elementor, c’est bien ça ?
    J’ai lu qu’il y avait le  » widget « HTML. Insérez du code dans la page. »
    https://fr.wordpress.org/plugins/elementor/
    Avec-vous essayé de mettre le code ou le début du code dedans ?

    <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    
    <div><label class="screen-reader-text" for="s">Search for:</label>
    
    <input type="text" value="" name="s" id="s" />
    
    <input type="submit" id="searchsubmit" value="Search" />
    
    </div>
    
    </form>

    -Avez-vous regardé pour les margins du slider?

    -Je n’aurais pas pu vous aidez pour le widget Callpage, je ne connaissais pas ce code transform: translateY

    -Pour la version mobile, j’ai regardé que l’aspect, non la partie codage. Le widget Callpage cache votre phrase « Votre sécurité… Notre métier »

    -Il faudra penser à personnaliser les permaliens : « Réglages puis Permaliens » .

15 sujets de 1 à 15 (sur un total de 35)
  • Vous devez être connecté pour répondre à ce sujet.