{"id":3458,"date":"2026-02-19T07:38:22","date_gmt":"2026-02-19T07:38:22","guid":{"rendered":"https:\/\/www.uxtweak.com\/help\/?page_id=3458"},"modified":"2026-02-19T07:38:22","modified_gmt":"2026-02-19T07:38:22","slug":"page-hero","status":"publish","type":"page","link":"https:\/\/www.uxtweak.com\/help\/page-hero\/","title":{"rendered":"Page Hero"},"content":{"rendered":"\n<p class=\"text-block\">The page hero sits at the top of the Insight content and introduces the Insight with its title, optional cover image, and collaborator information. It contains the page title, an optional cover image, collaborator information, and a visual divider.<\/p>\n\n\n<h2 id=\"page-title\" class=\"heading-block\" tabindex=\"0\">Page Title<a class=\"copy-link\" title=\"Copy link\" data-id=\"page-title\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">At the top of the content area, the page title is editable inline. This title is separate from the header title, but both stay in sync so that editors can rename the Insight from either location.<\/p>\n\n\n\n<p class=\"text-block\">Editing works inline: click the title and start typing to update it. Changes are synced automatically.<\/p>\n\n\n<h2 id=\"cover-image\" class=\"heading-block\" tabindex=\"0\">Cover Image<a class=\"copy-link\" title=\"Copy link\" data-id=\"cover-image\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">Below the title, you can optionally add a cover image using the <strong>Add cover<\/strong> button.<\/p>\n\n\n\n<p class=\"text-block\">Adding a cover image gives the Insight a visual identity. Covers are optional and do not affect document structure.<\/p>\n\n\n<h2 id=\"cover-actions\" class=\"heading-block\" tabindex=\"0\">Cover Actions<a class=\"copy-link\" title=\"Copy link\" data-id=\"cover-actions\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">When you hover over the cover area, an action icon appears. Clicking the icon opens a dropdown with two options:<\/p>\n\n\n\n<ul class=\"bullet-list\">\n<li><strong>Change cover photo<\/strong><\/li>\n\n\n\n<li><strong>Remove cover<\/strong><\/li>\n<\/ul>\n\n\n<h2 id=\"collaborators\" class=\"heading-block\" tabindex=\"0\">Collaborators<a class=\"copy-link\" title=\"Copy link\" data-id=\"collaborators\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">Below the title (or cover, if present), collaborator avatars are shown along with names.<\/p>\n\n\n\n<p class=\"text-block\">Hovering a collaborator reveals additional details such as:<\/p>\n\n\n\n<ul class=\"bullet-list\">\n<li>Name<\/li>\n\n\n\n<li>Team role<\/li>\n\n\n\n<li>Email<\/li>\n<\/ul>\n\n\n\n<p class=\"text-block\">This helps clarify who contributed to the Insight and how they relate to the project.<\/p>\n\n\n\n<div class=\"image-block\">    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2026\/01\/hero-1.png\" alt=\"Page hero without cover\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Page hero without cover<\/h4>\n                                                    <p>The page hero shows the Insight title and collaborators and separates the header from the main content.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    \n\n    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2026\/01\/hero-image.png\" alt=\"Page hero with cover image\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Page hero with cover image<\/h4>\n                                                    <p>You can add a cover image to give the Insight a visual identity without affecting its structure.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    \n\n    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2026\/01\/hero-image-options.png\" alt=\"Cover image actions\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Cover image actions<\/h4>\n                                                    <p>When you hover over the cover image, you can change or remove the cover using the action menu.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>The page hero sits at the top of the Insight content and introduces the Insight with its title, optional cover image, and collaborator information. It contains the page title, an optional cover image, collaborator information, and a visual divider. At the top of the content area, the page title is editable inline. This title is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[37],"tags":[],"class_list":["post-3458","page","type-page","status-publish","hentry","category-insight-editor"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/3458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/comments?post=3458"}],"version-history":[{"count":5,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/3458\/revisions"}],"predecessor-version":[{"id":3538,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/3458\/revisions\/3538"}],"wp:attachment":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/media?parent=3458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/categories?post=3458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/tags?post=3458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}