> For the complete documentation index, see [llms.txt](https://docs.rafflex.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rafflex.io/customise-your-site/set-up-your-homepage.md).

# Set Up Your Homepage

Your homepage is built from blocks that you add, remove and arrange in a drag and drop editor. Here is how to open the editor, build your layout and save it.

Your homepage is the first thing most customers see, so it is worth spending a little time on it. The good news is that you do not need any design or coding skills. The page is made of **blocks** (sections such as a slider, a grid of competitions, or a newsletter box) that you stack in whatever order you like.

{% embed url="<https://www.youtube.com/watch?v=omxztJm5D6I>" %}
How to Set Up Your Homepage
{% endembed %}

***

### 1. Open the homepage editor

{% stepper %}
{% step %}

#### Go to Pages

In the **admin panel**, look in the left hand menu under **Content** and click **Pages**.
{% endstep %}

{% step %}

#### Edit the Home page

Find the page called **Home** in the list and click **Edit** on that row.
{% endstep %}

{% step %}

#### Look around the editor

The editor opens with two areas:

* **Blocks** (the large area on the left). This is your homepage, from top to bottom. Each box is one block.
* **The sidebar** (on the right). This holds the page **Title**, plus an **SEO Page Title** and **SEO Page Description**, which control how your homepage appears in Google search results.
  {% endstep %}
  {% endstepper %}

{% hint style="info" %}
Your Home page is a permanent page, so you will not see the options to change its address, Layout or Active status, and it cannot be deleted. That keeps your homepage safe. To learn about the sidebar fields and creating other pages, see [Manage Your Pages](/customise-your-site/manage-your-pages.md).
{% endhint %}

***

### 2. What is on a brand new homepage

New sites start with a ready made homepage so you are never looking at a blank page. From top to bottom it contains:

1. **Sliders** set to the Big Slider style, with the text "Guaranteed Draws" and "No Extensions" in its bottom bar.
2. **Product grid** using the Flint card style, listing your competitions ending soonest first.
3. **Stats one** with the example stats "100 Winners so far" and "£100k+ Won In Payouts".
4. **Newsletter** in the Default style.
5. **Winners display** titled "The Winners!" with the description "Our lucky winners!". It starts with no photos.
6. **Call to action one** titled "Dream Big, Win Bigger!" with a **See Winners** button linking to your results page.

{% hint style="warning" %}
The figures in **Stats one** are examples, and **Winners display** has no photos until you upload some. Before you launch, replace the stats with your own figures and add your winner photos, so customers do not see example content or an empty section.
{% endhint %}

***

### 3. Build your layout

#### Add a block

1. Scroll to the bottom of the **Blocks** area and click **Add to blocks**.
2. A list of every available block opens. Click the one you want.
3. The new block appears at the bottom of the page with its options open. Fill them in.

To add a block in the middle of the page instead, hover your mouse in the gap between two blocks. An **Insert between blocks** button appears. Click it and choose your block, and it is added in that spot.

#### Move a block

Each block has a small drag handle at the top left of its header (hover over it and you will see **Move**). Click and hold it, then drag the block up or down to its new position and let go.

#### Remove a block

Click the bin icon (**Delete**) at the top right of the block's header.

#### Edit a block

Click into any field inside a block to change its text, images, style or settings.

<figure><img src="https://1199660663-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fr8qKq7FrwgsgVkUWodGm%2Fuploads%2FeU4lThd8LXAZCp9lyFID%2Fscreely-1741018440816.png?alt=media&amp;token=6c0537db-1c5f-40ff-b18d-f3adcdc77f45" alt=""><figcaption></figcaption></figure>

#### Save your changes

Click **Save** at the top right of the page (or **Save changes** at the bottom). Then open your live site in a new tab and refresh it to see the result.

{% hint style="warning" %}
If the page will not save, scroll through your blocks and look for a field outlined in red. Some options (such as **Collection Order** on the Sliders block, or **Segmenting Competitions** and **Competition Sorting** on the Product grid) must have a choice selected. On a brand new site these can be blank the first time you edit the homepage. Pick one and click **Save** again.
{% endhint %}

{% hint style="info" %}
Nothing changes on your live site until you save. If you make a mess of things, simply reload the editor page without saving and your homepage will be exactly as it was.
{% endhint %}

***

### 4. Choosing your blocks

Here is a quick guide to what each block is for. The names below are exactly what you will see in the **Add to blocks** list.

#### Showing your competitions

* **Sliders**: a large rotating banner of the competitions you have chosen to feature, with ten built-in styles. We recommend keeping it at the top for maximum impact.
* **Product grid**: the main grid of all your live competitions. Choose from nine card styles, split it by category tabs or by "Today plus category" sections, and sort by ending soonest or your own manual order.
* **Product horizontal grid**: a side scrolling row of competitions using tall Movie Cards, which you can limit to certain categories.

{% hint style="warning" %}
Please ensure your images meet our recommended size guidelines. [Click here to learn about our image sizes](/helpful-info/image-size-guide.md).
{% endhint %}

{% hint style="info" %}
Not sure why a competition is or is not appearing in your slider, or how to set the running order? See [How the Sliders Block Chooses Competitions](/customise-your-site/set-up-your-homepage/how-the-slider-chooses-competitions.md).
{% endhint %}

{% hint style="info" %}
Created a competition but it is not showing up in these blocks? See [Why a Competition Is Not on My Homepage](/customise-your-site/set-up-your-homepage/why-a-competition-is-not-on-my-homepage.md) for the things to check.
{% endhint %}

#### Building trust with stats and winners

* **Stats one**: two stats you type yourself (such as total winners and total paid out) next to a countdown to your next closing competition. The countdown picks its own target, see [Stats Block Countdown Explained](/customise-your-site/set-up-your-homepage/stats-block-countdown-explained.md).
* **Mobile stats**: two short text badges that only appear on phones. Use them alongside **Stats one**, because its two stats are hidden on phones.
* **Instant Winners Carousel**: a scrolling row of your most recent [instant winners](/drawing-winners/managing-instant-winners.md) that keeps itself up to date.
* **Instant Winners Counter**: a badge showing how many instant wins there have been today. It resets at midnight.
* **Winners display**: photos of your winners that you upload yourself, with a link to your results page. It does not update automatically.

#### Engaging your visitors

* **Newsletter**: an email sign up box with eight styles to choose from. Make sure your [email marketing](/marketing/sms-and-email/set-up-email-marketing.md) is connected, otherwise sign ups are not saved.
* **Social links**: buttons or icons linking to your social media pages.
* **Video**: a YouTube video. Enter just the video's ID, not the full link.
* **Big picture content**: a large image with a heading, text and button.
* **Call to action one**: a heading, text and button designed to drive one key action, with six built-in layouts.
* **Gallery**: a grid or masonry wall of up to 32 images.

#### Text and advanced blocks

* **Wysiwyg**: a simple text editor for formatted text.
* **Adv Code**: paste your own HTML, such as a widget embed code.
* **Custom Twig Block**: build your own section using Twig. See [Twig Templating](/advanced/twig-templating.md).

{% hint style="info" %}
**Stats one**, **Mobile stats** and the **Instant Winners Carousel** only work on pages that use the Home layout, which your homepage already does. Every other block in this list can be used on any page.
{% endhint %}

For every option inside every block, with tips on when to use each one, see the full reference:

{% content-ref url="/pages/0tJjsfswzNWEJM8WCNKm" %}
[Page Builder Blocks](/customise-your-site/page-builder-blocks.md)
{% endcontent-ref %}

***

### 5. Copy your layout to another page

At the top of the editor you will find two handy buttons for reusing a layout:

* **Export Blocks** opens a box containing your page's blocks as text. Click **Copy to Clipboard** to copy it.
* **Import Blocks** lets you paste that text into another page. This replaces all the blocks already on that page, so use it with care. After importing, click **Save** to apply the change.

{% hint style="warning" %}
Images are not included when you export blocks, because they are stored with the original page. After importing, re-upload any slider, gallery, winners or big picture images on the new page.
{% endhint %}

***

### 6. Tips for a great homepage

* **Lead with your slider**, then your **Product grid**, so customers see your competitions straight away.
* **Show proof that people win.** An **Instant Winners Carousel** or **Instant Winners Counter** near the top builds confidence.
* **Keep stats current.** The figures in **Stats one** and **Mobile stats** never update themselves, so set a reminder to refresh them.
* **Check on a phone.** Some blocks look different on small screens (for example, **Mobile stats** only appears on phones), so always check both.
* **Changes to competitions can take a minute or two to appear** on your homepage after you save them. Refresh the page after a short wait.