{"id":1067,"date":"2020-01-02T09:19:05","date_gmt":"2020-01-02T09:19:05","guid":{"rendered":"https:\/\/www.magetop.com\/blog\/?p=1067"},"modified":"2021-07-22T03:00:26","modified_gmt":"2021-07-22T03:00:26","slug":"customize-cover-illustration-layout-in-magento-2","status":"publish","type":"post","link":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/","title":{"rendered":"Customize Cover, Illustration Layout In Magento 2"},"content":{"rendered":"\n\n\n<p>Our previous post is <a href=\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to create new theme in Magento 2<\/a>. I think you guys should read it. To continue the previous post, we will introduce you to <strong>Customize cover, illustration layout in Magento 2<\/strong>.<\/p>\n\n\n\n<p>Magento 2 Blank theme provides hooks to core functionality. Only the files or modules that are changed should be incorporated into custom themes. When creating a child theme, it is necessary to ensure a parent theme is named. Please go to <code>vendor\/magento\/theme-frontend-luma<\/code>, it is a suggestion for you when building your theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Basic layouts elements<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"327\" data-attachment-id=\"1068\" data-permalink=\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/basic-layouts-elements\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Basic-layouts-elements.png?fit=950%2C388&amp;ssl=1\" data-orig-size=\"950,388\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Basic-layouts-elements\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Basic-layouts-elements.png?fit=300%2C123&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Basic-layouts-elements.png?fit=800%2C327&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Basic-layouts-elements.png?resize=800%2C327&#038;ssl=1\" alt=\"Basic layouts elements\" class=\"wp-image-1068\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Basic-layouts-elements.png?w=950&amp;ssl=1 950w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Basic-layouts-elements.png?resize=300%2C123&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Basic-layouts-elements.png?resize=768%2C314&amp;ssl=1 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><strong>(1)<\/strong> Layouts provide the structures for web pages using an XML file that identifies all the containers and blocks composing the page. The details of layout XML files are described later in this section.<\/p>\n\n\n\n<p><strong>(2)<\/strong> Containers assign content structure to a page using container tags within a layout XML file. A container has no additional content except the content of include elements. Examples of containers include the header, left column, main column, and footer.<\/p>\n\n\n\n<p><strong>(3)<\/strong> Blocks render the UI elements on a page using block tags within a layout XML file. Blocks use templates to generate the HTML to insert into its parent structural block. Examples of blocks include a category list, a mini cart, product tags, and product listing.<\/p>\n\n\n\n<p><strong>Extending layouts<\/strong>: You only need to create an extending layout file that contains the changes you want.<\/p>\n\n\n\n<p>For example: to customize the layout of a page defined in <code>vendor\/magento\/module-catalog\/view\/frontend\/layout\/catalog_product_view.xml<\/code>, you need to add layout files with the same name in your custom theme, such as the following: <code>Magetop\/default\/Magento_Catalog\/layout\/catalog_product_view.xml<\/code><\/p>\n\n\n\n<p><strong>Overriding layouts<\/strong>: If the amount of customizations is large, you can use the overriding function for the needed layout file. This means that the new file that you place in the theme will be used instead of the parent theme layout file of base layout file. Copy extensive page layout or page configuration code and then modify what you want to change.<\/p>\n\n\n\n<p>For example, to override <code>catalog_product_view.xml<\/code>, you need to make a folder like below:<br><code>Magetop\/default\/Magento_Catalog\/layout\/override\/theme\/Magento\/blank\/catalog_product_view.xml<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Basic layouts<\/h2>\n\n\n\n<p>The basic view of all Magento storefront pages in defined within two-page configuration layout files located in the Magento_Theme module.<\/p>\n\n\n\n<p>\u2013<code>&lt;Magento_Theme_module_dir&gt;\/view\/frontend\/layout\/default.xml<\/code>: defines the page layout<\/p>\n\n\n\n<p>\u2013<code>&lt;Magento_Theme_module_dir&gt;\/view\/frontend\/layout\/default_head_blocks.xml<\/code>: defines the scripts, images, and metadata included in a pages\u2019 section.<\/p>\n\n\n\n<p>We&#8217;ll update our theme folder like below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/design\/frontend\/Magetop\/\n  \u251c\u2500\u2500 default\/\n  \u2502   \u251c\u2500\u2500 Magento_Theme\/\n  \u2502   \u2502   \u251c\u2500\u2500 Layout\/\n  \u2502   \u2502   \u2502    \u251c\u2500\u2500 default.xml\n  \u2502   \u2502   \u2502    \u251c\u2500\u2500 default_head_blocks.xml\n  \u2502   \u2502   \u251c\u2500\u2500 templates\/\n  \u2502   \u2502   \u2502       \u251c\u2500\u2500 html\/\n  \u2502   \u2502   \u2502       \u2502     \u251c\u2500\u2500 hello.phtml\n  \u2502   \u251c\u2500\u2500 web\/\n  \u2502   \u2502     \u251c\u2500\u2500 css\/\n  \u2502   \u2502     \u2502    \u251c\u2500\u2500 source\/\n  \u2502   \u2502     \u2502    \u2502     \u251c\u2500\u2500 _extend.less\n  \u2502   \u2502     \u2502    \u2502     \u251c\u2500\u2500 _theme.less<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Simplest override template to customize<\/h2>\n\n\n\n<p>Locate the template which is associated with the page or block you want to change, using template hints in developer tools.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"145\" data-attachment-id=\"1070\" data-permalink=\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/example\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Example.png?fit=644%2C145&amp;ssl=1\" data-orig-size=\"644,145\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Example\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Example.png?fit=300%2C68&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Example.png?fit=644%2C145&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Example.png?resize=644%2C145&#038;ssl=1\" alt=\"Example\" class=\"wp-image-1070\" srcset=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Example.png?w=644&amp;ssl=1 644w, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Example.png?resize=300%2C68&amp;ssl=1 300w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/figure>\n\n\n\n<p>Or maybe these would be located at:<\/p>\n\n\n\n<p><code>app\/code\/&lt;vendor_name&gt;\/&lt;module_name&gt;\/view\/frontend\/templates\/..\/templateFile.phtml<\/code> or <code>&lt;parent_theme_dir&gt;\/&lt;vendor_name&gt;_&lt;module_name&gt;\/templates\/..\/templateFile.phtml<\/code><\/p>\n\n\n\n<p>Copy <code>templateFile.phtml<\/code> to: <code>&lt;theme_dir&gt;\/&lt;vendor_name&gt;_&lt;module_name&gt;\/templates\/..\/<\/code> then Make the required changes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Simplest create new template to customize<\/h2>\n\n\n\n<p>Add a template in your theme directory according to the template storing convention.<\/p>\n\n\n\n<p>Create a template file: <code>&lt;theme_dir&gt;\/Magento_Theme\/templates\/html\/hello.phtml<\/code> then insert the following code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&lt;?php\necho &quot;say Hello!&quot;\n?&gt;\n<\/pre><\/div>\n\n\n<p>Assign your template to a block in the corresponding layout xml file. We\u2019ll use <code>default.xml<\/code> assign our template. It should look like this:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&lt;page xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd&quot;&gt;\n    &lt;body&gt;\n        &lt;referenceContainer name=&quot;header.container&quot;&gt;\n            &lt;block class=&quot;Magento\\Framework\\View\\Element\\Template&quot; name=&quot;test_file&quot; template=&quot;Magento_Theme::html\/hello.phtml&quot;\/&gt;\n        &lt;\/referenceContainer&gt;\n    &lt;\/body&gt;\n&lt;\/page&gt;\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Simplest extend parent styles<\/h2>\n\n\n\n<p>Create file: &lt;theme_dir&gt;\/web\/css\/source\/_extend.less<\/p>\n\n\n\n<p>Extending a theme using <code>_extend.less<\/code> is the simplest option when you want to add additional styles to what the parent theme already offers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Simplest override parent styles<\/h2>\n\n\n\n<p>Create file: <code>&lt;theme_dir&gt;\/web\/css\/source\/_theme.less<\/code><\/p>\n\n\n\n<p>It is important to remember that your _theme.less file overrides the parent file <code>_theme.less<\/code>. So, copy all variables you need from the parent <code>_theme.less<\/code>, including those which will not be changed.<\/p>\n\n\n\n<p>Refresh cache to see your changes applied.<\/p>\n\n\n\n<p>This is <strong>Customize cover, illustration layout in Magento 2<\/strong>.<\/p>\n\n\n\n<p>You can see the next post:  <a href=\"https:\/\/www.magetop.com\/blog\/how-to-create-simple-module-to-configure-options-for-theme-in-magento-2\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"How to create simple module to configure options for theme in Magento 2 (opens in a new tab)\">How to create simple module to configure options for theme in Magento 2<\/a>.<\/p>\n\n\n\n<p>Follow us for more helpful tutorial!<\/p>\n\n\n\n<p>We hope this is useful blog for you.<\/p>\n\n\n\n<p>Thank you for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our previous post is How to create new theme in Magento 2. I think you guys should read it. To continue the previous post, we will introduce you to Customize cover, illustration layout in Magento 2.<\/p>\n","protected":false},"author":1,"featured_media":1114,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[197,193,198,107,195,194,196],"class_list":["post-1067","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2-tutorials","tag-cover-customizing-layout","tag-customize-cover-illustration-layout-in-magento-2","tag-illustration-theme-layout","tag-magento-2-tutorials","tag-magento-2-3-cover-customizing-layout","tag-magento-2-3-cover-customizing-layout-illustration-theme-layout","tag-magento-2-3-illustration-theme-layout"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Customize Cover, Illustration Layout In Magento 2 - Magetop Blog<\/title>\n<meta name=\"description\" content=\"To continue the previous post, we will introduce you to Customize cover, illustration layout in Magento 2. I think you guys should read it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customize Cover, Illustration Layout In Magento 2 - Magetop Blog\" \/>\n<meta property=\"og:description\" content=\"To continue the previous post, we will introduce you to Customize cover, illustration layout in Magento 2. I think you guys should read it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Magetop Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MagetopStore\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/MagetopStore\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-02T09:19:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-22T03:00:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i1.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"445\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Adam Roger\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/MagetopStore\" \/>\n<meta name=\"twitter:site\" content=\"@MagetopStore\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adam Roger\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/\"},\"author\":{\"name\":\"Adam Roger\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411\"},\"headline\":\"Customize Cover, Illustration Layout In Magento 2\",\"datePublished\":\"2020-01-02T09:19:05+00:00\",\"dateModified\":\"2021-07-22T03:00:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/\"},\"wordCount\":591,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1\",\"keywords\":[\"Cover Customizing Layout\",\"Customize Cover Illustration Layout In Magento 2\",\"Illustration Theme layout\",\"magento 2 tutorials\",\"Magento 2.3 Cover Customizing Layout\",\"Magento 2.3 Cover Customizing Layout Illustration Theme layout\",\"Magento 2.3 Illustration Theme layout\"],\"articleSection\":[\"Magento 2 Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/\",\"url\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/\",\"name\":\"Customize Cover, Illustration Layout In Magento 2 - Magetop Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1\",\"datePublished\":\"2020-01-02T09:19:05+00:00\",\"dateModified\":\"2021-07-22T03:00:26+00:00\",\"description\":\"To continue the previous post, we will introduce you to Customize cover, illustration layout in Magento 2. I think you guys should read it.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1\",\"width\":750,\"height\":445,\"caption\":\"Customize Cover, Illustration Layout Magento 2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.magetop.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customize Cover, Illustration Layout In Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"name\":\"Magetop Blog\",\"description\":\"Exploring Magento Tips, Tricks, and Trends\",\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.magetop.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\",\"name\":\"Magetop.com\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"width\":475,\"height\":475,\"caption\":\"Magetop.com\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/MagetopStore\",\"https:\/\/x.com\/MagetopStore\",\"https:\/\/www.linkedin.com\/company\/magetop\",\"https:\/\/www.pinterest.com\/magetop\",\"https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411\",\"name\":\"Adam Roger\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g\",\"caption\":\"Adam Roger\"},\"description\":\"CEO and Founder of Magetop. A friend, a husband and a dad of two children. Adam loves to travel to experience new cultures and discover what is happening with ecommerce all around the world.\",\"sameAs\":[\"https:\/\/www.magetop.com\",\"https:\/\/www.facebook.com\/MagetopStore\",\"https:\/\/www.instagram.com\/magetopstore\",\"https:\/\/www.linkedin.com\/company\/magetop\",\"https:\/\/www.pinterest.com\/magetop\",\"https:\/\/x.com\/https:\/\/twitter.com\/MagetopStore\",\"https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA\",\"https:\/\/magetop.tumblr.com\"],\"url\":\"https:\/\/www.magetop.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customize Cover, Illustration Layout In Magento 2 - Magetop Blog","description":"To continue the previous post, we will introduce you to Customize cover, illustration layout in Magento 2. I think you guys should read it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Customize Cover, Illustration Layout In Magento 2 - Magetop Blog","og_description":"To continue the previous post, we will introduce you to Customize cover, illustration layout in Magento 2. I think you guys should read it.","og_url":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/","og_site_name":"Magetop Blog","article_publisher":"https:\/\/www.facebook.com\/MagetopStore","article_author":"https:\/\/www.facebook.com\/MagetopStore","article_published_time":"2020-01-02T09:19:05+00:00","article_modified_time":"2021-07-22T03:00:26+00:00","og_image":[{"width":750,"height":445,"url":"https:\/\/i1.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1","type":"image\/png"}],"author":"Adam Roger","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/MagetopStore","twitter_site":"@MagetopStore","twitter_misc":{"Written by":"Adam Roger","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/"},"author":{"name":"Adam Roger","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411"},"headline":"Customize Cover, Illustration Layout In Magento 2","datePublished":"2020-01-02T09:19:05+00:00","dateModified":"2021-07-22T03:00:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/"},"wordCount":591,"commentCount":0,"publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1","keywords":["Cover Customizing Layout","Customize Cover Illustration Layout In Magento 2","Illustration Theme layout","magento 2 tutorials","Magento 2.3 Cover Customizing Layout","Magento 2.3 Cover Customizing Layout Illustration Theme layout","Magento 2.3 Illustration Theme layout"],"articleSection":["Magento 2 Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/","url":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/","name":"Customize Cover, Illustration Layout In Magento 2 - Magetop Blog","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1","datePublished":"2020-01-02T09:19:05+00:00","dateModified":"2021-07-22T03:00:26+00:00","description":"To continue the previous post, we will introduce you to Customize cover, illustration layout in Magento 2. I think you guys should read it.","breadcrumb":{"@id":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#primaryimage","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1","width":750,"height":445,"caption":"Customize Cover, Illustration Layout Magento 2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.magetop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Customize Cover, Illustration Layout In Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/www.magetop.com\/blog\/#website","url":"https:\/\/www.magetop.com\/blog\/","name":"Magetop Blog","description":"Exploring Magento Tips, Tricks, and Trends","publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.magetop.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.magetop.com\/blog\/#organization","name":"Magetop.com","url":"https:\/\/www.magetop.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","width":475,"height":475,"caption":"Magetop.com"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MagetopStore","https:\/\/x.com\/MagetopStore","https:\/\/www.linkedin.com\/company\/magetop","https:\/\/www.pinterest.com\/magetop","https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA"]},{"@type":"Person","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411","name":"Adam Roger","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g","caption":"Adam Roger"},"description":"CEO and Founder of Magetop. A friend, a husband and a dad of two children. Adam loves to travel to experience new cultures and discover what is happening with ecommerce all around the world.","sameAs":["https:\/\/www.magetop.com","https:\/\/www.facebook.com\/MagetopStore","https:\/\/www.instagram.com\/magetopstore","https:\/\/www.linkedin.com\/company\/magetop","https:\/\/www.pinterest.com\/magetop","https:\/\/x.com\/https:\/\/twitter.com\/MagetopStore","https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA","https:\/\/magetop.tumblr.com"],"url":"https:\/\/www.magetop.com\/blog\/author\/admin\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/paOdw5-hd","jetpack-related-posts":[{"id":1048,"url":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/","url_meta":{"origin":1067,"position":0},"title":"How To Create New Theme In Magento 2","author":"Adam Roger","date":"January 2, 2020","format":false,"excerpt":"There are a number of differences and improvements to theme structure and the fallback system in Magento 2. The fallback system in Magento 2.x works in a similar way to Magento 1.x, but now has the added advantage of being able to create unlimited parent themes.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Create New Theme In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1119,"url":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/","url_meta":{"origin":1067,"position":1},"title":"How To Make Custom Page Layout In Magento 2","author":"Adam Roger","date":"January 8, 2020","format":false,"excerpt":"In the previous article, we learned about How to get store config value in Magento 2. Today, we will introduce you about How to make custom page layout in Magento 2.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Make Custom Page Layout In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1098,"url":"https:\/\/www.magetop.com\/blog\/how-to-get-store-config-value-in-magento-2\/","url_meta":{"origin":1067,"position":2},"title":"How To Get Store Config Value In Magento 2","author":"Adam Roger","date":"January 6, 2020","format":false,"excerpt":"In the previous article, we learned about How To Create Simple Module To Configure Options For Theme In Magento 2. Today, we will introduce you about How To Get Store Config Value In Magento 2.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Get Store Config Value M2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":8253,"url":"https:\/\/www.magetop.com\/blog\/10-best-ecommerce-magento-themes-for-2023\/","url_meta":{"origin":1067,"position":3},"title":"10 Best eCommerce Magento Themes for 2023","author":"Adam Roger","date":"February 17, 2023","format":false,"excerpt":"Are you looking for the perfect Magento theme to take your eCommerce website to the next level in 2023? Look no further than this comprehensive list of the 10 best Magento themes available.","rel":"","context":"In &quot;Magetop Guest Post&quot;","block_context":{"text":"Magetop Guest Post","link":"https:\/\/www.magetop.com\/blog\/welcome-to-our-guest-post\/"},"img":{"alt_text":"10 Best eCommerce Magento Themes for 2023","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2023\/02\/10-Best-eCommerce-Magento-Themes-for-2023.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2023\/02\/10-Best-eCommerce-Magento-Themes-for-2023.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2023\/02\/10-Best-eCommerce-Magento-Themes-for-2023.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2023\/02\/10-Best-eCommerce-Magento-Themes-for-2023.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2023\/02\/10-Best-eCommerce-Magento-Themes-for-2023.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2700,"url":"https:\/\/www.magetop.com\/blog\/top-magento-2-multi-vendor-theme\/","url_meta":{"origin":1067,"position":4},"title":"Top 5 Magento 2 Multi Vendor Marketplace Theme","author":"Adam Roger","date":"August 7, 2020","format":false,"excerpt":"Magento 2 Multi Vendor Extension that turns your website into an e-commerce site like Amazon, eBay, Etsy, Alibaba, Aliexpress etc. To make your website more beautiful, you have to use themes. In this blog, we will introduce the Top 5 Magento 2 Multi Vendor themes, helping you to have a\u2026","rel":"","context":"In &quot;Magento News&quot;","block_context":{"text":"Magento News","link":"https:\/\/www.magetop.com\/blog\/magento-news\/"},"img":{"alt_text":"Top 5 Magento 2 Multi Vendor Marketplace Theme","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/08\/Top-5-Magento-2-Multi-Vendor-Marketplace-Theme.png?fit=709%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/08\/Top-5-Magento-2-Multi-Vendor-Marketplace-Theme.png?fit=709%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/08\/Top-5-Magento-2-Multi-Vendor-Marketplace-Theme.png?fit=709%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/08\/Top-5-Magento-2-Multi-Vendor-Marketplace-Theme.png?fit=709%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1091,"url":"https:\/\/www.magetop.com\/blog\/how-to-create-simple-module-to-configure-options-for-theme-in-magento-2\/","url_meta":{"origin":1067,"position":5},"title":"How To Create Simple Module To Configure Options For Theme In Magento 2","author":"Adam Roger","date":"January 4, 2020","format":false,"excerpt":"In this article, we will introduce you to How to create simple module to configure options for theme in Magento 2.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Create Simple Module To Configure Options For Theme","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-Simple-Module-To-Configure-Options-For-Theme.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-Simple-Module-To-Configure-Options-For-Theme.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-Simple-Module-To-Configure-Options-For-Theme.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-Simple-Module-To-Configure-Options-For-Theme.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/comments?post=1067"}],"version-history":[{"count":5,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1067\/revisions"}],"predecessor-version":[{"id":1134,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1067\/revisions\/1134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media\/1114"}],"wp:attachment":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media?parent=1067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/categories?post=1067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/tags?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}