Home>Support>Using Page Builder as a Widgets: in Sidebar or Footer

Using Page Builder as a Widgets: in Sidebar or Footer

By Srikanth Kamath, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Pagebuilder is a excellent product and with the ongoing development, I am sure it will be product by itself. A few Issues when using the PageBuilder as a Widgets.

Justing the Bottom Margins of the Individual Rows is not possible..? I have to edit the css individually

/* ccs edit to get PageBuiler in footer to adjust the param */
footer#colophon {
  padding: 15px;
}

#pg-w554ed19e6a00e-0, #pl-w554ed19e6a00e .panel-grid-cell .so-panel {
  margin-bottom: 1px!important;
}

I have two questions,

1. is there a better way to do this,
— because while trying to use many of the eCommerce Plugins with pagebuilder breaks something or the other. Hence the only alternate is to build our own post with “products” Categories.

2. while using CSS, many Custom CSS will not work unless “!important” is added. example above: margin-bottom: 1px!important; works but margin-bottom: 1px; does not work. How can we know.. which work and which don’t ?

URL: http://tsktech.local

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 2 months ago Srikanth Kamath

    update

    #pg-w554ed19e6a00e-0, #pl-w554ed19e6a00e .panel-grid-cell .so-panel {
  margin-bottom: 1px!important;
}

    this is not a solution because any changes to the page, changes the id.. its changed to “#pl-w554ef5b250a14” in my case…

    Pls suggest alternate methods,

  2. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Srikanth

    Thanks for reaching out.

    1. The default row bottom margin can be adjusted from Settings > Page Builder > Layout > Row Bottom Margin.

    2. The problem is most likely the specificity of your Custom CSS. If you make your rules more specific that the existing ones, they will take precedence. Here is CSS Tricks on this topic:

    https://css-tricks.com/specifics-on-css-specificity/

    Hope that helps.

  3. 10 years, 2 months ago Srikanth Kamath

    Dear Andrew,

    Thanks for the quick revert, I am sorry, my Question was not properly phrased,

    Like you said the Row Bottom margin can be set at Settings > Page Builder > Layout > Row Bottom Margin., The Question is how do you set the Bottom Margin so-panel.

    <div class="so-panel widget widget_text panel-first-child" id="panel-w554ef5b250a14-0-2-0">
      <div class="my-follow-us panel-widget-style" style="margin-bottom: 0px!important;">
          <h3 class="widget-title">Follow Us</h3>			
         <div class="textwidget"></div>
      </div>
</div>

    This how I managed it, but this does not work after the page is edited

    custom CSS
#pg-w554ef5b250a14-0, #pl-w554ef5b250a14 .panel-grid-cell .so-panel {
  margin-bottom: 5px;
}
  4. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for explaining.

    I’d set it like this:

    1. Edit the row in question, click Attributes tab top right, enter in a custom Cell Class, for example:

    bottom-mar

    Then under Appearance > Custom CSS you can target that class:

    .bottom-mar .so-panel {
margin-bottom: 5px;
}

    There are other ways you could do this. Other CSS combinations. This is just one.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More