• Editing an Element

    Customize an element by clicking on it. Clicking on an element will open a settings window with various options that you can apply to that element.

    To edit an element:

    1. Click an element.
    2. From the Settings window that opens, customize the element.

    You can undo or redo an action by clicking the Undo or Redo icons from the top menu of your Editor or by using the shortcut keys on your keyboard. Press CTRL-Z to undo and CTRL-Y to redo.

     

  • Moving, Resizing, and Deleting an Element

    Moving an Element

    You can move any element on your site by clicking and dragging it to any location of your site.

    Resizing an Element

    To resize an element:

    1. Click on the element to select it.
    2. Click and hold a resizing handle and drag it into place.

    3. Repeat with the other resize handles.

    Deleting an Element

    To delete an element:

    1. Click on the element to select it.
    2. Click the trash can icon.

     

  • Rotating an Element

    You can rotate images, buttons, clipart, shapes, and lines on your site.

    To rotate an element:

    1. Click the element to select it.
    2. From the top right of the element, click and hold the rotate icon and drag it into place.

    Click the red X to reset the angle.

    You can also change the angle from the element’s Settings panel.

  • Moving an Element Forward or Backward

    You can move an element forward and backward so that it appears on top of other elements or behind other elements on your site.

    To move an element forward or backward:

    1. Click on the element to select it.
    2. From the top right of the element, from the icon bar that appears, click the Bring forward or Send backward icons.

  • Aligning & Distributing Elements

    There are a few ways to easily align and distribute the elements on your site.

    To align, distribute or resize your elements:

    1. Click one element and then press CTRL and click other elements to select them together.
    2. Click Settings.

    3. From Align and Arrange, under Align, click an option to realign the selected elements.

    4. Under Distribute, click an option to distribute your selected elements evenly.
    5. Under Match size, click an option to resize your selected elements to a uniform size.

  • Positioning Elements

    To position your elements in the editor:

    1. Click an element and then click Settings.
    2. From the bottom of the element's Settings, edit the values next to x and y to reposition the element.

    Y is the relative height of the element while X is its horizontal positioning.

    To align more than one element on the horizontal or vertical axis, simply make sure that all of their x or y values are the same.

  • Locking an Element

    To lock an element in place on your page:

    1. Click an element to select it.

    2. From the pop-up menu, click the lock icon.

    To unlock an element, select it and click the lock icon on the top left of the element.

    Please watch the video below for a demonstration of locking an element.

  • Animations

    Bring your site to life by adding an animation to your site! The animation you add will appear as your visitors load your page.

    Adding Animations to an Element

    To add animations to an element on your site:

    1. From the editor, click an element to select it.
    2. From the pop-up menu, click Add Animation.

    3. From Add Animation, click an animation to select it.

    Hover over an animation to preview it.

    4. Click OK.

    Animations will not be visible on tablets, iPads, and mobile devices.

    Customizing an Animation

    To customize an animation:

    1. From the editor, click the element on your site that has an animation added to it.
    2. From the pop-up menu, click Edit Animation.
    3. From Animation Settings, under Duration (Seconds), set the length of the animation.

    4. Under Delay (Seconds), set the delay before the animation starts.

    Click Preview from the toolbar at the top of your editor to see the delay in action.

    Each animation has its own settings that appear under Animation Settings after an animation is selected.

    Deleting an Animation

    To delete an animation:

    1. From the editor, click the element on your site that has an animation added to it.
    2. From the pop-up menu, click Edit Animation.
    3. Under Animation Settings, click the trash can icon.

    4. Click OK.

  • Fixed Positioning of Your Header and Footer

    You can set your header or footer to a fixed position.

    To set your header or footer to a fixed position:

    1. Click the header or footer to select it and then click Settings.
    2. Check the box next to Fixed Position.

    3. Click Preview to view your header or footer in a fixed position. 

    Only elements set to Show On All Pages will appear in a fixed header or footer. For instructions on how to set an element to show on all pages, click here.

    Learn more about fixing the postion of your header or footer by watching the video below:

  • Snap to Objects

    With the Snap to Objects tool, you will be able to snap an element to other elements with perfect accuracy. Smart alignment markers (purple lines) will appear to show the centers and endpoints of elements on your site or your page.  When you decide to drop the element you are dragging, it will snap to the alignment markers within a 5 pixel range. 

    To turn this off, simply click the Snap to Objects icon  from the top of your Wix editor.

    You can hold the control key as you are dragging an element to temporarily disable the tool without turning it off.

    This will not lock your elements. 

    To learn more about this feature, please watch the video below:

     

  • Selecting Hidden Elements

    Easily select and edit elements that are underneath other elements. 

    To select a hidden item:

    1. Click an item that is layered above your other element(s). 
    2. From the pop-up menu, hover over Overlapping Items.


    3. Click the hidden element to select it. 

    The element's settings window will open, and element's border will be highlighted.

    4. Optional: If you would like to bring the hidden element to the front, click it, and then click the Bring Forward icon until it is grey. 

  • HTML5 Keyboard Shortcuts

    Action Description
    Ctrl + X Cut
    Ctrl + C Copy
    Ctrl + V Paste
    Ctrl + D Duplicate
    Ctrl + S Save
    Ctrl + [ Move backward
    Ctrl + ] Move forward
    Ctrl + Shift + [ Send to back
    Ctrl + Shift + ] Bring to front
    ←, ↑, →, ↓ Move single pixel (i.e., Nudge)
    Ctrl/cmd + ←, ↑, →, ↓ Move 10 pixels
    Ctrl + Z Undo
    Ctrl + Y
    Ctrl + Shift + Z
    Redo
    Ctrl + M Select next element
    Ctrl + Shift + M Select previous element
    Delete
    Backspace
    Delete an element
    Ctrl + Click element
    Shift + Click element
    Select multiple elements
    Hold Shift while rotating element Rotates element in 15° increments
    Hold Shift while dragging element  Keeps element aligned on the same x or y axis

     

    Keyboard shortcuts that work in text edit mode:

    Action Description
    Ctrl/cmd + B Bold
    Ctrl/cmd + U Underline
    Ctrl/cmd + I Italic
    Ctrl + Z Undo
    Ctrl + Y Redo