In this tutorial you will learn how to insert and adjust content elements. You can also go through a list of all the elements Webgarden offers to find information on each one.

To make your website shine with great content, you need content elements. Adding content elements is easy. Just click on a green plus icon in the content area of any static block, category, document, etc. and select the desired element from the many options available.

For each different type of element there will be a different dialog box which appears. Make your entries or selections and SAVE.

Most dialog boxes have at least 2 tabs - BASIC and ADVANCED. The advanced tab can include numerous options, but it always includes at least WIDTH, ALIGNMENT, and HIGHLIGHTING.

The numbers used for WIDTH refer to the number of tiles the element will cover. You can use HIGHLIGHTING to change the appearance of an element so it will stand out on the page. Highlighting is covered in detail in our advanced help article Use Custom Highlighting.

Once you’ve created an element, four buttons will appear in the upper right-hand corner whenever you move your mouse over it.

The first button is the red trash icon. Use it to delete the element.

The second button is the yellow edit icon. If you click on it, the element dialog box reappears for you to make changes. (You can also simply click on the element to make the element dialog box reappear.)

The third button is the green plus icon. Use this to add another element directly before the element you are on.

The fourth button is gray with arrows. You can use it to adjust the width of an element by dragging and dropping. The height is automatically adjusted accordingly.

If you want to move an element from one place to another you can drag it across the screen with your mouse. However, Webgarden automatically shifts elements up and to the left, if they are small enough to fit into the empty space available.

If you want empty space between two elements in a row you can either add an empty PARAGRAPH TEXT element between them, or sometimes it is possible to expand the area occupied by the element on the left without enlarging the element’s actual appearance on your website. (This works with horizontal menus or headings, for example).

If you want to add elements in columns instead of rows or if you want to change the number or width of the element tiles, use the COLUMN LAYOUT element which we’ll explain later.

There are three tabs with content elements - FREQUENTLY USED, MORE OPTIONS, and UPLOAD FILES.

Let’s see what we can do with them.

Use PARAGRAPH TEXT to insert ordinary text and/or HTML. Generally, it’s good to use a separate paragraph text element for each individual paragraph or segment of text.

HTML can be used for many purposes on Webgarden. Just a few of the most common uses are bolding text, italicizing text, and inserting mailto links. To make text bold use <strong> before and </strong> after the particular text. To italicize use <em> before and </em> after the text. For an email address use <a href="mailto:youremail@webgarden.com">youremail@webgarden.com</a>. The text between the "> and </a> is the text that actually appears as the link.

If it looks like this in the dialog box...

...The result will look like this in administration.

Use IMAGE to upload individual .jpg and .png images. If you want to upload multiple images at once, use the UPLOAD FILES tab which we’ll cover later.

The image dialog box has three tabs - BASIC, TOOLS, and ADVANCED. The TOOLS tab only appears after you have uploaded the image. This means you have to save the image and then reopen the dialog box in order to access TOOLS.

Of course, the most important thing is to upload your image using the CHOOSE FILE button.

On the TOOLS tab the most useful feature is the ability to scale down images using the first row of yellow buttons.

This reduces the amount of data space the image requires. It doesn’t necessarily make the image appear smaller on your website. If you want a reduced image to be larger again, you have to delete that image from the website and start over.

On the ADVANCED tab use LINK to make the image click through to a URL, and NEW WINDOW to designate whether that image or URL should open in a new window. The DISPLAY STYLE dropdown contains three options. AUTOMATIC SIZE REDUCTION is the low resolution default setting which uploads faster. FULL RESOLUTION optimizes the resolution of the image as it fills the exact amount of space you allot to it, regardless of the original image size. ORIGINAL SIZE displays the image in its original size unless the space allotted to it is too small, in which case it displays as large as possible in that amount of space.

Use FILE to upload any other types of files. The actual contents of the file are not displayed on the website. Visitors only see a link to view them.

FORMATTED TEXT allows you to write text using a simple text editor. Use it to do things such as add bold or italics, change the font or color of the text, or insert hyperlinks.

