wiz-placeholder

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.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

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 following properties are available:

Property	Type	Default value	Description
width	number	N/A	The placeholder column width in percent.