Widgetize Pages

Hi Parwaiz

Thanks for reaching out.

Page Builder by SiteOrigin is our recommended plugin for using widgets in pages. If you’re using the Classic Editor, click over to the Page Builder tab and add widgets as required on each page. With the Block Editor, you could insert a SiteOrigin Layout Block. Beyond that, I, unfortunately, don’t have any other recommendations at the moment.

Hi Andrew,

Thank you so much for your quick response to my query.

I went to your Page Builder plugin page – it seems to be amazing!

– Now, does clicking on the ‘Add Widget’ tab brings on all the available widgets?

– If I use a static ‘page’ to show the relevant posts there, I just add the widget (say, Posts in Sidebars). The PIS widget then should act as if it were inserted in a sidebar – opening up its own dialog page. Am I right?

– By the description on Page Builder’s page, one should be able have multiple instances of adding widgets, text editor, etc, etc?

If it does work that way, then I can say that you a great one!

I will wait for your answers before I install it and test it out. I will give you my input on it.

Thank you again for taking time to look into it and providing a great support.

Parwaiz

Hi Parwaiz

Thanks for your reply.

– Now, does clicking on the ‘Add Widget’ tab brings on all the available widgets?

It does.

– If I use a static ‘page’ to show the relevant posts there, I just add the widget (say, Posts in Sidebars). The PIS widget then should act as if it were inserted in a sidebar – opening up its own dialog page. Am I right?

Most widgets work well in Page Builder but you’d have to try this one, I can’t say for sure how it works in Page Builder as I haven’t tried it.

– By the description on Page Builder’s page, one should be able have multiple instances of adding widgets, text editor, etc, etc?

You can indeed.

All the best with your testing ??

Hi Andrew,

I installed the Page Builder on one of my sites and tested it out on a ‘Test Page’. Seems to be working perfectly. Very clean and elegant!

As for styling the rows, is there a way to put some custom css (like putting a border in between the rows – not the all-around ‘border’ as it is provided within the row editing)?

Thank you.

Super, glad to hear you’re making progress. Sure, at a row, cell or widget level you can open the Attributes panel on the right and add Custom CSS rules. For more on Attributes, please see: https://siteorigin.com/thread/how-do-page-builder-row-attributes-work-row-class-cell-class-and-css-styles/.

Thank you Andrew for being such a great help. I am still trying to mimic the style of the pages on one of my sites (https://lifevibrant.com). Here is what I will be doing:

In a single column, I will be inserting a widget (Posts in Sidebars – PIS) to pull a certain number of posts. Then, I will add a text editor widget to inserts some other stuff (media etc) Then I will add Posts widget again to pull more posts.

My CSS in the PIS widget’s own custom styles will create TWO columns, and style them.

I tested it on one row (first instance of PIS). It works OK.

I noted that the Page Builder generates a unique ID for each Row (like: “panel-367-0-0-0”) .

But, is there a way to target “ALL” the rows in a page – rather than doing it one row at a time?

The following is partial CSS that I have inserted in the PIS widget to do the trick:

#panel-367-0-0-0 li.pis-li {
width: 50%;
height: 325px;
float: left;
margin: -12px 8% 35px -25px;
}
#panel-367-0-0-0 li.pis-li:nth-child(even) {
margin-right: -20px;
}
#panel-367-0-0-0 a.pis-title-link {
color: #004600;
font-size:1em !important;
margin-bottom: -5px !important;
}
#panel-367-0-0-0 li.pis-li {
height: 285px;
background: #ffffff !important;
-webkit-box-shadow: 1px 1px 2px 1px rgba(214,214,214,1);
-moz-box-shadow: 1px 1px 2px 1px rgba(214,214,214,1);
box-shadow: 1px 1px 2px 1px rgba(214,214,214,1);
border-radius: 5px 5px 10px 10px;
-moz-border-radius: 5px 5px 10px 10px;
-webkit-border-radius: 5px 5px 10px 10px;
margin-bottom:35px;
padding-left: 10px;
overflow: hidden;
}

Thank you again for all your help.

[BTW, I am testing it on another site – not on lifevibrant.com yet]

Hi Andrew,

Further to my previous post, I noted that the following seems to be the relevant HTML output:

<div id=”pl-367″ class=”panel-layout” ><div id=”pg-367-0″ class=”panel-grid panel-no-style” ><div id=”pgc-367-0-0″ class=”panel-grid-cell” >
<!– Start Posts in Sidebar – widget-0-0-0 –>
<div id=”panel-367-0-0-0″ class=”so-panel widget widget_pis_posts_in_sidebar posts-in-sidebar panel-first-child panel-last-child” data-index=”0″ > <p class=”pis-intro”> </p><ul id=”ul_pis_posts_in_sidebar-36710002″ class=”pis-ul”>
<li class=”pis-li pis-post-189″>
……
……
……

It means that to target the entire page I should aim at id=”pl-367″ (instead of ” #panel-367-0-0-0 “)?

And, is there a way to target “ALL” the rows in all the pages in one swipe – rather than doing it one at a time?

How to target all the pages to have the same style by using one set of CSS in the theme’s CSS editor?

Thank you.

Hi ??

You can target every row using the class name panel-grid.

.panel-grid {
}

Thank you Andrew. Will the class “panel-grid” affect all the pages – since it is a class’, it should?

Say, if there are a total of 10 pages, will the “.panel-grid {…}” style every row in ALL the 10 pages?

Thank you.

Correct, panel-grid is used on all pages for all rows.

Hi Andrew,
Thank you so much for all the help that you have given me on this topic. It solved my styling problems.

Currently, I am using my testing website (https://nonmsm.com) to design my new website (https://tradearchives.com). There are a couple of points that needs your guidance!:

First, instead of using the ‘Hero widget’, I am using the ‘Image Widget’. The image I put through it (in the very first row) serves as the ‘Hero’ image on the landing page (https://nonmsm.com). But, when I apply a dark ‘Background Color'(in row Design), it doesn’t take effect. What may be the reason – and, how to give a darker background/shade to the image?

Second, what may be the benefit/application of using the ‘Hero Widget’ instead of the ‘regular’ ‘Image Widget’?

Thank you.

Hi Parwaiz,

But, when I apply a dark ‘Background Color'(in row Design), it doesn’t take effect.

This is as a result of the background being below the image. You’ll need to either use CSS to create the desired effect or the SiteOrigin Hero widget. The SiteOrigin Hero allows you to adjust the opacity of the frame image which will allow you to have some of the frame background show.

Second, what may be the benefit/application of using the ‘Hero Widget’ instead of the ‘regular’ ‘Image Widget’?

The SiteOrigin Image widget allows you to add images to your page.

The SiteOrigin Hero widget is a complete slider and allows you to add text on top of the images.

Hi Alexgo,

1). CSS for the image row: where it should go? I applied the following in the row’s (containing the image) ‘Attributes –> CSS Styles’ :

{background-color: #606860;}
img {opacity: 0.5;filter: alpha(opacity=50);}

It didn’t work.

2). The problem that I noted with the Hero image was that it doesn’t allow for the parallax effect! Is there a way to give parallax effect in Hero image?

3). I tried SiteOrigin’s “Consultant” template – couldn’t find a way to delete the existing image, When I added my own image, it was not showing up. How to replace the template image?

4). Didn’t note the slider working in the template either – is there a way to replace the image – insert my own images, and make them have ‘slide’ – How?

Thanks a bundle for all your help. It is the SiteOrigin’s fantastic support that has been instrumental in me dropping the Elementor and tryout the SiteOrigin

Hi Parwaiz

Thanks for your reply. Glad to hear you’ve been busy building and making progress ??

1. We, unfortunately, can’t go too deep into CSS Customizations within our free support scope. background-color: #606860 could be inserted into the CSS Styles field. Rules like img {opacity: 0.5;filter: alpha(opacity=50);} would need to be inserted at Appearance > Custom CSS or Customize > Additional CSS. For a quick guide on how the Attributes fields work, please, see: https://siteorigin.com/thread/how-do-page-builder-row-attributes-work-row-class-cell-class-and-css-styles/. We can only offer high level assistance in this area though.

2. The Parallax Sliders addon in our SiteOrigin Premium plugin adds parallax as an option for the Hero widget. More on that addon here: https://siteorigin.com/premium-documentation/plugin-addons/parallax-sliders/.

3. The first image on the home page in the Consultant site pack is contained in a Hero widget. To remove it, edit the Hero and then edit the first frame within that Hero widget. Open the Background section to remove the image.

View post on imgur.com

4. The Hero widget documentation can be found here: https://siteorigin.com/widgets-bundle/hero-image-widget/. Please, see the docs on how to add multiple frames to the Hero widget.

Hope that helps.