Using Video or Hero components to cover the entire screen on the SFNT

[kitdang]

Hi,

our old site is using Slick to have a sliding images that cover the entire screen. Is it possible to replace that with video or hero component that cover the entire screen as well? it looks like all components have boarders that align with the Nav header.

[Nick]

kitdang the Page Builder elements will use the containing element as a width. For example the default Shadows template has a max-width on the .t-main-content-element.

If you remove the max-width on the containing element or put the sequence item on the page outside of the main container the flex components will be full width.

[kitdang]

Nick Thanks for the reply. I actually just want the Hero Slider component to be expand the entire screen. If I disabled max-width, it will impact all components no? Is there a way I can isolate to just hero slider component?

[Nick]

kitdang The components are rendered on the page through this item: <mvt:item name="sequence" />

If there is a sequence item on the page template and assigned to the page it will show up in the dropdown menu of the components panel on the PageBuilder display (you can have multiple sequence items on the page).

sfnt_page.JPG

Wherever the sequence item is on the page template the components added to that sequence will display. So if you add another sequence item on the page that is outside of the main containing element then any components added to that sequence will render full width.

new-sequence.JPG

For example if you have the default Shadows framework you would need to add the newly created sequence item to the Global Header outside of the main content area that has the max-width applied:

global_template.JPG

Here is an example set up on my development store: https://mivalearn.mivamerchantdev.com/

[kitdang]

Hi Nick,

Thank you and that helps a lot. The question I have now is how do I create a new sequence item call "new-sequence"? When i click on the item tab, these are all the sequence module

miva_sequence_item.png

[Nick]

Hi Nick,

Thank you and that helps a lot. The question I have now is how do I create a new sequence item call "new-sequence"? When i click on the item tab, these are all the sequence module

To create a new sequence item you can go to User Interface < Items tab and select create new item. You can give the item any code but the module will be cmp-mv-sequence. Then add and assign the new item to any page and it will show up in Page Builder on that page template.

[kitdang]

Thank you Nick. This helps a lot.

[kitdang]

One more question. I notice on the content management page for SFNT, both show up as "Sequence". Is it possible to rename that so a developer won't get confused even if the item name is different.

[Nick]

Unfortunately, the only way to update the title of the Sequence is if you import it via XML. For example in the default Shadows theme there is a sequence item with the code of footer_sequence and if you import the following snippet then the title will be Page Builder Footer:

<!-- Update Names of Sequence Items -->
<Page_Update code="ABUS">
    <Item code="footer_sequence">
         <Title>Page Builder Footer</Title>
   </Item>
</Page_Update>

[mvasquez]

Thank you for that code Nick - that is game changing! Now I won't have to try numbering elements to figure out what is in which sequence :)