changing avia iconbox title to h2 - Support | Kriesi.at

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
November 16, 2020 at 4:08 pm #1260739

msteid
Participant

Hi guys,

i would like to change my avia iconbox title to an h2 (for SEO reasons). I have found some links here, which partly offer a solution, but I can’t get along with their implementation at all and need help.

https://kriesi.at/support/topic/iconbox-change-h3-to-h2/#”>https://kriesi.at/support/topic/iconbox-change-h3-to-h2/#
https://kriesi.at/support/topic/how-to-change-header-tag-for-icon-list-and-icon-box/

Intro to layout builder

Furthermore I would like to have a gap of about 2 spaces between the avia icon button and the avia icon title. In the future I don’t want to enter the spaces or the distance manually in the headline anymore.

In the private content you will find the temporary access data.

Thanks for yor help.

November 19, 2020 at 2:42 pm #1261563

Yigit
Keymaster

Hey,

Thanks for contacting us!

1- You can go to Advanced > Heading and choose the heading you want to use on titles – https://imgur.com/a/thzqPdB

2- Could you please post a screenshot showing the changes you would like to make so we can make sure that we are on the same page? You can upload your screenshots on imgur.com and post the links here :)

Best regards,
Yigit

November 19, 2020 at 4:04 pm #1261588
msteid
Participant
Sorry I need the solution for a fullwidth buttton. So I want to change the title of the fullwidth button permanently to a h2 for seo-reasons.
Furthermore I would like to have a gap of about 2 spaces between the fullwidth buttton and the fullwidth buttton title. In the future I don’t want to enter the spaces or the distance manually in the headline anymore.
- This reply was modified 3 years, 11 months ago by msteid.
November 19, 2020 at 4:25 pm #1261597
Yigit
Keymaster
Hi,

1) – Please refer to this post – https://kriesi.at/documentation/enfold/child-theme/ and switch to child theme
– Edit functions.php file of your child theme and add following code
```
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');

  return $paths;
}
```
– Go to /enfold/config-templatebuilder/avia-shortcodes/buttons_fullwidth and copy buttons_fullwidth.php file to your child theme inside /shortcodes/ folder
– Open buttons_fullwidth.php file on your child theme and find following line
```
$content_html .= "<span class='avia_iconbox_title' >{$atts['label']}</span>";
```
and change it to following
```
$content_html .= "<h2 class='avia_iconbox_title' >{$atts['label']}</h2>";
```
2) Please add following code to bottom of Quick CSS field in Enfold theme options > General Styling tab
```
#top .avia-button-fullwidth .av-button-description.av-button-description-below {
    padding-top: 10px;
}
```
Best regards,
Yigit
November 19, 2020 at 4:44 pm #1261607

msteid
Participant

Hi Yigit,

thanks for your help. Now I want the font in white and the avia button icon should be on the left side beside the heading.

November 23, 2020 at 12:01 pm #1262322

msteid
Participant

Is there any solution for my second question?

November 23, 2020 at 1:15 pm #1262356

Yigit
Keymaster

Hi,

You can change font color in Styling > Colors and choose to display icon on the left in Content > Button – https://imgur.com/a/mWNbfVd

If that is not what you meant, please post a screenshot show the changes you would like to make. You can upload your screenshots on imgur.com and post the links here :)

Best regards,
Yigit

November 23, 2020 at 4:05 pm #1262425

msteid
Participant

Hi Yigit,

it is exactly what I meant, but your assistance doesn’t work. Please have a look to the site. You can find the login data in the private box above.
I think there is some custom css necessary.

Best regards,
msteid

November 23, 2020 at 5:18 pm #1262440
Yigit
Keymaster
Hey,

Yes apparently it is needed after switching tag to H2.

I added following code to bottom of Quick CSS field
```
#top #wrap_all .main_color h2.avia_iconbox_title {
    display: initial;
    color: white;
}
```
Please review your website :)

Best regards,
Yigit
November 23, 2020 at 10:34 pm #1262494

msteid
Participant

Hi Yigit,

thanks for your answer and solution. It works. Now there is one thing missing: I asked for a gap between the icon and the title. With your solution only the words of title are pulled apart, which I don’t like.

Do you have a solution for that?

November 24, 2020 at 2:10 pm #1262663
Yigit
Keymaster
Hi,

Please change the code I posted in my last reply to following one and adjust left margin value as needed
```
#top #wrap_all .main_color h2.avia_iconbox_title {
    display: initial;
    color: white;
    margin-left: 15px;
}
```
Best regards,
Yigit
November 24, 2020 at 2:39 pm #1262671

msteid
Participant

Hi Yigit,

everything is now as I thought.
Great job!

And thanks for your help!

Best regards.

November 24, 2020 at 2:44 pm #1262676

Yigit
Keymaster

Hi,

You are welcome, glad we could help :)

Let us know if you have any other questions or issues and enjoy the rest of your day!

Best regards,
Yigit
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘changing avia iconbox title to h2’ is closed to new replies.