Building Home page Components – Safe & Secure tagline section

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.
    271
  4. Click on the Edit HTML link.
  5. Copy the HTML markup from the index.html file from the Logistico.zip extracted files.
    272
  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)
    273

  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”.
    274
  11. Publish the rendering and Go to the Home item (/sitecore/content/Home).
  12. Go to the Presentation tab >> Details >> Edit Link.
    275
  13. Go to Controls & click on Add.
  14. Select the new Rendering we created and insert “main” in the Placeholder field.
    276
  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.
    277
  17. Click OK >> OK >> OK.
  18. Publish the Home item & browse the Front end site.
    278
  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.
    279
  21. Lets download this image and upload in the Media Library.
  22. Created a folder Common under Sitecore Demo & uploaded the file.
    280
  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>
    281
  26. Click Accept and Publish this item.
  27. Browse the Front end site.
    282

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.. 🙂

 

One thought on “Building Home page Components – Safe & Secure tagline section

  1. Pingback: Building Home page Components – Featured Services section | Sitecore Dairies

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s