wiz-placeholder | Viseven Help Center

The wiz-placeholder component is an HTML container to customize your eWizard Editor layout. For more information, see Placeholders.

The wiz-placeholder component includes the wiz-column component to structure the content in columns.

Installation

To install the wiz-placeholder component, run the following command in the root directory of your site project:

wiz install @site/wiz-placeholder

To use the component in eWizard Editor, register both the wiz-placeholder and wiz-column components.

To register the components globally, import the components in the common.js file of your site:

// ./extensions/common.jsimport { wizPlaceholder, wizColumn } from 'wiz-placeholder';Vue.component('wiz-placeholder', wizPlaceholder);
Vue.component('wiz-column', wizColumn);

To register the components locally, import the components within the <script> tag of the App.vue file of your site or the index.vue file of the multiple site page:

/* ./App.vue
OR
./pages/default/index.vue
*/<script>
import { wizPlaceholder, wizColumn } from 'wiz-placeholder';export default {
components: {
wizPlaceholder,
wizColumn,
},
};
</script>

After registering the component, make it visible in eWizard Editor.

For more information, see Install components.

Usage

TIP: As best practice, use eWizard Editor to add and edit the components.

To use the wiz-placeholder component in your site template:

1) Add the <wiz-placeholder></wiz-placeholder> tag to the template in the ./App.vue file.

<!--./App.vue --><template>
<wiz-root style="background: #ffffff; width: 880px;" class="editable-block">
<wiz-placeholder></wiz-placeholder>
</wiz-root>
</template>

2) Add the <wiz-column></wiz-column> tags within the <wiz-placeholder></wiz-placeholder> tag. Each <wiz-column></wiz-column> tag represents a column inside the wiz-placeholder component in eWizard Editor. For example, a placeholder with two columns:

<!--./App.vue --><template>
<wiz-root style="background: #ffffff; width: 880px;" class="editable-block">
<wiz-placeholder id="wiz-placeholder-0499">
<wiz-column :width="50">
</wiz-column>
<wiz-column :width="50">
</wiz-column>
</wiz-placeholder>
</wiz-root>
</template>

The id attribute is required for the correct display of the component styles in eWizard Editor.

3) Add other components within the <wiz-column> tags. For example, wiz-text and wiz-image:

<!--./App.vue --><template>
<wiz-root style="background: #ffffff; width: 880px;" class="editable-block">
<wiz-placeholder id="wiz-placeholder-0499">
<wiz-column :width="50">
<wiz-text id="wiz-text-0142" :text="$t('wiz_text_6008')"></wiz-text>
</wiz-column>
<wiz-column :width="50">
<wiz-image id="wiz-image-2790" src="./common/media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"></wiz-image>
</wiz-column>
</wiz-placeholder>
</wiz-root>
</template>

Attributes

You can change the wiz-placeholder component appearance and behavior using the following attribute within the <wiz-column></wiz-column> tag:

• width

Set the placeholder column width in percents in the width attribute value.

<wiz-column :width="50"></wiz-column>

Properties

The wiz-placeholder component has the following properties:

Property	Type	Default	Description
`width`	Number	N/A	The placeholder column width in percents

For more information, see Component properties.