Build Your Own Business Website header image

Lesson 11 – Using the Skin Editor to Configure and Style the Home Page

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In lesson 11 of our Build a Responsive Professional Website using Thesis Theme 2, we show how to use the Skin Editor to configure and style the Home Page. We begin by showing how to create a new widgets style package in the Agility Skin. Then we configure the Agility Feature Box and show how to add a slide show and a call-to-action to it.

Then we focus on adding what we call “Attention Boxes” using the Agility Skin’s smart widget columns. These boxes allow you to highlight services or products or whatever you desire on your Home Page. Finally, we wrap the lesson up by showing how to add content such as text, links and images to your Attention Boxes.

Create a New Package for Customizing the Widget Styles

  • Create a new Agility Widget Style package
    • Name
    • Reference
    • CSS Selector
    • Add the reference to the Skin CSS list
  • Tour the package settings
    • Elements that get styled
    • New style properties
      • Text color
      • Background
      • Border
      • Corner Radius
      • Drop Shadow
  • Style the Heading
    • Set the 2nd Accent color variable – #EAE4C7
    • Add the variable to the Widget Titles text color
  • Style the Text
    • Add the variable to the Widget color – $tc6
  • Style the Links
    • Add variable to link text color – $tc4
    • Add variable to link hover color – $tc6
  • Test the result
  • Choosing the right Selector
    • Making a specific choice
    • Choose a unique container selector
    • Choose the correct symbol
      • hash-tag for ID
      • dot for class

Configure the Agility Feature Box

  • What is the Feature Box?
  • Understanding the Structure of the Feature Box
  • Using Agility Columns to Reconfigure the Feature Box
    • Configure the Agility Column Wrapper
    • Create a New Agility Column
    • Configure the Existing Column

Add a slide show to the Feature Box

  • Download and Install Orbit Slider plugin
  • Download and Install the Orbit Slider Helper box
  • Plugin Settings – Slider Options
    • Nav arrows off
    • Captions off
    • Bullets off
    • Autoplay
    • Advanced Settings
  • Add new slides
  • Add slideshow to Feature Box
  • Add drop shadow to slideshow
    • Create a Agility Widget Style
    • Selector – .orbit-wrapper
    • Configure Drop Shadow

Add a Call to Action to the Feature box

  • Add text widget to Feature Box
  • Remove all the formatting
  • Add a clickable phone number link
    • in USA & Canada
      • tel:
      • Area code
      • Local Number
    • In the rest of the world
  • Add a link
  • Add a class to the widget

Style the Call to Action

  • Create a new Agility Widget Styles Plugin
  • Choose the right CSS Selector
  • Progressive Refinement
  • Widgets
    • Font Settings
    • Padding
    • Text Color
  • Widget Titles
  • H5
  • Span Text
  • Links
  • Typography
  • Border
  • Radius
  • Shadow

Add Attention Boxes with the Agility Smart Widget Columns

  • Create a box
  • Configure the box
    • HTML id
    • Number of widget columns
    • Widget Area Name
    • Widget Area Description
  • Create a widget block with 3 columns

Add Text, Images and Links to the Attention Boxes

  • Add Black Studio TinyMCE widget
  • Upload Image
  • Add Text
  • Add Link
  • Setup the Agility Widget Styles Package
    • Name
    • Reference
    • Choose the correct selector
  • Style using the Agility Widget Styles Package
    • Add secondary background color variable – #F0EEE2
    • Widgets
    • Widget Titles

Question and Answer

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one