Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Crafting an Effective Sectional Web Page

A sectional web page serves as the table of contents for a section of your website and is essential to getting visitors to dig deeper into your content.

A sectional web page serves as the table of contents for a section of your website and is essential to getting visitors to dig deeper into your content. This article provides a well crafted example of a sectional web page.

Below is the HTML, CSS, and JavaScript required.

Step 1 - sectional.html

<header class="header--type2" data-background="https://www.solodev.com/assets/sectional/hero.jpg" data-height="35%" style="background-image: url(https://www.solodev.com/assets/sectional/hero.jpg); background-size:cover; min-height: 301.35px; -webkit-user-select: auto;">
  <div class="inner" >
    <div class="container" >
      <div class="row" >
        <div class="col-md-10" >
          <section class="ct-page_title" >
            <div class="h1" >SERVICES</div>
            <div class="ct-page_title-content" ></div>
          </section>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="dynamic-sectional-subtitle" >
  <h1>How it Works</h1>
</div>

<div class="dynamic-sectional-description" >
  <div class="container" >
    <div class="sectional-content" >
      <div class="row" >
        <div class="col-md-12 no-padding" >
          <div class="row" >
            <div class="col-md-4 col-sm-4 col-xs-12" >
              <div class="sectional-box" >
                <div class="sectional-box-image" >
                  <a href="/" ><img alt="Placeholder" class="img-responsive img-thumbnail" src="https://www.solodev.com/assets/sectional/blog-1.jpg" ></a>
                </div>
                <div class="sectional-box-content" >
                  <h4 ><a href="/" >Lorem ipsum dolor</a></h4>
                  <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  <div style="clear: both; -webkit-user-select: auto;"></div>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12" >
              <div class="sectional-box" >
                <div class="sectional-box-image" >
                  <a href="/" ><img alt="Placeholder" class="img-responsive img-thumbnail" src="https://www.solodev.com/assets/sectional/blog-2.jpg" ></a>
                </div>
                <div class="sectional-box-content" >
                  <h4 ><a href="/" >Suspendisse ligula dui</a></h4>
                  <p>Suspendisse ligula dui, dapibus a ex at, venenatis fermentum.</p>
                  <div style="clear: both;"></div>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12" >
              <div class="sectional-box" >
                <div class="sectional-box-image" >
                  <a href="/" ><img alt="Placeholder" class="img-responsive img-thumbnail" src="https://www.solodev.com/assets/sectional/blog-3.jpg" ></a>
                </div>
                <div class="sectional-box-content" >
                  <h4><a href="/" >Praesent et neque</a></h4>
                  <p>Praesent et neque ut erat dictum efficitur in quis tortor.</p>
                  <div style="clear: both; -webkit-user-select: auto;"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="row" style="-webkit-user-select: auto; margin-top: 75px;">
            <div class="col-sm-6" >
              <div class="sectional-secondary-box" >
                <div class="col-sm-3" >
                  <a href="/" >  <i class="fa fa-link img-thumbnail" aria-hidden="true"></i></a>
                </div>
                <div class="col-sm-9" >
                  <h4><a href="/" >Lorem</a></h4>
                  <p>Vivamus quis arcu blandit, volutpat orci vitae, tempor eros. Nullam faucibus volutpat tortor. <a href="/" >Read More</a></p>
                </div>
              </div>
            </div>
            <div class="col-sm-6" >
              <div class="sectional-secondary-box" >
                <div class="col-sm-3" >
                  <a href="/" ><i class="fa fa-credit-card img-responsive img-thumbnail" aria-hidden="true"></i></a>
                </div>
                <div class="col-sm-9" >
                  <h4><a href="/" >Ipsum Dolor</a></h4>
                  <p>Proin quis venenatis felis. Aliquam erat volutpat. Vivamus velit lacus, auctor ut fermentum quis, vulputate et turpis. <a href="/" >Read More</a></p>
                </div>
              </div>
            </div>
          </div>
          <div class="row" >
            <div class="col-sm-6" >
              <div class="row sectional-secondary-box" >
                <div class="col-sm-3" >
                  <a href="/" target="_blank" ><i class="fa fa-video-camera img-responsive img-thumbnail" aria-hidden="true"></i></a>
                </div>
                <div class="col-sm-9" >
                  <h4><a href="/" target="_blank" >Vivamus eget</a></h4>
                  <p> Mauris suscipit elit lectus, sit amet mattis sem aliquet vitae. Vivamus nec dignissim libero.  <a href="/" target="_blank" >View Tour</a></p>
                </div>
              </div>
            </div>
            <div class="col-sm-6" >
              <div class="row sectional-secondary-box" >
                <div class="col-sm-3" >
                  <a href="/" ><i class="fa fa-camera img-responsive img-thumbnail" aria-hidden="true"></i></a>
                </div>
                <div class="col-sm-9" >
                  <h4><a href="/" >Mauris finibus</a></h4>
                  <p>Maecenas sit amet nunc mollis, lobortis elit vel, ornare magna. Ut auctor sed enim ut porttitor.  <a href="/" >View Photos</a></p>
                </div>
              </div>
            </div>
          </div>
          <div class="row" >
            <div class="col-sm-6" >
              <div class="row sectional-secondary-box" >
                <div class="col-sm-3" >
                  <a href="/" ><i class="fa fa-question-circle-o img-responsive img-thumbnail" aria-hidden="true"></i></a>
                </div>
                <div class="col-sm-9" >
                  <h4><a href="/" >Nullam orci</a></h4>
                  <p>Phasellus et velit ut tortor scelerisque tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <a href="/" >Read More</a></p>
                </div>
              </div>
            </div>
            <div class="col-sm-6" >
              <div class="row sectional-secondary-box" >
                <div class="col-sm-3" >
                  <a href="/" ><i class="fa fa-info-circle img-responsive img-thumbnail" aria-hidden="true"></i></a>
                </div>
                <div class="col-sm-9" >
                  <h4><a href="/" >Curabitur non</a></h4>
                  <p>Nulla mollis, ligula id venenatis lobortis, nulla odio fringilla nisi, quis iaculis urna massa ac ipsum. <a href="/" >Read More</a></p>
                </div>
              </div>
            </div>
          </div>
          <div class="row" >
            <div class="col-sm-6" >
              <div class="row sectional-secondary-box" >
                <div class="col-sm-3" >
                  <a href="/" ><i class="fa fa-clock-o img-responsive img-thumbnail" aria-hidden="true"></i></a>
                </div>
                <div class="col-sm-9" >
                  <h4><a href="/" >Suspendisse potenti</a></h4>
                  <p>Nam faucibus urna at ex rutrum imperdiet. Suspendisse potenti. Proin vel placerat orci. <a href="/" >View Hours</a></p>
                </div>
              </div>
            </div>
            <div class="col-sm-6" >
              <div class="sectional-secondary-box" >
                <div class="col-sm-3" >
                  <a href="/" ><i class="fa fa-calendar img-responsive img-thumbnail" aria-hidden="true"></i></a>
                </div>
                <div class="col-sm-9" >
                  <h4><a href="/" >Phasellus</a></h4>
                  <p>Integer ac elit sed lectus tempor posuere at id mi. Phasellus sit amet nisl placerat, venenatis quam. <a href="/" >View Calendar</a></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Step 2 - sectional.css

