Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1425996

    Hi,

    I do not want to use the page builder for my blogs because of performance issues and easy maintenance.
    I am using the default wordpress editor which looks great but I need my header to span across with the title ontop of it if possible
    ex – something like this – https://grandimageinc.com/news/making-powerful-first-impression-for-20-years/

    My current blog post
    url – https://rgoproductions.com/blog/we-better-get-going-if-were-going-to-stay-ahead-of-the-weather-tips-for-trade-show-success-when-the-weather-turns-on-you/

    Thanks

    #1426017

    Hey navindesigns,
    Thank you for the link to your site and your example, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_single_post_banner() { ?>
      <script>
    (function($) {
      $(function() {
      	var postTitle = $('.single-post h1.post-title').detach().text();
      	var postBanner = $('<div class="banner"><h1>'+ postTitle +'</h1></div>');
         $('.single-post .big-preview.single-big').detach().insertBefore('.container_wrap_first');
         $(postBanner).insertAfter('.single-post .big-preview.single-big img');
      });
    })(jQuery);
    </script>
      <?php
    }
    add_action('wp_footer', 'custom_single_post_banner', 99);
    

    and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) { 
    #top.single-post #wrap_all .all_colors .big-preview.single-big .banner h1 {
    	font-size: 18px;
    }
    .single-post .big-preview.single-big .banner {
    	top:18%;
    	padding:0 5%;
    }
    }
    
    .single-post .big-preview.single-big {
        padding: 0;
    	pointer-events:none;
    }
    .single-post .big-preview.single-big .banner {
    	top:30%;
    	position:absolute;
    	z-index:4;
    	padding:0 10%;
    	color:#000;
    }
    .single-post .banner h1 {
    	background-color: rgba(255,255,255,71%);
    }
    
    @media only screen and (min-width: 1440px) { 
    .single-post .big-preview.single-big {
    	max-height: 450px;
    }
    .single-post .big-preview.single-big a img {
    	transform: translateY(-20%);
    }
    .single-post .big-preview.single-big a {
    	max-height: 450px;
    }
    .single-post .big-preview.single-big .banner {
    	top:36%;
    	padding:0 15%;
    }
    }

    it will take the single post feature image and title from the default layout like this:
    Enfold_Support_3956.jpeg
    and create a full width banner with the title in it like this:
    Enfold_Support_3953.jpeg
    On mobile it should look like this:
    Enfold_Support_3958.jpeg
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

    Best regards,
    Mike

    #1429099

    Sorry for the late reply

    This looks GREAT. Just 3 things I noticed

    1- The feature image is very pixelated. Why is that?
    2- can we center the blog title?
    3- could you remove the image overlay that opens a lightbox? eg this post – https://rgoproductions.com/?p=11989&preview=true
    screenshot – https://ibb.co/RpHMCkv

    Thanks

    • This reply was modified 10 months, 3 weeks ago by navindesigns.
    • This reply was modified 10 months, 3 weeks ago by navindesigns.
    #1429138

    Hi,
    Glad that this helped, the image may look pixelated because it is a featured image thumbnail (825px x 425px) shown at full screen, I didn’t notice it much on my screen, but if you have a larger screen you might notice it more.
    When I check the title is centered on the screen, but if you mean center align the text try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .single-post .big-preview.single-big .banner {
        text-align: center;
    }

    You can remove the image overlay in the Enfold Theme Options ▸ Advanced Styling ▸ Linked Image Overlay option:
    Enfold_Support_4279.jpeg

    Best regards,
    Mike

    #1429157

    Thanks!

    There is no way to change the dimensions of featured image thumbnail (825px x 425px) to be larger so that it does not look pixelated?

    #1429174

    Hi,
    I see that the original featured image image is smaller than the full screen width, so first you will need to make this as large as your screen width.
    Then install the Simple Image Sizes plugin and adjust image size for entry_with_sidebar size and the featured size and turn off cropping
    and then use the Regenerate Thumbnails plugin to reset the thumbnail sizes, typically this plugin works better that the other plugin for regenerating thumbnails.
    If you have trouble try uploading a new image that is fullwidth with a different file name to ensure the new image size is working correctly.

    Best regards,
    Mike

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