Marketing layouts - special mobile-first responsive layout templates

These special layout templates uses mobile-first approach and breaks common stacking order on mobile devices (tablets, smart-phones etc.),
which helps you to show your desired product on top position while columns are stacked under each other.

Layouts have different stacking breakpoints which enables you perfect targeting for your
user base to achieve great user experience on every device (smartphone, table, PC etc.).
Breakpoints are 575 px, 767 px, 991 px and 1279 px.
The best way to figure out which devices uses your users the most is to look for these stats in
tools such as Google Analytics etc. and then use layout with breakpoint which suits the majority of
your users to achieve best user experience.

Layout sets has different thumbnail colors for quick recognition at Liferay control panel
which enables you high productivity while creating new pages.

Layouts HTML markup is developed according to Twitter Bootstrap 4 HTML/CSS framework rules, which is part
of Liferay 7.1, that means that they are universal and could be used with any Liferay 7.1 theme.

Layouts (each layout with breakpoints 575 px, 767 px, 991 px and 1279 px):
2 Columns right first
1-2 Columns right first
1-2-1 Columns right first
2 Columns (66/33%) right first
1-2 Columns (66/33%) right first
1-2-1 Columns (66/33%) right first
2 Columns (33/66%) right first
1-2 Columns (33/66%) right first
1-2-1 Columns (33/66%) right first
3 Columns center first
1-3 Columns center first
1-3-1 Columns center first
4 Columns right first
1-4 Columns right first
1-4-1 Columns right first

After deployment to Liferay server instance, layouts are available for all Liferay Sites/Themes.

To change layout of the page:
1.) login to Liferay Control Panel
2.) under your Liferay Site click Build
3.) then click to Pages
4.) on each page click on three dots and then click on Configure
5.) select which layout you want to use and click Save