how to add image banner at the top of the main page only and not over the side bar?

Question

i mean before the questinos list? this image can help understand the question? thnk you all

Answer 1

Widget Anywhere might be the plugin you're looking for.
Otherwise If you're looking to display a welcome banner, check out the Welcome Widget.

---

Edit: DIY manually

If you want the banner to fill both the width of the main content and sidebar, go to:
SnowFlat theme > open file qa-theme.php after line 263 paste the following code:

$this->output('<img style="display:block;margin:0 auto;" src="https://i.ibb.co/dLq5QyJ/z897231.png">');

Should look something like this (screenshot):

public function body_content()
{
    ...
    $this->output('<div class="qa-main-wrapper">', '');
    $this->output('<img style="display:block;margin:0 auto;" src="i.ibb.co/dLq5QyJ/z897231.png">');
    $this->main();
    ...
}

If you want the banner to fill the width of the main content only, and not the sidebar, you'll need to add this function to your qa-theme.php instead. Paste it on line 275 for example (screenshot):

public function main()
{
$content = $this->content;
$hidden = !empty($content['hidden']) ? ' qa-main-hidden' : '';
$this->output('<div class="qa-main' . $hidden . '">');
    $this->output('<img style="display:block;margin:0 auto;" src="i.ibb.co/dLq5QyJ/z897231.png">');   
    $this->widgets('main', 'top');
    $this->page_title_error();
    $this->widgets('main', 'high');
    $this->main_parts($content);
    $this->widgets('main', 'low');
    $this->page_links();
    $this->suggest_next();
    $this->widgets('main', 'bottom');
    $this->output('</div> <!-- END qa-main -->', '');
}

---

This rewrites the  main()  function of your theme to add the new banner (See highlighted code). 
Although I believe Widget Anywhere should be able to add content there, as I see there's a widgets main top there, on the  main()  function..

Comments

I tried what you told me and it was very successful. I am very, very grateful to you for that professional response. I hope I do not bother you with my questions. I only have one final question. Please, how do I add a link to the image so that when someone clicks on it, it opens directly? Where exactly do I edit the text I added?

---

Wrap the image with an href link:
<a href="https://google.com" style="display:block;width:max-content;margin:0 auto;"><img src="https://i.ibb.co/dLq5QyJ/z897231.png"></a>

---

It was completed successfully. How do I make the image change its size automatically according to the screen, because now when I reduce the screen, the image remains large.

---

Hi, To make the image change its size automatically according to the screen size, you can use CSS to set its width to a percentage value relative to the screen width. Here's how you can modify your code:

the code will be:

<a href="https://google.com" style="display: block; margin: 0 auto;">
    <img src="https://i.ibb.co/dLq5QyJ/z897231.png" style="max-width: 100%; height: auto;">
</a>


In this modification:

I removed the width: max-content; property from the <a> tag because it's not necessary for this purpose.
Added max-width: 100%; to the <img> tag to ensure it scales down to fit the width of its container.
Added height: auto; to maintain the aspect ratio of the image while resizing.
With these changes, the image will automatically adjust its size according to the width of the screen while maintaining its aspect ratio.