[{"data":1,"prerenderedAt":165},["ShallowReactive",2],{"ls-connection":3,"support-article-design-cover-and-media":5},{"connected":4},false,{"article":6,"related":34,"neighbors":114,"alternates":159},{"feature":7,"category":8,"locale":9,"slug":10,"title":11,"lede":12,"purpose":13,"steps":15,"notes":28,"generatedFrom":32,"updated":33},"cover-media","design","en","cover-and-media","Choose a cover image and reposition it","Add a cover from your library or free Pexels media, then set its focal point.",[14],"The cover is the full-width image at the top of the page. It also doubles as the preview when the page is shared on social media. You pick it from your library or from Pexels' free media, and you decide which part of the image stays visible once it is cropped.",[16,19,22,25],{"text":17,"image":18},"On step 3 · Design, click the hero (or a Cover section) in the preview: its settings panel opens on the right.","\u002Fsupport\u002Fcover-media\u002Fen\u002Fstep-1.webp",{"text":20,"image":21},"Under “Cover”, stay on the “Library” tab to choose a saved asset, or use the “+” tile to import a new one.","\u002Fsupport\u002Fcover-media\u002Fen\u002Fstep-2.webp",{"text":23,"image":24},"Switch to the “Stock” tab to search free Pexels photos and videos: filter by media type, orientation and color, then click a result to apply it.","\u002Fsupport\u002Fcover-media\u002Fen\u002Fstep-3.webp",{"text":26,"image":27},"Once a cover is chosen, use “Cover position” just below: drag the handle up or down to set the crop, or click “Reset to center”. You can also drag the handle right on the cover in the preview.","\u002Fsupport\u002Fcover-media\u002Fen\u002Fstep-4.webp",[29,30,31],"The cover is also the share image (preview on social networks and search engines), favor a sharp, well-framed image.","The crop is vertical only: the cover is a wide band, so the handle sets the visible height (horizontal stays centered).","Pexels media is re-hosted automatically and credited to Pexels; a video cover loops muted.","SectionPropertyEditor.vue · MediaSourcePicker.vue · StockMediaPicker.vue · CoverPositionPicker.vue \u002F CoverRepositionGrip.vue · i18n stockPhotos.* \u002F wizard.editor.coverPosition*","September 9, 2026",[35,54,73],{"feature":36,"category":8,"locale":9,"slug":37,"title":38,"lede":39,"purpose":40,"steps":42,"notes":50,"updated":33},"design-chooser","choose-a-design","Choose a starting design","Start from a template, a blank page, or let AI create the design.",[41],"The Design step lets you choose your starting point. The imported event content and fields are applied automatically whatever you choose, only the design changes.",[43,46],{"text":44,"image":45},"On step 3 · Design, click “Change design” at the bottom of the editor to reopen the starting-point picker.","\u002Fsupport\u002Fdesign-chooser\u002Fen\u002Fstep-1.webp",{"text":47,"image":48,"caption":49},"Choose from four options: a template (a Starter or one of your own), a blank page to build section by section, or an AI generation, as editable sections, or a full-page design.","\u002Fsupport\u002Fdesign-chooser\u002Fen\u002Fstep-2.webp","“AI, full design” produces a page you can't edit section by section; “AI, editable sections” stays adjustable.",[51,52,53],"You can change the design at any time while the page is unpublished. The imported content carries over.","The “Use a template” option is detailed in the “Use a template” guide.","AI generation requires the feature to be enabled on your workspace.",{"feature":55,"category":8,"locale":9,"slug":56,"title":57,"lede":58,"purpose":59,"steps":61,"notes":68,"updated":33},"design-sections","manage-sections","Add and reorder sections","Compose the page block by block: add, reorder and remove sections.",[60],"A registration page is a stack of sections (header, form, text, media…). The right-hand panel of the Design step lets you add them, reorder by drag-and-drop, and remove them, except the registration form, which is required.",[62,65],{"text":63,"image":64},"On step 3 · Design, the right-hand panel lists the page sections. The registration form is marked “Required” and can't be removed.","\u002Fsupport\u002Fdesign-sections\u002Fen\u002Fstep-1.webp",{"text":66,"image":67},"Click “Add section” to insert a new block, then reorder the sections by dragging them in this panel.","\u002Fsupport\u002Fdesign-sections\u002Fen\u002Fstep-2.webp",[69,70,71,72],"The panel order is the display order of the published page.","Each section is edited by clicking it in the preview, titles, text and media in place.","The registration form is always present: it is the heart of a registration page.","Two sections can share one row instead of stacking. See “Put two sections side by side”.",{"feature":74,"category":8,"locale":9,"slug":75,"title":76,"lede":77,"purpose":78,"steps":82,"notes":105,"generatedFrom":112,"updated":113},"page-columns","two-column-rows","Put two sections side by side","Pair two sections into a single two-column row, by dragging them into a block in the sections list, and put as many sections as you need in one column.",[79,80,81],"A page is a stack of sections, one per row. A two-column row puts two of them side by side (a video next to a quote, a teaser next to the registration form) so a long page reads shorter without losing anything.","The row splits 50\u002F50, or 60\u002F40 and 40\u002F60 when one side needs more room, and the two columns stack back on top of each other on a narrow screen. There is nothing to design twice.","A column is not limited to one section: stack several in the same half of the row, for instance two text blocks, or a title above a video.",[83,87,89,91,93,95,97,100,103],{"text":84,"image":85,"caption":86},"On step 3 · Design, look at the sections list on the right. Click “Two columns”, beside “Add section”, to open an empty block with two column slots.","\u002Fsupport\u002Fpage-columns\u002Fen\u002Fstep-1.webp","Here, Media and the registration form already share a row.",{"text":88},"Drag a section from the list into a slot. The block travels to the first section you drop in it, so your page order does not change, only the layout does.",{"text":90},"Fill the second slot the same way: drag another section in, use “New” to pick a brand-new one, or “Move here” to take one the page already has (that menu is there for when you can't drag).",{"text":92},"Shortcut: drop a section straight onto the middle of another line in the list, and the two share that row without opening a block first.",{"text":94},"To put more than one section in the same column, use the “Add below” line at the bottom of that column: “New” creates a section there, “Move here” brings one the page already has. Dragging a section onto the middle of a line of a full block does the same thing.",{"text":96},"To move the whole row, drag the block by the grip in its header: both columns travel together. Dragging the section at the top of the left column does the same, since it carries the row along.",{"text":98,"image":99},"The header also carries two actions: swap the two columns, or split the row back into full-width sections. To take a single section out, drag it out of the block, into a gap between rows: it becomes full width again.","\u002Fsupport\u002Fpage-columns\u002Fen\u002Fstep-2.webp",{"text":101,"image":102},"When one column is shorter than the other, select the section at the top of it and set “Vertical alignment” under “Row” in its settings panel: Top, Middle (the default) or Bottom. Each column is set on its own, and the whole column moves however many sections it holds, so a short teaser can start at the top of a long agenda instead of floating in its middle.","\u002Fsupport\u002Fpage-columns\u002Fen\u002Fstep-3.webp",{"text":104},"To give one column more room, select any section of the row and pick “Column widths” under “Row”: 50\u002F50 (the default), 60\u002F40 or 40\u002F60, left column first. The row keeps its outer edges; only the share between the two columns changes.",[106,107,108,109,110,111],"Any section can be a column, the cover and the form included. Whether it reads well in half a row is your call. The preview shows it live.","A row holds two columns at most, but each of them holds as many sections as you want. Inside a column, the move arrows on the canvas reorder the sections between themselves.","The row is painted as one band: the background comes from the section at the top of the first column, so nothing else in the row shows one of its own.","A form or CTA whose own layout is split left\u002Fright renders centered while it is in a column, two split layouts nested in each other is noise.","On a narrow screen the columns stack, the left one first. That is also the order visitors on a phone and search engines read them in.","Vertical alignment only applies while the section is in a row, and it is dropped from view once the columns stack: on a phone each one is full width, so there is nothing to align against.","SectionsPanel.vue (two-column block, header drag \u002F swap \u002F split) · page-rows.ts (toRowColumns\u002FnormalizeRows) · SectionRowSplitField.vue (pairSplit) · SectionRowAlignField.vue (rowAlign) · i18n wizard.layers.* \u002F wizard.propEditor.row","October 2, 2026",{"prev":115,"next":136},{"feature":116,"category":8,"locale":9,"slug":117,"title":118,"lede":119,"purpose":120,"steps":122,"notes":131,"generatedFrom":134,"updated":135},"full-preview","full-size-preview","Preview a page at full size","See the page on the whole screen, at the size visitors read it, without leaving the Design step.",[121],"The Design canvas shares the screen with the section panel, so it shows your page narrower than it publishes. “Preview at full size” opens the same page over the whole screen and lets you scroll it top to bottom, which is the honest way to judge a design before you move on.",[123,126,129],{"text":124,"image":125},"On step 3 · Design, find the “Preview at full size” button at the top of the canvas, to the right of the device switcher.","\u002Fsupport\u002Ffull-preview\u002Fen\u002Fstep-1.webp",{"text":127,"image":128},"Click it. The page fills the screen at its real width and scrolls for its full height, exactly as a visitor’s browser of that size would show it.","\u002Fsupport\u002Ffull-preview\u002Fen\u002Fstep-2.webp",{"text":130},"Close it with the cross in the top-right corner, or Escape. You are back on the Design step, with the same section selected.",[132,133],"The preview shows the page, it does not edit it: to change something, close it and edit on the canvas.","For a wider canvas while you keep editing, the button just before it, beside the device switcher, folds the section panel away (“Hide the panel for a full-width preview”). Selecting a section on the canvas unfolds the panel again, and the choice is remembered in this browser.","design\u002FCanvasFullPreview.vue · design\u002FSectionPanelToggle.vue · PageEditor.vue · i18n wizard.editor.fullPreview* \u002F wizard.editor.hidePanel","September 23, 2026",{"feature":137,"category":8,"locale":9,"slug":138,"title":139,"lede":140,"purpose":141,"steps":143,"notes":153,"generatedFrom":158,"updated":135},"cover-ink","text-and-logo-on-the-cover","Keep header text and logo readable on a cover image","Choose whether the copy and the logo over your cover photo read light or dark.",[142],"When the header carries a cover image, its title, text and logo sit on the photo. Their color follows the overlay painted over the image, not the photo itself, so a bright picture with a light overlay can leave white text unreadable. “Text and logo on the image” lets you decide.",[144,147,151],{"text":145,"image":146},"On step 3 · Design, select the header (the “Hero” section). Once it has a cover image, “Text and logo on the image” sits below the overlay settings, set to “Auto”.","\u002Fsupport\u002Fcover-ink\u002Fen\u002Fstep-1.webp",{"text":148,"image":149,"caption":150},"Pick “Light” for white copy and logo, or “Dark” for dark ones. The canvas follows right away.","\u002Fsupport\u002Fcover-ink\u002Fen\u002Fstep-2.webp","“Dark” turns the header’s copy and logo dark over this photo.",{"text":152},"Pick “Auto” again to let the overlay decide.",[154,155,156,157],"The setting moves the copy and the logo together, so they never disagree on the same image: your brand’s logo for dark backgrounds with light copy, the other one with dark copy.","Auto follows the overlay you set: over an accent overlay the copy reads against your accent color, and over a background-colored overlay, or none, it follows the page.","Changing the overlay (“Overlay color” and “Overlay”) is often enough on its own: try it before forcing Light or Dark.","The setting only exists while the header has a cover image; without one, the header reads on the page background.","design\u002FHeroCoverFields.vue · SectionPropertyEditor.vue (hero cover) · i18n wizard.propEditor.fields.coverInk \u002F wizard.propEditor.hints.coverInk \u002F wizard.propEditor.opts.ink*",[160,163],{"hreflang":161,"path":162},"fr","\u002Fsupport\u002Fdesign\u002Fvisuel-et-medias",{"hreflang":9,"path":164},"\u002Fsupport\u002Fdesign\u002Fcover-and-media",1792141117694]