Display categories as blocks on homepage?

[smartness]

Hi,

I saw a page, it was a magento theme, and it had "Category blocks" in the homepage just under a slider, and then below these blocks there were other stuff. How do I achieve the same look on my page? Is there a free module (or native module) to achieve it. I don't mind editing each block with html as long as I get like three boxes per row. Any suggestions which module might help me, or any workaround?

I have attached the desired results, it's a screenshot of that page.

Btw, I have just installed Presta 1.7.5.0 and migrated my products from Presta 1.6, and I am on the default theme (classic it was called, I think).

[smartness]

Doesnt do me good.

 

I need a free html box, in this case, six html boxes. 

[hassanch]

did you manage to get anything like the screenshot?

[smartness]

On 4/20/2020 at 12:28 PM, hassanch said:

did you manage to get anything like the screenshot?

Unfortunately no. Sorry. I gave up.

[hassanch]

On 4/22/2020 at 1:04 AM, smartness said:

Unfortunately no. Sorry. I gave up.

someone has to work on something like the screenshot you provided it is really needed and Iam welling to buy. Thanks for your reply.

[TACS]

an old post i know, but I was looking for something similar and so have made up something you can insert into a html block, you may need to adjust some of the css properties

<div class="category-block-one top-margin bottom-margin">
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-3"><img src="place-image-383px-396px" alt="Image 1" style="width: 100%;" />
<div class="cat-text-block">
<h4><a href="main-category-link">Text Example Category</a></h4>
</div>
<ul>
<li><a href="**category1-link**">&gt; Category 1 </a></li>
<li><a href="**category2-link**">&gt; Category 2 </a></li>
<li><a href="**category3-link**">&gt; Category 3 </a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3"><img src="place-image-383px-396px" alt="Image 2" style="width: 100%;" />
<div class="cat-text-block">
<h4><a href="main-category-link">Text Example Category</a></h4>
</div>
<ul>
<li><a href="**category4-link**">&gt; Category 4 </a></li>
<li><a href="**category5-link**">&gt; Category 5 </a></li>
<li><a href="**category6-link**">&gt; Category 6 </a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3"><img src="place-image-383px-396px" alt="Image 3" style="width: 100%;" />
<div class="cat-text-block">
<h4><a href="main-category-link">Text Example Category</a></h4>
</div>
<ul>
<li><a href="**category7-link**">&gt; Category 7 </a></li>
<li><a href="**category8-link**">&gt; Category 8 </a></li>
<li><a href="**category9-link**">&gt; Category 9 </a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3"><img src="place-image-383px-396px" alt="Image 4" style="width: 100%;" />
<div class="cat-text-block">
<h4><a href="main-category-link">Text Example Category</a></h4>
</div>
<ul>
<li><a href="**category10-link**">&gt; Category 10 </a></li>
<li><a href="**category11-link**">&gt; Category 11 </a></li>
<li><a href="**category12-link**">&gt; Category 12 </a></li>
</ul>
</div>
</div>
</div>

and css

.category-block-one {
    /*max-width: 50%;*/
}
@media (max-width: 479px) {
  .category-block-one .col-xs-12 {
    width: 50%; /* Force full width on each column */
  }
}
@media (max-width: 767px) {
  .category-block-one .col-xs-12 {
    width: 50%; /* Force full width on each column */
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  font-family: Arial;
}

.cat-text-block a {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
}

@media (max-width: 479px) {
  .cat-text-block a {
  top: 25%; 
}
}
@media (max-width: 767px) {
  .cat-text-block a {
  top: 25%;
}
}

@media (min-width: 768px) { 
    .cat-text-block a {
    font-size: 26px; /* Increase font size for larger screens */
  }
}