# Making A New Section Appear After a Timer Expires

If you want an experience where a user lands on a page, and then after a video or a set amount of time the rest of the page appears, here is how you can accomplish this.

***

#### First, add a Timer element to any page. <a href="#makinganewsectionappearafteratimerexpires-first-addatimerelementtoanypage" id="makinganewsectionappearafteratimerexpires-first-addatimerelementtoanypage"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FVAH7qi7Zrigr8vM2nccv%2Fimage.png?alt=media&#x26;token=f0fc4953-5528-49b2-adec-3a534b9287d7" alt="" width="281"><figcaption></figcaption></figure>

***

#### You may add other elements in the Span inside the timer element if you want them to disappear along with the timer after it expires. For example this video will disappear after it ends and the timer expires. <a href="#makinganewsectionappearafteratimerexpires-youmayaddotherelementsinthespaninsidethetimerelementifyouw" id="makinganewsectionappearafteratimerexpires-youmayaddotherelementsinthespaninsidethetimerelementifyouw"></a>

#### If you want certain parts of the page to remain on the page after the timer expires, keep them outside of this span. <a href="#makinganewsectionappearafteratimerexpires-ifyouwantcertainpartsofthepagetoremainonthepageafterthetim" id="makinganewsectionappearafteratimerexpires-ifyouwantcertainpartsofthepagetoremainonthepageafterthetim"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FiOwDhhgYiv8ugwCnrr35%2Fimage.png?alt=media&#x26;token=3dd290db-b826-4eaf-bf13-57679a68281f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FgXBKuD713ArRNHKLEkNJ%2Fimage.png?alt=media&#x26;token=a2a7da47-1d95-4edf-882c-2f501673fce0" alt=""><figcaption></figcaption></figure>

***

#### Everything up to this point is what the user will see when the page first loads. Once, you have the timer designed how you want, add a new column to the page below everything else. <a href="#makinganewsectionappearafteratimerexpires-everythinguptothispointiswhattheuserwillseewhenthepagefirs" id="makinganewsectionappearafteratimerexpires-everythinguptothispointiswhattheuserwillseewhenthepagefirs"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FW9QQHlJQbzgEcrvqUF6S%2Fimage.png?alt=media&#x26;token=17a94948-26f3-47bd-81ab-5a4ac4936719" alt=""><figcaption></figcaption></figure>

***

#### Then Style the page that will appear after the timer expires with whatever content you need inside that new column/row. <a href="#makinganewsectionappearafteratimerexpires-thenstylethepagethatwillappearafterthetimerexpireswithwhat" id="makinganewsectionappearafteratimerexpires-thenstylethepagethatwillappearafterthetimerexpireswithwhat"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FImB72o5yewk70Voo0o4r%2Fimage.png?alt=media&#x26;token=144520ea-80a5-4a43-88bc-86ef86874ac8" alt=""><figcaption></figcaption></figure>

***

#### Once you are satisfied with the content in the new row, <mark style="color:red;">**copy**</mark> <mark style="color:red;">**the ID of the row**</mark> right above the settings in the right-hand panel. <mark style="color:red;">**Be sure to select the # symbol as well.**</mark> <a href="#makinganewsectionappearafteratimerexpires-onceyouaresatisfiedwiththecontentinthenewrow-copytheidofth" id="makinganewsectionappearafteratimerexpires-onceyouaresatisfiedwiththecontentinthenewrow-copytheidofth"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FGHy1buUcX5nNhqHiajFz%2Fimage.png?alt=media&#x26;token=b731c5f4-b10d-474a-918d-00afb8d50813" alt=""><figcaption></figcaption></figure>

***

#### Now select the brown timer border once again and go to settings in the right-hand panel. Paste the ID of the row below in the “End Text” space. Now set the timer to reflect how long the user will wait before the next section appears. If you have a video, set the timer to the exact length of the video. <a href="#makinganewsectionappearafteratimerexpires-nowselectthebrowntimerborderonceagain-andgotosettingsinthe" id="makinganewsectionappearafteratimerexpires-nowselectthebrowntimerborderonceagain-andgotosettingsinthe"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fzo1Za5XfN61E0qJuQxRR%2Fimage.png?alt=media&#x26;token=34a1377b-eb74-4c4f-a0b0-a0b349544f78" alt=""><figcaption></figcaption></figure>

***

#### Once the timer is set, save the page and publish. Then go to the Live URL for the page and test, after the timer expires, the span and everything inside it should disappear and the row and everything in it should appear (see GIF below). <a href="#makinganewsectionappearafteratimerexpires-oncethetimerisset-savethepageandpublish.thengototheliveurl" id="makinganewsectionappearafteratimerexpires-oncethetimerisset-savethepageandpublish.thengototheliveurl"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FpKPjiufYGndJNUm4vHti%2F0b81e66c-df1b-4819-a6bd-e37ba3a8ba55.gif?alt=media&#x26;token=7e66e22e-eb20-456a-a036-435186b3aa71" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
**If you add a background to a page like this, the background will appear to not fit the whole page while inside the builder. This is because while inside the builder, both sections will be visible, so the background will stretch to fit both sections. So, if you add a background, always view a preview page to see how it will look rather than relying on how it looks in the builder.**
{% endhint %}
