SOLVED

Is it possible to move sections in the landing page using guided template?

Go to solution
Ramesh_Nagaraja
Level 2

Is it possible to move sections in the landing page using guided template?

We need to move the sections up and down in the guided template landing page. 

 

Can anyone please suggest?

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
Dave_Roberts
Level 10

Re: Is it possible to move sections in the landing page using guided template?

The most common way I've seen this accomplished is a combination of CSS and String Variables on the Landing Page template.

 

Take this HTML as an example -- the "sections" here are all siblings and all children of the #bodyWrapper element.

 

<div id="bodyWrapper">
<div id="Section-1">first</div>
<div id="Section-2">second</div>
</div>

 

 

You'd want to make a string variable for each section to dial in the "order" property from the LP editor interface:

 

<meta class="mktoString" id="Section-1-Order" mktoName="Section 1: Order" default="1">
<meta class="mktoString" id="Section-2-Order" mktoName="Section 2: Order" default="2">

 

 

Then put some CSS in the <head> (below the metatags listed above):

 

/* flex the parent container to order child elements */
#bodyWrapper {display:flex;}

/* (re)order sections using 'order' CSS property with variable value */
#Section-1 {order: ${Section-1-Order};}
#Section-2 {order: ${Section-2-Order};}

 

 

When setting it up this way, you can either include a "header" and "footer" container above and below the bodyWrapper container OR if you need to include them inside the bodyWrapper container, you'll want to make sure to order those elements so they stay at the top and bottom - I usually use something like this:

 

/* set header to 0 so it stay at the top */
#header {order:0;}
/* set footer to 100 so it stays at the bottom */
#footer {order:100;}

/* reorder sections from 1-99 to stay between header and footer */
#section1 {order:1;}
/* ... */
#section99 {order:99;}

 

 

In the end you should end up with a few variables inside the Landing Page editor which you can use to control the order of your sections. They'll be preset to "1" for Section-1 and "2" for Section-2 but you can use any number between 1 and 99 to reorder them in anyway you see fit.


It's worth noting that when you're using the CSS order property, if two sections are set to the same order they'll follow their DOM order. In order to reverse the setup here, you'd need to set the Section-1 variable to "2" and Section-2 to "1". It's also possible to use negative numbers for the order if you needed to put something up above the header for some reason.

 

View solution in original post

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: Is it possible to move sections in the landing page using guided template?

A Marketo GLPT is ultimately an HTML document.

So the order of sections is dictated by (a) DOM order of the elements and (b) CSS order (where applicable) and (c) absolute positioning (not a good idea, but you can do it).
Dave_Roberts
Level 10

Re: Is it possible to move sections in the landing page using guided template?

The most common way I've seen this accomplished is a combination of CSS and String Variables on the Landing Page template.

 

Take this HTML as an example -- the "sections" here are all siblings and all children of the #bodyWrapper element.

 

<div id="bodyWrapper">
<div id="Section-1">first</div>
<div id="Section-2">second</div>
</div>

 

 

You'd want to make a string variable for each section to dial in the "order" property from the LP editor interface:

 

<meta class="mktoString" id="Section-1-Order" mktoName="Section 1: Order" default="1">
<meta class="mktoString" id="Section-2-Order" mktoName="Section 2: Order" default="2">

 

 

Then put some CSS in the <head> (below the metatags listed above):

 

/* flex the parent container to order child elements */
#bodyWrapper {display:flex;}

/* (re)order sections using 'order' CSS property with variable value */
#Section-1 {order: ${Section-1-Order};}
#Section-2 {order: ${Section-2-Order};}

 

 

When setting it up this way, you can either include a "header" and "footer" container above and below the bodyWrapper container OR if you need to include them inside the bodyWrapper container, you'll want to make sure to order those elements so they stay at the top and bottom - I usually use something like this:

 

/* set header to 0 so it stay at the top */
#header {order:0;}
/* set footer to 100 so it stays at the bottom */
#footer {order:100;}

/* reorder sections from 1-99 to stay between header and footer */
#section1 {order:1;}
/* ... */
#section99 {order:99;}

 

 

In the end you should end up with a few variables inside the Landing Page editor which you can use to control the order of your sections. They'll be preset to "1" for Section-1 and "2" for Section-2 but you can use any number between 1 and 99 to reorder them in anyway you see fit.


It's worth noting that when you're using the CSS order property, if two sections are set to the same order they'll follow their DOM order. In order to reverse the setup here, you'd need to set the Section-1 variable to "2" and Section-2 to "1". It's also possible to use negative numbers for the order if you needed to put something up above the header for some reason.