|
One of the most exciting features of Weebly 4 is the huge upgrade of website design tools including sections element and sections layouts.
Sections are the highest structural elements in a web page. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas. Within Weebly's Section, you can drag and drop other elements, choose among pre-made layouts, or customize background in a very basic manner. If you wish to create stunning pages by arranging content in any way you like or simply having more design options, then X App will be the best choice! |
|
Using X App, each of your sections can be one X, which in turn contains columns with various configurations.
|
Within Weebly Editor, click on Build tab, navigate to THIRD PARTY section then drag & drop X into the right position of your building page.
Note: If you intend to use four X or more, you should work on with a test page first then copy the prepared sections to your building page, in order to avoid long processing time.
Click on a blank area of X to show a pop-up Setting box then choose among 3 display modes.
|
Normal: This display mode is a box filled with color or any selected image.
|
Fit: This display mode lets you easily fit content within the width of your theme.
|
Fullwidth: This display mode lets you use a full-width section.
|
|
Every time you add an X you will need to define its properties first.
In the Setting box, click on Configure Layout Settings to show the Setting panel. 1. Column Structures:
>> Click on LAYOUT.
>> Choose a layout type you prefer. Column structures available include: 1/2 page, 1/3 page, 2/3 page, 1/4 page, 3/4 page, etc.
Wait until the notification Your settings updated successfully! shows up then continue with your work.
2. Section Settings:
>> Click on SETTING.
|
|
Background Image:
If defined, this image will be used as the background for this section. To remove a background image, simply delete the URL from the field. Background Transparent:
Remove background color of this section, allowing the website background color or background image to show through. |
|
Use Parallax Effect:
Give your background image a fixed position as you scroll. Keep in mind that your image will scale to the browser height. Background Color:
If you would simply like to use a solid color background for your section, use the color picker or HEX code to define a background color. |
|
Background Video:
Add a background video to this section by entering the direct YouTube link into the field. Background Video Left/Top:
In case you want to re-position the background video within current section, input specific values (in percentages or pixels) with respect to the left/top margin. |
|
Background Video Width:
In order for video to be sized correctly, you must input the exact width (in percentage or pixels) of your video here, otherwise the background position will be incorrect. Width of Inner Content:
Define custom width (in pixels or percentages) for elements inside this section. |
|
Custom Padding:
Adjust padding to specific values (in pixels) on Desktop/Tablet/Mobile, or leave blank to use the default padding. Custom Font Size:
Adjust title and text font size to specific values (in pixels) on Desktop/Tablet/Mobile, or leave blank to use the default font size. |
|
Custom Margin:
Adjust margin to specific values (in pixels) on Desktop/Tablet/Mobile, or leave blank to use the default margin. Negative value is acceptable. |
|
Border Style:
Choose among 4 styles of section's border (Solid, Dotted, Dashed, Double). Border Color:
Use the color picker or HEX code to define a border color. Equalize Column Heights:
Force all columns in the section to have the same height value. This option is useful when you apply background to individual columns. |
|
Border Width:
Define the thickness of section's border. If you don't want to show the border, simply leave "0px" in all boxes. Full-height:
If you turn on this option, the section will take on the height of the browser window. Vertical Align Content:
Align inner elements to the top/middle/bottom of the section. |
|
Several column layouts can be placed inside the section. Corresponding to each column, click on each box to create your own custom setting.
Much like section, column has various setting that include: background; title and text color; border color, thickness, types; padding; effect; etc.
|
|
Background Image:
If defined, this image will be used as the background for this section. To remove a background image, simply delete the URL from the field. Background Color:
If you would simply like to use a solid color background for your section, use the color picker or HEX code to define a background color. |
|
Background Transparent:
Remove background color of this section, allowing the website background color or background image to show through. |
|
Background Color Overlay:
Add a colored layer between background and content to make the content easy to read. You can use either the color picker or rgba value to define a color for this overlay. |
|
Paragraph Title Color:
Use the color picker or HEX code to define a color for title. Paragraph Text Color:
Use the color picker or HEX code to define a color for text. |
|
Border Style:
Choose among 4 styles of column's border (Solid, Dotted, Dashed, Double). Border Color:
Use the color picker or HEX code to define a border color. |
|
Border Width:
Define the thickness of column's border. If you don't want to show the border, simply leave "0px" in all boxes. |
|
Use Parallax Effect:
Give your background image a fixed position as you scroll, creating a fun parallax-like effect. Custom Padding:
Adjust padding to specific values (in pixels) on Desktop/Tablet/Mobile, or leave blank to use the default padding. |
|
Use Animate Effect:
Add animation (chosen from the list below) to elements inside the column. Note that the effect cannot be viewed in Editor mode. |
