Breadcrumb above post title plus other info

Hey marcoabis81,
Sorry for the late reply and thanks for the login, I see that you are using the “Elegant” blog style, if you switch to the “default business” blog layout it will show your meta below the title instead of at the end of your post.
To move the breadcrumbs to above the title, Try adding this code to the end of your functions.php file in Appearance > Editor:

//move breadcrumbs above post title
function move_breadcrumb_below_title() {
	?>
		<script type="text/javascript">
		(function($) {
			function a() {
                $('#main .avia-breadcrumbs').detach().insertBefore('h1.post-title.entry-title');
                $('#main .avia-breadcrumbs').append('<br/>');
			}
	
			a();
		})(jQuery);
		</script>
	<?php
	}
add_action('wp_footer', 'move_breadcrumb_below_title');

result:

Best regards,
Mike

Hi,
1: try disabling the featured image from showing on the single post and add your image to the top of your post, it will then show under the title.
2 & 4: is there more than one author and is the social icons for the author or the site? You may need to edit the single.php file to achieve this, as it’s not quite as easy as it sounds.
3: to make the H1 bolder, try this css:

#top #wrap_all h1.post-title.entry-title  a {
    font-weight: 900 !important;
    font-size: 40px !important;
}

900 is the boldest, but not all fonts have this, increasing the font size may also help it to stand out, just remove if you wish.

Best regards,
Mike

Hi,
Unfortunately, trying to match this layout:

is going to be a much bigger customization than what we can do here, I recommend hiring a freelancer on upwork.com and have them create a custom “single.php” file for you.
I also recommend creating a “staging site” for the freelancer to work on, most web hosts have a one click staging site option in the cPanel which creates a staging clone of your site so they can test and edit on it and your site will stay up and running untouched. You can always ask your webhost if you have this option.

Here are some screenshots of what it would look like:

Best regards,
Mike

Hi,
Do you want to continue using the “default business” blog layout? The elegent & modern layouts both will put the post title above the featured image, then if you want I can try to adjust the breadcrumbs script to somewhere else, right now the breadcrumbs are tied to the post title so wherever it goes the breadcrumbs will follow.

Best regards,
Mike

Hi,
Ok, I changed the blog post layout to Elegant and changed the script in the functions.php to:

function move_breadcrumb_below_title() {
	?>
		<script type="text/javascript">
		(function($) {
			function a() {
                $('#main .avia-breadcrumbs').detach().insertAfter('h1.post-title.entry-title');
                $('#main .post-meta-infos').detach().insertAfter('.big-preview.single-big');
			}
	
			a();
		})(jQuery);
		</script>
	<?php
	}
add_action('wp_footer', 'move_breadcrumb_below_title');

and added this css to the italian Quick CSS, you may need to add it to your other languages:

.html_elegant-blog #top .post-entry .post-meta-infos {
	margin-top: 0 !important; 
}
#top.single span.av-vertical-delimiter {
	border-color: transparent; !important; 
}

please clear your browser cache and check the link in the Private Content area.

Best regards,
Mike

Hi,
Thank you for the feedback, I added $('#main .avia-breadcrumbs').append('<br/>'); to solve the mobile featured image issue.
Adding the meta author be below the breadcrumbs broke the layout, so as you asked above I put it under the featured image.

Best regards,
Mike

Hi,
1: Thank you for the screenshot, it looks like this occurs because you are hiding the categories with this css:

span.blog-categories.minor-meta {
    display: none!important;
}

To correct please add this css:

span.post-meta-infos > span.text-sep.text-sep-cat {
    display: none!important;
}

2: it depends on the css of the plugin, we will have to try first.
3: please try this css:

#top #main .breadcrumb-trail * {
    color: #000!important;
}
#top #main .breadcrumb-trail a {
    color: blue !important;
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
I adjusted the script to this to only work on posts:

function move_breadcrumb_below_title() {
	?>
		<script type="text/javascript">
		(function($) {
			function a() {
                $('#top.single #main .avia-breadcrumbs').detach().insertBefore('h1.post-title.entry-title');
                $('#top.single #main .avia-breadcrumbs').append('<br/>');
			}
	
			a();
		})(jQuery);
		</script>
	<?php
	}
add_action('wp_footer', 'move_breadcrumb_below_title');

Please clear your browser cache and check.

Best regards,
Mike

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.page #wrap_all #main .breadcrumb.breadcrumbs.avia-breadcrumbs span,#top.page #wrap_all #main .breadcrumb.breadcrumbs.avia-breadcrumbs a {
	color: #fff !important;
}

this sets it to white, but please adjust to suit.

Best regards,
Mike

Hi,
Please change the css to this:

#top.page #wrap_all #main .breadcrumb.breadcrumbs.avia-breadcrumbs span,#top.page #wrap_all #main .breadcrumb.breadcrumbs.avia-breadcrumbs a,#top.archive #wrap_all #main .breadcrumb.breadcrumbs.avia-breadcrumbs span,#top.archive #wrap_all #main .breadcrumb.breadcrumbs.avia-breadcrumbs a {
	color: #fff !important;
}

Best regards,
Mike

Hi,
Thank you for the feedback, I viewed the post in the Private Content area, but the little images in the sidebar are visible under “POST RECENTI” is this the element you are talking about?
But using css to hide the featured image on posts is quite small and would not make your site heavier.
Here is an example:

#top.single-post .big-preview.single-big {
	display: none !important;
}

Best regards,
Mike

Hi,
Thank you for the screenshot, I added another line brake in the javascript only when the screen width is smaller than 768px:

/* Breadcrumbs above the image */
//move breadcrumbs above post title
function move_breadcrumb_below_title() {
	?>
		<script type="text/javascript">
		(function($) {
			function a() {
				var width = $(window).width()
                $('#top.single #main .avia-breadcrumbs').detach().insertBefore('h1.post-title.entry-title');
                if ((width <= 768)) {
                $('#top.single #main .avia-breadcrumbs').append('<br/><br/>');
                } else {
                	$('#top.single #main .avia-breadcrumbs').append('<br/>');
                }
			}
	
			a();
		})(jQuery);
		</script>
	<?php
	}
add_action('wp_footer', 'move_breadcrumb_below_title');

Please note that when you test this you will have to reload the page for each screen width because the javascript loads on page load. This should be fine for real devices because the screen widths don’t naturally change from desktop to mobile.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike