Aménagement des zones widgets (Créer un compte)

  • WordPress :4.6.1
  • Statut : non résolu
6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • #1602761
    Jerem_Bubu
    Participant
    Initié WordPress
    3 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : /
    • Thème utilisé : AVADA
    • Extensions en place : /
    • Nom de l’hébergeur : Infomaniak
    • Adresse du site : http://www.audiopole-pa.com/soberandgentle/

    Problème(s) rencontré(s) :

    Bonjour à tous,

    Je sollicite votre aide après avoir épié tous les forums et sites sur la mise en place de zones Widgets.
    Je travaille en effet sur le thème AVADA dans lequel j’ai souhaité rajouter dans le Header 3 zones widgets. Jusqu’à leur création je n’ai rencontré aucun problème. Mais je n’arrive pas à les aligner sur une même ligne. J’aimerais que mon logo se trouve sur la gauche et mon inscription Newsletter sur la droite.

    Pour information, voila comment j’ai oporé sur mes différents fichiers. Je vous remercie d’avance pour votre aide.

    FONCTIONS.PHP
    if ( function_exists(‘register_sidebar’) ) {
    register_sidebar(array(
    ‘name’ => ‘Header_left’,
    ‘before_widget’ => ‘<div class=”header_left” id=”l”>’,
    ));
    register_sidebar(array(
    ‘name’ => ‘Header_center’,
    ‘before_widget’ => ‘<div class=”header_center” id=”c”>’,
    ));
    register_sidebar(array(
    ‘name’ => ‘Header_right’,
    ‘before_widget’ => ‘<div class=”header_right” id=”r”>’,
    ));
    }

    HEADER.PHP
    <div id=”widget_header-l” class=”Header_left”>
    <?php if ( !function_exists( ‘dynamic_sidebar’ ) || !dynamic_sidebar(‘Header_left’) ) ?>
    </div>

    <div id=”widget_header-c” class=”Header_center”>
    <?php if ( !function_exists( ‘dynamic_sidebar’ ) || !dynamic_sidebar(‘Header_center’) ) ?>
    </div>

    <div id=”widget_header-r” class=”Header_right”>
    <?php if ( !function_exists( ‘dynamic_sidebar’ ) || !dynamic_sidebar(‘Header_right’) ) ?>
    </div>

    STYLE.CSS
    #widget_header-l.Header_left {
    width:33%;
    height:auto !important;
    background: #000000;
    }

    #widget_header-c.Header_center {
    width:33%;
    height:auto !important;
    background: #000000;
    }

    #widget_header-r.Header_right {
    width:33%;
    height: auto !important;
    background: #000000;

    #1602762
    momofr@free.fr
    Modérateur
    Maître WordPress
    3217 contributions

    Oui, quel est le souci finalement ? Alignement de quoi ?

    Tu as vérifié tes margin/padding ?

    Bref, là c’est trop flou pour t’aider…

    #1602802
    Jerem_Bubu
    Participant
    Initié WordPress
    3 contributions

    Merci pour ton retour.

    Le souci est le suivant. Mes widgets se positionnent les uns en dessous des autres et non pas les uns a coté des autres… comme tu peux le voir sur le site :
    http://www.audiopole-pa.com/soberandgentle

    J’ai essayé pas mal de choses mais sans succès jusqu’a présent. Du coup je demandais si vous aviez une idée du pourquoi du comment ! Peut être que mon code n’est pas bien fait ou mon CSS manque d’infos.

    #1602808
    momofr@free.fr
    Modérateur
    Maître WordPress
    3217 contributions

    Ta composition est étrange :

    <div id="widget_header-l" class="Header_left">
    <div id="l" class="header_left">
    <div id="widget_header-c" class="Header_center">
    </div>

    Tu as des classe CSS avec des termes différents, je ne trouve pas de détermination pour “header_left”, ces classes sont liées à ton thème ou tu les as créées ?

    #1602818
    Jerem_Bubu
    Participant
    Initié WordPress
    3 contributions

    J’en doute pas, je suis pas du tout familier avec le code et j’ai suivi un tuto et je suis convaincu que mon truc est un peu fait n’importe comment.
    Du coup c’est bien moi qui est tout créé.

    Que faudrait il que je fasse pour que ce soit cohérent ?

    #1602825
    momofr@free.fr
    Modérateur
    Maître WordPress
    3217 contributions

    J’ai le thème Avada mais je ne l’utilise pas en fait. Dans le header et vu ta compo (4e choix de header) on retrouve déjà un principe de 3 colonnes.

    Les choix de contenu par contre exclu les widgets… mais en regardant de plus près en fait le champ “Slogan pour le contenu 3” peut recevoir du code.

    Tu pourrais y placer ce qui convient et avoir tes 2 blocs ici… plus facile à dire qu’à faire.

    Tu peux utiliser un shortcode pour placer un widget, il faut ensuite encadrer ça avec un shortcode de colonnage… je sais ça parait très lourd mais au bout du compte ça marche ! Sans toucher à ton thème !

    Voici le code utilisé pour mon essai :

    [fusion_builder_column spacing="" center_content="no" hover_type="none" link="" min_height="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" background_color="" background_image="" background_position="left top" background_repeat="no-repeat" border_size="0" border_color="" border_style="solid" border_position="all" padding="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset="" type="1_2"][fusion_widget_area name="avada-footer-widget-1" background_color="#e91e63" padding="10px 10px 10px 10px" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id=""][/fusion_widget_area][/fusion_builder_column]
    
    [fusion_builder_column spacing="" center_content="no" hover_type="none" link="" min_height="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" background_color="" background_image="" background_position="left top" background_repeat="no-repeat" border_size="0" border_color="" border_style="solid" border_position="all" padding="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset="" type="1_2"][fusion_widget_area name="avada-footer-widget-2" background_color="#ffeb3b" padding="10px 10px 10px 10px" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id=""][/fusion_widget_area][/fusion_builder_column]

    J’ai placé les widget dans les zones Footer 1 et 2, à toi de les mettre ailleurs ou dans des nouvelles zones à créer. J’ai obtenu le code des colonnes avec le Shortcode builder et imbriqué les 2 shortcodes chaque fois :

    [shortcode colonne 1][shortcode Widget 1][/shortcode colonne 1]

    [shortcode colonne 2][shortcode Widget 2][/shortcode colonne 2]

    A toi de voir si ça te vas comme solution, c’est pérenne et sans trucage.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
6 sujets de 1 à 6 (sur un total de 6)
  • Vous devez être connecté pour répondre à ce sujet.