> For the complete documentation index, see [llms.txt](https://irrelevant-pixel.gitbook.io/irrelevant-pixel/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irrelevant-pixel.gitbook.io/irrelevant-pixel/getting-to-know-how-to-use-it/creating-page-for-options.md).

# Creating Page for Options

In *Widgets* folder find and open widget called `WBP_Options` (*BTW*, *It is actually your primary **work-platform*****).**

Once you open it, look at its hierarchy tree. There in some `Canvas` should be a `Widget Switcher` that holds things in it, which i called *"Pages"*:

<figure><img src="/files/SywXisOTa714NyBaR6mS" alt=""><figcaption></figcaption></figure>

primary purpose of the `Page` is to be a container for all `Options` and other elements that are necessary.

So in this chapter our intention is to make one.

***

Before creating a new `Page`, open the folder where they are all located - *Widgets/Pages*. You can see already existing pages there, so right-click somewhere or click the <mark style="color:green;">**`Add`**</mark> button and find the category **User Interface**, and there select **Widget Blueprint**. In a <mark style="color:orange;">class-searching field</mark>, type *"page base"* and then select it as the <mark style="color:red;">base widget class</mark>. In my case, I'll name it `WBP_PageExamples`:

<figure><img src="/files/RX59GvEuuJqWEsZtzaOz" alt="" width="563"><figcaption><p>1</p></figcaption></figure>

<figure><img src="/files/z4OHMB6x0iCrN74MIXeB" alt="" width="563"><figcaption><p>2</p></figcaption></figure>

Now open the newly created widget, and in the hierarchy tree you should see just one `Named Slot`. Find a simple `Vertical Box` in **Palette** and drop it on that `slot`, rename it to something like I did in the screenshot and hit checkbox <mark style="color:green;">Is Variable</mark><mark style="color:purple;">.</mark> <mark style="color:yellow;">Compile</mark>:

<figure><img src="/files/mi0Mz99ZZfEMMuaMXB9P" alt=""><figcaption></figcaption></figure>

Now tab back to the `Options` widget, and add this `WBP_PageExamples` to the `WidgetSwitcher`, rename it, uncheck <mark style="color:red;">Is Variable</mark>. Then in **Details** find category for developers i named *'User Specified'*, there you'll see only one field, specify that <mark style="color:purple;">`Page Display Name`</mark>. <mark style="color:yellow;">Compile</mark>:

<figure><img src="/files/TsLDqFlwpRrUiHw9xxzB" alt=""><figcaption></figcaption></figure>

Try launch the game. Your empty Page should be present and all button's names must be correct.

{% hint style="warning" %}
One little thing that should be taken care of every time a new page is made - is adding a few crucial nodes to <mark style="color:red;">**Pre-Construct**</mark> (or <mark style="color:red;">**Construct**</mark>):
{% endhint %}

<div align="center"><figure><img src="/files/ORChRIS6G28T4z2RuhVL" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="danger" %}
That function call you see at <mark style="color:yellow;">**`3`**</mark> - is absolutely <mark style="color:red;">**MUST**</mark> to be executed after all things you have initialized on your <mark style="color:red;">**`Pre-Construct`**</mark>/<mark style="color:red;">**`Construct!`**</mark>
{% endhint %}

***

### <mark style="color:green;">And that's all!</mark> :thumbsup::clap:

In the next chapters we will learn how to populate `Pages` with `Options` and other widget-elements.