# Royale

{% embed url="<https://www.youtube.com/watch?v=C0yDPo_kSjc>" %}
Royale for RapidWeaver, a Premium RapidWeaver Theme
{% endembed %}

Introducing Royale, a Premium RapidWeaver theme that offers your website visitors an exquisite and luxurious experience. With its elegant banner animations, sophisticated responsive design, and premier customization options, your visitors will be immersed in a realm of opulence and exclusivity. Elevate your online presence to new heights of grandeur with Royale.

[Preview Royale Here](https://www.realmacsoftware.com/rapidweaver/addons/royale/)

[Purchase Royale Here](https://www.realmacsoftware.com/store/) or as part of our [Premium Themes Bundle Here](https://www.realmacsoftware.com/store/rapidweaver/)!

Below you will find some helpful tutorials to guide you through Royale's features.

***

## Royale's Main Features

### Theme Presets

Use the theme styles as shown on the [Royale preview site](https://www.realmacsoftware.com/rapidweaver/addons/royale/). You can set Royale's theme style site wide, or per page.

**Site Wide**

Go to **Master Style** > select desired theme style from the **Theme Styles** dropdown menu.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FiRKlEBFAhJCG0KUwEu2m%2Froyale-theme-presets-site-wide.png?alt=media&#x26;token=4fdbbd0a-c233-4909-8c31-a11248508265" alt=""><figcaption><p>How to set Royale's Theme Style site wide</p></figcaption></figure>

**Per Page**

Select page title from left hand menu > go to **Inspector** > **Page Styles** ([**Option-Command-5**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)) > uncheck **Use Master Style** box > select theme style from **Theme Styles** dropdown menu.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FKGKKm5WxHJ4FnS4gsMC3%2Froyale-theme-presets-per-page.png?alt=media&#x26;token=43db7fef-34a8-4b27-8fce-374189c1c9f6" alt=""><figcaption><p>How to set Royale's theme Style per page</p></figcaption></figure>

***

### Mixed Media Banners

Below are the different banner options available in RapidWeaver's Premium Royale theme and tutorials on how to add them.

{% embed url="<https://www.youtube.com/watch?v=IQcgqMxn7fA>" %}
Royale's Mixed Media Banners
{% endembed %}

### Custom Banner Image (Site Wide)

This tutorial will show you how to add a site wide banner image to the Royale theme.

1. In RapidWeaver, go to **Settings** > **General**, then drag and drop your image in the **Banner** input box.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FrqGsbdWMh6R9zHMZJoux%2Froyale-theme-custom-banner-image-site-wide.png?alt=media&#x26;token=f8661b6c-45f8-4f23-8c15-81fc2ed1263f" alt=""><figcaption><p>Add a site wide custom banner image in RapidWeaver's Royale theme</p></figcaption></figure>

### Custom Banner Image (Per Page)

This tutorial will show you how to add a unique banner image per page to the Royale theme.

1. Select page you'd like to add custom banner image to from left hand menu > go to **Inspector** > **General Settings** ([**Option-Command-1**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)), then drag and drop your image in the **Override Site Banner** input box.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2F7CHMb7aXlgv4VkUFWBMP%2Froyale-theme-custom-banner-image-per-page.png?alt=media&#x26;token=8160eee0-dd4f-4018-a39e-4f4665316b1a" alt=""><figcaption><p>Add a unique banner image per page in RapidWeaver's Royale theme</p></figcaption></figure>

### Custom HTML5 Video Banner (Per Page)

This tutorial will show you how to add an HTML5 Video Banner to your pages in the Royale theme.

{% embed url="<https://www.youtube.com/watch?v=llr4H-EaFoU>" %}

1. Add your .mp4 video to the RapidWeaver **Resources** panel ([**Command-4**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)).

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FwJb6XqOOaWflbSOx5UJA%2Froyale-theme-html5-video-banner-per-page.png?alt=media&#x26;token=a4cd2256-7019-43a0-af57-e746a9b6db3a" alt=""><figcaption><p>Add your .mp4 video file to RapidWeaver's resources</p></figcaption></figure>

2. Go to **Inspector** > **Page Sidebar** ([**Option-Command-2**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)), and add the below video snippet

```html
<video loop muted autoplay class="feature"><source src="%resource(my_video.mp4)%" type="video/mp4"></video>
```

* Highlight your code, go to **Format** > **Clear Formatting** ([**Option-Command-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)), then **Format** > **Ignore Formatting** ([**Command-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)).
* Replace “**my\_video**” with the name of your video file (no spaces).

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FD6if53vLBr55V03ANd1w%2Fmarvel-theme-html5-video-banner-per-page-2.png?alt=media&#x26;token=411240ee-78ba-4a60-88fc-7ffb24d42958" alt=""><figcaption></figcaption></figure>

3. Go to **Inspector** > **Page Styles** ([**Option-Command-5**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)) > uncheck **"Use Master Style"** box > **Banner – Type**, choose **HTML or Embed Video**.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FCZcCytkT3CvlysYJNpCu%2Froyale-theme-html5-video-banner-per-page-3.png?alt=media&#x26;token=5a037bf5-7e21-4247-bcc1-8962dd222446" alt=""><figcaption></figcaption></figure>

In preview, your HTML5 video should now be playing!

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2F6OaERWkosR4tJtm4eSzr%2Froyale-theme-html5-video-banner-per-page.gif?alt=media&#x26;token=b1ffe2e2-0f3a-4496-b646-45ae0140e5fd" alt=""><figcaption></figcaption></figure>

4. Drop in a fall back image banner by following the above [**Custom Banner Image (Per Page)**](#custom-banner-image-per-page) guide, just in case some browsers or devices don't support HTML5 video.

### Custom YouTube/Vimeo Video Banner (Per Page)

This tutorial will show you how to embed a YouTube or Vimeo video banner to the Royale theme.

{% embed url="<https://www.youtube.com/watch?v=lBark-Qzlto>" %}

1. Copy your YouTube or Vimeo embed code. Usually you can find this by clicking the "**Share**" button located on the video's page. Below is an example for Vimeo.

<div><figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FyZ1xSCWFVl2ucObUNLw0%2Fvimeo-embed-code.png?alt=media&#x26;token=effdf244-2066-410a-bbda-c93371396494" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FV9olWLU7jQRrRvyYTXox%2Fvimeo-embed-code-2.png?alt=media&#x26;token=4bbc0438-f85e-4236-b424-11fc53207b93" alt="" width="563"><figcaption></figcaption></figure></div>

2. Go to **Inspector** > **Page Sidebar** ([**Option-Command-2**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)), then paste your YouTube or Vimeo embed code snippet.

* Highlight your code, go to **Format** > **Clear Formatting** ([**Option-Command-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)), then **Format** > **Ignore Formatting** ([**Command-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)).
* Add **class="feature"** to the iframe tag.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2Fopukkeg3wjCNIPbh3AD6%2Froyale-theme-youtube-vimeo-video-banner-embed.png?alt=media&#x26;token=0a262507-d023-44aa-bdae-f8b6bda03653" alt=""><figcaption><p>Paste the embed code into the Page Inspector > Page Sidebar, highlight the code and go to Format > Ignore, then add <strong>class="feature"</strong> to the code.</p></figcaption></figure>

3. Go to **Inspector** > **Page Styles** ([**Option-Command-5**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts))> uncheck **"Use Master Style"** box > **Banner – Type**, choose **HTML or Embed Video**.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FCZcCytkT3CvlysYJNpCu%2Froyale-theme-html5-video-banner-per-page-3.png?alt=media&#x26;token=5a037bf5-7e21-4247-bcc1-8962dd222446" alt=""><figcaption><p>In Page Inspector uncheck the "Use Master Theme" box, then select HTML5 or Embed Video from the Banner - Type dropdown</p></figcaption></figure>

In preview, your YouTube or Vimeo video should now be displayed!

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2F8ZcwJXT9qGaKmo8YF6E0%2Froyale-theme-youtube-vimeo-video-banner-per-page-4.gif?alt=media&#x26;token=f88e46cf-c73f-4a5d-a89d-d8f242742d07" alt=""><figcaption><p>Your YouTube or Vimeo video should now be displayed in Royale's featured banner area</p></figcaption></figure>

### Custom Velvet Video Banner (Per Page)

This tutorial will show you how to embed a Velvet Video banner to the Royale theme.

{% hint style="info" %}
This tutorial requires the [Stacks](https://marketplace.realmacsoftware.com/plugins/stacks) third party plugin.
{% endhint %}

{% hint style="info" %}
Velvet was a stack from Nick Cates Design. It is now being sold by [Weaver's Space](https://www.weavers.space/).
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=OJDn9ChDOS8>" %}

1. In edit mode, place your *intended* Velvet banner video, as the **first Velvet stack** in the page order.
2. Go to **Inspector** > **Page Styles** ([**Option-Command-5**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)) > under **Theme Tools** section, uncheck **Load Responsive Tools**.
3. Go to **Inspector** > **Page** **Styles** ([**Option-Command-5**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)) > **Banner – Type**, choose **Velvet (Import First Video)**.

In preview, your Velvet Video banner should now be displayed!

### Custom SuperFlex 3 Slideshow Banner (Per Page)

This tutorial will show you how to add a SuperFlex 3 slideshow banner to the Royale theme.

{% hint style="info" %}
This tutorial requires the [Stacks](https://marketplace.realmacsoftware.com/plugins/stacks) third party plugin.
{% endhint %}

{% hint style="info" %}
SuperFlex 3 was a stack from Nick Cates Design. It is now being sold by [Weaver's Space](https://www.weavers.space/).
{% endhint %}

1. In your SuperFlex 3 stack settings, enable the Import option.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2F93RYALEyydEM2nnNKvdq%2Froyale-theme-superflex3-slideshow-banner.png?alt=media&#x26;token=c51e0166-29b6-438e-bcec-632d60390848" alt=""><figcaption></figcaption></figure>

2. Go to **Inspector** > **Page** **Styles** ([**Option-Command-5**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)) > **Banner – Type**, choose **SuperFlex 3 (Import)**.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FNU4zQjwig7gdtJJBu1zf%2Froyale-theme-superflex3-slideshow-banner-2.png?alt=media&#x26;token=ff7dfc4d-4aa8-4fd5-95ee-b0d04d3d0e4d" alt=""><figcaption></figcaption></figure>

In preview, your SuperFlex 3 slideshow banner should now be displayed!

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FG9U8SyG7GDb8cUFdK6Or%2Froyale-theme-superflex3-slideshow-banner-3.png?alt=media&#x26;token=511b13b6-f041-4a01-b046-4dbb868a6254" alt=""><figcaption></figcaption></figure>

***

### Responsive Video Player

This tutorial will show you how to embed a responsive YouTube or Vimeo video player on your pages in the Royale theme.

1. Copy your YouTube or Vimeo embed code. Usually you can find this by clicking the "**Share**" button located on the video's page. Below is an example for YouTube.

<div><figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FPjOw49IxomqVoWHRhc5I%2Froyale-theme-responsive-embed-video.png?alt=media&#x26;token=9b6c51c3-294a-4320-8e21-d34b08ac8d20" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FZ3kJC9jrIFGiMmThB6z3%2Froyale-theme-responsive-embed-video-2.png?alt=media&#x26;token=d78ba0ed-5ebd-4486-b6e1-8dcdfe5a351b" alt="" width="563"><figcaption></figcaption></figure></div>

2. Paste the embed code into the content edit area.

* Highlight your code, go to **Format** > **Clear Formatting** ([**Option-Command-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)), then **Format** > **Ignore Formatting** ([**Command-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)).

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FsQawqEKUrEndv0T9ndxJ%2Froyale-theme-responsive-embed-video-3.png?alt=media&#x26;token=589a0a01-4e14-4512-970b-b286e54bb8d8" alt=""><figcaption></figcaption></figure>

In preview, your responsive video should now be displayed.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2F7mEcBb0f1RVOccutWQn4%2Froyale-theme-responsive-video-player.gif?alt=media&#x26;token=08d7c9ee-1a84-4682-8f66-f099c8760699" alt=""><figcaption></figcaption></figure>

***

### Responsive Audio Player

This tutorial will show you how to add a responsive audio player in the Royale Theme.

1. Add your .wav or .mp3 file to the RapidWeaver **Resources** panel ([**Command-4**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)).

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FzHAxgRbM4gIXboNrvuAs%2Froyale-theme-responsive-audio-player.png?alt=media&#x26;token=4929476f-c988-496c-89a6-81261177c6ae" alt=""><figcaption></figcaption></figure>

2. Paste the below audio player code snippet in the RapidWeaver page/section where you'd like the audio player to appear:

<pre class="language-html"><code class="lang-html"><strong>&#x3C;audio preload="auto" controls>&#x3C;source src="%resource()%" />&#x3C;/audio>
</strong></code></pre>

* Add your audio filename within the resource () brackets in the above code.
* Highlight your code, and select **Format > Ignore Formatting** ([**Command-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)).

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FKaLyz5UrWTUakG0fYVxe%2Froyale-theme-responsive-audio-player-2.png?alt=media&#x26;token=ecc5e2fc-ed7e-4171-a311-690fffbce93b" alt=""><figcaption></figcaption></figure>

In preview, your responsive audio player should now be displayed.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FQdipMcswO2PdTZjvlXaq%2Froyale-theme-responsive-audio-player-3.png?alt=media&#x26;token=ebb2634e-0011-4257-b80a-0f160a2090f9" alt=""><figcaption></figcaption></figure>

***

### Featured Navigation Links

This tutorial will show you how to create featured navigation menu links in the Royale theme.

{% embed url="<https://www.youtube.com/watch?v=QeP398DCpJk>" %}

1. Single-click a page link (left panel) to edit the page title.
2. Paste the below code snippet in front of the page title.

```html
<i></i>
```

When in preview mode, you should now see your featured desktop navigation links.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2Fm4mSBWW9wAOz0dCyqT6I%2Froyale-theme-featured-navigation-links.png?alt=media&#x26;token=e2b8b955-15d0-4a8b-9463-afcb3e4425c1" alt=""><figcaption></figcaption></figure>

***

### Create Line Breaks in Royale

This tutorial will show you how to create line breaks on your pages in the Royale theme.

1. Paste the below code into your content area to create a line break, then highlight your code and go to **Format** > **Ignore Formatting** ([**Command-.**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)).

```html
<hr>
```

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FdaTjGHmU4uwM8unWYvER%2Froyale-theme-create-line-breaks.png?alt=media&#x26;token=04bc9529-25d2-4daa-bfdc-9a4d90143be3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FQMoyqzRlZia4wgcOAj8g%2Froyale-theme-create-line-breaks-2.png?alt=media&#x26;token=cbaece94-f72b-4f81-b235-126d60a955a7" alt=""><figcaption></figcaption></figure>

***

### Create Link Arrows in Royale

This tutorial will show you how to create link arrows on your pages in the Royale theme.

1. To style links with forward arrow icons, **highlight** the text you'd like make a link, then select the link icon.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FcchNDFG62oAA8Fxc3eSH%2Froyale-theme-create-link-arrows.png?alt=media&#x26;token=05890008-5afe-476b-b5db-1968c4f5968e" alt=""><figcaption></figcaption></figure>

2. Add a **Custom Attribute**, give it the name “**class**”, and value “**social-forward**”. Finally click the "**Set Link**" button.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FwaNBVDhtBfcLNTmyqP3k%2Froyale-theme-create-link-arrows-2.png?alt=media&#x26;token=10d03320-c375-4ca3-8040-0cba8b44935e" alt=""><figcaption></figcaption></figure>

In RapidWeaver's preview mode you will now see those link arrows next to the links you set.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2F5uXK5v2dEmf9gP2AsxRG%2Froyale-theme-create-link-arrows-3.png?alt=media&#x26;token=389427eb-913b-408c-a70d-2e4623c7b480" alt=""><figcaption></figcaption></figure>

***

### Custom Site Logo Width Adjustment

By default, Royale limits the site logo width to 100px, but here’s some CSS to paste into **Settings** > **Code** > **CSS**, to adjust the logo width to your needs.

```css
@media screen and (min-width: 480px) { header.theme .shift #site_logo { max-width: 200px; } }
```

Then adjust the **200px** value to best suit your site layout needs.

<figure><img src="https://3941723260-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQxK7JyV6iH6ddgHOOt8v%2Fuploads%2FVcw885ssHS2lo2K5Lsc5%2Froyale-theme-custom-site-logo-width.png?alt=media&#x26;token=27d23c94-cd5c-48e9-9f21-4aecad75d5bb" alt=""><figcaption></figcaption></figure>

***

### Royale's Split Stack

This tutorial will show you how to create an “edge to edge” section with Royale's Split stack.

{% hint style="info" %}
This tutorial requires the [Stacks](https://marketplace.realmacsoftware.com/plugins/stacks) third party plugin.
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=EzK3M9Sdbdg>" %}

When downloading Royale, in the folder you’ll find the Royale Split stack, double-click the stack to install. Using a Stacks page, you can drag in the Royale Split stack to create an “edge to edge” section within the main content area.

* **NOTE**: After using the Split stack, all following content **MUST** be contained **within** Split stacks to avoid layout issues.
* **NOTE**: Make sure you select matching Text, Header, and Link colors in your Royale Split stack's settings so that they match your selected colors for these theme elements.
* **NOTE**: Split stack use is not compatible with using layout *sidebar* option. In the **Inspector > Page Styles** ([**Option-Command-5**](https://docs.realmacsoftware.com/classic-manual/user-manual/keyboard-shortcuts)) > **Sidebar Content - Position** > **“Hide”** must be chosen from the dropdown menu.

***

## eCommerce with Royale

Royale comes packed with eCommerce features to help you build a successful eCommerce website. Elevate your customers online shopping experience with Royale, a premium RapidWeaver Theme.

### Ecwid eCommerce

Ecwid is our preferred eCommerce platform and is fully compatible with Royale. Get Ecwid for a beautiful online store to sell digital or physical products. [Learn more, and sign up for a free plan](https://open.ecwid.com/lcM2g?url=https%3A%2F%2Fmy.ecwid.com%2Fcp%2F%3Fpartner%3Drapidweaver%23register).

{% hint style="info" %}
Tutorial requires an [***Ecwid eCommerce account***](https://open.ecwid.com/lcM2g?url=https%3A%2F%2Fmy.ecwid.com%2Fcp%2F%3Fpartner%3Drapidweaver%23register)***.*** Sign up for a free plan to get started.
{% endhint %}

We've put together a short three part video tutorial that goes through how to setup your Ecwid store in RapidWeaver and start selling online with ease.

**1) Start Selling online with RapidWeaver and Ecwid**

{% embed url="<https://www.youtube.com/watch?v=ptsyqo7fQ3Y>" %}

**2) Categories & Store Customization**

{% embed url="<https://www.youtube.com/watch?v=6wei9uL02eg>" %}

**3) Sell Online with Stacks and Ecwid**

{% embed url="<https://www.youtube.com/watch?v=HS_E_aTlQ9I>" %}