#1 Weebly Page Layouts Builder
X App - #1 Weebly Page Layout Builder
  • Home
  • Examples
  • Guide
  • Tutorials
ADD X
  • Home
  • Examples
  • Guide
  • Tutorials

X App Guide

This instruction was offered to help you make the most of the X App so please read and follow it carefully.
Should you have any question or need help, drop us a line, anytime, at
app@baamboostudio.com.

Overview

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!
Picture
Using X App, each of your sections can be one X, which in turn contains columns with various configurations.
Picture

Getting Started

Picture
Within Weebly Editor, click on Build tab, navigate to THIRD PARTY section then drag & drop X into the right position of your building page.

Picture
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.

Picture
Click on a blank area of X to show a pop-up Setting box then choose among 3 display modes.

Picture
Picture
Normal: This display mode is a box filled with color or any selected image.
Picture
Fit: This display mode lets you easily fit content within the width of your theme.
Picture
Fullwidth: This display mode lets you use a full-width section.

Configuring 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.
Picture
>> 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.
Picture
Wait until the notification Your settings updated successfully! shows up then continue with your work.
2. Section Settings:
>> Click on SETTING.
Picture
>> A pop-up window shows various setting that can be used to do some really awesome things, including:
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.

Picture
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.

Picture
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.

Picture
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.

Picture
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.

>> When you have done with editing, click on SAVE button then wait for
the notification Your settings updated successfully! to continue with your work.

Configuring Column

Several column layouts can be placed inside the section. Corresponding to each column, click on each box to create your own custom setting.
Picture
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.

Picture
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.

Picture
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.

Picture
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.

Picture
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.

>> When you have done with editing, click on SAVE button then wait for
the notification Your settings updated successfully! to continue with your work.

>> Click on Done button at the right top of the screen to return to your building page.
You can also take a look at our X App Examples to get your own inspiration!
Picture
Follow for more products and inspiration
made with love by baamboo studio

Stunning Examples