creating a lander page demo

creating a lander page
--------------------------------------------------------------------------------
1. marketing > Content pages > new content page
2. create page with valid description and url slug for new lander
3. Select 'lander-full width' from template layout
4. Then implement content using template markup from below.


 flex grid markup template
--------------------------------------------------------------------------------
<!-- a full width column. suitable for banners or text -->
<div class="flex-row col-1">
<div class="col-item">your image or text here</div>
</div>

<!-- a two col rown. each element block can be text/image etc -->
<div class="flex-row col-2">
<div class="col-item">your image or text here</div>
<div class="col-item">your image or text here</div>
</div>

<!-- a four col rown. each element block can be text/image etc -->
<div class="flex-row col-4">
<div class="col-item">your image or text here</div>
<div class="col-item">your image or text here</div>
<div class="col-item">your image or text here</div>
<div class="col-item">your image or text here</div>
</div>

<!-- no-gutter removes the default spacing between tiles. touching tiles. used on col-1,col-2,col-4 -->
<div class="flex-row col-4 no-gutter">
<div class="col-item">your image or text here</div>
<div class="col-item">your image or text here</div>
<div class="col-item">your image or text here</div>
<div class="col-item">your image or text here</div>
</div>


<!-- 2 col sample with mages and a slight hover shadow -->
<div class="flex-row col-2 no-gutter">
<div class="col-item shadow"><a href="/link"></a><img src="/imagepath" alt="seo title text"></a></div>
<div class="col-item shadow">a href="/link"></a><img src="/imagepath" alt="seo title text"></a></div>
</div>

Article Details

Article ID:
1
Category:
Views:
11
Rating (Votes):
(0)