The WIX "Add" Button
On the left button panel, there are some additional items that can be added to a page. Each element offers a variety of different options.
This page discusses the elements more in-depth, gives tips on how to use these elements, and gives an example of the preferred option.
Elements from the examples can be copied and pasted from these pages.
Adding and Sizing Images
Use Add > Images to add an image to a page. There are several options under the tab:
-
Uploading your own file or
-
Select image from the free Wix Library
-
Include an image from the free Wix Clip Art Library
Once images have been added to the page, they must be sized. To size an image:
-
Click on the image to select it
-
Grab one of the circular points in one of the corners (shown below) and drag until the picture is the appropriate size
Whenever an image is clicked, appear attached to it (see below). Use these buttons to change and adjust the image as needed.
-
Once the image is sized, click the Settings button. The Settings button is the second button attached to the image.
-
Under "Image Resizing" click "Reset image proportions" (shown below) this will restore the image to the proper proportions but keep it the same scaled width.
NOTE: DO NOT use the shift key to scale images or skip step number two above. Skipping that step will cause parts of the image to be cut off.
Scaling an Image
With the cursor grab the corner of the image as shown above and drag it to it's desired size.
Image Adjustment Buttons
The available buttons are as follows:
-
Change Image
-
Settings
-
Design/Customize
-
Crop
-
Filters
-
Animate
-
Link
-
Help
Resetting the Image
In the Settings panel select "Reset image proportions" to correct the image aspect ratio.
Adding an Image Gallery
When using several images on a page, an image gallery might be the best display option. To add a gallery select Add > Gallery. Available galleries shown in this panel. Galleries are available as:
-
Collages - all images in a collage are different heights and widths and put together to create an image mosaic
-
Grids (recommended) - all photos are the same size, are square or circular, and are aligned to form a grid pattern
-
Masonry Grid (recommended)- the images are different heights, but all pictures are the same width.
Grids and masonry grids are recommended. Collages can be unpredictable. Galleries can be used the full width of the page, or they can be used across only part of the page. The images in the gallery may be cropped to allow it to fit the gallery layout but when you click on a gallery image, the full-size image will be displayed.
NOTE: When uploading images, make sure they are not too large. Large images take a long time to load and may not be viewable on all screens.
NOTE: On smaller screens, images outside the edges of the page guides on full-width galleries may get cut off.
NOTE: On mobile screens, all galleries will become a single column.
Example of a Full-Width Gallery
Example of a Page-Width Gallery
To change the text and link displayed on a button, click on the button and select the "Change Text" A panel will open where where the button label or a link. To change the link only, click on the button, click on the link button that appears next to "Change Text" and add the new link.
NOTE: Make sure to adjust the button width to accommodate button text.
Adding Buttons
There are several ways to add a button to a page. For pages created from a template page, there is a block of standard items in the right-hand column including headings, a paragraph, and a button. Copy or duplicate the sample button or, use the Add panel.
To use the Add panel select Add > Button and under "My Buttons" select the yellow, pill-shaped button. This is the only button that should be added to web pages. You will see additional buttons on some pages but DO NOT DELETE THEM. They are there for user ease of use.
Changing Text and Links on a Button
Adding Boxes
To add a box, select Add > Box under the Add button. Under "My Boxes" select one of the box styles highlighted.
To scale the box, select it, grab the corner and drag it to the size you want.
NOTE: For consistency across the site please do not use any of the boxes that are not highlighted in the image. Other boxes are to be used by site designers and administrators only.
