Bước 1: Tạo Element Tab có thể upload icon
- Truy cập UX Blocks → tạo một block mới.
- Trong UX Builder, thêm Element “Tabs”.
- Mỗi tab đại diện cho một mục trong menu, bạn có thể thêm ảnh icon đại diện bằng cách chèn hình ảnh vào tiêu đề hoặc nội dung của tab.
Bước 2: Dựng khối UX Builder
- Sử dụng UX Builder để thiết kế giao diện menu mobile theo ý muốn.
- Bạn có thể thêm icon, chữ, hiệu ứng hover, phân cột,… tất cả đều có sẵn và dễ tùy chỉnh trong Flatsome.
Bước 3: Gán block vào khu vực mobile menu
- Vào Flatsome > Theme Options > Mobile Menu.
- Tại phần “Mobile Menu Content”, chọn Block vừa tạo ở bước 1.
- Bật tùy chọn “Replace default menu with block” để sử dụng block UX Builder thay cho menu mobile mặc định.
Bước 4: Chỉnh sửa hoàn thiện
- Tuỳ chỉnh lại icon, cỡ chữ, khoảng cách giữa các mục để phù hợp với trải nghiệm mobile.
- Kiểm tra trên điện thoại hoặc chế độ responsive để đảm bảo mọi thứ hiển thị đúng.
Dưới đây là cách thực hiện
Thêm Icon Image vào tiêu đề thẻ Tab element
Bạn copy – paste đoạn code sau bỏ vào functions.php nha!
// Thêm icon image vào tab trong theme Flatsome
function rflatsome_ux_builder_template( $path ) {
ob_start();
include get_template_directory() . '/inc/builder/shortcodes/templates/' . $path;
return ob_get_clean();
}
//
function rflatsome_ux_builder_thumbnail( $name ) {
return get_template_directory_uri() . '/inc/builder/shortcodes/thumbnails/' . $name . '.svg';
}
//
function giuseart_convert_name($str) {
$str = preg_replace("/(à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ)/", 'a', $str);
$str = preg_replace("/(è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ)/", 'e', $str);
$str = preg_replace("/(ì|í|ị|ỉ|ĩ)/", 'i', $str);
$str = preg_replace("/(ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ)/", 'o', $str);
$str = preg_replace("/(ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ)/", 'u', $str);
$str = preg_replace("/(ỳ|ý|ỵ|ỷ|ỹ)/", 'y', $str);
$str = preg_replace("/(đ)/", 'd', $str);
$str = preg_replace("/(À|Á|Ạ|Ả|Ã|Â|Ầ|Ấ|Ậ|Ẩ|Ẫ|Ă|Ằ|Ắ|Ặ|Ẳ|Ẵ)/", 'A', $str);
$str = preg_replace("/(È|É|Ẹ|Ẻ|Ẽ|Ê|Ề|Ế|Ệ|Ể|Ễ)/", 'E', $str);
$str = preg_replace("/(Ì|Í|Ị|Ỉ|Ĩ)/", 'I', $str);
$str = preg_replace("/(Ò|Ó|Ọ|Ỏ|Õ|Ô|Ồ|Ố|Ộ|Ổ|Ỗ|Ơ|Ờ|Ớ|Ợ|Ở|Ỡ)/", 'O', $str);
$str = preg_replace("/(Ù|Ú|Ụ|Ủ|Ũ|Ư|Ừ|Ứ|Ự|Ử|Ữ)/", 'U', $str);
$str = preg_replace("/(Ỳ|Ý|Ỵ|Ỷ|Ỹ)/", 'Y', $str);
$str = preg_replace("/(Đ)/", 'D', $str);
$str = preg_replace("/(\“|\”|\‘|\’|\,|\!|\&|\;|\@|\#|\%|\~|`|\=|\_|\'|\]|\[|\}|\{|\)|\(|\+|\^)/", '-', $str);
$str = preg_replace("/( )/", '-', $str);
return $str;
}
function rdev_ux_builder_element(){
add_ux_builder_shortcode('giuseart_tabs', array(
'type' => 'container',
'name' => __( 'Tab with Images' ),
'image' => '',
'category' => __( 'Content' ),
'template' => rflatsome_ux_builder_template( 'tabgroup.html' ),
'tools' => 'shortcodes/tabgroup/tabgroup.tools.html',
'info' => '{{ title }}',
'allow' => array( 'giuseart_tab' ),
'children' => array(
'draggable' => false,
'addable_spots' => array( 'center' ),
),
'toolbar' => array(
'show_children_selector' => true,
'show_on_child_active' => true,
),
'presets' => array(
array(
'name' => __( 'Default' ),
'content' => '
[giuseart_tabs title="Tab Title"]
[giuseart_tab title="Tab 1 Title"][/giuseart_tab]
[giuseart_tab title="Tab 2 Title"][/giuseart_tab]
[giuseart_tab title="Tab 3 Title"][/giuseart_tab]
[/giuseart_tabs]
'
),
),
'options' => array(
'title' => array(
'type' => 'textfield',
'heading' => __( 'Title' ),
'default' => __( '' ),
),
'style' => array(
'type' => 'select',
'heading' => __( 'Style' ),
'default' => 'line',
'options' => require( get_template_directory(). '/inc/builder/shortcodes/values/nav-styles.php' ),
),
'type' => array(
'type' => 'select',
'heading' => __( 'Type' ),
'default' => 'horizontal',
'options' => array(
'horizontal' => 'Horizontal',
'vertical' => 'Vertical',
)
),
'nav_style' => array(
'type' => 'radio-buttons',
'heading' => 'Nav Style',
'default' => 'uppercase',
'options' => require( get_template_directory(). '/inc/builder/shortcodes/values/nav-types-radio.php' ),
),
'nav_size' => array(
'type' => 'radio-buttons',
'heading' => __( 'Size' ),
'default' => 'medium',
'options' => require( get_template_directory(). '/inc/builder/shortcodes/values/text-sizes.php' ),
),
'align' => array(
'type' => 'radio-buttons',
'heading' => 'Tabs Align',
'default' => 'left',
'options' => require( get_template_directory(). '/inc/builder/shortcodes/values/align-radios.php' ),
),
'bahavior_group' => array(
'type' => 'group',
'heading' => __( 'Behavior' ),
'options' => array(
'event' => array(
'type' => 'radio-buttons',
'heading' => __( 'Activate' ),
'description' => 'On hover takes effect in non-edit mode.',
'default' => '',
'options' => array(
'' => array( 'title' => 'On click' ),
'hover' => array( 'title' => 'On hover' ),
),
),
),
),
'advanced_options' => require( get_template_directory(). '/inc/builder/shortcodes/commons/advanced.php'),
),
));
add_ux_builder_shortcode( 'giuseart_tab', array(
'type' => 'container',
'name' => __( ' GiuseArt Tab Panel' ),
'template' => rflatsome_ux_builder_template('tab.html' ),
'info' => '{{ title }}',
'require' => array( 'giuseart_tabs' ),
'hidden' => true,
'wrap' => false,
'options' => array(
'title' => array(
'type' => 'textfield',
'heading' => __( 'Title' ),
'default' => __( 'Tab Title' ),
'auto_focus' => true,
),
'img' => array(
'type' => 'image',
'heading' => 'Icon',
'default' => '',
),
),
) );
}
add_action('ux_builder_setup', 'rdev_ux_builder_element');
function giuseart_tab_func($params, $content = null, $tag = ''){
$GLOBALS['tabs'] = array();
$GLOBALS['tab_count'] = 0;
$i = 1;
extract(shortcode_atts(array(
'id' => 'panel-'.rand(),
'title' => '',
'style' => 'line',
'align' => 'left',
'class' => '',
'visibility' => '',
'type' => '', // horizontal, vertical
'nav_style' => 'uppercase',
'nav_size' => 'normal',
'history' => 'false',
'event' => '',
), $params));
if($tag == 'giuseart_tabs_vertical'){
$type = 'vertical';
}
$content = do_shortcode( $content );
$wrapper_class[] = 'tabbed-content';
if ( $class ) $wrapper_class[] = $class;
if ( $visibility ) $wrapper_class[] = $visibility;
$classes[] = 'nav';
if($style) $classes[] = 'nav-'.$style;
if($type == 'vertical') $classes[] = 'nav-vertical';
if($nav_style) $classes[] = 'nav-'.$nav_style;
if($nav_size) $classes[] = 'nav-size-'.$nav_size;
if($align) $classes[] = 'nav-'.$align;
if($event) $classes[] = 'active-on-' . $event;
$classes = implode(' ', $classes);
$return = '';
if( is_array( $GLOBALS['tabs'] )){
foreach( $GLOBALS['tabs'] as $key => $tab ){
if($tab['title']) $id = flatsome_to_dashed($tab['title']);
$active = $key == 0 ? ' active' : ''; // Set first tab active by default.
$tabs[] = '<li class="tab'.$active.' has-icon" data-code="'.giuseart_convert_name($tab['title']).'"><a href="#tab_'.giuseart_convert_name($id).'">'.flatsome_get_image( $tab['img'], 'thumbnail').'<h3>'.$tab['title'].'</h3></a></li>'; //flatsome_get_image( $tab['img'], 'thumbnail')
$panes[] = '<div class="panel'.$active.' entry-content" id="tab_'.$id.'">'.do_shortcode( $tab['content'] ).'</div>';
$i++;
}
if($title) $title = '<h4 class="uppercase text-'.$align.'">'.$title.'</h4>';
$return = '
<div class="'.implode(' ', $wrapper_class).' giuseart_tabs">
'.$title.'
<ul class="'.$classes.'">'.implode( "\n", $tabs ).'</ul><div class="tab-panels">'.implode( "\n", $panes ).'</div></div>';
}
return $return;
}
function giuseart_ux_tab( $params, $content = null) {
extract(shortcode_atts(array(
'title' => '',
'title_small' => '',
'img' => '',
), $params));
$x = $GLOBALS['tab_count'];
$GLOBALS['tabs'][$x] = array(
'img' => $img,
'title' => sprintf( $title, $GLOBALS['tab_count'] ),
'content' => $content
);
$GLOBALS['tab_count']++;
}
add_shortcode('giuseart_tabs', 'giuseart_tab_func');
add_shortcode('giuseart_tabs_vertical', 'giuseart_tab_func');
add_shortcode('giuseart_tab', 'giuseart_ux_tab' );
Dựng khối UX builder cho menu mobile
Bạn tạo khối UX Builder nhé
Sau đó, copy toàn bộ shortcode của block này của mình. Lưu ý: bật chế độ soạn thảo văn bản để paste dữ liệu.
Gán Header block cho khối Ux
Bạn vào Giao diện → Tùy biến → Header, sau đó chọn phần HTML → Block, rồi gán khối block UX Builder bạn vừa tạo vào đây. Tùy theo thiết kế và cấu trúc hiện tại của website, bạn có thể gán vào Header Block 1 hoặc Header Block 2 đều được, miễn là bạn nhớ rõ vị trí mình đã gán.
Lưu ý: Bước này rất quan trọng vì lát nữa bạn sẽ cần bật khối đó trong phần Header Mobile Menu của Flatsome Options để nó hiển thị đúng trên giao diện di động.
Sau khi đã gán Header Block 2 cho khối vừa tạo, bạn quay lại phần Tùy biến → Header → Header Mobile Menu / Overlay trong Flatsome. Sau đó bạn làm các bước sau: bật Header Block -> Tắt các biểu tượng và element mặc định
Trang trí menu mobile với Custom CSS
Bạn copy – past đoạn code sau vào file custom CSS
.off-canvas-right .mfp-content, .off-canvas-left .mfp-content {
width: 100%;
}
.off-canvas .sidebar-menu {
padding: 0;
}
.header-block .col {
padding-left: 0;
padding-right: 0;padding-bottom: 0;
}
.giuseart_tabs {
display: block;
}
.giuseart_tabs .nav {
gap: 0;
float: left;
width: 18%;
background-color: #fee2e1;
overflow: auto;
margin: 0 !important;
}
.giuseart_tabs ul li {
padding-left: 0;
}
.giuseart_tabs .nav li:first-child {
background: #fcb4b5;
}
.off-canvas .nav-vertical>li>a {
padding-bottom: 10px;
padding-top: 10px;
font-size: 16px;
text-transform: none;
letter-spacing: 0;
color: #333;
font-weight: 500;
}
.giuseart_tabs ul li a img {
width: 40px;
height: 40px;
border-radius: 99%;
margin: 0 auto 5px auto;
}
.giuseart_tabs ul li a h3 {
font-size: 14px;
font-weight: 500;
margin-bottom: 0;
}
.giuseart_tabs .nav li:nth-child(2) {
background: #fee2e1;
}
.giuseart_tabs .nav li:nth-child(3) {
background: #ffeed6;
}
.giuseart_tabs .nav li:nth-child(4) {
background: #fff8c4;
}
.giuseart_tabs .nav li:nth-child(5) {
background: #ecfccb;
}
.giuseart_tabs .nav li:nth-child(6) {
background: #d1fbe5;
}
.giuseart_tabs .nav li:nth-child(7) {
background: #e0f2fe;
}
.giuseart_tabs .nav li:nth-child(8) {
background: #e1e7fd;
}
.giuseart_tabs .nav li:nth-child(9) {
background: #edeaff;
}
.giuseart_tabs .nav li:nth-child(10) {
background: #eafff9;
}
.giuseart_tabs .tab-panels {
width: 100%;
padding: 15px 10px 10px 20%;
}
.tab-panels .entry-content .row {
margin-left: -5px !important;
margin-right: -5px !important;
}
.giuseart_tabs .tab-panels .col {
padding: 0 5px 0px !important;
}
.giuseart_tabs .col:first-child h3 {
margin-top: 0 !important;
border-left: none;
padding-left: 0;line-height: 24px;
font-size: 16px;margin-bottom: 10px;
color: #333;
}
.giuseart_tabs .tab-panels .icon-box {
border: solid 1px #d2d2d2;
padding: 5px;
border-radius: 10px;
background: white;
margin-bottom: 10px;
}
.giuseart_tabs .tab-panels .icon-box .icon-box-img {
margin-bottom: 7px;
width: 45px !important;
}
.giuseart_tabs .tab-panels .icon-box .icon-box-img img {
border-radius: 10px;
}.giuseart_tabs .tab-panels .icon-box .icon-box-text {
padding-left: 0;color: white;
font-size: 14px;
line-height: 20px;
}.giuseart_tabs .tab-panels ul {
display: inline-block;
margin-top: 0 !important;
margin-bottom: 0;
} .giuseart_tabs .tab-panels ul li {
margin-right: 6px;
display: inline-block;
float: left;
width: auto !important;
}.giuseart_tabs .tab-panels ul li a {
color: #565656;
border: 1px solid #cccccc;
border-radius: 10px;
padding: 9px 10px;
line-height: 44px;
}
Sau khi bạn đã thêm CSS tùy chỉnh, chắc chắn giao diện menu mobile nhìn chuyên nghiệp, hiện đại và khác biệt rõ rệt so với menu mặc định của Flatsome. vvBạn hãy kiểm tra lại toàn bộ giao diện trên thiết bị di động, xem phần nào còn hiển thị chưa đẹp, khoảng cách chưa hợp lý, hoặc font/icon chưa cân đối,… thì có thể tự chỉnh thêm bằng CSS để hoàn thiện theo đúng ý mình.
Sau khi hoàn thiện, hãy hưởng thụ kết quả nhé. Chúc bạn thành công !
