Weebly HTML - Changing the Layout Width of Weebly Templates
Changing the width of your Weebly website is not rocket science. By editing just a few Weebly HTML codes, you can effectively adjust the layout width of your Weebly template.
This allows you to drastically increase flexibility of standard Weebly templates to give it a completely different look! It also provides you the benefit to layout your content in different ways, at your own discretion.
The following HTML lesson is in written form. If you want tutorials that will show you step-by-step in friendly video format on how to change your Weebly website's width, just visit DivTag Template's Free Weebly HTML Tutorials.
DivTag Templates has a comprehensive video tutorial which will show you how to change Weebly's layout width. It's free so why not give it a shot?
Weebly HTML - Step 1
Go to the "Design" tab in while in your Editor mode and select a standard Weebly template you want to use. Click the "Edit HTML/CSS" tab towards the right top corner to open the template edit page.
To change the width of the layout, you need to change two elements:
a) Width of the layout frame - defines the layout background and border
b) Width of the content frame - defines the area at which you can write your contents
In the CSS tab, change the width of "#container" from 700px; to 950px; and change the width of "#main" from 500px; to 750px;
You may change your Weebly template to whatever size you want, but best to keep the layout width below 980px, just to make sure that all your content will fit within your screen so it won't need to scroll from side to side. Make sure you change the size of the layout frame and the content frame in proportion to each other. In our example, I increased the layout frame by 250px. As such, I will need to increase the content frame by 250px as well.
To change the width of the layout, you need to change two elements:
a) Width of the layout frame - defines the layout background and border
b) Width of the content frame - defines the area at which you can write your contents
In the CSS tab, change the width of "#container" from 700px; to 950px; and change the width of "#main" from 500px; to 750px;
You may change your Weebly template to whatever size you want, but best to keep the layout width below 980px, just to make sure that all your content will fit within your screen so it won't need to scroll from side to side. Make sure you change the size of the layout frame and the content frame in proportion to each other. In our example, I increased the layout frame by 250px. As such, I will need to increase the content frame by 250px as well.
Weebly HTML - Step 2
Preview your Weebly template design by clicking on the "Preview" tab. Once you are satisfied with the results, click "Save & Exit", and "Publish" to publish your Weebly layout!
To watch a comprehensive video tutorial on how to adjust the layout width of your Weebly website, just visit DivTag Template's Free Weebly HTML Tutorials.
See how to change Weebly HTML for custom logos and background To see some beautiful and creative Weebly templates, visit DivTag HERE |