Molla offers several pre-defined masonry grid layouts in Elementor.<\/p>\n\n\n\n
![\"\"](\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/elementor-5.jpg\")
<\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/elementor-6-1024x401.jpg\")
<\/figure>\nCustomizing grid item order is available. You can set this in column settings.<\/div>\n
\nYou are able to add grid items by adding columns<\/strong> to it based on presets. Each grid item’s width & height can be set in added column settings.\n<\/div>\n
Float grid is the layout configured as ‘float: left’ css not use isotope plugin.<\/div>\n<\/div>\n<\/div>\n\n\n\n
How to add custom layout<\/h4>\n\n\n\n
Molla offers 8 masonry layout presets and general masonry layout.<\/p>\n\n\n\n
We can add custom layouts using \u201cmolla_creative_grid_options<\/strong>\u201d and \u201cmolla_creative_grid_layout_type<\/strong>\u201d filters. Below code shows how to add 10th custom layout like following image using functions.php in child theme.<\/p>\n\n\n ‘w-l’, ‘w-m’ and ‘w-s’: responsive width of grid item How to use masonry grid You can use Section element as grid parent and Column element will be grid-item. Molla offers several pre-defined masonry grid layouts in Elementor. How to add custom layout Molla offers 8 masonry layout presets and general masonry layout. We can add custom layouts using \u201cmolla_creative_grid_options\u201d and \u201cmolla_creative_grid_layout_type\u201d filters.All default layouts […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,86],"tags":[],"featured_image_src":{"landsacpe":false,"list":false,"medium":false,"full":false},"categories_name":["12 - How tos \/ Guides","Elementor"],"author_name":"John Doe","comment_count":{"approved":0,"awaiting_moderation":0,"spam":0,"trash":0,"post-trashed":0,"all":0,"total_comments":0},"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts\/1135"}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/comments?post=1135"}],"version-history":[{"count":2,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts\/1135\/revisions"}],"predecessor-version":[{"id":1197,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts\/1135\/revisions\/1197"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/media?parent=1135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/categories?post=1135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/tags?post=1135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
All default layouts are defined in molla_creative_grid_layout<\/strong> function in functions\/helper.php of Molla-Core<\/strong> plugin.<\/p>\n\n\n\n
We suppose that new grid layout image is located in child themes\u2019 assets\/images\/grid-layout directory.<\/div>\n\n\n![\"\"](\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/elementor-7-1024x765.jpg\")
<\/figure>\n\n\n\nadd_filter( 'molla_creative_grid_options', 'molla_child_custom_creative_grid_layout_names' );\nfunction molla_child_custom_creative_grid_layout_names( $layouts ) {\n $layouts = array_merge(\n $layouts,\n '11' => array(\n 'title' => __( 'Grid 11', 'molla-core' ),\n 'image' => get_theme_file_uri( 'assets\/images\/grid-layout\/grid-11.jpg' ),\n 'width' => '1', \/\/ width in elementor radio-image control\n )\n );\n return $layouts;\n}\n\nadd_filter( 'molla_creative_grid_layout_type', 'molla_child_custom_creative_grid_layouts', 10, 2 );\nfunction molla_child_custom_creative_grid_layouts( $layout_id ) {\n if ( '11' == $layout_id ) {\n return array(\n array( 'w' => '1-2', 'h' => '1-2', 'w-l' => '3-4', 'w-m' => '1', 'size' => 'large' ),\n array( 'w' => '1-4', 'h' => '1-4', 'w-l' => '1-4', 'w-m' => '1-2', 'w-s' => '1', 'size' => 'medium' ),\n array( 'w' => '1-4', 'h' => '1-4', 'w-l' => '1-4', 'w-m' => '1-2', 'w-s' => '1', 'size' => 'medium' ),\n array( 'w' => '1-2', 'h' => '1-2', 'w-l' => '1-2', 'w-m' => '1', 'size' => 'large' ),\n array( 'w' => '1-2', 'h' => '1-4', 'w-l' => '1-2', 'w-m' => '1-2', 'w-s' => '1', 'size' => 'medium' ),\n );\n }\n}<\/code><\/pre>\n\n\n\n
‘1-2’ means half and ‘1-3’ means one third.<\/p>\n","protected":false},"excerpt":{"rendered":"