Element Service Box Style Flatsome

Thủ thuật WordPress
1

Tổng hợp các Service Box dành riêng cho theme Flatsome.

Các sử dụng bạn vào mục Add Elements → Import (Dán đoạn code bên dưới)

image
image294×580 4.41 KB

Chúc các bạn thành công.

Service Box Style 1

image
image1339×486 65.5 KB

[row col_bg_radius="20" v_align="equal" padding="15px 15px 15px 15px"]

[col span="3" span__sm="6" bg_color="rgb(246, 125, 74)" border="0px 120px 0 0px" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(255, 255, 255)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7279" pos="center" icon_color="rgb(246, 125, 74)"]

<h3><span style="color: #f67d4a;">Web Design</span></h3>
<p class="description">Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</p>

[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(41, 198, 229)" border="0px 120px 0 0px" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(255, 255, 255)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(41, 198, 229)"]

<h3><span style="color: #29c6e5;">Web Development</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(9, 145, 194)" border="0px 120px 0 0px" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(255, 255, 255)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7281" pos="center" icon_color="rgb(9, 145, 194)"]

<h3><span style="color: #0991C2;">Responsive Design</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(0, 23, 53)" border="0px 120px 0 0px" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(255, 255, 255)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7280" pos="center" icon_color="rgb(0, 23, 53)"]

<h3><span style="color: #001735;">Brand Building</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/featured_box]

[/col_inner]

[/row_inner]

[/col]

[/row]

Service Box Style 2

image
image1343×535 51.4 KB

[row col_bg_radius="20" v_align="equal" padding="15px 15px 15px 15px"]

[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="0px 120px 200px 0px" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(233, 233, 233)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="200px 120px 0px 0px" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(233, 233, 233)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="200px 0px 0px 120px" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(233, 233, 233)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="0px 0px 200px 120px" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(233, 233, 233)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]

[/row]

Service Box Style 3

image
image1351×537 52.9 KB

[row col_bg_radius="20" v_align="equal" padding="15px 15px 15px 15px"]

[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="0px 120px 0 0px" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(233, 233, 233)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="0px 0px 0 120px" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(233, 233, 233)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="200px 0px 0px 0" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(233, 233, 233)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="0px 0px 200px 0" border_margin="0px 0 0px 0px" border_radius="18" border_color="rgb(233, 233, 233)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]

[/row]

Service Box Style 4

image
image1347×544 58.8 KB

[row col_bg_radius="20" v_align="equal" padding="15px 15px 15px 15px"]

[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="20px 20px 20px 20px" border_margin="0px 0 0px 0px" border_style="dashed" border_radius="18" border_color="rgb(148, 234, 255)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="80px 0px 0px 80px" border_margin="0px 0 0px 0px" border_style="dotted" border_radius="18" border_color="rgb(148, 234, 255)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" divider="0" bg_color="rgb(56, 119, 229)" border="0px 6px 6px 0px" border_margin="0px -2px -2px 0px" border_radius="20" border_color="rgb(0, 60, 133)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgba(255, 255, 255, 0.95)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(229, 229, 229)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="6" bg_color="rgb(56, 119, 229)" border="18px 18px 18px 18px" border_margin="5px 5px 5px 5px" border_radius="18" border_color="rgb(148, 234, 255)"]

[row_inner style="collapse" col_style="solid" col_bg_radius="20"]

[col_inner span__sm="12" divider="0" bg_color="rgb(255, 255, 255)" border="1px 1px 1px 1px" border_radius="18" border_color="rgb(255, 255, 255)"]

[featured_box img="7282" pos="center" icon_color="rgb(56, 119, 229)"]

<h3><span style="color: #3877E5;">Lorem ipsum dolor sit amet</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>


[/featured_box]

[/col_inner]

[/row_inner]

[/col]

[/row]

Vui lòng ghi rõ nguồn WordPressVN.com khi trích dẫn lại thông tin từ website này.

1 Lượt thích
2

Service Box Style 5

image
image1364×521 68.7 KB

[row v_align="equal" padding="15px 15px 15px 15px" depth="1" class="service-24"]

[col span="3" span__sm="6" border="5px 5px 5px 5px" border_margin="0px 0 0px 0px" border_radius="0" border_color="rgb(240, 240, 240)"]

[featured_box img="7279" img_width="40" pos="center" margin="10px 0px 10px 0px" icon_border="1" icon_color="rgb(250, 139, 80)"]

[ux_text text_align="center"]

<h3 class="uppercase"><span style="color: #f67d4a;">Web Design</span></h3>
<p class="description">Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</p>
[/ux_text]

[/featured_box]

[/col]
[col span="3" span__sm="6" border="5px 5px 5px 5px" border_margin="0px 0 0px 0px" border_radius="0" border_color="rgb(240, 240, 240)"]

[featured_box img="7282" img_width="40" pos="center" margin="10px 0px 10px 0px" icon_border="1" icon_color="rgb(41, 198, 229)"]

<h3 class="uppercase"><span style="color: #29c6e5;">Web Development</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/featured_box]

[/col]
[col span="3" span__sm="6" border="5px 5px 5px 5px" border_margin="0px 0 0px 0px" border_radius="0" border_color="rgb(240, 240, 240)"]

[featured_box img="7281" img_width="40" pos="center" margin="10px 0px 10px 0px" icon_border="1" icon_color="rgb(9, 145, 194)"]

<h3 class="uppercase"><span style="color: #0991C2;">Responsive Design</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/featured_box]

[/col]
[col span="3" span__sm="6" border="5px 5px 5px 5px" border_margin="0px 0 0px 0px" border_radius="0" border_color="rgb(240, 240, 240)"]

[featured_box img="7280" img_width="40" pos="center" margin="10px 0px 10px 0px" icon_border="1" icon_color="rgb(0, 23, 53)"]

<h3 class="uppercase"><span style="color: #001735;">Brand Building</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/featured_box]

[/col]

[/row]

CSS bổ sung

.service-24 .icon {
    line-height: 100px;
    width: 100px;
    height: 100px;
    margin: 0 -25px 20px;
    border-radius: 50% 50% 0;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    position: relative;
    z-index: 1;
}
.service-24 .icon .icon-inner {
    border: none;
}
.service-24 .icon .icon-inner:before {
    content: '';
    background: linear-gradient(currentColor, rgba(0,0,0, 0.5));
    border-radius: 50%;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    z-index: -1;
}
.service-24 .icon-box:hover .has-icon-bg .icon .icon-inner{
	background-color:transparent;
}
.service-24 .icon-box-img svg path {
    fill: #FFF;
}