avatar
layout position item follow sign or plus WordPress

• Let prepare sample design or refer the following here. We will practice on WP Bakery Page Builder.

• Upon initializing Row element, we can custom layout for the design with perfect ratio is 1/3+2/3.

• After that, we add Heading Custom on left column and right column will be major part for this snippet.

• In Info Box element, we have two stuffs for pay attention.

  • Icon
  • Content

With Icon part, we recommend to install Ultimate Addons for Visual Composer plugin and setup collection of icons inside.

Select Font Icon Manager in select-box and pick icon in Select Icon section.

In tab Description, you can move tex tab and edit as HTML. Whereby, you can increasing more capabilities to style for your description.

• Now, jumping into vital part, we will `position:absolute` and layout all items follow up above design.

.info-box-col > .wpb_wrapper {
    position: absolute;
    height: -webkit-fill-available;
}

.info-box-col > .wpb_wrapper > .aio-icon-component:first-child {
    transform: translate(0%, 64px);
    box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 10%);
    border-radius: 28px;
    padding-top: 28px;
    padding-bottom: 28px;
    background: white;
    min-width: 260px;
}

.info-box-col > .wpb_wrapper > .aio-icon-component:nth-child(2) {
    transform: translate(110%, -141%);
    box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 10%);
    border-radius: 28px;
    padding-top: 28px;
    padding-bottom: 28px;
    background: white;
    min-width: 260px;
}

.info-box-col > .wpb_wrapper > .aio-icon-component:nth-child(3) {
    transform: translate(110%, -159%);
    box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 10%);
    border-radius: 28px;
    padding-top: 28px;
    padding-bottom: 28px;
    background: white;
    min-width: 260px;
}

.info-box-col > .wpb_wrapper > .aio-icon-component:nth-child(4) {
    transform: translate(222%, -333%);
    box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 10%);
    border-radius: 28px;
    padding-top: 28px;
    padding-bottom: 28px;
    background: white;
    min-width: 260px;
}

We use `info-box-col` as custom class in Column element and modify CSS style as above. 

• In reality, the above code is quite a bit complex and no more concise and easier to read. Hence, we will still need to optimize and improve.

position: relative; 
top: 64px; 
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
border-radius: 28px; 
padding: 28px 0; 
background: #fff; 
height: 220px; 
width: 240px;

Beside, you need to setup `height`, `position` and `box-sizing` in class `.wpb_wrapper` to wrap content and wrap all cubes.

position: inherit;
height: 400px;
box-sizing: border-box;
You need to login to do this manipulation!