Homepage projects block

This tutorial explains, how to create projects block as show in demo.
You can show 3 projects in one row.

image

Step 1:

Navigate to:
Home Administration Structure Block layout

example.com/admin/structure/block

Step 2

Click Custom block library tab and then + Add custom block

image

Step 3:

Disable CKEditor editor and select Full HTML as input format.

image

Step 4:

Projects should be placed within a div of class projects.

<div class="projects">
-- Your Projects Here --
</div>

You can place three projects in one row. Each project should be placed within a div of class project.

<div class="projects">
<div class="project">
Your project One
</div> <!--/ End project One -->

<div class="project">
Your project Two
</div> <!--/ End project Two -->

<div class="project">
Your project Three
</div> <!--/ End project Three -->
</div>

Use below sample code to create projects block as shown in demo.

<div class="projects">
<div class="project">
<img src="/themes/tara/images/demo/1.jpg" alt="project" />
<div class="project-content">
<h4><a href="#">Project One</a></h4>
<p><a href="#">Lorem ipsum dolor sit amet consectetur</a></p>
</div>
</div>
<!--/end project one -->

<div class="project">
<img src="/themes/tara/images/demo/2.jpg" alt="project" />
<div class="project-content">
<h4><a href="#">Project Two</a></h4>
<p><a href="#">Lorem ipsum dolor sit amet consectetur</a></p>
</div>
</div>
<!--/end project two -->

<div class="project">
<img src="/themes/tara/images/demo/3.jpg" alt="project" />
<div class="project-content">
<h4><a href="#">Project Three</a></h4>
<p><a href="#">Lorem ipsum dolor sit amet consectetur</a></p>
</div>
</div>
<!--/end project three -->
</div>

Edit above code to change project image, project name, description and url link.

If you are still having issue, please ask in our support forum.

Step 5

Now place this new block in Homepage content region.

image

You can use above sample code to create similar content for other block regions or in your pages.