Need an Idea to create the Row like the attached Image

Hi Vijaya,

Do you currently have something set up, or is this in the prototyping stage? If you’ve got it setup (as in exactly the same, just not shown above the image) I can provide instructions on how to do this correctly. If not, I can walk you through what I would do to set this up but it’ll be rather complicated.

Hi Vijaya,

I’m able to help with the overlap however the transaction effects may fall into the reign of custom coding which is something we cannot offer. I’m not willing to rule anything out at this point but this is something to consider. We recommend the use of Codeable for custom work.

Hi Vijaya,

Okay, so how I would do this would be to add a new full-width stretched row (one column). I would then add a hero widget, and a features table widget underneath that.

I would add my hero widget content, and then go over to the sidebar and open the design group. I would then set a background image and set it to display as covered. Make sure your hero frame doesn’t have a background color.

Then I would set up my features widget how I intended to. Once done I would head over to the widget styles for my features and click attributes. I would then add something like margin-top: -125px;

Then, I would make note of my current pages post id. For example,
http://localhost/siteorigin/wp-admin/post.php?post=93&action=edit is my current URL. The bolded part is my post ID.

Then, I would navigate to AppearanceCustom CSS, which will show you our custom CSS editor. Remember that ID we just got? We’re going to use it to target this page and this page only. If your widget is on a page, use the following CSS:

.page-id-PAGEID .cycle-slide-active {
	z-index: inherit !important;	
}

Otherwise use:

.postid-PAGEID cycle-slide-active {
	z-index: inherit !important;	
}

Then that’s pretty much it.

You might also need to install the SiteOrigin CSS Editor.

Hi Vijaya,

Could you please elaborate on the type of transaction effects you wish to be added. That way I can work out if we’re able to do it or not.

Hi Vijaya,

Unfortunately, this isn’t possible without a fair amount of custom coding. This is beyond the scope of what we can help you with on the forums, but you could hire a developer to implement this for you.

We highly recommend using Codeable.