Widgetsbereich erweitern

markus-schirra

Hallo zusammen,

mir ist mein Programmierer/ Designer kurzfristig ausgefallen und ich selbst bekomme es nicht so recht hin.

Ich habe folgendes Problem.

Ich möchte auf der Seite http://michelfrisch.markusschirra.de unter den 3 Hauptwidgets, jeweils 4 Widgets nebeneinander haben und das auf zwei Reihen verteilt.

Ich bekomme es aber nicht hin. Habe es versucht selbst einzufügen, gemaäß einer Anleitung im Internet, aber es klappt nicht.

Kann mich da vllt. jemand kurzfristig unterstützen bzw,. helfen. :(

Ich binb keine Programmierer oder Designer und finde mich im Zusammenhang der einzelnen PHP Dateien etc nicht zurecht.

Bevor ich was kaputt machen, würde ich mich über Hilfe freuen.

Vielen Dank

Gruß Markus

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Auf die schnell würde ich es so machen:

Code

#home_widget_4 {
    width: 22.8%;
}

wobei das schon falsches HTML ist, denn eine ID darf es eigentlich nur 1x auf einer Seite geben. Also besser auf Class umstellen.

markus-schirra

ok Danke das hat schon mal geklappt, nun muss ich die Widgets nur noch so einbinden das ich sie im Backend benutzen kann.

markus-schirra

Ok ich habe es hinbekommen,

markus-schirra

Habe das mit den Widgets soweit hinbekommen, allerdings stimmt etwas mit der Größe und der Ausrichtung nicht, wie kann ich das denn anpassen das diese nebeneinander und nicht überlappend dargestellt werden und Mittig ist?

markus-schirra

margin: auto; geht nicht bei den 4 Widget Spalten, was muss ich denn da eingeben, das diese zentriert und vollständige angezeigt werden?

SirEctor

Dem ersten Bild hast du ein align left gegeben, daher bekommt es ein margin und wird größer als die anderen. Oder du gibst den Widgets eine feste Höhe:

Code

#home_widget_4 {
    width: 22.8%;
    height: 220px;
}

markus-schirra

so ok das hat geklappt das sie wieder alle zusammen sind, allerdings sind Sie noch überlappend.

Wie bekomme ich das weg? Habe das in die css der Child Theme eingefügt.

HTML

#home_widget_4 {
    width: 22.8%;
    height: 220px;
}

SirEctor

Hier kannst du mal folgendes versuchen:

Code

#widgets #home_widget_4 a {
    display: block;
}

markus-schirra

Also das mit dem Block geht zwar, aber ich habe dann nur 2 Bilder nebeneinander und der untere Bereich mit den Vorschaubeiträgen rückt rechts daneben.

Seltsamerweise, wird es auf verschiedenen Browsern mal richtig angezeigt und im FireFox ineinander verschoben.

markus-schirra

Hir habe ich dei Widgets angelegt. Wie kann ich denn einen neuen Widgetsbereich anlegen, vllt. klappt es dann besser.

HTML

<?php responsive_widgets_before(); // above widgets container hook ?>
    <div id="widgets" class="home-widgets">
        <div id="home_widget_1" class="grid col-300">
            <?php responsive_widgets(); // above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-1' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( '', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-1 ?>


            <?php responsive_widgets_end(); // responsive after widgets hook ?>
        </div><!-- end of .col-300 -->


        <div id="home_widget_2" class="grid col-300">
            <?php responsive_widgets(); // responsive above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-2' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( '', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-2 ?>


            <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 -->


        <div id="home_widget_3" class="grid col-300 fit">
            <?php responsive_widgets(); // above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-3' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( '', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-3 ?>


            <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 fit -->






<div id="home_widget_4" style="height:200px;" class="grid col-300">
            <?php responsive_widgets(); // responsive above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-4' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( 'Home Widget 4', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->


            <?php endif; //end of home-widget-4 ?>


            <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 -->


<div id="home_widget_4" class="grid col-300">
            <?php responsive_widgets(); // responsive above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-5' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( 'Home Widget 5', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-5 ?>


            <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 -->


<div id="home_widget_4" class="grid col-300">
            <?php responsive_widgets(); // responsive above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-6' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( 'Home Widget 6', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-6 ?>


            <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 -->


<div id="home_widget_4" class="grid col-300">
            <?php responsive_widgets(); // responsive above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-7' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( 'Home Widget 7', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-7 ?>


            <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 -->




<div id="home_widget_4" class="grid col-300">
            <?php responsive_widgets(); // responsive above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-8' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( 'Home Widget 8', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-8 ?>


            <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 -->


<div id="home_widget_4" class="grid col-300">
            <?php responsive_widgets(); // responsive above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-9' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( 'Home Widget 9', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-9 ?>


            <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 -->


<div id="home_widget_4" class="grid col-300">
            <?php responsive_widgets(); // responsive above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-10' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( 'Home Widget 10', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-10 ?>


            <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 -->


<div id="home_widget_4" class="grid col-300">
            <?php responsive_widgets(); // responsive above widgets hook ?>


            <?php if ( !dynamic_sidebar( 'home-widget-11' ) ) : ?>
                <div class="widget-wrapper">


                    <div class="widget-title-home"><h3><?php _e( 'Home Widget 11', 'responsive' ); ?></h3></div>
                    <div
                        class="textwidget"><?php _e( '', 'responsive' ); ?></div>


                </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-11 ?>


            <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 -->




    </div><!-- end of #widgets -->
<?php responsive_widgets_after(); // after widgets container hook ?>
<center>
<?php echo do_shortcode("[post_grid id='608']"); ?>


</center>

Alles anzeigen

markus-schirra

so ich habe es jetzt anders gelöst und habe das mit dem Plugin Widgets on Pages gemacht. Wie kann ich das denn nun zentrieren? Mit <center></center> funktioniert das irgendwie nicht? Jemand ne Idee??

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Widgetsbereich erweitern

Jetzt mitmachen!