Blog and Elementor queries and image queries

This topic has 10 replies, 2 voices, and was last updated 2 years, 3 months ago ago by Awais Ahmed

  • Avatar: gray_b
    gray_b
    Participant
    August 21, 2022 at 17:31

    1a – Cannot seem to be able to get elementor to modify the Blog of the ‘Grocery Store’, any guidance or tutorial please. The only youtube I can find only shows how to use Theme Options – Blog – Blog Layout, and not how to modify via elementor.

    1b – Are you supposed to use elementor to create a blog from new. Any guidance please.

    2 – Any ideas on how to reduce the size of each individual blog post header. Cannot find in any settings.
    OK I can change the css from

    max-width: 100%;
    width: 100%;
    to
    max-width: 50%;
    width: 50%;

    But I cannot find css code to change the hover over greyed area and then the location of the blog category.

    3 – Also as I cannot get elementor to modify the Blog. How can I add a yearly calender widget ‘Annual Archive’ . Using a shortcode [archives type="yearly" show_post_count="true"]

    4 – Many of my pre March 2019 posts (that i have imported from an existing site) do not conform to the new coding. They do not display a heading image. Any ideas how to get around this please.

    5 – The lazy loading is very lazy, not sure why or where the problem is. But the posts do not get generated very quickly. Any ideas of speeding it up. Thanks

    Please, contact administrator
    for this information.
    9 Answers
    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    August 22, 2022 at 06:22

    Hello, @gray_b,

    1a- Actually, No you cannot edit the blog page with Elementor our theme has pre-built layouts you can choose one of them. The blog is an Archive page and you can not edit any of the Archive pages with the page builder.

    1b- You can create/edit posts with Elementor but for this make sure the posts option is checked from the Elementor settings. Simply go to the Dashboard >> Elementor >> Settings and then check the options as you can see in the image: https://postimg.cc/YhsLvkwk

    2- Sorry to say, I don’t understand what you mean by “But I cannot find CSS code to change the hover over the grayed area and then the location of the blog category.” Can you please elaborate on it?

    3- No, sorry to say that but you can not add it on the blog page directly as you can not edit it with page builder, so this requires Customization. OR you have to use the Pro version of the Elementor page builder.

    4. Can you please explain it more clearly if possible with the URL of the particular post and also the screenshot of the issue for my better understanding so that I’ll check and help you out further?

    5- The lazy option is working fine. There is no issue when I check your site after clearing the browser cache. Check this video for a better reference: https://streamable.com/jkcj3v
    and then check back to your site after clearing the browser cache.

    Regards 8Themes Team.

    Avatar: gray_b
    gray_b
    Participant
    August 25, 2022 at 15:32

    To be honest Xstore is not meeting upto my expections and I am only at the blog stage.

    2- Sorry to say, I don’t understand what you mean by “But I cannot find CSS code to change the hover over the grayed area and then the location of the blog category.” Can you please elaborate on it?

    Have a check of video at https://gb-online.co.uk/dump/xstore-blog1.mp4
    This shows the hover over greyed areas and ‘blog category’ text

    3 – Also as I cannot get elementor to modify the Blog. How can I add a yearly calender widget ‘Annual Archive’ .

    So there is no way of adding widgets to the blog, unless I buy Elementor Pro

    4. Can you please explain it more clearly if possible with the URL of the particular post and also the screenshot of the issue for my better understanding so that I’ll check and help you out further?

    If you check my older posts at say https://gb-online.co.uk/scions/category/fruit-and-nut-field-trips/ no images are shown.

    Also check video at https://gb-online.co.uk/dump/xstore-blog2.mp4

    I believe its something to do with the way wordpress changed the coding, as all the older posts do not show images.

    5- The lazy option is working fine. There is no issue when I check your site after clearing the browser cache.

    I think the process could be speeded up. I think I am more used to a continous scrolling with no time lag. I have tried on 3 computers and they all lag.
    https://gb-online.co.uk/dump/xstore-blog3.mp4

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    August 26, 2022 at 06:34

    Hello, @gray_b,

    2- Please watch this video to know how to change the hover over greyed area in order to fix this using CSS code: https://streamable.com/fs0ej6

    3- For this, you have to create a static block and add the content in it, just as you want then by simply editing the blog page from the Dashboard >> Pages >> All Pages you can set that static block. But it will appear on the top only. Please refer to the image:

    https://postimg.cc/Vdn1rvMc
    https://postimg.cc/zbyYJG56

    Or you can add this block in the blog page sidebar like this: https://postimg.cc/4YW0mR8g

    If you want to show the content in another place on the page then you have to use Elementor Pro.

    4. Please make sure that you have set the Featured Images on those old posts properly, OR else try to edit the Post and remove the old Featured Image and then set the new one, save changes and check back again.

    I have tested 2 different Posts on your site, 1 from the old one which you gave the URL above and the other from the new one from the blog page and here are the resulting screenshots:

    https://postimg.cc/3dwrV0MV
    https://postimg.cc/ThdT55P1

    The difference is clear in both the above screenshots, you do not have the featured image code in the old posts on which you are facing the issue.

    5- Thanks for the video. Actually, it is an infinite scroll system and it loads more post auto when you are at the bottom so loading posts live without loading the page takes a moment. It’s the default behavior and it will not count as a leg or laziness. It mostly depends on the server performance, that in how much time your server process AJAX and JQuery.

    Regards 8Themes Team.

    Avatar: gray_b
    gray_b
    Participant
    September 6, 2022 at 08:27

    Hi

    I am sorry but I do not understand

    2- Please watch this video to know how to change the hover over greyed area in order to fix this using CSS code: https://streamable.com/fs0ej6

    Can you tell me what CSS code to enter and where.

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    September 6, 2022 at 09:05

    Hello, @gray_b,

    Alright, Simply navigate to the Dashboard >> XSTORE >> Theme Options >> Theme Custom CSS >> Global CSS and then paste the below code at the bottom of the CSS box like this: https://postimg.cc/sMSJcfFq

    article.blog-post .wp-picture.blog-hover-zoom:hover:before{background:transparent !important;}

    Then save settings and check back to your site after clearing the browser cache.

    Regards 8Themes Team.

    Avatar: gray_b
    gray_b
    Participant
    September 6, 2022 at 16:45

    Many thanks for that, which works fine.

    But linked to it, is trying to keep the reduced image size of the main image, but it always changes the image size in the displayed grid.

    article.blog-post .wp-picture img {
      max-width: 50%;
      width: 50%;
      margin: 0 auto;
    }
    
    WAS
    
    article.blog-post .wp-picture img, article.post-grid .wp-picture img {
      max-width: 100%;
      width: 100%;
      margin: 0 auto;
    }

    Also if you check out a single post, the category text is half off the main image.

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    September 7, 2022 at 07:18

    Hello, @gray_b,

    I am sorry, but do you want to reduce the image width on the single blog page? Am I Right? if yes then please use the below code for this in the Theme Options >> Theme Custom CSS >> Global at the bottom of the CSS box.

    @media(min-width:991px){
    .single-post .wp-picture{width:50% !important; margin-left:auto !important;}}

    Then save settings and check back to your site after clearing the browser cache.

    The result will look like this: https://postimg.cc/NKbN5qCQ you can see that the category text appears full, not half with the image.

    Regards 8Themes Team.

    Avatar: gray_b
    gray_b
    Participant
    September 7, 2022 at 08:01

    Many thanks for that, which works great.

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    September 7, 2022 at 08:13

    Hello, @gray_b,

    We are glad that you loved our Theme and Support Staff. We wish you all the best.

    If you do not mind, can you please leave a 5 stars rating for our Theme & Customer and Technical Support by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in the future. It would encourage our work a lot. If you like our Theme and Support.

    Thanks for contacting us.
    Have a great day?

    Topic Closed.
    Regards 8Themes Team.

  • Viewing 10 results - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.