How do I configure the 'Multipurpose Box' Drag & Drop control?
(or)
How can I place the 'Multipurpose Box' control on any desired page and configure it?
(or)
How do I display the 'HTML content', 'Flash Images', plain text, images, links, or any content at my Web store?
(or)
How do I display or upload the banners in the storefront?
To configure the Multipurpose Box control, do the following:
- Log in to the 'Anywhere Commerce Control Panel' by using your User Name (Email Address) and Password.
- You will be navigated to the 'Dashboard' page.
- Click the
icon. The Design & Content section will be displayed as shown in the figure.
- Click Design Home Page. You will be navigated to the Drag & Drop Controls page.
- Select a page from the Design Your Site drop-down (which is located on the top) in which you want to add the Multipurpose Box control.
- Note: If the required page is not available in the drop-down, you can create it now. Please refer: Create Custom Pages
- Select Content and drag and drop the Multipurpose Box control into a pane as per your requirement.
- Click Edit, which is on the top right corner of the Multipurpose Box control as shown in the figure. This will open the Multipurpose Box dialog box as shown in the figure.
- By default, the Display Title option is selected as ON. If you don't want to display the title of the control in the CP (Control Panel) and in the storefront, select Off from the Display Title option.
- By default, the Display Control option is selected as ON. If you don't want to display this control in the storefront, select Off from the Display Control option.
- Note: If the 'Display Control' option is selected as Off, but the control is properly configured in a page, the control will be displayed in the respective page of CP (Control Panel) but not displayed in the SF (Storefront).
- To give a title to this multipurpose box, enter the name in the Title text box.
- Select the suitable heading tag from H1 to H6 from the respective drop-down.
- Note: Heading Tags are attached to the title for better SEO rankings. The importance decrease from <H1> to <H6>. Please make sure your heading structure is SEO-friendly while allotting these tags.
- To give a specific look and feel to your container like color, graphical appearance, etc…select Container 1, Container 2 or Container_nopadding from the Theme Container drop-down.
- Note: Container 1 or Container 2 gives the different color look and graphical appearance of the container; whereas, Container_nopadding gives a plain container without any specified classes.
- Multipurpose box Control can be configured differently for each use. However, you can use the same multipurpose box, which has been configured at another page, in whatever page you want without re-configuring the same on that page.
- To use the previously saved content of Multipurpose Box in the current page, select a suitable reference from the Reference Control drop-down. This will be used for displaying the same control on multiple pages and without configuring the control every time.
- Note:
- i) The Reference Control drop-down displays the Name of your webpage and the title of multipurpose box added in that page separated by a colon (i.e. “:”).
- ii) If you select a Reference Control for a multipurpose box, you don’t need to configure that control further. All the parameters of the selected reference control will be applicable here.
- If you don't select a 'Reference Control' then you can find a text box, which is a 'WYSIWYG' editor ('HTML Content' Text box).
WYSIWYG editor: (HTML Content text box:)
- This is a 'WYSIWYG' (What You See IS What You Get) editor and you can add/edit - plain or normal text, HTML Content, Images, Flash Images (URLs of flash), URL & Email links, etc… as per your requirement here.
- Let's know how to add different types of content in the WYSIWYG editor:
1. Adding HTML Content:
- You can add 'HTML' content to display an attractive content.
- Click Source, you will be displayed a text box for entering the HTML Code.
- Enter suitable HTML Code.
- Click Update, the relevant content as per entered HTML code will be displayed through multipurpose box control.
2. Adding Images:
- To upload an image, click the
icon. This will open an 'Image Picker' dialog box.
- The images which are uploaded to the 'User Images' section of the 'File Manager' will be displayed here.
- To select a required image, double click on that image. The 'Image Picker' dialog box will be closed and the selected image will be displayed in the HTML Content text box.
- To add text, directly enter the same in the 'HTML Content' text box.
- To enter fresh HTML content, select None from the Reference Control drop-down and click Source and enter the HTML code in the HTML Content text box. You also can enter plain text here.
- Note: Width of the HTML content depends upon the layout pane to which you have dragged this multipurpose box control.
3. Adding Flash Images:
- To add the 'Flash' Images, click Flash '
' icon. You will be displayed a Flash Properties dialog box.
- Enter the Flash Image URL in the URL text box. The image will be displayed in the Preview text box.
- Edit the Width, Height, Horizontal Space, and Vertical Space of the image (if required) in the Width, Height, HSpace, and VSpace text boxes.
- Click OK, the dialog box will be closed and the Flash Image will be saved in the HTML Content section.
4. Adding Links:
- To display the links (example, facebook, twitter, etc…) through the multipurpose box, click the '
' icon. You will be displayed a Link dialog box.
- To enter the URL of the link, select URL from the Link Type drop-down.
- Enter the link URL in the URL text box. Example: www.facebook.com/
- Click OK, the dialog box will be closed and the link will be saved in the HTML Content section.
- After adding all types of Content in the HTML Content text box, click Update. The uploaded content (or image) will be displayed in the 'Drag & Drop' controls page by the 'Multipurpose Box Column' control.
- To preview the multipurpose box, click Preview. The preview page will be displayed as shown in the figure.
- To upload the Multipurpose box to your Web store, click Publish.
- To view the exact look of your just uploaded multipurpose box, click View Live Store.
- The uploaded multipurpose box will be displayed in your Web store as shown in the figure.
- This is how you can publish your HTML content or any content on any page of your Web store by using the Multipurpose Box control.