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 |
| Number | N/A | The placeholder column width in percents |
For more information, see Component properties.