This second part of the tutorial on how to create a One Page Kentico theme will focus on the development of the four necessary widgets.
Kentico widgets are building blocks for allowing editors to create content. Widgets are pretty much the lightweight version of the web parts, with a more simplified user interface.
Because every widget is based on an existing web part, we first start our second part tutorial with creating the web parts.
Create the Web Parts
On your Belona site, head over to the Web parts application, create a new category called Belona by clicking the three dots next to the New web part button and then New category. Call your new category Belona.
Once the new category has been created, click the New web part button and name your first web part AboutSection and if you have access to the CMSWebParts folder (C:\inetpub\wwwroot\Kentico10\CMS\CMSWebParts) create your own web part folder called MyWebParts, and use the following set-up and hit Save. If you don’t have access to the CMSWebParts folder use the General folder.
Kentico will now create the web part files in the system.
Now that the web part AboutSection was created we need to apply a layout. Layouts allow you to customize the appearance of the web parts.
So, while under the newly created web part AboutSection, click the Layouts tab and click the New layout button and create a new layout called AboutSection and Copy&Paste the following code and then hit Save:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="CMSWebParts_MyWebParts_AboutSection" CodeFile="~/CMSWebParts/MyWebParts/AboutSection.ascx.cs" %>
<asp:PlaceHolder runat="server">
<li class="<%= GetStringValue("TimelineSide", "") %>">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="<%= URLHelper.ResolveUrl(GetStringValue("TimelineImage", "")) %>" alt="<%= GetStringValue("TimelineTitle", "") %>">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4><%= GetStringValue("TimelineDate", "") %></h4>
<h4 class="subheading"><%= GetStringValue("TimelineTitle", "") %></h4>
</div>
<div class="timeline-body">
<p class="text-muted"><%= GetStringValue("TimelineDescription", "") %></p>
</div>
</div>
</li>
</asp:PlaceHolder>
Do the same for PortfolioSection with the exception of Layouts which has a different code:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="CMSWebParts_MyWebParts_PortfolioSection" CodeFile="~/CMSWebParts/MyWebParts/PortfolioSection.ascx.cs" %>
<asp:PlaceHolder runat="server">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal<%= GetStringValue("PortfolioTitle", "") %>">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fas fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="<%= URLHelper.ResolveUrl( GetStringValue("PortfolioImage", "")) %>" alt="<%= GetStringValue("PortfolioTitle", "") %>">
</a>
<div class="portfolio-caption">
<h4><%= GetStringValue("PortfolioTitle", "") %></h4>
<p class="text-muted"><%= GetStringValue("PortfolioCategory", "") %></p>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal<%= GetStringValue("PortfolioTitle", "") %>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<h2 class="text-uppercase"><%= GetStringValue("PortfolioTitle", "") %></h2>
<p class="item-intro text-muted"><%= GetStringValue("PortfolioDesc", "") %></p>
<img class="img-fluid d-block mx-auto" src="<%= URLHelper.ResolveUrl( GetStringValue("PortfolioImage", "")) %>" alt="">
<p><%= GetStringValue("PortfolioLongDesc", "") %></p>
<ul class="list-inline">
<li>Date: <%= GetStringValue("PortfolioDate", "") %></li>
<li>Category: <%= GetStringValue("PortfolioCategory", "") %></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:PlaceHolder>
Now, create the ServicesSection web part, the same way as the other two but use this code for Layouts:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="CMSWebParts_MyWebParts_ServicesSection" CodeFile="~/CMSWebParts/MyWebParts/ServicesSection.ascx.cs" %>
<asp:PlaceHolder runat="server">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas <%= GetStringValue("SectionIcon", "") %> fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"><%= GetStringValue("SectionTitle", "") %></h4>
<p class="text-muted"><%= GetStringValue("SectionInfo", "") %></p>
</asp:PlaceHolder>
And finally, create the TeamSection web part and use this code for Layouts:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="CMSWebParts_MyWebParts_TeamSection" CodeFile="~/CMSWebParts/MyWebParts/TeamSection.ascx.cs" %>
<asp:PlaceHolder runat="server">
<div class="team-member">
<img class="mx-auto rounded-circle" src="<%= URLHelper.ResolveUrl( GetStringValue("TeamMemberImage", "")) %>" alt="<%= GetStringValue("TeamMemberName", "") %>">
<h4><%= GetStringValue("TeamMemberName", "") %></h4>
<p class="text-muted"><%= GetStringValue("TeamMemberTitle", "") %></p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="<%= GetStringValue("TeamMemberTwitter", "") %>" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="<%= GetStringValue("TeamMemberFacebook", "") %>" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="<%= GetStringValue("TeamMemberLinkedin", "") %>" target="_blank">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
</ul>
</div>
</asp:PlaceHolder>
At the end you should have four custom web parts under Belona category:
On the next article we will go over how to create the widgets necessary for the One Page Belona Kentico theme.