Liferay 7 Layouts tutorial

Liferay DXP Layouts tutorial will give you light on “creating layout templates for Liferay 7 using liferay themes generator tool”.  Please go through “Liferay themes generator installation tutorial” that explained in details steps.

Create Layout Template using theme generator:

  1. Make sure that you installed all required plugins explained in this tutorial: “Liferay 7 Themes generator installation and theme creation
  2. Navigate to directory where you want to create layout templates
  3. Run the command:   yo liferay-theme:layout Liferay7 layout generator
  4. Provide the layout name and layout Id. In this tutorial, we are going to create 2-1-2 layout( 3 rows (2 columns-1-2 columns)) . For the first row give the number columns and select column width alsoLiferay yo theme generator
  5. You will  get interactive window to add, edit and delete rows in the layoutsLiferay yo layout generator
  6. Enter the number columns and width for each columnsLiferay 7 layout creation
  7. After completing this, select finish layout
  8. Enter the path to your server directory. Give complete path up to  tomcat directory to deploy automatically Liferay DXP layout tutorial
  9. It will create json – where you can edit the path of that
  10. Deploy the war file using gulp task :  gulp deployLiferay 7 yo tutorial
  11. You can change the deployment directory and other configurations in “liferay-plugin.json” that can be found in layout templates root directory
    1. {
       "LiferayPlugin": {
       "appServerPath": "D:\\liferay-work\\LR7EE\\lds\\workspace\\liferay-workspace\\bundles\\tomcat-8.0.32",
       "deployPath": "D:\\liferay-work\\LR7EE\\lds\\workspace\\liferay-workspace\\bundles\\deploy",
       "url": "http://localhost:8080",
       "appServerPathPlugin": "D:\\liferay-work\\LR7EE\\lds\\workspace\\liferay-workspace\\bundles\\tomcat-8.0.32\\webapps\-1-1-layouttpl",
       "deployed": true,
       "pluginName": "2-1-1-layouttpl"
       }
      }

Hope this helps!!!

3 thoughts on “Liferay 7 Layouts tutorial”

Comments are closed.