What is the best way to divide widgets in a Wordpress Sidebar?

I am looking to customize the spacing between widgets in my Wordpress sidebar, similar to what is shown on this example site. Currently, my sidebar does not have the desired spacing. I have tried various CSS codes found online, but none of them seem to be working for me. Below is the PHP code for the sidebar:

<?php
/*
Template name: Page - Right sidebar
*/
 get_header(); ?>

    <?php do_action( 'flatsome_before_page' ); ?>

   <div class="page-wrapper page-right-sidebar">
   <div class="row">

  <div id="content" class="large-9 left col col-divided" role="main">
  <div class="page-inner">
    <?php if(get_theme_mod('default_title', 0)){ ?>
        <header class="entry-header">
            <h1 class="entry-title mb uppercase"><?php the_title(); ?></h1>
        </header><!-- .entry-header -->
    <?php } ?>
    <?php while ( have_posts() ) : the_post(); ?>

        <?php the_content(); ?>

        <?php if ( comments_open() || '0' != get_comments_number() ){
                    comments_template(); } ?>

    <?php endwhile; // end of the loop. ?>
    </div><!-- .page-inner -->
 </div><!-- .#content large-9 left -->

<div class="large-3 col">
<?php get_sidebar(); ?>
</div><!-- .sidebar -->

</div><!-- .row -->
</div><!-- .page-right-sidebar container -->
<?php do_action( 'flatsome_after_page' ); ?>
<?php get_footer(); ?>

https://i.stack.imgur.com/H2clJ.png

Answer №1

#sidebar li.widget-container{
    margin-bottom:20px;
}

Widget backgrounds:

#sidebar_container{
    background:transparent;
}

Remember to use sidebar_container for your sidebar container.

Here is an example:

<aside id='sidebar_container' class='col-md-4 right'>
    <ul id='sidebar' class='right'>
        <?php
            if ( is_single() || is_page() ){
                if ( is_active_sidebar('Single Sidebar') ){
                    dynamic_sidebar(esc_html__('Single Sidebar','my-theme')); 
                }
            }else{
                if ( is_active_sidebar('First sidebar') ){
                    dynamic_sidebar(esc_html__('First sidebar','my-theme'));    
                }
            }
        ?>
    </ul>
</aside>

Adjusting padding and margins:

.col-border+.col,.col-divided+.col {
    padding-left: 10px!important;
    background: #fff;
    margin-top:-15px;
    /* margin-left:-100px; */
    display: inline-table;
    /* padding-right: 60px; */
}

Answer №2