Download the CSS below and include it in your web page

html, body, img, figure {
    max-width: 100%;
}
hr, img {
    border: 0;
}
ol, ul {
    margin-top: 0px;
    margin-bottom: 10px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}
.text-left {
    text-align: left !important;
}

.btn i {
    position: relative;
    top: -2px;
	left: 15px;
}
.btn {
    border-radius: 0px;
}
button, .btn {
    -webkit-transition: background-color 250ms cubic-bezier(0.55, 0, 0.1, 1);
    transition: background-color 250ms cubic-bezier(0.55, 0, 0.1, 1);
}
.btn {
    font-size: 15px;
    padding: 22px 46px 18px;
    line-height: 1;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    position: relative;
    letter-spacing: 0.3px;
}
.btn.btn-motive {
    background: #A37912;
    color: white;
}
.btn.btn-motive:hover {
	background: #937835;
}
.ct-content .btn {
    border-radius: 4px;
    padding-left: 32px;
    margin-left: 3px;
    padding-right: 36px;
    margin-top: 30px;
}
.ct-content.ct-sectional-content .btn i {
    position: relative;
    top: -2px;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-background], [data-parallax] {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.ct-duo-section {
    color: white;
    margin-top: 10px;
}
.ct-duo-section__column {
    background-color: #0f4e66;
}
.ct-duo-section .ct-content, .ct-duo-section .ct-content .ct-section-header {
    padding-top: 30px;
}
.ct-duo-section .ct-content {
    display: table;
    width: 100%;
    margin: auto;
    padding-top: 32px;
}
.ct-content {
    width: 100%;
    max-width: 537px;
    margin-left: auto;
    margin-right: auto;
}
.ct-duo-section .ct-content > .ct-duo-section .ct-content__inner, .ct-duo-section .ct-content > .inner {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}
.ct-duo-section .ct-content, .ct-duo-section .ct-content .ct-section-header {
    padding-top: 30px;
	padding-bottom: 68px;
}
.ct-duo-section .ct-content .ct-section-header {
    color: inherit;
    max-width: 620px;
    padding-top: 38px;
    letter-spacing: -0.25px;
    line-height: 1;
    padding-right: 30px;
    margin-bottom: 44px;
}
.ct-content.ct-sectional-content .ct-section-header {
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 0px;
}
.ct-content .ct-section-header {
    margin-top: 0;
    padding-top: 83px;
    letter-spacing: 0.35px;
}
.ct-section-header {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    color: #101f1d;
    font-size: 35px;
    text-transform: uppercase;
    text-align: center;
    padding-top: 45px;
    letter-spacing: 1.25px;
    margin-bottom: 5px;
}
.ct-content li {
    font-weight: 700;
    font-size: 17px;
    padding-left: 4px;
}
.ct-content li:before {
    content: '\f0da';
    font-family: 'FontAwesome';
    color: #A37912;
    padding-right: 13px;
}
.ct-duo-section .ct-content .btn {
    border-radius: 0px;
}
.ct-duo-section .ct-content .btn {
    border-radius: 4px;
    padding-left: 32px;
    margin-left: 3px;
    padding-right: 36px;
    margin-top: 30px;
}
.ct-content .btn {
    margin-top: 30px;
}
.ct-duo-section .ct-content .ct-section-header small {
    padding-top: 38px;
    margin-right: -30px;
}
.ct-content.ct-sectional-content .ct-section-header small {
    color: #bebcbc;
    font-family: 'Helvetica', sans-serif;
    font-size: 20px;
}
.ct-content .ct-section-header small {
    margin-bottom: -4px;
    padding-top: 12px;
    letter-spacing: 0px;
}
.ct-section-header small {
    color: #303030;
    font-size: 22px;
    display: block;
    font-weight: 600;
    padding-top: 10px;
    margin-bottom: -12px;
    text-transform: none;
}

@media only screen and (max-width: 1398px) {
	.ct-duo-section .ct-content .ct-section-header small {
		font-size: 17px;
	}
}
@media only screen and (min-width: 991px) {
	.ct-duo-section .ct-content {
		min-height: 675px;
	}
}
@media only screen and (min-width: 1024px) {
	.ct-content .btn {
		margin-top: 55px;
	}
	.ct-section-header {
		padding-top: 77px;
	}
	.ct-content.ct-sectional-content {
		margin-left: 0;
	}
	.ct-duo-section__column {
		padding-left: 60px;
		padding-right: 60px;
	}
}
@media only screen and (min-width: 1399px) {
	.ct-duo-section .ct-content {
		max-width: 670px;
	}
}
@media (max-height: 766px) {
	.ct-section-header {
		padding-top: 35px;
	}
}

Step 3 - Include the following resources in your web page

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="sectional.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

In this article, Solodev showed you how to design a sectional page for your website. Designing a sectional page is important to engaging users and getting them to consume more content on your website.

Download from Github

Share on Facebook Tweet It

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev