homestead_faq's profileBrand User

677 Messages

 • 

44.6K Points

Thursday, June 1st, 2017 6:53 PM

WebsiteBuilder: Containers

WebsiteBuilder: Containers
By clicking Elements on the side bar, then on Containers there are some smart ways to add content to your website in a contained way. For example, if you want a box containing an image and piece of text, first add the container, then add your image and text box - this box now has the text and image anchored to it, wherever you move the box, the text and image goes too, moving all elements placed inside it at once. Not only is that quite nice when editing, it is also nicer behind the scenes in the website code, when a user now views your website on a smaller screen, the background box will justify correctly and still display the image and text how you defined it to.

1. Select box and place it in desired location. 

2. Drag first element into box. (Attach to box)



3. Drag next element into box. 





The second nice feature with containers in the ability to tabulate them. Again in the Elements > Container menu, select Tabs. With this container you can set up a series of different bits of content to display in the box, then you can set up how you want to transition between those different pieces of content. Providing a scenario may make its function clearer, lets assume you are wanting to display 3-4 different products you sell. Rather than displaying all of the images at once, cluttering up valuable website space you can add each image to a tab of a container. Once all 3 images have been added you can choose how you want users to move between them, to do this select the container, click Settings on the tools palette and click Tabs Transitions.
Here you are able to change the animation between each tab, how long that animation takes and if you want the animation to occur automatically, i.e. without the user having to trigger the tab change.

1. Select tab and place it in the desired location. 

2. Drag your images/elements into the tab. 

3. Click add tab. This will slide the current tabs content off to the right. 



Once you add the tab you will see the number of tabs you have (1/2, 2/2, etc.) and can click the arrows to go to the next or previous tab.



To set up the tabs to automatically scroll or transitions go to more> advanced> settings> tab transitions.

 

*Containers are customizable for color, size and placement. 

13 Messages

 • 

452 Points

7 years ago

I really need to see a video example of this in action

13 Messages

 • 

452 Points

no one ever replied to my request.

1.4K Messages

 • 

262.9K Points

I am sorry, we don't currently have any videos available. I am going to make some topics with screen shots. I will try to make a video and see if people like it. I actually did a survery a while back and most people were not interested in videos, but there have been more requests lately.

25 Messages

 • 

988 Points

7 years ago

This reply was created from a merged topic originally titled In WebsiteBuilder, in the ‘Elements’ what is Containers and how does it work?.

In WebsiteBuilder, in the ‘Elements’ what is ‘Containers’ and how does it work?
I have many images which I would like to spread in to several pages instead of grouping them all on one page. Can I use the tabs in ‘Containers’ to do so?

25 Messages

 • 

988 Points

Will try to make my question clearer. When using Containers, I would like to group my images into different containers (15 images in each container), then to connect all containers between each other via ‘tabs’. For example, a page displays a container of 15 images and right below the container is a row of tabs (1.2.3.4,5, etc.). Each numbered tab represents a different container, so by clicking on any tab it would take me to another container (set of other 15 images) on a different page. Such a setting we commonly see on Ebay, for example. How does it work with WebsiteBuilder, and does it work? Thanks for your help.

1.4K Messages

 • 

262.9K Points

Unfortunately, each container is a separate element. They can't be connected to each other. You could create the containers and then make links from buttons to each page.

25 Messages

 • 

988 Points

Ok.    But is it possible in Websitebuilder to make a "1,2,3,4,5..." transition between different pages, like they have in Ebay, Amazon, as well as all the common websites?

1.4K Messages

 • 

262.9K Points

Not between pages. But you can emulate it by placing text boxes with numbers and linking each one to the appropriate page. Our ecommerce program will create those pages and links automatically if too many products are on a page, but since the elements are not connected, the system can't be told to create automatic links.

25 Messages

 • 

988 Points

In that case, is it to my advantage to use Containers at all for what I need? I tried to put 15 images in a container and for some reason they look scrambled in the Mobile view. Also, how to place a title under each image, so it will stay under the image in the Mobile view?

22 Messages

 • 

614 Points

5 years ago

How can I control the order of elements in a box? I want to control the order in which they display in the mobile version. I have a calendar page with date boxes and text boxes. They display fine in the desktop version, but in the mobile version they appear in random order. I need them to display in a particular order, again the right date box with the right text box and in proper date order. How can I achieve this?
Brand User

7.6K Messages

 • 

106.7K Points

Hello Julie, 

From the mobile editor it will allow you to individually select any element in the box and move it to another location. Select the element, click and drag you will see a dark gray line appear where you can release the element. 

22 Messages

 • 

614 Points

Thank you. That helps, although it is very tedious. Would be better if I could tag elements on the desktop with an order to be used for the mobile version.
Brand User

7.6K Messages

 • 

106.7K Points

Understandable, the mobile conversion does attempt to keep it in line with how it is on the desktop but as it is also very narrow and sometimes elements can get placed in "random" places. That is when we would want to manually adjust with the mobile editor. 

22 Messages

 • 

614 Points

Thank you Michelle!

9 Messages

 • 

360 Points

5 years ago

This was helpful to me for the purpose of a parallax scroll effect. Thank You.
Brand User

7.6K Messages

 • 

106.7K Points

Awesome, glad it was useful. 

61 Messages

 • 

1.2K Points

4 years ago

Is there any way to animate a container (or element) so that it delays appearance AND exits after a specified time?

Brand User

7.6K Messages

 • 

106.7K Points

Hello Hal,

You can set up element behaviors for elements to appear or hide upon certain actions but it is not time sensitive.

This may be possible, if you want to search for an HTML code that can perform this function but the builder does not have this feature by default. 

37 Messages

 • 

440 Points

10 months ago

If I want to add elements to an original box, how do I change the height?  When I click on the box, I can change the width and move the items in it around, but now the height won't change.  Instead a "content shifter" icon is attached to the bottom of my box, rather than the coordinates to change the height.  Help!

Brand User

11.1K Messages

 • 

145.6K Points

Hello, 

Where on youe website is this container? I would like to take a look, because you should be able to change the height of a box. 

37 Messages

 • 

440 Points

I found that if I log out of website builder and then log back in it corrects itself and allows me to adjust the height.  If it happens again, I’ll let you know and send a photo of what it looks like.