Building portfolio site based on Drupal 8

Everyone talks about Drupal 8 as being a fundamental change from Drupal 7. There are some visual changes as well as excellent enhancements you'll want to figure out.

In this article, we will guide you how to use Drupal 8 to build a portfolio/cooperate site with those following simple steps:

  1. Install
  2. Create blog page
  3. Create portfolio page/block
  4. Create about page, services page/block and contact page

I. Installation

It is quite easy to install Drupal 8. You can take a look at for detail reference. After installation, you'll see Bartik theme, which is set as default theme from Drupal 7

Some basic settings remain the same with Drupal 7; however, it is more convenient for user thanks to the changes of interface.

II. Create a Blog page

1. Add content type

First of all, you need to create Content type Blog:

  • Similar to Drupal 7, you go to Structure -> Content type
  • Click Add Content Type
  • In the Name field, add a name for the content type. The name is required. You can add or omit the Description field.

You can take a look at the example below, creating Blog

Setting other preferred default values is similar to that of Drupal 7, except the Comment Setting is no longer included.

+ Submission form settings:
In the Title field label, you may add a title for your content type.
(The default for this field is "Title.").

+ Publishing options:
The default publishing options are Published and Promoted to front page. Additional options are available

+ Display Settings:
The Display Settings has one option which allows the Author username and publish date to be displayed with the content

+ Menu settings:
In the Menu settings you can choose which default parent item to use. This comes in handy when using taxonomy in your site

2. Add content type's fields

After click Save and Manage field, you will see a Manage Field box, in which you can add more fields for your content type you've created.

Here you fill the Name of the field in "Add new field" Box and choose the equivalent in "Select a field type" (There are some new field options available in Drupal 8 such as Email, Entity Reference)

3. Add content

After creating content type, it’s time for you to create the first content of your site.

  • Go to Content -> Add Content and then choose the Content type that you need (blog).
  • Put all the necessary information for your article
  • Configuring the referenced settings named Menu Settings, Comment, URL Path Settings, Authoring Information and Promotion Option like Drupal 7
  • Click “Save and Publish” to end editing. (You also have other choice: Save as unpublished)

After click "Save and publish", you will see your first blog post like this

It is easy to realize that the post's view is not very nice with the label fields (image, description, body, comment) or you want to change the order of those fields. It is not difficult to do that. Let's move to the next step:

4. Manage Display

To change the display of your post, go to Structure/Content type

  • Click the dropdown arrow from "Operation" column , choose "Manage Display" and arrange the fields.
  • You can also the fields' labels by choosing Hidden/Inline or Above
  • In the Image field, you can configure the image's size or add link to it.

Note: to configure the Comment field, you go to Structure > Comment forms and click Manage fields. Similar to adding fields, here you add more small fields for Comment

5. Add new view

Now you can decide the view of your content type: page or blog. Continue with the example above:

  • To create Blog Page, you go to "Structure/View/Add new view" and check Create a page
  • Customize the page with Name, number of displayed items, path, etc.

6. Configure view

  • Go to Structure/Views
  • Find the content type that you want to change its view and then click Edit.

  • It is true that there are some new features, but even Views almost entirely retains its Drupal 7 interface.
  • It is noted that there are two options for View mode in Format: Teaser or Default.

    Choose Default for the complete display of the node.
  • Here you can configure the page menu by clicking "No Menu"

There is also another way to configure the page menu:

  • Go to Structure/Menu
  • Click "Edit Menu" of Main Navigation

Final view

Here is the final view of Blog page

Those are all simple steps to create a Blog page with flexible Drupal 8. We hope this guide will help you and don't forget to subscribe us with next guides to build a complete Drupal site

Related post

Have More Idea?

We are here to build your website!

No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.