According to the flow, we should have created Services we offer section but those services will need the details page as well so we will create that component as the last component while building the Home page.

Till now if you have any queries then please get in touch with me and give a brief of the issue you are facing so that I can help.

Moving forward with the Safe & Secure tagline section, it is nothing but just a html that we will be storing in Sitecore and Fetching in the View.

1. Go to Sitecore >> Content Editor >> Home item.
2. Right Click >> Insert >> Insert from template.
3. Select the Summary template under the Common folder (/sitecore/templates/Sitecore Demo/Common/Summary) & name it as Safe & Secure tagline.
   
4. Click on the Edit HTML link.
5. Copy the HTML markup from the index.html file from the Logistico.zip extracted files.
   
6. Click Accept and publish this item.
7. Open Visual Studio, create a View and Name it as “SafeSecureTagLine.cshtml”.
8. Add the below code to it.
   @using Sitecore.Mvc
   @using Sitecore.Mvc.Presentation
   @using Sitecore.Data
   @using Sitecore.Data.Items
   @using DummyWebsite@{
   //Extract the current Db
   Database currentDb = Sitecore.Context.Database;

   //Get the value of the Datasource
   string datasource = RenderingContext.Current.Rendering.DataSource;

   //Get the datasource item
   Item item = currentDb.GetItem(datasource);
   }

   @Html.Sitecore().Field(Templates.Summary.Fields.Summary_FieldName, item)
   

9. Publish this View.
10. Go to the rendering item (/sitecore/layout/Renderings/Sitecore Demo) & create a View Rendering and name it “Safe Secure Tagline”.
    
11. Publish the rendering and Go to the Home item (/sitecore/content/Home).
12. Go to the Presentation tab >> Details >> Edit Link.
    
13. Go to Controls & click on Add.
14. Select the new Rendering we created and insert “main” in the Placeholder field.
    
15. Click Select. Click on the rendering (Safe and Secure Tagline) and Click Edit.
16. In the Data Source field, select the Safe and Secure Tagline item created under Home.
    
17. Click OK >> OK >> OK.
18. Publish the Home item & browse the Front end site.
    
19. The component is ready and we go the content as well except the background image.
20. If we check in the browser while browsing the index.html, we will understand that the image is coming through CSS.
    
21. Lets download this image and upload in the Media Library.
22. Created a folder Common under Sitecore Demo & uploaded the file.
    
23. Note down the id of this image. ie. {753EB491-F9E4-428E-8B02-5BCB9EC530E8}. Now we can browse it using below URL:
    -/media/753EB491F9E4428E8B025BCB9EC530E8.ashx
24. Publish the Common folder with subchild and Go to Safe and Secure Tagline item under Home.
25. Click Edit HTML and add the below CSS at the top.
    <style>
    .contact_action_area {
    background-image: url(-/media/753EB491F9E4428E8B025BCB9EC530E8.ashx);
    }
    </style>
    
26. Click Accept and Publish this item.
27. Browse the Front end site.
    

With the help of above all steps, we have completed the Safe & Secure Tagline component. In the next blog, we will create the testimonial component.

Thank you.. Keep Learning.. Keep Sitecoring.. 🙂