Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 5, 2019 at 10:00 am #1162849
    Darebvk

    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 printscreenscreenshoot layout

    Thanks for advice

    • This topic was modified 5 years ago by Darebvk.
    December 5, 2019 at 12:35 pm #1162936
    Yigit

    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,
    Yigit

    December 9, 2019 at 2:44 pm #1164039
    Darebvk

    Hey Yigit,
    Sorry for delay, the function above working just fine, but optimization for responsive mode still needs improvement..

    Thank you for your support

    Regards
    Darko

    December 9, 2019 at 3:05 pm #1164042
    Guenni007

    What would be your idea how the mobile version should look like?

    December 9, 2019 at 3:14 pm #1164051
    Darebvk

    Hey 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 !

    • This reply was modified 5 years ago by Darebvk.
    December 9, 2019 at 4:52 pm #1164075
    Guenni007

    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');
    December 9, 2019 at 5:07 pm #1164088
    Guenni007

    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.

    December 9, 2019 at 10:17 pm #1164213
    Darebvk

    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

    December 10, 2019 at 12:52 am #1164248
    Guenni007

    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.

    December 10, 2019 at 8:37 am #1164337
    Guenni007

    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.

    December 10, 2019 at 10:14 am #1164354
    Darebvk

    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
    Darko

    December 10, 2019 at 10:48 am #1164363
    Guenni007

    Many 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.

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.