How to Use the Boxes Element (Not the Box Widgets)

Boxes are similar to text widgets, but for ease of use they allow you to insert an image or URL of the media without the need for special code. (Please Note: The “Boxes Element” is not to be confused with the “Box Left”, “Box Middle”, and “Box Right” widget areas which are accessible  via Appearance > Widgets. The “Box Left”, “Box Middle, and “Box Right” will only appear where you have set the “Widgets Element” (https://cyberchimps.com/quide/how-to-use-the-widgets-element/). To read more about the “Box Left”, “Box Middle”, and “Box Right” widgets please see here: https://cyberchimps.com/quide/how-to-use-the-widgets/ )

To create a “Box” navigate to the following in your WordPress Administration Panels.
Boxes > Add New Create and Edit Box

  1. Create box title
  2. In the “Boxes Element” you can add an image with the built in media uploader. Select “Choose File” than navigate to the file or you can manually enter the URL of the image location (if you have an image in your “uploads” directory you can insert the URL there). Tip: The boxes are approximately a max width of 305px. It would be best to try and keep all images the same height and width otherwise your boxes will not look proportional (see bottom image below). Please note that since javascript is used to control the boxes, it is important that the images are small in file size, otherwise the boxes may not load completely and will require the browser to be refreshed for them to load completely. So if you see that the boxes do not completely load when first viewing the page, but will load completely after refreshing the browser, you will need to decrease the file size of the image.
  3. Box URL – Insert the URL of the post/page that you want the image to link to here. For example, if it’s your contact page, something similar to http://www.example.com/contact-us/ would go there.
  4. Link the whole box – On/Off. Default is Off. Set this to “On” if you wish for the entire box to be click-able. Please note that it will direct the user to whatever link you place in the Box URL above.
  5. Boxes Text – In the “Boxes Text” you can add your text. Just remember, the more text you have there, the larger the height of the box will be.
  6. Boxes Category – (This option is in the left menu under “Add New” and/or to the right in the area titled “Boxes Categories”.) Please read below on how to assign a category to your boxes. If you do not assign a category to your boxes the default CyberChimps boxes will appear.
  7. Click “Update”

To enable the Boxes section on Pages, navigate to that particular Edit Page in your WordPress Administration Panels by first selecting the “Pages” option directly under the “Links” or “Media” option. Activate Box Element in Page

  1. Look for “Page Options”. Within that you should see “Page Elements”.
  2. Drag and drop the “Boxes” Inactive Element to the “Active Elements”. It will now be activated. Please note that you can control where it appears by its location among the other active elements. Simply drag and drop the “Boxes” Element above or below other Active Elements.
  3. To disable the “Boxes” section for that Page, drag and drop the “Boxes” element to “Inactive Elements” or click on the minus “-” symbol to the left of the word “Boxes”.
  4. Click “Update” when done.

Box element placed below page element

UPDATE

You now have the ability to add categories to your boxes. This will create more flexibility by having different boxes via category on the page of your choosing. To create a “Boxes Category” navigate to the following in your WordPress Administration Panels.
Boxes Category

There are two places you can create Boxes Categories.

  1. When creating a Boxes Element to the right will be an item called “Boxes Categories”. You can select “+ Add New Boxes Category” there. Or Boxes Catogry in Boxes Creation
  2. Navigate to the following in your WordPress Administration Panels. Select Boxes > Boxes Category  Boxes Category Straight Creation

Once you have created a category you can assign it accordingly within the Page that the Boxes Element is activated.

Box Options in a Page

Did this documentation not suffice? Have more questions? Please post a support topic in the forum. https://cyberchimps.com/forum/pro/

Categories: