{"id":403,"date":"2018-04-26T01:21:35","date_gmt":"2018-04-26T01:21:35","guid":{"rendered":"http:\/\/www.loftocean.com\/fallsky\/?p=403"},"modified":"2018-09-26T02:19:02","modified_gmt":"2018-09-26T02:19:02","slug":"customize-posts-layout-on-homepage-archive-pages","status":"publish","type":"post","link":"https:\/\/www.loftocean.com\/fallsky\/start\/customize-posts-layout-on-homepage-archive-pages\/","title":{"rendered":"Customize Posts Layout on Homepage &#038; Archive Pages"},"content":{"rendered":"<div style=\"border: 1px solid #eee; background:#f5f5f5; padding:30px 30px 0; margin-bottom: 60px;\">\n<ul>\n<li><a href=\"#homepage-posts\">Customize Posts Layout on Homepage<\/a><\/li>\n<li><a href=\"#archive-posts\">Customize Posts Layout on Archive Pages<\/a><\/li>\n<li><a href=\"#posts-general\">Some General Settings for Posts<\/a><\/li>\n<\/div>\n<h5 id=\"homepage-posts\">Customize Posts Layout on Homepage<\/h5>\n<p class=\"heading\">Step 1 &#8211; Set your website homepage.<\/p>\n<p>Please read the online documentation for more details here: <a href=\"http:\/\/www.loftocean.com\/fallsky-doc\/documentation.html#homepage\" rel=\"noopener\" target=\"_blank\">Homepage\/Front Page<\/a>.<\/p>\n<p class=\"heading\">Step 2 &#8211; Add some Home Widgets to your homepage<\/p>\n<p>Please go to <strong>Customizer > Home Page > Home Main Content Area<\/strong>, first you can choose a <strong>Sidebar Layout<\/strong> for your homepage main area.<\/p>\n<p>Then please locate to <strong>Home Widgets<\/strong>, click on the button <strong>&#8220;Add a Widget&#8221;<\/strong>, then click on a <strong>home widget<\/strong> to add it to your homepage. You can drag and drop to reorder them, click on each widget to expand its settings panel to tweak content and style.<\/p>\n<figure id=\"attachment_410\" aria-describedby=\"caption-attachment-410\" style=\"width: 2000px\" class=\"wp-caption alignnone\"><img fetchpriority=\"high\" decoding=\"async\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets.jpg\" alt=\"\" width=\"2000\" height=\"1141\" class=\"size-full wp-image-410\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets.jpg 2000w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets-300x171.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets-768x438.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets-1024x584.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets-360x205.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets-480x274.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets-720x411.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets-960x548.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets-1440x822.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widgets-1200x685.jpg 1200w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><figcaption id=\"caption-attachment-410\" class=\"wp-caption-text\">How to add home widgets to your homepage.<\/figcaption><\/figure>\n<figure id=\"attachment_409\" aria-describedby=\"caption-attachment-409\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img decoding=\"async\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets.jpg\" alt=\"\" width=\"2560\" height=\"1600\" class=\"size-full wp-image-409\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets.jpg 2560w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets-300x188.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets-768x480.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets-1024x640.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets-360x225.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets-480x300.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets-720x450.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets-960x600.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets-1440x900.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/added-home-widgets-1200x750.jpg 1200w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><figcaption id=\"caption-attachment-409\" class=\"wp-caption-text\">Home widgets added to your homepage.<\/figcaption><\/figure>\n<p class=\"heading\">Step 3 &#8211; Edit a Posts Home Widget<\/p>\n<p>Click on the small arrow of a home widget to expand its settings panel. When it is a &#8220;<strong>Posts<\/strong>&#8221; home widget, you can enter a section\/block title, tweak the block color, paddings, choose to display a group of posts, and change the layout, column and more for this group of posts.<\/p>\n<figure id=\"attachment_408\" aria-describedby=\"caption-attachment-408\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img decoding=\"async\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings.jpg\" alt=\"\" width=\"2560\" height=\"1600\" class=\"size-full wp-image-408\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings.jpg 2560w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings-300x188.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings-768x480.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings-1024x640.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings-360x225.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings-480x300.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings-720x450.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings-960x600.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings-1440x900.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/expand-home-widget-settings-1200x750.jpg 1200w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><figcaption id=\"caption-attachment-408\" class=\"wp-caption-text\">Expand a home widget settings panel.<\/figcaption><\/figure>\n<figure id=\"attachment_407\" aria-describedby=\"caption-attachment-407\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post.jpg\" alt=\"\" width=\"2560\" height=\"1600\" class=\"size-full wp-image-407\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post.jpg 2560w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post-300x188.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post-768x480.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post-1024x640.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post-360x225.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post-480x300.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post-720x450.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post-960x600.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post-1440x900.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/home-widget-post-1200x750.jpg 1200w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><figcaption id=\"caption-attachment-407\" class=\"wp-caption-text\">Options related to posts layout, column, meta and more.<\/figcaption><\/figure>\n<p>You will see the <strong>&#8220;Posts Layout&#8221;<\/strong> option, click to expand the drop down list and select a layout.<\/p>\n<figure id=\"attachment_406\" aria-describedby=\"caption-attachment-406\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option.jpg\" alt=\"\" width=\"2560\" height=\"1600\" class=\"size-full wp-image-406\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option.jpg 2560w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option-300x188.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option-768x480.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option-1024x640.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option-360x225.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option-480x300.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option-720x450.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option-960x600.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option-1440x900.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-option-1200x750.jpg 1200w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><figcaption id=\"caption-attachment-406\" class=\"wp-caption-text\">Choose a &#8220;Layout&#8221; for this group of posts.<\/figcaption><\/figure>\n<p>Then you can tweak the <strong>&#8220;Column&#8221;<\/strong> option for the selected <strong>Posts Layout<\/strong> (except for &#8220;ZigZag&#8221; layout).<\/p>\n<figure id=\"attachment_405\" aria-describedby=\"caption-attachment-405\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column.jpg\" alt=\"\" width=\"2560\" height=\"1600\" class=\"size-full wp-image-405\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column.jpg 2560w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column-300x188.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column-768x480.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column-1024x640.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column-360x225.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column-480x300.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column-720x450.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column-960x600.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column-1440x900.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/post-layout-column-1200x750.jpg 1200w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><figcaption id=\"caption-attachment-405\" class=\"wp-caption-text\">Choose &#8220;Column&#8221; for the selected Post Layout.<\/figcaption><\/figure>\n<hr style=\"margin-bottom: 50px;\">\n<h5 id=\"archive-posts\">Customize Posts Layout on Archive Pages<\/h5>\n<p>You can choose different page layout and posts layout for different types of archive pages: Category, Tag, Author, and more.<\/p>\n<p>Please go to the <strong>Customizer > Archive Pages > Choose one Archive<\/strong>, then you can tweak the settings for this archive.<\/p>\n<figure id=\"attachment_422\" aria-describedby=\"caption-attachment-422\" style=\"width: 2210px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive.jpg\" alt=\"\" width=\"2210\" height=\"1600\" class=\"size-full wp-image-422\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive.jpg 2210w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive-300x217.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive-768x556.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive-1024x741.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive-360x261.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive-480x348.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive-720x521.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive-960x695.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive-1440x1043.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/customize-archive-1200x869.jpg 1200w\" sizes=\"(max-width: 2210px) 100vw, 2210px\" \/><figcaption id=\"caption-attachment-422\" class=\"wp-caption-text\">Customzier > Archive Pages > Select one Archive > Tweak Page Settings<\/figcaption><\/figure>\n<p>You can also find these instructions and details in the documentation here: <a href=\"http:\/\/www.loftocean.com\/fallsky-doc\/documentation.html#archives\" rel=\"noopener\" target=\"_blank\">Archive Pages<\/a>.<\/p>\n<hr style=\"margin: 50px 0;\">\n<h5 id=\"posts-general\">Some General Settings for Posts<\/h5>\n<p>Please go to <strong>Customizer > General > Posts General Options<\/strong>, there you can adjust these general options for all Posts blocks. <\/p>\n<figure id=\"attachment_424\" aria-describedby=\"caption-attachment-424\" style=\"width: 2316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options.png\" alt=\"\" width=\"2316\" height=\"2660\" class=\"size-full wp-image-424\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options.png 2316w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options-261x300.png 261w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options-768x882.png 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options-892x1024.png 892w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options-360x413.png 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options-480x551.png 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options-720x827.png 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options-960x1103.png 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options-1024x1176.png 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options-1440x1654.png 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/09\/posts-general-options-1200x1378.png 1200w\" sizes=\"(max-width: 2316px) 100vw, 2316px\" \/><figcaption id=\"caption-attachment-424\" class=\"wp-caption-text\">General options for Posts.<\/figcaption><\/figure>\n<p>The options:<\/p>\n<ul>\n<li>Change the text showing on the &#8220;<strong>read more<\/strong>&#8221; buttons &#8211; the &#8220;read more&#8221; buttons will show <strong>when Posts Layout is Masonry, Zigzag or Card<\/strong>. (And you can also choose to hide the &#8220;Read More&#8221; button for each posts list while editing it.)<\/li>\n<li>Choose a <strong>Pagination Style<\/strong> for posts archive &#8211; there are 4 options:\n<ul>\n<li>Nav\/Prev Links<\/li>\n<li>With Page Numbers<\/li>\n<li>Load More Button<\/li>\n<li>Infinite Scroll<\/li>\n<\/ul>\n<\/li>\n<li>Change the <strong>Post Excerpt Length<\/strong> for each posts layout.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>How to tweak the layout and styles for a posts section\/block.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-403","post","type-post","status-publish","format-standard","hentry","category-start"],"_links":{"self":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts\/403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/comments?post=403"}],"version-history":[{"count":5,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts\/403\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts\/403\/revisions\/428"}],"wp:attachment":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/media?parent=403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/categories?post=403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/tags?post=403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}