Marketing layouts - special mobile-first responsive layout templates
Lukas Grygar
Experience Management
Description
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
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
Liferay is trademark of Liferay, Inc., Liferay International Limited and/or Liferay Affiliate, registered in the United States and/or other countries.
License
- 1 standard instance, perpetual: 399 EUR
Release Summary and Release Notes
| Version | Change Log | Supported Framework Versions | Date Added |
|---|---|---|---|
| 1.0.0.0 | Compatibility with GA3 and GA4. |
Liferay CE Portal 7.1 GA4+
Liferay CE Portal 7.1 GA3+
|
2020-02-10 |
| 1.0.0.0 |
Liferay DXP 7.1 GA1+
Liferay CE Portal 7.1 GA2+
Liferay CE Portal 7.1 GA1+
|
2019-01-07 |
DEVELOPER
Lukas Grygar
Published Date
Version
1.0.0.0
Supported Versions
7.1
Edition
EE, CE
Price
Paid
Help & Support
Terms & Conditions
SHARE LINK
Installation Instructions
This is a Legacy App that is no longer available in the new App Marketplace. You are able to acquire it from your installed DXP or CE instance and install it by following the instructions below.
Acquiring this App through the legacy Liferay Portal Store
- Review app documentation for any specific installation instructions.
- Login to your Liferay Portal instance with administrative permissions.
- Navigate to the Control Panel, Marketplace (or Apps for 7.3 and prior), then Store.
- If needed, login to your Liferay.com account by choosing Sign In.
- Search for the app name in the Search dialog.
- Once the app is found, click on the app in the search results.
- On the app details page, choose to acquire the app by selecting the Free, Buy, or Trial button.
- Follow the instructions on the screen to complete the acquisition.
Installing this App through legacy Liferay Portal Purchased Apps
- After acquiring the app, login to your Liferay Portal instance with administrative permissions.
- Navigate to the Control Panel, Marketplace (or Apps for 7.3 and prior), then Purchased.
- If needed, login to your Liferay.com account by choosing Sign In.
- Click the Install button to install your app on your Liferay Portal instance.
See the legacy App Marketplace help documentation for more information.