{"id":37974,"date":"2024-09-11T16:11:14","date_gmt":"2024-09-11T20:11:14","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=37974"},"modified":"2026-08-06T18:04:31","modified_gmt":"2026-08-06T22:04:31","slug":"creating-effective-landing-pages","status":"publish","type":"page","link":"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/landing-page-builder\/creating-effective-landing-pages\/","title":{"rendered":"Creating Effective Landing Pages"},"content":{"rendered":"\n\n\n\n\n<h2 class=\"wp-block-heading\">Examples<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We&#8217;ve built four landing pages and one &#8220;thank you&#8221; page to showcase different features and options available in the Landing Page Builder. These example pages showcase page design and content strategy tailored to achieve specific marketing goals. This guide will reference these example pages to highlight how to effectively use the Landing Page Builder to create visually compelling, conversion-focused pages that resonate with your audience.<\/p>\n\n\n<div class=\"ncst-labeled-section wp-block-ncst-featured-content ncst-featured-content is-card-style layout-three-column\">\n  <div class=\"ncst-labeled-section__background\">\n    <div class=\"ncst-labeled-section__container\">\n             <div class=\"ncst-labeled-section__content\">\n        \n<div class=\"wp-block-ncst-featured-content\"><a\n    class=\"ncst-content-card wp-block-ncst-content-card with-image\"\n    href=\"https:\/\/thinkanddo.ncsu.edu\/discover\/v2\/example-one-split-header\/\"\n  >\n  \n          <div class=\"content-card__image-container\">\n        <div class=\"content-card__image-background\">\n          <img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"844\"\n            class=\"content-card__image wp-image-39988\"\n            alt=\"Splitbox header with an image on one side and a red box containing header and subtitle text on the other, with a heading and paragraph below\"\n            src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-split.png\"\n            style=\"aspect-ratio: 16\/9; object-fit: cover; object-position: 47% 4%\"\n srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-split.png 1500w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-split-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-split-1024x576.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-split-768x432.png 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/>\n        <\/div>\n      <\/div>\n    \n    <div class=\"content-card__text-container\">\n      \n                        <h3 class=\"content-card__headline\">Page With Split Header<\/h3>\n              \n\n              \n\t      \t        <p class=\"content-card__teaser\"><span class=\"text\">This page showcases a split header design that grabs attention with a bold introduction and clear call-to-action.<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-light\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-light\">\n\t\t<\/svg><\/span><\/p>\n\t      \t    \n          <\/div>\n\n  <\/a>\n\n\n<a\n    class=\"ncst-content-card wp-block-ncst-content-card with-image\"\n    href=\"https:\/\/thinkanddo.ncsu.edu\/discover\/v2\/example-two-floating-box-header\/\"\n  >\n  \n          <div class=\"content-card__image-container\">\n        <div class=\"content-card__image-background\">\n          <img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"844\"\n            class=\"content-card__image wp-image-39989\"\n            alt=\"A floating box header with an image in the background and a floated redbox over the image with the header and subtitle text.\"\n            src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-floating-box.png\"\n            style=\"aspect-ratio: 16\/9; object-fit: cover; \"\n srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-floating-box.png 1500w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-floating-box-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-floating-box-1024x576.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-floating-box-768x432.png 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/>\n        <\/div>\n      <\/div>\n    \n    <div class=\"content-card__text-container\">\n      \n                        <h3 class=\"content-card__headline\">Page With Floating Box Header<\/h3>\n              \n\n              \n\t      \t        <p class=\"content-card__teaser\"><span class=\"text\">This page features a floating box header that lets you showcase a bold, impactful image alongside your key message.<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-light\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-light\">\n\t\t<\/svg><\/span><\/p>\n\t      \t    \n          <\/div>\n\n  <\/a>\n\n\n<a\n    class=\"ncst-content-card wp-block-ncst-content-card with-image\"\n    href=\"https:\/\/thinkanddo.ncsu.edu\/discover\/v2\/example-three-simple-header\/\"\n  >\n  \n          <div class=\"content-card__image-container\">\n        <div class=\"content-card__image-background\">\n          <img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"844\"\n            class=\"content-card__image wp-image-39987\"\n            alt=\"Example of a default header with a subtitle, heading and paragraph text.\"\n            src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-default.png\"\n            style=\"aspect-ratio: 16\/9; object-fit: cover; \"\n srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-default.png 1500w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-default-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-default-1024x576.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/07\/page-header-option-default-768x432.png 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/>\n        <\/div>\n      <\/div>\n    \n    <div class=\"content-card__text-container\">\n      \n                        <h3 class=\"content-card__headline\">Page With Simple Header<\/h3>\n              \n\n              \n\t      \t        <p class=\"content-card__teaser\"><span class=\"text\">This page demonstrates a simple header layout that focuses on clarity and directs users straight to your main call-to-action.<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-light\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-light\">\n\t\t<\/svg><\/span><\/p>\n\t      \t    \n          <\/div>\n\n  <\/a>\n\n\n<a\n    class=\"ncst-content-card wp-block-ncst-content-card\"\n    href=\"https:\/\/thinkanddo.ncsu.edu\/discover\/v2\/example-four-quiz\/\"\n  >\n  \n    \n    <div class=\"content-card__text-container\">\n      \n                        <h3 class=\"content-card__headline\">Page Featuring Quiz<\/h3>\n              \n\n              \n\t      \t        <p class=\"content-card__teaser\"><span class=\"text\">This page features a quiz plugin that allows you to engage users with a series of questions, making the experience more interactive.<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-light\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-light\">\n\t\t<\/svg><\/span><\/p>\n\t      \t    \n          <\/div>\n\n  <\/a>\n\n\n<a\n    class=\"ncst-content-card wp-block-ncst-content-card\"\n    href=\"https:\/\/thinkanddo.ncsu.edu\/discover\/v2\/thank-you-default\/\"\n  >\n  \n    \n    <div class=\"content-card__text-container\">\n      \n                        <h3 class=\"content-card__headline\">Thank You Page<\/h3>\n              \n\n              \n\t      \t        <p class=\"content-card__teaser\"><span class=\"text\">This page is designed as a &#8216;thank you&#8217; page to redirect visitors to after they&#8217;ve complete a lead generation form.<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-light\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-light\">\n\t\t<\/svg><\/span><\/p>\n\t      \t    \n          <\/div>\n\n  <\/a>\n<\/div>\n\n              <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Choosing a Header Style<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The examples above showcase three distinct header styles available in the Landing Page Builder. You&#8217;ll notice there&#8217;s no navigation or utility bar like on other NC State web properties \u2014 this is intentional, designed to keep visitors focused on the page and maximize conversion rates. The three header styles include the <strong>Split Header<\/strong>, which features a bold, dual-section layout that immediately draws attention to your key message and call-to-action; the <strong>Floating Box Header<\/strong>, which pairs an impactful image with a prominent message; and the <strong>Simple Header<\/strong>, which uses a minimalist design to keep the focus on your primary goal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Split Header is ideal when you want to highlight both a bold message and a clear call-to-action, making it effective for capturing immediate attention and directing users toward a specific action right from the start. The Floating Box Header is ideal when you want to combine a striking image with your key message, making it effective for visually-driven campaigns. On the other hand, the Simple Header is best for a minimalist approach, focusing solely on a straightforward message and call-to-action, ensuring that users remain focused on your primary goal without distractions. Ultimately, the choice of which header style to use depends on the goals and desired outcomes of your campaign. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can choose your desired header style in the sidebar within the page editor: <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Optimizing Calls to Action<\/h2>\n\n\n<div class=\"ncst-fancy-paragraph-fifty is-text wp-block-ncst-fancy-paragraph\">\n      \n<div class=\"text-only wp-block-ncst-fp-accompaniment\">\n    \n\n<p class=\"wp-block-paragraph\">When designing a landing page, the placement of your calls to action (CTAs) is crucial for maximizing engagement and conversions. To ensure your CTAs are effective, place key elements related to the desired conversion action (like buttons and lead generation forms) towards the top of the page, where they are immediately visible to users. Most visitors don&#8217;t scroll all the way to the bottom, so positioning CTAs early on increases the likelihood of interaction. Utilize the <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/floated-gravity-form\/\">Floated Gravity Form block<\/a> to position lead generation forms high up on the page near your introductory copy. This can be paired with the <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/sticky-form\/\">Sticky Form<\/a> to ensure that the lead generation form follows the user as they scroll down the page. Additionally, make sure your CTAs stand out visually and clearly communicate the action you want users to take.<br><br>Page performance metrics and analytics data are essential for making informed decisions about layout, content, and CTA copy that drives conversions. We recommend using A\/B testing software throughout your campaign to test page variations and determine what works best. Make sure to regularly review the analytics data available to you, as it can reveal insights that help optimize your landing pages for better performance. View our page on <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/landing-page-builder\/analytics-and-optimization\/\">Analytics and Optimization<\/a> for more.<\/p>\n\n\n  <\/div>\n\n\n<div class=\"wp-block-ncst-fp-accompaniment\">\n    \n<aside class=\"floated-spotlight-aside-container\">\n  <div class=\"floated-spotlight-contents\">\n    <a\n    class=\"ncst-content-card wp-block-ncst-fp-spotlight-card has-custombg-two-background-color with-cta\"\n    href=\"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/landing-page-builder\/creating-optimized-forms\/\"\n  >\n  \n    \n    <div class=\"content-card__text-container\">\n      \n                        <h3 class=\"content-card__headline\">Creating Optimized Forms<\/h3>\n              \n\n              \n\t      \t        <p class=\"content-card__teaser\"><span class=\"text\">Lead generation is a common goal of pages built in the Landing Page Builder. For tips and tricks on creating optimized forms that drive conversions, visit our guide on Creating Optimized Forms.<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-light\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-light\">\n\t\t<\/svg><\/span><\/p>\n\t      \t    \n          <\/div>\n\n  <\/a>\n  <\/div>\n<\/aside>\n\n\n  <\/div>\n\n\n    <\/div>\n  \n\n\n\n<h2 class=\"wp-block-heading\">Enhancing Landing Page Content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Landing Page Builder offers a variety of <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/blocks\/?resource-category=landing-page-builder\">Gutenberg Blocks<\/a> that allow you to enhance your page with pull quotes, factoids, and links to additional information. These elements can be strategically placed to support your primary message and reinforce your call-to-action without detracting from the main conversion goals. Use pull quotes and factoids to emphasize key points, and include additional links where appropriate, ensuring they complement rather than distract from the user\u2019s journey toward conversion. View the examples above for ideas on how to effectively incorporate these Gutenberg Blocks into your landing page design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Examples We&#8217;ve built four landing pages and one &#8220;thank you&#8221; page to showcase different features and options available in the Landing Page Builder. These example pages showcase page design and content strategy tailored to achieve specific marketing goals. This guide will reference these example pages to highlight how to effectively use the Landing Page Builder&hellip;<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":37972,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Creating an effective landing page is essential for driving conversions and achieving your digital marketing goals. The Landing Page Builder is designed to enable communicators to quickly create focused, high-impact pages tailored to specific campaigns. Follow these recommended best practices and examples to help you build landing pages that resonate with your audience.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-37974","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/37974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=37974"}],"version-history":[{"count":8,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/37974\/revisions"}],"predecessor-version":[{"id":40138,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/37974\/revisions\/40138"}],"up":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/37972"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=37974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}