Placeholder setting for partial designs

Question

I was creating a page similar to the image below with SXA 1.7.1 in Sitecore 9.0.2

In my situation, I have the 'translation section', 'Videos' and 'The Weeknd' to be reusable. Search results can be there, cannot be there and will vary in length.

What I did: So, I created 2 partial renderings: Partial Rendering 1: Contains 'translation section' and 'Videos' Partial Rendering 2: Contains 'The Weeknd'

Both my partial renderings are on placeholder 'main'.

I added both the partial designs to the page design and published the site.

What happened: 'The Weeknd' section got displayed below 'Videos'

What I could have done:

I would have taken a column splitter on the page and would have designed the partial templates accordingly. (I am yet to try this.)

The challenge:

1. Is there a way to add the rendering for 'Search Results' between the sections 'Videos' and 'The Weeknd'?
2. Is there a way to use to select separate placeholders for each partial rendering on different page rendering?

I am asking this question as I am feeling that reusability of 'partial design' is getting curtailed in the present scenario. Any suggestion will be useful.

Thanks in advance.

Answer 1

Answer yourself a question what grid system you are going to use.

SXA can use: Bootstrap3, Bootstrap4, Foundation, Grid960.

Once you select yours learn how to build a layout with it.

I would do it this way.

1. Create MainBase partial design
2. Edit MainBase
   • add Column Splitter rendering to main placeholder with 2 columns
   • set widths of two columns to 8, 4
3. Create MainLEFT
4. Edit MainLEFT
   • set Base Partial Design field value to MainBase
   • open your partial
   • drop Translation rendering to left column (this with width 8)
   • drop Search rendering to left column (this with width 8)
5. Create MainRIGHT
6. Edit MainRIGHT
   • set Base Partial Design field value to MainBase
   • drop Video rendering to right column (this with width 4)

It should look more or less like this

Technically you don't have to create MainBase and then use it as a base. You could treat MainBase as your main partial and put all renderings that I listed above on a single partial. I felt that you need something advanced to switch them later feel free to go with an easier approach if needed (add partial, drop column splitter, set widths, drop translation, drop searach, drop video).

Building layout like that is not that hard, I created something on the same level of complexity for XA.Reference demo site: screenshot. You could install this site and see how I combined all partials to designs there.

I hope it helps. I cannot understand your second question.

You might want to read this answer, I feel it is related.