- Section: Intro
- Section: Hero
- Section: Recent Projects
- Section: Static Content
- Section: Get in Touch
- Section: Call to Action
At
Appearance > Widgets is where you will be customizing the appearance of the homepage. You can do so by adding any of the section: widgets to the Homepage Sections widget area in order to define the layout. Here is a screenshot of possible widget configuration that can be used:
First, let’s have a look at each of the widgets and what they do:
Section: Intro
This widget outputs a section that will be the first message when your visitors enter your site. Be descriptive :) You can use <span> tags to highlight words and/or phrases.
Section: Hero
This widget outputs the contents of a selected static page. There is an option to include -or not- a button.
Section: Recent Projects
This widget outputs a portfolio section. There are a couple of easy settings to customize this area, such as how many portfolio items you want to display at the portfolio section.
Section: Static Content
You can add as many static content sections as you want at the layout. Let’s try to add one now.
First you have to create the content at a new page. Go to Pages> Add New and create a new page. Create the content you wish and save it. Now let’s return to the widgets area. Drag the Section: Static Content widget to the Homepage Sections panel. Give the section a title and a subtitle and from the “Select page” dropdown select the page you just created. Hit save and you are good to go.
Customizing the appearance of the content section:
A special feature of Doctype is that you can create interesting visual rythms by customizing several properties of the static content page widget, such as:
- Title: Choose the title of this section.
- Select page: Here you select the page where you want the widget to pull content from.
- Background color: sets a background color for the content
- Background image URL: Sets an image as an optional background for the content
- Background opacity: Sets an opacity for the selected image (if any).
- Text color: Defines the text color. E.g. if you have a dark background color you may need to have white text.
- Link color: Sets the color of the text links.
This gives you the freedom to experiment and get creative by playing around with these options, plus allows you to create great content visual rythm to engage your users.
Note: these options only take effect for the section at the homepage, and not the actual page.
Section: Get in touch
This widget outputs a map and some short contact details.
Section: Call to Action
This widget will create a full-width call to action section with a button. Sweet.