Use LINK to add an isolated link to your content. The ANCHOR TEXT is what will actually be visible to visitors on your website. You can set the link to open in a new window on the ADVANCED tab.

Use HEADINGS to give your website content structure. You can choose from three different sizes, and it’s possible to have them click through to the URL of your choice.

Use the VIDEO element to upload videos directly onto Webgarden.

It may take a few minutes for your video to process. During this time you will see a placeholder in administration. The placeholder does not automatically change into the video once it’s done processing. Leave the category and then return to it for the video to appear.

A video may use up a large portion of your data space. If you want to include videos on your website, consider purchasing a Premium Plan or connecting to videos from YouTube instead.

Using YOUTUBE VIDEO is the easiest way to include a video on your website. Just paste the video INTERNET ADDRESS into the space provided and SAVE.

Use FORMS to collect information from your visitors.

The TARGET EMAIL is the email address the completed forms will be sent to.

Add extra lines to the form by clicking on + ADD NEW at the bottom of the dialog box.

If you would like to have, for example, a registration form on your website, you could enter something like this...

...Which would look similar to this in administration and on your website.

If your website has more than one page, you need at least one MENU. Read our tutorial Create Menus to get all of the details.

Use the COLUMN LAYOUT element to create columns on your website. You need a separate element for each column.

All categories, documents, and static blocks come automatically with a column layout element at the top. The WIDTH of this main column layout element is static, but you can change the DIVIDE to increase or decrease the number of tiles across. New categories and documents usually have a divide of four, meaning their area is divided into four tiles across. New headers and footers have a divide of six, and static side columns have a divide of one.

To create columns you will need to add more column layout elements. (Add one for each column.) If a category in Webgarden has a divide of four, the column layout elements you add to that category can have a width of four or less. Then choose the divide, which is how many tiles you want to have lined up horizontally inside your column. You can choose any number from the dropdown for this.

If you are writing an article for your blog and you think it would look nicer if the text weren’t the width of the entire content block, you can use a column layout element to fix that. At the very beginning of the article add a column with a width of two and a divide of one.

Then your article will look like this.

Columns are also useful for controlling vertical alignment. Check out our advanced help article 4 Ways You Can Vertically Align Elements on Webgarden or our blog article How to Create Masonry Photo Galleries to see some examples.

Use FLASH to upload .swf files (applications, games, animation, etc.) directly onto your website.

POLL your website visitors.

On the BASIC tab enter your question and all the possible answers. Add extra lines for possible answers by clicking on + ADD NEW at the bottom of the dialog box. You can enter some numbers under NUMBER OF VOTES yourself if you want the poll to look popular from the very beginning.

Use the ADVANCED tab to open or close the polling, to select whether or not percentages are shown, and to choose what order the possible answers should be shown in.

Include a CALENDAR of events on your website. Click on + ADD NEW at the bottom of the dialog box to add an event.

The LOGIN PANEL allows users to log in and out of your website. You don’t have to do anything at all in the dialog box but SAVE.

If you have a newsletter to send, the NEWSLETTER SIGN UP element is a must. Visitors can enter their email address here to be automatically added to your subscriber list.

Help your visitors stay up to date with what’s happening on your website by offering them an RSS CHANNEL. Webgarden generates RSS exports for all websites.

Use this element so visitors can like your content on Facebook, Twitter, and Google+. (You have to add your social media accounts under the SETTINGS tab for this to work.) Additionally, it includes 300 ways to share powered by AddThis.

VISITOR STATISTICS LIST is a simple element which shows basic website traffic data in list form.

The VISITOR STATISTICS GRAPH shows basic website traffic data in graph form. Choose the length of the time period that should be covered.

Use SEARCH to add a search field to your website.

Use GOOGLE MAPS to add a map. But even after you’ve hit SAVE, you still have work to do.

In Webgarden administration temporarily expand the map to the largest size, so you can see all of the buttons at the bottom clearly. Then use the FIND field to mark your location, and press SAVE CURRENT MAP POSITION.

Now if you reopen the dialog box you see the TEXT field where you can edit the map text however you’d like.

Feel free to reduce the map size once you’re done.

