---
title: "Create a Page Slide effect (Welcome Mat) - EngageBox"
description: "With the EngageBox Page Slide effect, you're able to create popup boxes that will slide in from the top of the page (push the site down), instead of c"
url: "https://www.tassos.gr/docs/engagebox/popups/page-slide-effect-welcome-mat"
date: "2026-05-01T15:48:51+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ EngageBox ](https://www.tassos.gr/index.php?option=com_content&view=category&id=35) / [ Popup Types ](https://www.tassos.gr/index.php?option=com_content&view=category&id=69)

#  Create a Page Slide effect (Welcome Mat)

With the EngageBox Page Slide effect, you're able to create popup boxes that will slide in from the top of the page (push the site down), instead of covering your content. This way your users can just scroll down to reach your content. Create an EngageBox with a Page Slide Effect is quite easy as there are only 5 configurations that you need for an optimal result.

 ![JoomlaWelcomeMat](https://www.tassos.gr/images/JoomlaWelcomeMat.gif)

## [Enable Page Slide Effect](#enable-page-slide-effect)

 The first thing you will need to do is either create or edit a box. Go to the Details panel on the right sidebar and click to enable the **Page Slide** option.

 ![engagebox pageslide1](https://www.tassos.gr/images/engagebox_pageslide1.png)

 Then, go to the "Trigger" tab and set the configuration as it is depicted in the screenshots below.

 ![engagebox pageslide2](https://www.tassos.gr/images/engagebox_pageslide2.png)

 ![engagebox pageslide3](https://www.tassos.gr/images/engagebox_pageslide3.png)

 Finally, for the best result you need to set the box's width to 100%. To do that go to the "Appearance" tab and set the width to 100% as it is shown in the screenshot below.

 ![engagebox-welcome-mat-width.png](https://www.tassos.gr/images/engagebox-welcome-mat-width.png)

 Last updated on Nov 26th 2024 12:11

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "EngageBox",
            "item": "https://www.tassos.gr/docs/engagebox"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Popup Types",
            "item": "https://www.tassos.gr/docs/engagebox/popups"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Create a Page Slide effect (Welcome Mat)",
            "item": "https://www.tassos.gr/docs/engagebox/popups/page-slide-effect-welcome-mat"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/engagebox/popups/page-slide-effect-welcome-mat"
    },
    "headline": "Create a Page Slide effect (Welcome Mat)",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Tassos Marinos",
        "url": "https://www.tassos.gr/docs/engagebox/popups/page-slide-effect-welcome-mat"
    },
    "datePublished": "2017-05-06T00:42:26+03:00",
    "dateCreated": "2017-05-06T00:42:26+03:00",
    "dateModified": "2024-11-26T12:28:13+02:00"
}
```