-
Posts
-
Hi friends,
I’m wondering if it is possible to change the current function feature wich displaying text next to the logo, So to be able to write text on both sides of the logo ?
Current function work fine as well, but I need text around logo left/right sided, This will greatly increase my SEO.add_filter('avf_logo_subtext', 'kriesi_logo_addition'); function kriesi_logo_addition($sub) { $sub .= '<h1>Company Name</h1>'; return $sub; }Take a look on printscreen
layoutThanks for advice
Hey,
You can change your code to following one and then place them on sides of your logo using custom CSS
add_filter('avf_logo_subtext', 'kriesi_logo_addition'); function kriesi_logo_addition($sub) { $sub .= '<h1>Company Name</h1>'; $sub .= '<h2>My company slogan</h2>'; return $sub; }Regards,
YigitHey Yigit,
Sorry for delay, the function above working just fine, but optimization for responsive mode still needs improvement..Thank you for your support
Regards
DarkoHey Guenni007,
Honestly, for the mobile version this does not work, though I would adjust with responsive css, because logo + text is not visible enough.
for mobile view I would leave only the clear logo at the top, and hendle SEO trough function below.function avf_logo_final_output_mod($logo, $use_image, $headline_type, $sub, $alt, $link) { $title = 'TITLE for SEO'; $dimension = "height='100' width='300'"; //basically just for better page speed ranking :P $logo = avia_get_option('logo'); if($logo = avia_get_option('logo')) { if(is_numeric($logo)){ $logo = wp_get_attachment_image_src($logo, 'full'); $logo = $logo[0]; } $logo = "<img {$dimension} src='{$logo}' alt='{$alt}' title='{$title}' />"; $logo = "<$headline_type class='logo'><a href='".$link."'>".$logo."$sub</a></$headline_type>"; } return $logo; } add_filter('avf_logo_final_output', 'avf_logo_final_output_mod', 10, 6);I think this is the simplest solution, if you have an idea in mind, i will be glad to hear it.
Cheers !
See here: https://webers-testseite.de/cynthia/logo-two-subs/
i have on that logo ( img , span1, span2 )
on wider screens i handle logo a as display flex and set the order this way that span1 is before img.
on mobile i go back to display block and can now position the spans absolute and float options.by the way i did not think on that function – i just added both spans with:
( so i have these as siblings to logo img )function add_logo_elements() { ?> <script> (function($){ $('.logo a').append('<span class="on-left">My Company</span><span class="on-right">My Slogan</span>'); })(jQuery); </script> <?php } add_action('wp_footer', 'add_logo_elements');on a customer page i did it just with one svg file – and on smaller screens i shift the groups the way i want.
It is a bit more work before – but you have a lot of advantages on that. Fill options etc. pp
OR: with your setting of logo on top nav below: https://webers-testseite.de/cynthia/logo-top-two-subs/you can set for wide screens on flex layout the logo container to 100% width and set justify-content to space-around.
Hey Guenni007,
On your examples are very nicely optimized, in this case it is a bit unusual situation.
The logo in its original form on the left and right of the sign contains the different titles, on the left is a title in the local language and on the right is a title in the English language.
And, the client wants the logo be displayed in it’s original form for both language units (users), So, I have the option to convince him that this is not usual, and to accept the version that only the sign in the header displayed for mobile users,
or, decide if the title with the logo matches the user’s spoken language (in that case I will use your solution from your example
or, full image logotype which will not see well.
I’m not sure how this will affect for SEO,Thanks for advice
you see the code i used to insert the additional containers.
It is easy to have there additional attributes on the spans ( title, alt etc.) – the code could be language specific because you can build if clauses on that case.
If you need different links on these left and right sentences – maybe it is better then to have siblings of the span.logo container instead.
i do not know how your prefered header looks like. So describe a bit more. On your example image above it seems to be that your logo is on top and navigation below.or maybe this is something for you: https://kriesi.at/documentation/enfold/example-of-widget-left-logo-center-widget-right-menu-below/#toggle-id-2
It is working with widgets in that area.Guenni007,
yes, logo is on top and navigation below. You made really good observations here, all of the options above from our conversation are very good guidelines for Enfold theme customization for unusual cases like this.
I will definitely consider all options, the final decision will be made by the client, and my main focus is to provide a good heading for SEO optimization.It was a pleasure to share experiences with you on this topic, I hope it will help others in customization of Theme as well..
Best Regards
DarkoMany thanks – I like people with good behaviour. ;)
Anyway – under my nick there is my contact information, if you know where the layout goes, then I’m happy to help.
But with your code above, which you used, I don’t think a special help is necessary. Sometimes you just can’t get to the simplest things, like the Order option of a Flex layout.
Otherwise my example pages are mostly without merging, so that you get quite far with the developer tools to pick out the css instructions.
- You must be logged in to reply to this topic.