Footer.html
<style>
#footer-sidebar1 {
border: 1px solid red;
float: left;
width: 32.5%;
margin-left:5px;
margin-right:5px;
}
#footer-sidebar2 {
border: 1px solid red;
float: left;
width: 32.5%;
margin-right:5px;
}
#footer-sidebar3 {
border: 1px solid red;
float: left;
width: 32.5%;
} .
widget_bac{ background-image: url("http://localhost/wordpress/wpcontent/uploads/2017/07/footer.jpg");}
h3.w_hed {
color: white;
}
</style>
<div class="container-fluid">
<div id="footer-sidebar" class="secondary widget_bac" style="border: 1px solid
blue; height: 400px;">
<div id="footer-sidebar1">
<?php
if(is_active_sidebar('footer-sidebar-1')){
dynamic_sidebar('footer-sidebar-1');
}
?>
</div>
<div id="footer-sidebar2">
<?php
if(is_active_sidebar('footer-sidebar-2')){
dynamic_sidebar('footer-sidebar-2');
}
?>
</div>
<div id="footer-sidebar3">
<?php
if(is_active_sidebar('footer-sidebar-3')){
dynamic_sidebar('footer-sidebar-3');
}
?>
</div>
</div>
Function.php
/*******************************************************************************/
function tesseract_widgets_init() {
register_sidebar( array(
'name' => 'Footer Sidebar 1',
'id' => 'footer-sidebar-1','description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Sidebar 2',
'id' => 'footer-sidebar-2',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Sidebar 3',
'id' => 'footer-sidebar-3',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'tesseract_widgets_init' );
/*******************************************************************************/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What information is transferred when the submit button on a form is clicked?

Currently, I am utilizing node.js along with the jade templating engine. Within my jade file, I have a form structured like this: form.form-signin(style="padding-left:10px", action='/update', method='post') table.table.table-hove ...

Route parameters do not function correctly with computed properties

I'm facing an issue with my getter function that stores all products. When I try to retrieve a single product dynamically based on this.$route.params.id, it doesn't return any value. The code works fine when I navigate to a specific product, but ...

Tips on positioning the image to the left of your content instead of above it

Currently, I am following a tutorial on Flask and attempting to include the profile picture in each article displayed on the website. Here is the code snippet used to display an article: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

Determine the overall price of the items in the shopping cart and automatically show it at the bottom without the need for manual entry

Creating a checkout form that displays the total cost of products, subtotal, GST cost, delivery cost, and overall price. The goal is to calculate the total by adding together the costs of all products with the "price" class (may need ids) at a 15% increase ...

What is the best way to remove excess content that falls outside the viewBox?

Is there a function or method to trim a path that extends beyond the viewbox rather than simply concealing it? I am currently using svg-edit, which has a specific viewbox or canvas area. Any elements drawn outside of this canvas remain hidden. However, wh ...

When the screen size changes, the sidebar in Bootstrap 5 smoothly reveals hidden content

I've been working on a sidebar design and everything seems to be going well so far. However, I've encountered an issue that has been giving me trouble for days now. Whenever I display a new page and then resize the screen, the content of the page ...

Updating the information displayed in one section by selecting a button on the Google Maps infowindow located in a separate section

My webpage is divided into multiple divisions. One division contains a map using the Google Maps API with markers. When I click on a marker, an info window opens up. Now, I am attempting to place a button inside that info window which, when clicked, will ...

I am having trouble understanding why dropdown menus with the same content have varying widths

My issue is illustrated in the screenshots below: first-dropdown: second-dropdown: The second dropdown appears slightly wider on the right side. Despite Google Chrome's claim that the widths are the same. HTML code: <div class="row menu"> ...

The functionality to apply a color class to a navbar item when clicked is malfunctioning

I'm attempting to create a navigation bar using text that toggles the visibility of different divs. I want the selected option to appear in red, indicating it has been chosen, while deselecting any other options. I am new to JavaScript and thought add ...

Guide to incorporating a logo into a personalized WordPress theme

In the process of creating a WordPress theme from scratch, I've hit a roadblock while trying to incorporate a logo in the top left corner of the page where the title would normally be displayed. <h1> <a href="<?php echo home_url(); ?> ...

The hamburger menu in Bootstrap collapses along with the navigation items when viewed on a mobile device

How can I resolve the issue of the hamburger menu icon collapsing with the nav-items when clicked? Navbar <header> <div class="container-fluid"> <div class="row"> <div class="col-12 col-sm-12"> ...

initiate changes to the application's style from a component nested within the app

I'm looking to update the background color of the entire page, including the app-nav-bar, when I'm inside a child component. When I navigate away from that component, I want the default style to be restored. Any suggestions on how to achieve this ...

What is the best way to ensure the font size is responsive in Laravel's welcome.blaze.php file?

On a large screen, the word "LaravelProject" and its links have ample space which I prefer. A newly created Laravel project appears differently on a small screen. When replacing "Laravel" with "LaravelProject," the wor ...

Unable to vertically scroll on a position fixed element

I recently created a unique VueJS component that enables vertical scrolling. Within this component, there are two elements each with a height of 100vh. At the bottom of the component is a fixed position div. Interestingly, when I try to scroll down using m ...

Unable to retrieve an object using PHP

I have been encountering difficulties accessing JSON data while trying to loop through it: $request = wp_remote_get( 'https://api.riderhq.com/api/v1/3446/getevents?pretty=true' ); if( is_wp_error( $request ) ) { echo "wrong request"; ...

Tips for creating a Calculator with AngularJS

I am encountering issues while trying to develop a calculator using AngularJS. Below is the HTML code I have written: <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-com ...

choose particular column in every row from the table's header class name

Every <th> in a table has a class, while the <td> elements do not. Is there a way to style all corresponding <td> elements with the same styles as their <th> counterparts using only plain css without any script? Furthermore, since ...

Loading Wordpress shortcodes conditionally

I am currently developing a WordPress plugin that includes a shortcode. This shortcode is experiencing slow execution (4 seconds) due to external API calls that are necessary as they depend on the user id viewing the page. During the development and testi ...

Creating a dynamic HTML table by dynamically populating a column

I have limited experience with javascript, and I am working on a personal project that I enjoy. In the table below, you will find various location names along with their distances from the initial location. This serves as a travel companion for me to refe ...

Receiving an unexpected value from the input attribute

Currently, I am facing a challenge in retrieving data from another component by using the selector in the HTML file of the parent component. Here is how I implemented it: <app-graphs [module]="module" hidden></app-graphs> In the chi ...