Docs

[redsnapdragons]

Hello

I want the section “helpsocial” http://www.sandbox.helpsocial.com/use-cases/ with the raw code on top be in the background so I can place two columns there.

How can I add that?

I basically want the hero image of https://stoplight.io/ where the raw html is the background and then I can just place the columns over it.

[Christopher]

Hi there,

To add columns in raw content element, update your code to :

<div class="x-section man pan">
<div class="x-column x-1-4 x-sm">h1>HelpSocial</h1></div>
<div class="x-column x-1-4 x-sm">h1>HelpSocial</h1></div>
<div class="x-column x-1-4 x-sm">h1>HelpSocial</h1></div>
<div class="x-column x-1-4 x-sm">h1>HelpSocial</h1></div>
</div>

Hope it helps.

[redsnapdragons]

Thanks! How would I add animations so that the columns fade in at different intervals?

[Rue Nel]

Hello There,

Thanks for updating in! To add some fade effects, please update it and make use of this code:

<div class="x-section man pan">
  <div class="x-column x-1-4 x-sm" style="padding: 0px;opacity: 0; transform: translate(45px, 0); transition-duration: 750ms;" data-x-element="column" data-x-params="{&quot;fade&quot;:true}" data-fade="true"><h1>HelpSocial</h1></div>

  <div class="x-column x-1-4 x-sm" style="padding: 0px;opacity: 0; transform: translate(0, -45px); transition-duration: 750ms;" data-x-element="column" data-x-params="{&quot;fade&quot;:true}" data-fade="true"><h1>HelpSocial</h1></div>

  <div class="x-column x-1-4 x-sm" style="padding: 0px;opacity: 0; transform: translate(0, -45px); transition-duration: 750ms;" data-x-element="column" data-x-params="{&quot;fade&quot;:true}" data-fade="true"><h1>HelpSocial</h1></div>

  <div class="x-column x-1-4 x-sm" style="padding: 0px;opacity: 0; transform: translate(-45px, 0); transition-duration: 750ms;" data-x-element="column" data-x-params="{&quot;fade&quot;:true}" data-fade="true"><h1>HelpSocial</h1></div>
</div>

Please let us know if this works out for you.

[Author]

Posts