Hi
Is there a way to change the H tag of the title in the Classic Feature Boxes on this page?
I would like the title of the first box - Driving lessons for beginners - to be H1 (as it’s the most important) but stay the same size as it is now and the the other two titles to be H2 but stay the same size.
If that isn’t possible, is it possible to assign a H1 tag to the site description: Top quality driving lessons in Scunthorpe and Brigg. ?
Hello Steve,
Thanks for posting in!
Regretfully the h tag of the featured headline were hardcoded and you cannot change it without modifying the code which is not recommended.
If you want to add an h1 tag in your site description, you will need to modify the _brand.php which is already present in your child theme.
Hope this helps.
OK, thanks for that.
It would be a useful if the title in the featured boxes could be given a specific H tag. Like we can with custom headlines. Maybe something for the future?
Hi There,
We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.
Thanks!
Hi @stevetheadi,
I was reviewing feature requests and wanted to chime in on this one. At this time we don’t have plans to change or add to the classic elements.
There is a way to do this if you add some code to functions.php of a child theme. I would recommend avoiding this technique whenever possible as it’s a bit heavy handed. The idea is that you can copy the shortcode handler and make your own version. Here’s a code example:
<?php
// Custom Feature Box
// =============================================================================
function custom_x_shortcode_feature_box( $atts, $content = '' ) {
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'style' => '',
'graphic' => '',
'graphic_size' => '',
'graphic_shape' => '',
'graphic_border' => '',
'graphic_color' => '',
'graphic_bg_color' => '',
'graphic_icon' => '',
'graphic_image' => '',
'graphic_image' => '',
'graphic_image_alt_text' => '',
'graphic_animation' => '',
'graphic_animation_offset' => '',
'graphic_animation_delay' => '',
'title' => '',
'title_color' => '',
'text' => '',
'text_color' => '',
'link_text' => '',
'link_color' => '',
'href' => '',
'href_title' => '',
'href_target' => '',
'align_h' => '',
'align_v' => '',
'side_graphic_spacing' => '',
'max_width' => '',
'child' => '',
'connector_width' => '',
'connector_style' => '',
'connector_color' => '',
'connector_animation' => ''
), $atts, 'x_feature_box' ) );
//
// Allow text attribute to be used instead of content.
//
if ( '' == $content && '' != $text ) {
$content = cs_decode_shortcode_attribute( $text );
}
$title = cs_decode_shortcode_attribute( $title );
$id = ( $id != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
$class = ( $class != '' ) ? 'x-feature-box ' . esc_attr( $class ) : 'x-feature-box';
$style = ( $style != '' ) ? $style : '';
$graphic = ( $graphic != '' ) ? $graphic : 'icon';
$graphic_size = ( $graphic_size != '' ) ? $graphic_size : '60px';
$graphic_shape = ( $graphic_shape != '' ) ? $graphic_shape : 'square';
$graphic_border = ( $graphic_border != '' ) ? $graphic_border : '';
$graphic_color = ( $graphic_color != '' ) ? $graphic_color : '#ffffff';
$graphic_bg_color = ( $graphic_bg_color != '' ) ? $graphic_bg_color : 'transparent';
$graphic_icon = ( $graphic_icon != '' ) ? $graphic_icon : '';
$graphic_image = ( $graphic_image != '' ) ? $graphic_image : '';
$graphic_image_alt_text = ( $graphic_image_alt_text != '' ) ? $graphic_image_alt_text : '';
$graphic_animation = ( $graphic_animation != '' ) ? $graphic_animation : 'none';
$graphic_animation_offset = ( $graphic_animation_offset != '' ) ? $graphic_animation_offset : '50';
$graphic_animation_delay = ( $graphic_animation_delay != '' ) ? $graphic_animation_delay : '0';
$title_color = ( $title_color != '' ) ? $title_color : '';
$text_color = ( $text_color != '' ) ? $text_color : '';
$link_text = ( $link_text != '' ) ? $link_text : '';
$link_color = ( $link_color != '' ) ? ' style="color: ' . $link_color . ';"' : '';
$href = ( $href != '' ) ? $href : '#';
$href_title = ( $href_title != '' ) ? $href_title : $link_text;
$href_target = ( $href_target == 'blank' ) ? ' target="_blank"' : '';
$align_h = ( $align_h != '' ) ? $align_h : 'center';
$align_v = ( $align_v != '' ) ? $align_v : 'top';
$side_graphic_spacing = ( $side_graphic_spacing != '' ) ? $side_graphic_spacing : '20px';
$max_width = ( $max_width != '' ) ? ' max-width: ' . $max_width . ';' : ' max-width: none;';
$child = ( $child == 'true' ) ? $child : '';
$connector_width = ( $connector_width != '' ) ? $connector_width : '1px';
$connector_style = ( $connector_style != '' ) ? $connector_style : 'dashed';
$connector_color = ( $connector_color != '' ) ? $connector_color : '#2ecc71';
$connector_animation = ( $connector_animation != '' ) ? $connector_animation : 'none';
//
// Graphic - design.
//
$graphic_font_size = 'font-size: ' . $graphic_size . ';';
if ( $graphic_border != '' && $graphic_shape != 'hexagon' && $graphic_shape != 'badge' ) {
$graphic_border = ' ' . $graphic_border;
} else {
$graphic_border = '';
}
if ( $graphic != 'image' ) {
$graphic_colors = ' color: ' . $graphic_color . '; background-color: ' . $graphic_bg_color . ';';
} else {
$graphic_colors = '';
}
if ( $graphic_shape == 'hexagon' || $graphic_shape == 'badge' ) {
$graphic_pseudo_element_color = ' border-color: ' . $graphic_bg_color . ';';
} else {
$graphic_pseudo_element_color = '';
}
//
// Graphic - side alignment.
//
if ( $align_h != 'center' ) {
$side_align_v_class = ( $align_v == 'middle' ) ? 'x-feature-box-align-v-middle' : '';
$side_graphic_spacing = ( $align_h == 'left' ) ? ' margin-right: ' . $side_graphic_spacing . ';' : ' margin-left: ' . $side_graphic_spacing . ';';
} else {
$side_align_v_class = '';
$side_graphic_spacing = '';
}
//
// Graphic - attributes.
//
$graphic_container_class_style = ' class="x-feature-box-graphic ' . $graphic_shape . ' ' . $side_align_v_class . '"';
$graphic_outer_class_style = ' class="x-feature-box-graphic-outer ' . $graphic_shape . cs_animation_base_class( $graphic_animation ) . '" style="' . $side_graphic_spacing . '"';
$graphic_inner_class_style = ' class="x-feature-box-graphic-inner ' . $graphic_shape . '" style="' . $graphic_font_size . $graphic_pseudo_element_color . '"';
$graphic_style = ' style="margin: 0 auto;' . $graphic_border . $graphic_colors . '"';
//
// Graphic.
//
if ( $graphic == 'image' ) {
$graphic_image_alt = ( $graphic_image_alt_text ) ? ' alt="' . $graphic_image_alt_text . '"' : '';
$graphic = '<div' . $graphic_container_class_style . '>'
. '<div' . $graphic_outer_class_style . '>'
. '<div' . $graphic_inner_class_style . '>'
. '<img class="' . $graphic_shape . '" src="' . $graphic_image . '"' . $graphic_style . $graphic_image_alt . '>'
. '</div>'
. '</div>'
. '</div>';
} else if ( $graphic == 'numbers' && $child == 'true' ) {
$graphic = '<div' . $graphic_container_class_style . '>'
. '<div' . $graphic_outer_class_style . '>'
. '<div' . $graphic_inner_class_style . '>'
. '<i class="number w-h ' . $graphic_shape . '"' . $graphic_style . '></i>'
. '</div>'
. '</div>'
. '</div>';
} else {
$graphic = '<div' . $graphic_container_class_style . '>'
. '<div' . $graphic_outer_class_style . '>'
. '<div' . $graphic_inner_class_style . '>'
. '<i class="x-icon-' . $graphic_icon . ' ' . $graphic_shape . '" ' . fa_data_icon( $graphic_icon ) . ' ' . $graphic_style . '></i>'
. '</div>'
. '</div>'
. '</div>';
}
//
// Connector.
//
if ( $child == 'true' ) {
$left = ( $align_h == 'left' ) ? ' left: 0;' : ' left: calc(100% - ' . $graphic_size . ');';
$right = ( $align_h == 'right' ) ? ' right: 0;' : ' right: calc(100% - ' . $graphic_size . ');';
$connector_class = cs_animation_base_class( $connector_animation );
$connector_style = 'style="' . $graphic_font_size . $left . $right . ' border-left: ' . $connector_width . ' ' . $connector_style . ' ' . $connector_color . ';"';
if ( $align_v == 'top' ) {
$connector = '<span class="x-feature-box-connector full' . $connector_class . '" ' . $connector_style . '></span>';
} else {
$connector = '<span class="x-feature-box-connector upper' . $connector_class . '" ' . $connector_style . '></span>'
. '<span class="x-feature-box-connector lower' . $connector_class . '" ' . $connector_style . '></span>';
}
} else {
$connector = '';
}
//
// Content.
//
$title_color = ( $title_color != '' ) ? ' style="color: ' . $title_color . ';"' : '';
$text_color = ( $text_color != '' ) ? ' style="color: ' . $text_color . ';"' : '';
$link = ( $link_text != '' ) ? ' <a href="' . $href . '" title="' . $href_title . '"' . $href_target . $link_color . '>' . $link_text . '</a>' : '';
$output = '<div class="x-feature-box-content ' . $side_align_v_class . '">'
. '<h1 class="x-feature-box-title"' . $title_color . '>' . $title . '</h1>'
. '<p class="x-feature-box-text"' . $text_color . '>' . do_shortcode( $content ) . $link . '</p>'
. '</div>';
//
// Output.
//
$js_params = array(
'child' => ( $child == 'true' ),
'graphicAnimation' => $graphic_animation
);
if ( $child == 'true' ) {
$js_params['connectorAnimation'] = $connector_animation;
$js_params['alignH'] = $align_h;
$js_params['alignV'] = $align_v;
} else {
$js_params['graphicAnimationOffset'] = $graphic_animation_offset;
$js_params['graphicAnimationDelay'] = $graphic_animation_delay;
}
$data = cs_generate_data_attributes( 'feature_box', $js_params );
$element = ( $child == 'true' ) ? 'li' : 'div';
$ordered_content = ( $align_h == 'right' ) ? $output . $graphic : $graphic . $output;
$align_h = ' ' . $align_h . '-text';
$align_v = ' ' . $align_v . '-text';
$output = "<{$element} {$id} class=\"{$class}{$align_h}{$align_v} cf\" style=\"{$style}{$max_width}\" {$data}>"
. $connector
. $ordered_content
. "</{$element}>";
return $output;
}
remove_shortcode( 'x_feature_box', 'x_shortcode_feature_box' );
add_shortcode( 'x_feature_box', 'custom_x_shortcode_feature_box' );