{"id":25440,"date":"2016-01-06T23:01:15","date_gmt":"2016-01-06T15:01:15","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25440"},"modified":"2024-05-14T22:28:53","modified_gmt":"2024-05-14T14:28:53","slug":"feature-posts-widgets","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/","title":{"rendered":"Feature Post Widgets: Brilliant Ideas &#038; Trends"},"content":{"rendered":"<p>Running a <a href=\"https:\/\/www.hongkiat.com\/blog\/creating-and-running-a-profitable-online-magazine-part-i\/\">successful online magazine<\/a> requires a solid audience and lots of high-quality writing. But the magazine\u2019s layout also plays a crucial factor in visitor engagement. One technique is to create a <strong>featured posts widget<\/strong> at the top of the homepage. This showcases the most recently popular articles to ideally drive readers further into the site.<\/p>\n<p>In this post I\u2019d like to cover design techniques that can be used to create a successful featured post widget. Although this widget often works best on a magazine-style layout, you can also apply this to smaller blogs or dynamic content websites.<\/p>\n<h2>Typographic Contrast<\/h2>\n<p>Most featured posts rely on thumbnail images to draw attention. This often takes the form of a background image tied to each article headline.<\/p>\n<p>This technique looks fantastic but it\u2019s <strong>hard to build noticeable contrast between typography and dynamic background pictures<\/strong>. By studying other magazines you can pick up subtle techniques to help improve readability.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/thenextweb.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/01-the-next-web-featured-posts.jpg\" alt=\"the next web homepage\" width=\"640\" height=\"400\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/thenextweb.com\/\">The Next Web<\/a> is a large online magazine with a prominent posts widget on the homepage. Each thumbnail varies in size but they all use <strong>dark gradients for improved contrast<\/strong>.<\/p>\n<p>Article headlines are placed at the bottom of thumbnail blocks on top of dark gradients. The <strong>light text is easy to consume on a dark background<\/strong>, yet it doesn\u2019t cover the whole image either.<\/p>\n<p>Modern advancements in CSS3 allow developers to recreate these effects with ease. Fixed gradients are perfect if you can get them to <strong>flow naturally on top of each thumbnail<\/strong> and still <strong>show off enough of the image<\/strong> to capture attention.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.digitaltrends.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/02-digital-trends-magazine-featured-posts.jpg\" alt=\"digital trends featured posts\" width=\"640\" height=\"400\"><\/a><\/figure>\n<p>A slightly different technique is used on the homepage of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.digitaltrends.com\/\">Digital Trends<\/a>. This post widget uses <strong>high-contrast solid backgrounds<\/strong> behind text to make each headline crisp and vibrant.<\/p>\n<p>The difference here is that each background color is 100% solid. You can\u2019t see the entire thumbnail photo so <strong>small portions are lost from view.<\/strong> But the text is clearly legible which can be just as appealing to visitors first landing on the Digital Trends homepage.<\/p>\n<p>Finding the right amount of contrast is tricky. Some websites like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/techcrunch.com\/\">TechCrunch<\/a> try to place text beside the thumbnail to remove this problem entirely.<\/p>\n<p>But if you like the design style of headline text on top of a thumbnail you\u2019ll want to <strong>consider how contrast factors into the equation<\/strong>.<\/p>\n<h2>Sporadic Image Sizes<\/h2>\n<p>The value of a featured post widget is to <strong>feature content<\/strong> at the top of the page. Asymmetry is a great way to bring attention towards something, and in this case asymmetrical thumbnail sizes work great.<\/p>\n<p>Take for example the homepage of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.zdnet.com\/\">ZDNet<\/a>. In their featured widget the largest article on the left-hand side uses the widest thumbnail image to take up more space and hopefully draw more attention. Other featured thumbnails fall into smaller sizes with smaller headlines.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.zdnet.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/03-zdnet-magazine.jpg\" alt=\"zdnet featured posts widget\" width=\"640\" height=\"400\"><\/a><\/figure>\n<p>Notice how this grid structure naturally leads your eye around the page. Each visitor\u2019s gaze tends to fall in one particular area, then move between each thumbnail until something jumps out.<\/p>\n<p>Also ZDNet places a <strong>dark gradient<\/strong> atop each thumbnail image to <strong>build typographic contrast<\/strong> for more readable text. Fundamentally it\u2019s one of the best featured post widget designs I\u2019ve ever seen.<\/p>\n<p>A very similar design style can be found on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.cnet.com\/\">CNET\u2019s homepage<\/a>. The largest thumbnail takes its place on the left-hand side since most visitors read from left-to-right.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.cnet.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/04-cnet-magazine-layout.jpg\" alt=\"cnet magazine website\" width=\"640\" height=\"400\"><\/a><\/figure>\n<p>When designing your own featured post widget don\u2019t feel obligated to follow this same technique. You can go with any thumbnail size so long as they fit together cohesively and form a unified grid layout.<\/p>\n<h2>Custom Thumbnail Styles<\/h2>\n<p>Design choices vary widely from layout to layout so there is no one perfect solution. Featured post widgets are definitely more complex to design, so they require study and patience to fit into a custom layout.<\/p>\n<p>The style of each thumbnail affects how the entire widget looks to your audience. Take for example the featured widget style found on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.theverge.com\/\">The Verge<\/a>.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.theverge.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/05-the-verge-featured-posts-widget.jpg\" alt=\"the verge homepage\" width=\"640\" height=\"400\"><\/a><\/figure>\n<p>Each thumbnail has a colorful gradient on top of the photo. This boosts contrast and improves readability, but it also adds a certain flair to the website as well.<\/p>\n<p>Some people don\u2019t like this style because they find it gaudy or unappealing. But it\u2019s also rather popular among Verge readers and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1731150-Blog-Magazine-Featured-Posts-Layout\">other designers<\/a> are mimicking this style.<\/p>\n<p>But colors and fancy techniques aren\u2019t the only factor to consider. Grids and thumbnail sizes also have to be chosen carefully as they help to define the overall featured posts widget style.<\/p>\n<p>Perhaps one of the best example is <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mashable.com\/\">Mashable\u2019s design<\/a> which has gone through many phases over the years. Now considered a mainstream source for news, Mashable works to cram a large number of posts onto the homepage for easy browsing.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mashable.com\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/06-mashable-homepage-2015-layout.jpg\" alt=\"mashable featured posts\"><\/a><\/p>\n<p>Some posts use small square thumbnails while their main leaderboard fixes a large fullsize thumbnail banner to the article. This must require extra work from the editor to ensure that all posts have their appropriate photos at the correct sizes.<\/p>\n<p>But right after landing on the site you\u2019ll notice that it <strong>gives off a sense of credibility<\/strong>. This style feels very mainstream and can be used by almost any type of online magazine to build trust with the readerbase. The only problem is writing enough content to fill up the page!<\/p>\n<h2>Multi-Post Widgets<\/h2>\n<p>Some featured post widgets display articles in a <strong>static grid<\/strong>. This is often the most popular choice because it can be <strong>made responsive and blends nicely<\/strong> into any layout.<\/p>\n<p>Other widgets rely on dynamic interactions like a slideshow. Take for example the homepage of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.vanityfair.com\/\">Vanity Fair<\/a> with their featured post block at the top of the page. Only one post is shown at a time but new articles display when hovering over a particular headline.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.vanityfair.com\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/07-vanity-fair-magazine-website-layout.jpg\" alt=\"vanity fair magazine\"><\/a><\/figure>\n<p>Both the thumbnail and title auto-update with a simple hover interaction. One thing to note is this can be very confusing for Internet users who aren\u2019t familiar with this dynamic hover technique.<\/p>\n<p>But on the positive side this technique will <strong>save space<\/strong> on the page by hiding excess content.<\/p>\n<p>Try not to think of featured post widgets as black-and-white. They are just page sections used to feature the most interesting or popular articles. The technique(s) by which you accomplish this task can always be open for debate.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.complex.com\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/08-complex-magazine-featured-content-widget.jpg\" alt=\"complex magazine featured posts\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.complex.com\/\">Complex magazine<\/a> uses a full slideshow display for their featured widget. Each post has a featured thumbnail along with the bottom gradient for typographic contrast.<\/p>\n<p>But instead of placing each thumbnail side-by-side, the articles <strong>stream dynamically<\/strong> through a slideshow box. Navigation can be set automatically or controlled by arrow links. This design saves a lot of space and keeps the user more willing to interact with the page.<\/p>\n<h2>Wrap Up<\/h2>\n<p>There is no right or wrong design when it comes to featured post displays. They all share many similar traits but each magazine uses their own style for organizing featured content.<\/p>\n<p>I hope this post offers practical tips to use when designing your own featured posts widget. If you ever feel stuck just look to other magazines for inspiration. Find traits that you like and figure out how to replicate them to blend into your own magazine design.<\/p>\n<p><strong>Note:<\/strong> This post was first published on the Jan 6, 2016.<\/p>","protected":false},"excerpt":{"rendered":"<p>Running a successful online magazine requires a solid audience and lots of high-quality writing. But the magazine\u2019s layout also plays a crucial factor in visitor engagement. One technique is to create a featured posts widget at the top of the homepage. This showcases the most recently popular articles to ideally drive readers further into the&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[352],"tags":[3022],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Feature Post Widgets: Brilliant Ideas &amp; Trends - Hongkiat<\/title>\n<meta name=\"description\" content=\"Running a successful online magazine requires a solid audience and lots of high-quality writing. But the magazine&#039;s layout also plays a crucial factor in\" \/>\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.hongkiat.com\/blog\/feature-posts-widgets\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Feature Post Widgets: Brilliant Ideas &amp; Trends\" \/>\n<meta property=\"og:description\" content=\"Running a successful online magazine requires a solid audience and lots of high-quality writing. But the magazine&#039;s layout also plays a crucial factor in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-06T15:01:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-14T14:28:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/01-the-next-web-featured-posts.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Feature Post Widgets: Brilliant Ideas &#038; Trends\",\"datePublished\":\"2016-01-06T15:01:15+00:00\",\"dateModified\":\"2024-05-14T14:28:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/\"},\"wordCount\":1216,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/feature-posts-widgets\\\/01-the-next-web-featured-posts.jpg\",\"keywords\":[\"Blogging Tips\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/\",\"name\":\"Feature Post Widgets: Brilliant Ideas & Trends - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/feature-posts-widgets\\\/01-the-next-web-featured-posts.jpg\",\"datePublished\":\"2016-01-06T15:01:15+00:00\",\"dateModified\":\"2024-05-14T14:28:53+00:00\",\"description\":\"Running a successful online magazine requires a solid audience and lots of high-quality writing. But the magazine's layout also plays a crucial factor in\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/feature-posts-widgets\\\/01-the-next-web-featured-posts.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/feature-posts-widgets\\\/01-the-next-web-featured-posts.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/feature-posts-widgets\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Feature Post Widgets: Brilliant Ideas &#038; Trends\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Feature Post Widgets: Brilliant Ideas & Trends - Hongkiat","description":"Running a successful online magazine requires a solid audience and lots of high-quality writing. But the magazine's layout also plays a crucial factor in","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.hongkiat.com\/blog\/feature-posts-widgets\/","og_locale":"en_US","og_type":"article","og_title":"Feature Post Widgets: Brilliant Ideas & Trends","og_description":"Running a successful online magazine requires a solid audience and lots of high-quality writing. But the magazine's layout also plays a crucial factor in","og_url":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-01-06T15:01:15+00:00","article_modified_time":"2024-05-14T14:28:53+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/01-the-next-web-featured-posts.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Feature Post Widgets: Brilliant Ideas &#038; Trends","datePublished":"2016-01-06T15:01:15+00:00","dateModified":"2024-05-14T14:28:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/"},"wordCount":1216,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/01-the-next-web-featured-posts.jpg","keywords":["Blogging Tips"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/","url":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/","name":"Feature Post Widgets: Brilliant Ideas & Trends - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/01-the-next-web-featured-posts.jpg","datePublished":"2016-01-06T15:01:15+00:00","dateModified":"2024-05-14T14:28:53+00:00","description":"Running a successful online magazine requires a solid audience and lots of high-quality writing. But the magazine's layout also plays a crucial factor in","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/01-the-next-web-featured-posts.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/feature-posts-widgets\/01-the-next-web-featured-posts.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/feature-posts-widgets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Feature Post Widgets: Brilliant Ideas &#038; Trends"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Ck","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25440"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25440\/revisions"}],"predecessor-version":[{"id":71875,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25440\/revisions\/71875"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25440"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}