Use GOOGLE TRANSLATE to allow visitors to view your website in other languages.

The SHOPPING CART is an essential for those with an eshop. Insert it in a static block such as the header or a side column.

You can choose to make it appear only after something is there by checking the box ONLY SHOW THE SHOPPING CART WHEN IT CONTAINS PRODUCTS.

Add NEW PRODUCTS to a side panel or your homepage to show your customers as many as 10 products which you’ve added most recently. Display the products in one of 6 different DISPLAY STYLES in up to 8 columns.

DISCOUNTED PRODUCTS shows your users what products you have on sale. Otherwise, it is very similar to the NEW PRODUCTS element above.

NEW COMMENTS displays the most recent comments from discussions on your website.

If you want everyone to see what’s new on your website, use LATEST UPDATES to show the most recent website updates - no more than one update per category.

An RSS READER allows you to pull RSS feeds from anywhere on the Internet.

You can use QR CODES on your website in many ways. Check out our blog article Practical Tips on How to Use QR Codes on Your Website to learn more.

In order for any of these elements to work, you will first need to link your website to your Google+ account. You can do this under the SETTINGS tab located at the top of your screen.

In SETTINGS, paste your Google+ account url into the field LINK TO YOUR GOOGLE+ ACCOUNT and SAVE.

The GOOGLE+ SHARE and GOOGLE+ +1 elements each only serve one function as is described in the label. The GOOGLE+ BADGE allows visitors to click through to your Google+ page, to follow you on Google+, or to +1 your website. Be sure to make the badge big enough to display your profile image. (You won’t be able to see your profile image in administration, but it will appear on the actual website.)

In order for any of these elements to work, you will first need to link your website to your Facebook page. You can do this under the SETTINGS tab located at the top of your screen.

In SETTINGS, paste the URL of YOUR FACEBOOK PAGE and SAVE.

FACEBOOK COMMENTS: Visitors can use this box to comment on your site’s content via their Facebook account.

FACEBOOK LIKE: Add a Like button to your website. Alternatively, use this same element to add a Recommend button instead by selecting FACEBOOK RECOMMEND from the BUTTON TYPE dropdown located in the element dialog box. Check the box SHOW THE SHARE BUTTON to include a Share button in addition to the Like or Recommend.

FACEBOOK SEND: Allow visitors to privately send content from your website to their friends.

FACEBOOK FOLLOW: Visitors can click here to follow you on Facebook.

FACEBOOK PAGE: Include a miniature version of your Facebook page on your website.

In order for any of these elements to work, you will first need to link your website to your Twitter account. You can do this under the SETTINGS tab located at the top of your screen.

In SETTINGS, enter your TWITTER USERNAME and SAVE.

TWITTER SHARE: Visitors can use this button to send a Tweet to their followers. You can enter the TEXT, RELATED ACCOUNTS (the usernames of any related Twitter accounts you want to recommend), and HASHTAGS to be included in their Tweet. Do not enter the # in front of the hashtags.

TWITTER FOLLOW: Visitors can click here to follow you. You can choose whether or not to SHOW NUMBER of followers you already have to all visitors and whether or not to SHOW TWITTER USERNAME on the follow button.

TWITTER HASHTAG: This button allows visitors to Tweet emphasizing a specific hashtag. Enter the HASHTAG (without #), the TEXT FOR HASHTAG if desired, and select whether or not a URL FOR HASHTAG should be included in their Tweet.

TWITTER MENTION: This button allows visitors to send Tweets which can only be seen by the sender, you, and those who follow both them and you. You can choose to include a MENTION TEXT and RELATED ACCOUNTS.

All Twitter elements include options for DNT and LARGER SIZE on the advanced tab. DNT stands for DO NOT TRACK.

Use UPLOAD FILES to upload multiple files at once or to unzip files.

The files will be inserted as either IMAGE, PARAGRAPH TEXT (only .txt files), or FILE elements.

After you’ve selected the first file using the CHOOSE FILE button, click on + ADD NEW to add each additional file. You can use the red trash icon to delete any unwanted files. SAVE.