Same interface items, how to organize them better?

Question

This is a website builder application and I'm having trouble reflecting an easy interface for the user. In my opinion, there are several shortcomings in terms of design here but I don't know to do any better.

1. Here you can see elements that can fit into this box when selected. These buttons show up when you hover the mouse over this part. The idea: people should not see all the button choices for all elements that are available on the same time so I show it only when hovered.

2. Add column buttons. People are able to add columns to the end of the page to extend the page further. They can add elements like images, text, videos & etc. The Idea: The user should be able to see how much columns he can add. However after adding the elements it's hard to show a interface to reduce the number of elements. No idea how to improve this.

3. Move buttons. The user can either move a column left and right or move the entire row up or down. The problem with this approach is, there are way too many of these buttons/handles and they look really like clutter. No Idea how to improve that.

Any visual ideas on how to improve the user experience are welcome.

Thank you

PS: I know it looks ugly, I'm not a design guy, please be kind:)

Answer 1

1. I like hovering to show buttons to reduce clutter, but you should make some kind of 'Add' or plus sign button so that people on touch devices don't have to magically know to tap on the empty space.

2. I initially thought the 'add column' buttons were regular columns and not buttons, to be honest. I think making them smaller and actually showing the columns would help:

3. Give the different areas a handle at the top that you can click and drag. Even though it does take up a bit more space, most users are familiar with this task. You can even change the cursor to a 'move' cursor with a little css: http://jsfiddle.net/58rgx/ The buttons that I've circled in the following picture actually let you resize the column to different sizes so that you don't have to create a new column and delete the old one if you want to change sizes:

EDIT: You should also consider making the admin message at the top of the page an actual toolbar similar to WordPress' so that it is visually separated from their actual site. And give people the option of dismissing the message so the toolbar only has actionable buttons on it. After the admins see the message a couple times, I'm sure they'll want to get rid of it.