[{"data":1,"prerenderedAt":438},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fcampaigns\u002Flanding-page":3},{"id":4,"title":5,"body":6,"category":421,"description":422,"extension":423,"keywords":424,"meta":428,"navigation":429,"order":430,"path":431,"published":432,"rawbody":433,"seo":434,"stem":435,"updated":436,"__hash__":437},"help\u002Fhelp\u002Fcampaigns\u002Flanding-page.md","Design a landing page: set up the page around the design generator",{"type":7,"value":8,"toc":413},"minimark",[9,30,33,54,59,137,141,144,232,238,242,252,322,335,339,342,374,383],[10,11,12,13,17,18,22,23,25,26,29],"p",{},"In the ",[14,15,16],"strong",{},"Landing Page"," step of a web campaign, you build a page around your ",[19,20,21],"place",{},"design generator",": with a header, a background and a title. This way the page matches your brand before users fill in a template. What the ",[19,24,21],{}," itself looks like is set under ",[14,27,28],{},"Generator Theme",".",[10,31,32],{},"This takes four steps:",[34,35,36,43,46,51],"ol",{},[37,38,39,40,42],"li",{},"Add the landing page in the ",[14,41,16],{}," step.",[37,44,45],{},"Design the header.",[37,47,48,49,29],{},"Design the background and title around the ",[19,50,21],{},[37,52,53],{},"Test the page on a phone.",[55,56,58],"h2",{"id":57},"add-the-landing-page","Add the landing page",[34,60,61,72,80,98],{},[37,62,63,67,68,71],{},[64,65,66],"click",{},"Click"," ",[14,69,70],{},"Campaigns"," in the Studio navigation. The overview of your campaigns opens.",[37,73,74,76,77,42],{},[64,75,66],{}," your web campaign. It opens at the ",[14,78,79],{},"Templates",[37,81,82,84,85,87,88,90,91],{},[64,83,66],{}," the ",[14,86,16],{}," step at the top. The settings are on the left, a preview of your ",[19,89,21],{}," is on the right.",[92,93,95],"trouble",{"symptom":94},"The Landing Page step is missing?",[10,96,97],{},"Only web campaigns have a landing page. Widget and team campaigns don't have this step. Create a web campaign for a landing page.",[37,99,100,67,102,105,106,108,109,129,132],{},[64,101,66],{},[14,103,104],{},"Add landing page",". The landing page is now added. In the preview, a sample title and subtitle sit above the ",[19,107,21],{},", on a white background.",[92,110,112],{"symptom":111},"The preview only shows Widget has no URL?",[10,113,114,115,118,119,122,123,67,125,128],{},"The campaign is offline, for example after ",[14,116,117],{},"Delete URL"," in the ",[14,120,121],{},"Share"," step. ",[64,124,66],{},[14,126,127],{},"Create URL"," in the preview. The campaign is then online again and the preview appears.",[130,131],"br",{},[133,134],"img",{"alt":135,"src":136},"Landing Page step: header and body section on the left, the preview of the page on the right.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-web-campaigns-02\u002Fpublic",[55,138,140],{"id":139},"design-the-header","Design the header",[10,142,143],{},"The header is a strip at the very top of the page. You don't need it if the background and title are enough.",[34,145,146,158,193],{},[37,147,148,67,150,153,154,157],{},[64,149,66],{},[14,151,152],{},"Add header section"," under ",[14,155,156],{},"Header Section",". The header is now added and appears at the top of the preview, with a sample title on a dark background.",[37,159,160,164,165],{},[161,162,163],"type",{},"Enter"," the content of the header:",[166,167,168,182],"ul",{},[37,169,170,173,174,177,178,181],{},[171,172],"right",{}," For a title: ",[161,175,176],{},"Replace"," the sample title under ",[14,179,180],{},"Title"," with your text.",[37,183,184,186,187,67,189,192],{},[171,185],{}," For your own HTML: ",[64,188,66],{},[14,190,191],{},"Custom HTML"," and enter your HTML. It replaces the title.",[37,194,195,198,199,202,203],{},[64,196,197],{},"Choose"," the background of the header under ",[14,200,201],{},"Background",":",[166,204,205,213],{},[37,206,207,209,210,212],{},[171,208],{}," For a color: ",[64,211,66],{}," the round color swatch and pick a color. The text turns black or white automatically, so it stays readable on the color.",[37,214,215,217,218,67,220,223,224,227,228,231],{},[171,216],{}," For an image: ",[64,219,66],{},[14,221,222],{},"Upload Image",". In the ",[14,225,226],{},"Image Library"," popup, pick an image or upload a new one with ",[14,229,230],{},"Upload",". An image in 16:3 fits best, for example 1920 × 360 pixels.",[10,233,234,237],{},[14,235,236],{},"Remove header section"," removes the header again, with all its settings.",[55,239,241],{"id":240},"design-the-background-and-title","Design the background and title",[10,243,244,245,248,249,251],{},"Under ",[14,246,247],{},"Body Section"," you design the area the ",[19,250,21],{}," sits in.",[34,253,254,282,315],{},[37,255,256,258,259,261,262,202,264],{},[64,257,197],{}," the background of the page under ",[14,260,201],{}," in ",[14,263,247],{},[166,265,266,273],{},[37,267,268,209,270,272],{},[171,269],{},[64,271,66],{}," the round color swatch and pick a color. The text turns black or white automatically.",[37,274,275,217,277,67,279,281],{},[171,276],{},[64,278,66],{},[14,280,222],{}," and pick an image. An image in 16:9 fits best, for example 1920 × 1080 pixels.",[37,283,284,286,287,202,289],{},[161,285,163],{}," the text above the ",[19,288,21],{},[166,290,291,306],{},[37,292,293,295,296,298,299,301,302,305],{},[171,294],{}," For a title and subtitle: ",[161,297,176],{}," the sample texts under ",[14,300,180],{}," and ",[14,303,304],{},"Subtitle"," with your texts.",[37,307,308,186,310,67,312,314],{},[171,309],{},[64,311,66],{},[14,313,191],{}," and enter your HTML. It replaces the title and subtitle.",[37,316,317,321],{},[318,319,320],"look",{},"Look"," at the preview on the right and check that all texts are easy to read on their background.",[323,324,325],"tip",{},[10,326,327,328,153,331,334],{},"For more control over the texts, tick ",[14,329,330],{},"Advanced text styling",[14,332,333],{},"Text Styling",". Every title and subtitle then gets settings for color, font, style and alignment.",[55,336,338],{"id":337},"test-the-page-on-a-phone","Test the page on a phone",[10,340,341],{},"The preview only shows the page the way it looks on your computer. To see it the way users see it on a phone, test it on a real phone.",[34,343,344,354,362,368],{},[37,345,346,84,348,350,351,29],{},[64,347,66],{},[14,349,121],{}," step at the top. Your campaign's link is under ",[14,352,353],{},"Sharing URL",[37,355,356,67,358,361],{},[64,357,66],{},[14,359,360],{},"Copy URL",". The message \"Copied to clipboard\" appears. The link is now on your clipboard.",[37,363,364,367],{},[64,365,366],{},"Open"," the link on your phone, for example by sending it to yourself in a message. The landing page opens.",[37,369,370,373],{},[318,371,372],{},"Check"," that the header, title and background look good and all texts are readable.",[10,375,376,153,379,382],{},[14,377,378],{},"Remove landing page",[14,380,381],{},"Advanced"," removes the landing page again. Bluepic doesn't ask first and deletes all its settings.",[384,385,386],"related",{},[166,387,388,395,401,407],{},[37,389,390],{},[391,392,394],"a",{"href":393},"\u002Fhelp\u002Fcampaigns\u002Fcreate-campaign","Create a campaign: share several templates in one design generator",[37,396,397],{},[391,398,400],{"href":399},"\u002Fhelp\u002Fcampaigns\u002Fgenerator-theme","Generator Theme settings",[37,402,403],{},[391,404,406],{"href":405},"\u002Fhelp\u002Fcampaigns\u002Fbrand-portal-assets","Set up a brand portal: offer files for download in a campaign",[37,408,409],{},[391,410,412],{"href":411},"\u002Fhelp\u002Fcampaigns\u002Fcustom-domains","Use a custom domain",{"title":414,"searchDepth":415,"depth":415,"links":416},"",2,[417,418,419,420],{"id":57,"depth":415,"text":58},{"id":139,"depth":415,"text":140},{"id":240,"depth":415,"text":241},{"id":337,"depth":415,"text":338},"campaigns","Give the design generator of your web campaign a header, a background and a title, and test the page on a phone.","md",[16,104,156,152,247,333,330,191,425,426,427,21,378],"background","header","web campaign",{},true,20,"\u002Fhelp\u002Fcampaigns\u002Flanding-page","2026-10-13","---\ntitle: \"Design a landing page: set up the page around the design generator\"\ndescription: \"Give the design generator of your web campaign a header, a background and a title, and test the page on a phone.\"\ncategory: campaigns\norder: 20\nkeywords: [\"Landing Page\", \"Add landing page\", \"Header Section\", \"Add header section\", \"Body Section\", \"Text Styling\", \"Advanced text styling\", \"Custom HTML\", \"background\", \"header\", \"web campaign\", \"design generator\", \"Remove landing page\"]\n---\n\nIn the **Landing Page** step of a web campaign, you build a page around your :place[design generator]: with a header, a background and a title. This way the page matches your brand before users fill in a template. What the :place[design generator] itself looks like is set under **Generator Theme**.\n\nThis takes four steps:\n\n1. Add the landing page in the **Landing Page** step.\n2. Design the header.\n3. Design the background and title around the :place[design generator].\n4. Test the page on a phone.\n\n\n## Add the landing page\n\n1. :click[Click] **Campaigns** in the Studio navigation. The overview of your campaigns opens.\n2. :click[Click] your web campaign. It opens at the **Templates** step.\n3. :click[Click] the **Landing Page** step at the top. The settings are on the left, a preview of your :place[design generator] is on the right.\n\n   ::trouble{symptom=\"The Landing Page step is missing?\"}\n   Only web campaigns have a landing page. Widget and team campaigns don't have this step. Create a web campaign for a landing page.\n   ::\n\n4. :click[Click] **Add landing page**. The landing page is now added. In the preview, a sample title and subtitle sit above the :place[design generator], on a white background.\n\n   ::trouble{symptom=\"The preview only shows Widget has no URL?\"}\n   The campaign is offline, for example after **Delete URL** in the **Share** step. :click[Click] **Create URL** in the preview. The campaign is then online again and the preview appears.\n   ::\n\n   ![Landing Page step: header and body section on the left, the preview of the page on the right.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-web-campaigns-02\u002Fpublic)\n\n## Design the header\n\nThe header is a strip at the very top of the page. You don't need it if the background and title are enough.\n\n1. :click[Click] **Add header section** under **Header Section**. The header is now added and appears at the top of the preview, with a sample title on a dark background.\n2. :type[Enter] the content of the header:\n\n   - :right For a title: :type[Replace] the sample title under **Title** with your text.\n   - :right For your own HTML: :click[Click] **Custom HTML** and enter your HTML. It replaces the title.\n\n3. :click[Choose] the background of the header under **Background**:\n\n   - :right For a color: :click[Click] the round color swatch and pick a color. The text turns black or white automatically, so it stays readable on the color.\n   - :right For an image: :click[Click] **Upload Image**. In the **Image Library** popup, pick an image or upload a new one with **Upload**. An image in 16:3 fits best, for example 1920 × 360 pixels.\n\n**Remove header section** removes the header again, with all its settings.\n\n## Design the background and title\n\nUnder **Body Section** you design the area the :place[design generator] sits in.\n\n1. :click[Choose] the background of the page under **Background** in **Body Section**:\n\n   - :right For a color: :click[Click] the round color swatch and pick a color. The text turns black or white automatically.\n   - :right For an image: :click[Click] **Upload Image** and pick an image. An image in 16:9 fits best, for example 1920 × 1080 pixels.\n\n2. :type[Enter] the text above the :place[design generator]:\n\n   - :right For a title and subtitle: :type[Replace] the sample texts under **Title** and **Subtitle** with your texts.\n   - :right For your own HTML: :click[Click] **Custom HTML** and enter your HTML. It replaces the title and subtitle.\n\n3. :look[Look] at the preview on the right and check that all texts are easy to read on their background.\n\n::tip\nFor more control over the texts, tick **Advanced text styling** under **Text Styling**. Every title and subtitle then gets settings for color, font, style and alignment.\n::\n\n## Test the page on a phone\n\nThe preview only shows the page the way it looks on your computer. To see it the way users see it on a phone, test it on a real phone.\n\n1. :click[Click] the **Share** step at the top. Your campaign's link is under **Sharing URL**.\n2. :click[Click] **Copy URL**. The message \"Copied to clipboard\" appears. The link is now on your clipboard.\n3. :click[Open] the link on your phone, for example by sending it to yourself in a message. The landing page opens.\n4. :look[Check] that the header, title and background look good and all texts are readable.\n\n**Remove landing page** under **Advanced** removes the landing page again. Bluepic doesn't ask first and deletes all its settings.\n\n::related\n- [Create a campaign: share several templates in one design generator](\u002Fhelp\u002Fcampaigns\u002Fcreate-campaign)\n- [Generator Theme settings](\u002Fhelp\u002Fcampaigns\u002Fgenerator-theme)\n- [Set up a brand portal: offer files for download in a campaign](\u002Fhelp\u002Fcampaigns\u002Fbrand-portal-assets)\n- [Use a custom domain](\u002Fhelp\u002Fcampaigns\u002Fcustom-domains)\n::\n",{"title":5,"description":422},"help\u002Fcampaigns\u002Flanding-page","2026-10-22","7yn6Hktk4nQ9IxBwBRUOB7CeV23qU54wDCuojJ4mNwg",1792680561678]