Anchors

You can add anchors to landing pages and multipage sites in eWizard.js for their further use in eWizard Editor. For this, add the data-anchor-id and data-anchor-label attributes with the anchor ID and label:

to a block or component in the App.vue file of the landing page layout.

For example, the block-anchor in wiz-block:

html

<template>
    <wiz-page>
        <wiz-block data-anchor-id="block-anchor" data-anchor-label="Block anchor">
        </wiz-block>
    </wiz-page>
</template>

to a block or component in the index.vue file of the multipage site page.

For example, the component-anchor in wiz-text:

html

<template>
    <wiz-root>
        <wiz-block>
            <wiz-text :text="$t('text_1')" data-anchor-id="component-anchor", data-anchor-label="Component anchor">
            </wiz-text>
        </wiz-block>
    </wiz-root>
</template>

As best practice, add one tag per block or component for the anchors to work in eWizard Editor.

You can add a link to the anchor in the App.vue file of the landing page layout or the index.vue file of the site page.

Use the v-goto action in the <i18n> or <template> tag to redirect to the anchor.

For example:

To add a link from the wiz-button component to my-anchor on the same landing page:

html

<!-- ./App.vue -->

<i18n>
{
    "eng": {
        "text_1": "<h1><a target=\"_self\" data-subtype=\"\" data-type=\"url\" href=\"#my-anchor\" v-goto=\"#my-anchor\" data-url=\"#my-anchor\">My text></h1>",
    }
}
</i18n>

<template>
    <wiz-root>
        <wiz-block>
            <wiz-button :text="$t('text_1')"></wiz-button>
        </wiz-block>
    </wiz-root>
</template>

To add a link from the home page to my-anchor on the first page of a multipage site:

html

<!-- ./pages/home/index.vue -->

<i18n>
{
    "eng": {
        "text_1": "Go to first page",
    }
    </i18n>

<template>
    <wiz-page id="home" class="editable-block">
        <wiz-block>
            <wiz-button :text="$t('text_1')"  v-goto="first#my-anchor"></wiz-button>
        </wiz-block>
    </wiz-page>
</template>

Anchors ​

Anchors