# Your first campaign: from an existing design to a design generator in your website's look

> A trade fair example: how a Canva design becomes a template with a static background, how you put it into a campaign and how the design generator gets your website's colours and font.

Source: https://bluepic.io/help/guides/first-campaign  
Language: en  
Category: guides  
Last updated: 2026-10-27

You have just created a Bluepic account, and your designs already exist, made in Canva, for example. This guide follows one example along the whole way: from an existing design to a template to a design generator that looks like your website, where your visitors create their own version of the design. Read it once before you start. Every single click is in the linked how-to articles.

![The finished YLW Summit design generator: blue header with the event line, a light page with title and subtitle, and the gallery with six templates, among them Email signature, Exhibitor, I'm attending and Profile picture frame.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-01/public?v=5f324546 "The goal: the YLW Summit design generator in the event website's colours and font."){width="1440"}

## The example: YLW Summit starts with Bluepic

YLW Summit is an invented conference with a trade fair, held from 2 to 4 April 2026 in Cologne. You look after its marketing and have just created a Bluepic account.

The team has made a design for visitors in Canva: "I'm attending!" with photo, name, role and company. Until now, visitors get a Canva template and instructions on how to swap the photo and the name. From now on, they should fill in the design themselves on a page of the event and share it on LinkedIn, without Canva and without instructions.

The YLW Summit website uses two shades of blue, `#124BBA` and `#457DED`, and the font Bricolage Grotesque. The new page should look the same.

You need three terms for this:

- **Template**: your design in Bluepic. Everything visitors may change becomes an input field in it.
- **Input field**: a field where visitors type, choose or upload something, for example their name or their photo. The design takes it over at once.
- **Campaign**: bundles one or more templates and publishes them as a design generator, a page with its own link. There, visitors pick a template, fill it in and export their design.

## The way at a glance

From your design to the finished link there are four stages:

![The way in four stages: 1. Export the static background (export everything that stays the same for everyone from Canva as an image). 2. Set up the template (add the background, put photo, name and headline on top and make them changeable). 3. Create the campaign (pick the templates, the design generator is online). 4. Take over your website's look (colours, font and landing page, then test and share).](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-10/public?v=f9d2f1fe){width="938"}

## Turn your design into a template

Your design doesn't come into Bluepic as a whole. You split it in two:

- The **static background** is everything that looks the same for every visitor: colours, shapes, logo, event details. You export it from Canva as one image.
- The parts that change are what every visitor fills in differently: here the photo, the name line and the headline. You rebuild only these in Bluepic, on top of the static background.

For the YLW Summit design, it goes like this:

1. In Canva, you save a copy of the design and delete everything visitors should change in it: the photo, the line with name, role and company, and "I'm attending!". What is left is the static background. You export it as a PNG file in the size of the design, here 1080 × 1080 pixels.

   ![Left the I'm attending design from Canva with photo, name line and headline, right its static background: the same design without photo, name line and headline.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-03/public?v=9230647a "Left the design from Canva, right the static background."){width="894"}

2. In Bluepic, you create a folder for the event edition, here "YLW Summit 2026". In it, you create a template of the same size with **Create Template** and **Empty**. The template editor opens with an empty canvas. How that works is in [Create a template: set its size and export format](https://bluepic.io/help/template-management/template-setup-and-settings).

   > **Tip:** One folder per event edition keeps everything for one event together: the visitor design, the speaker banner, the exhibitor post. Next year, you copy the folder for YLW Summit 2027.

   > **Note:** A template in the **Drafts** folder can't go into a campaign, so create it in your event folder right away. The Free plan has room for 10 templates, see [How templates and assets count towards your limits](https://bluepic.io/help/account-management/template-limits).

   ![The template editor with a new, empty 1080×1080 template: an empty canvas in the middle, no elements in the layers panel.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-11/public?v=436b7180){width="1350"}

3. With the image tool in the toolbar and **Image**, you open the **Image Cloud**. **Upload** puts the static background into it. You click the image and then on the canvas. The image appears there in its original size. With the Align button in the toolbar and **Center horizontal** and **Center vertical**, you move it to the centre. Because it is exactly as big as the template, it now fills it.

   ![Image Cloud popup over the empty template, with the uploaded static background highlighted.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-12/public?v=fcf77c66){width="1350"}

4. On top of it, you place the parts that change: an image right over the empty area for the photo, a text for the name line and a text for "I'm attending!". How to add images and texts is in [Design elements (images, text, shapes)](https://bluepic.io/help/design-elements-and-tools/design-elements).
5. You give the texts the font of the design. Bricolage Grotesque is a Google font and already in Bluepic. You upload your brand's own font once, see [Upload a font: use your own fonts in templates](https://bluepic.io/help/design-elements-and-tools/importing-fonts).
6. With the **Create Input Field** tool, you make the three parts changeable. The photo gets the input field "Your photo", the name line "Name / Role / Company". "I'm attending!" becomes a **Text Selection**: visitors don't type here, they choose between "I'm attending!" and "Meet me there!".

   ![Create Input Field popup for the I'm attending! text in the template editor, with the field type Text Selection highlighted; the template with photo, name line and headline behind it.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-04/public?v=8432f801){width="1350"}

7. With the anchoring tool, you connect the top edge of "I'm attending!" to the bottom edge of the name line, with a gap of 5 pixels. Now the headline always stays right below the name line, even when the name line changes. The template now looks exactly like the design from Canva, except that visitors fill it in themselves.

   ![I'm attending! anchored to the name line: the green handle between the two texts, the gap 5 on its left and the trash can on its right.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-13/public?v=8b59867c){width="894"}

Every click is in [Create an input field: let users change a text or image](https://bluepic.io/help/input-fields/create-input-field), [Offer a selection: let users choose from set texts or images](https://bluepic.io/help/input-fields/offer-a-selection) and [Dynamic layouts with the anchoring tool](https://bluepic.io/help/design-elements-and-tools/anchoring-tool).

## Create the campaign

Now the template goes into a campaign. YLW Summit has made five more templates the same way: for speakers, exhibitors and sponsors, a profile picture frame and an email signature. They all go into one campaign, so everyone at the event uses the same page.

1. You click **Campaigns** in the navigation and then **Create Campaign**. In the popup, you leave **Web** selected and click **Create**. **Web** is a page of its own with a link. How to embed the design generator in your website instead is further down.

   ![Create Campaign popup with the types Web, Widget and Team, Web selected.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-create-campaign-01/public){width="784"}

2. In the **Templates** step, you open the folder "YLW Summit 2026" and tick all six templates. The design generator shows them in alphabetical order.

   ![Campaign step Templates with the folder YLW Summit 2026 open and its six templates ticked.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-05/public?v=6afae88a){width="1920"}

3. From now on, the campaign is online, under a link with a long number. In the **Share** step, **Edit URL** turns it into a readable link, in the example `template.bluepic.io/ylw-summit-2026-generator`.

Every click is in [Create a campaign: share several templates in one design generator](https://bluepic.io/help/campaigns/create-campaign).

## Take over your website's look

Bluepic doesn't take the look from your website automatically. You need three things from it: the colours as hex codes, the font and, if you like, an image for the top of the page. A hex code describes a colour with six characters after a `#`, for example `#124BBA` for the YLW Summit blue. Your design team or your brand's style guide knows the hex codes.

### Generator Theme: colours, font, corners

In the **Generator Theme** step, you set how the design generator itself looks: the area with the gallery, the input fields and the buttons.

1. You click **Add theme**. Now you can set your own colours.
2. Under **Background Color** you enter the background colour, in the example white, and under **Primary Color** your website's main colour, in the example `#124BBA`. It colours buttons and highlights.
3. Under **Header Font** and **Label Font** you choose the website's font. Here too, you upload your own font with **Upload custom font**.
4. Under **Corner Radius** you choose how round the corners are, to match the buttons on your website. In the example, **Subtle**.
5. With **Save as Custom Theme** you save the theme under a name, here "YLW Summit". In your next campaign, you pick it under **Custom Colors** with one click.

   ![Generator Theme with the saved theme YLW Summit: white background, primary colour #124BBA, Bricolage Grotesque as header and label font, corner radius Subtle; preview on the right.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-06/public?v=690347a5){width="1920"}

> **Note:** At the bottom of **Generator Theme** there is the **Bluepic Branding** checkbox. You can remove the Bluepic branding with any paid plan. On the Free plan it stays.

### Landing page: the page around the design generator

In the **Landing Page** step, you build the page around the design generator: a header and a background with a title. Visitors see it before they pick a template.

1. You click **Add landing page** and, under **Header Section**, **Add header section**. The header gets the title "YLW Summit 2026 · 2 - 4 April · Cologne" and the blue `#124BBA` as its background. Instead of a colour, an image in 16:3 works too, for example a section of your website's title image.
2. Under **Body Section**, the page gets the light background `#EEF3FD` and, above the generator, two lines that say what visitors do here: "Show your network you're coming" and "Pick a design, add your photo and name, and share it on LinkedIn."
3. Under **Text Styling**, you tick **Advanced text styling** and give the titles the website's font and colours.

   ![Landing Page step with header in #124BBA, body in #EEF3FD with title and subtitle, and the preview on the right.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-07/public?v=723c6b6e){width="1920"}

All settings are explained in [Generator Theme settings](https://bluepic.io/help/campaigns/generator-theme) and [Design a landing page: set up the page around the design generator](https://bluepic.io/help/campaigns/landing-page).

## Test and share

You test the design generator twice before you send the link: once in the preview in Studio, and once on the page your visitors open.

1. In the **Share** step, the preview of your design generator is below the link. You fill in every template there once, the way a visitor would: with a photo of your own and a long name. Then you export it. Exports in the preview cost no credits, so this is the place to test them.

   ![Share step with the link template.bluepic.io/ylw-summit-2026-generator and Copy URL; below it the preview with the six templates, marked.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-08/public?v=25ad03d7){width="1920"}

2. You click **Copy URL** and open the link in a new browser tab. This is the page your visitors see. You check that everything looks right there, but you don't export: on the live link, every export costs a credit, yours too.

   ![The template I'm attending in the design generator, filled in with a visitor's photo and name, Meet me there! chosen as the headline.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-guide-first-campaign-09/public?v=c66ead2d){width="1920"}

3. You share the link: in the newsletter, as a button on the event website and in the registration confirmation email.

How visitors use the design generator is shown in [Fill in a design generator and export your design](https://bluepic.io/help/campaigns/using-a-design-generator).

## Embed it on your website

If the design generator should sit right on a page of your website, with your own instructions next to it, you use a widget campaign instead of a web campaign. You set up the templates and the **Generator Theme** the same way. There is no landing page, because the page around it is your website. In the **Share** step, the **Embed** tab holds the code you paste into your page.

![Share step of a widget campaign with the Embed tab: the iframe snippet and the Copy button.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-widget-campaigns-02/public){width="1100"}

Every click is in [Create a widget campaign: embed the design generator in your website](https://bluepic.io/help/campaigns/widget-campaigns).

## What's next?

- Speakers and exhibitors should get their banner already filled in with their data: [Turn data into personalised visuals: three levels](https://bluepic.io/help/guides/data-to-personalised-visuals).
- Colleagues should work with you: [Manage your team: invite team members, assign roles, remove members](https://bluepic.io/help/account-management/teams). Team members come with Pro.
- You want to see how often the design generator is used: [Campaign and template analytics](https://bluepic.io/help/campaigns/analytics). Analytics is part of the paid plans.

## Related articles

- [Create an input field: let users change a text or image](https://bluepic.io/help/input-fields/create-input-field)
- [Offer a selection: let users choose from set texts or images](https://bluepic.io/help/input-fields/offer-a-selection)
- [Dynamic layouts with the anchoring tool](https://bluepic.io/help/design-elements-and-tools/anchoring-tool)
- [Create a campaign: share several templates in one design generator](https://bluepic.io/help/campaigns/create-campaign)
- [Generator Theme settings](https://bluepic.io/help/campaigns/generator-theme)