Ask a Question ?
Design & Publish Websites Faster

Showcase Your Portfolio with the Projects App

In this article we’ll teach you how to show off your projects with the new Projects app on your created website. With this app, you can turn your website into an online portfolio to showcase your works! It’s easy and looks great.

See The Projects App in Action

How to Use

Once you have created a website with our website builder  you need to install the Projects App. Pull up your App store and drag the “Install New” button of the Projects app to a column of your layout.

Drag the install button to get a projects app in your site

Click and drag the “Install New” Projects app button to your layout

When you drop it, by default your app will look like the following image.

Default look of a Projects app

This is how your app will look after installing it

Notice that you have several projects and categories already there. You can edit those to enter your own content.

Change Default Items

To edit any of the current items on your app, double click either the sample image or the sample text below it.

Double click on the title or on the image to edit

Double click to enter edit mode; if you click only once, you will activate the link

This will open up a CMS panel window, from where you’ll be able to edit the content.

CMS panel diagram

In the CMS panel you can edit all the content of each project

Add More Items

In order to add items to your projects app, go to the CMS panel by clicking on the wrench icon on the app toolbar.

The pencil icon opens the CMS panel

Click on the “Edit Content” button to access the CMS panel

On the CMS panel you’ll see the current items of your projects app.

On the Projects app CMS panel, you can manage, edit, add and remove projects

On the Projects app CMS panel, you can manage, edit, add and remove projects

To edit one, click on the “Edit” link on the row of the respective item.

CMS panel showing current items

To edit an item (project) click on the “Edit” link

The single-item editor will open.

Editing an item of the Projects app

On the CMS panel, you can edit every item of your Projects app

Here (for each project) you can edit:

  • Project name
  • Subtitle (can be a tagline)
  • Image (will be used as thumbnail)
  • Date (you can change it)
  • Category
  • Description (can have images and videos too!)

To edit an image click on the “Edit Image” button on the right.

Edit Image button

Clicking the “Edit Image” button will open the image editor where you will be able to update it

This image will be used as a thumbnail for your visitor to click and enter that item.

The image for the first item updated

These images will be used as thumbnails for your items

Edit Categories

You can have different categories for different kinds of projects. For example, if you’re building a photography portfolio, your categories can be:

  • Wedding
  • Landscapes
  • People

And similar. Or if you’re creating a showcase of a graphic designer, your categories could be named:

  • Logos
  • Corporate Identity
  • Layouts

To edit the categories, go to the “Manage Categories” tab of the CMS Panel (to open the CMS panel click on the pencil icon on the app toolbar, refer to the steps above to “Edit Content”).

The "Manage Categories" tab on the CMS panel

To edit your categories, click on “Manage Categories” on the left of the CMS panel

Here you can rename any of your current categories, or delete one. If you want to add a new one, click on the next tab, labeled “New Category”.

Click on "New Category" to add one

Enter a name for your category and click “Save”

You can select a category for any of your items (projects) when you are editing them.

On the "Edit Project" tab, you can assign a category

Edit any of your current items and assign a category on the right side

Settings

The settings panel for the Project app is one of the most comprehensive of our website editor. You have a lots of options. To access them, click on the wrench icon of the app toolbar.

The wrench icon opens the options

Click on the “Edit Settings” button to see the options of the Projects app

There you’ll see the following options sections:

  • General
  • List View Settings
  • Display Details on List View
  • Image Rollover Effects
  • Display Details on Entry View
  • Propagation
Settings for the Projects app

Sections of the options for the Projects app

We’ll go over each of them below.

General

Currently there’s only one option on the General section of the settings. It’s labeled “Show Categories Above List View”.

General section of the Projects app

If you select this checkbox, your categories will be displayed

List View Settings

This will affect how your items are presented on your page. Here you can edit:

  • Number of entries to show per page: you can enter a number manually to specify how many projects you want the app to show on each page (you can have more than one page to list your items).
  • Columns: how many items you want your app to display on each row? You can select 1, 2, 3 or 4.
  • Show project info: the options are “Below Image”, “Over Image”, “Above Image”, “Left Side” and “Right Side”.
  • Show project info on: options are “Initial State” (doesn’t require your visitor to mouse over) and “Rollover State”.
List view settings for the Projects app

Here you can select how your items will look for your visitors

Display Details on List View

The following details related to each project and be shown/hidden depending on each of the following check boxes:

  • Show thumbnail: the image you set at each project.
  • Show name: the title.
  • Show subtitle: the tagline.
  • Show date: the publishing date (which you can edit too).
  • Show category.
Display details on list view options

You can check/uncheck several details here to show/hide them on your Projects app

Image Rollover Effects

Here you can select an effect to be applied to the image thumbnail when your visitor hovers over the it. You can set one of the following:

  • None
  • Gray scale
  • Darken
  • Lighten
  • Sepia
Effect for hovering over the image

Select an effect to be performed when you mouse over the thumbnail

Display Details on Entry View

The options available here will be displayed/hidden on the single-entry page. You can show/hide the date, and the category for each project.

Display details on entry view

This options will be displayed/hidden on the single entry view (when your visitors click on a project)

Propagation

Learn more about style propagation and geometry propagation. These two options can be selected here.

Propagation settings

You can either enable/disable style and geometry propagation for this app

FAQ

Can I duplicate the Projects app?

No, you can only have one Projects app per page. But you can have several pages, and on each of them you’ll have one Projects app.

Can I use a video instead of images for the thumbnail?

No, you can’t put a video instead of the image thumbnail for your project. But you can add one or more videos on the description of each project, which will be displayed on the single-entry detail page.

Can I share a specific project instead of the general list-page?

Yes, each single-entry has a unique URL which you can copy and share.

What is the “single-entry” page?

The single entry view is available to a visitor when he clicks on any of the thumbnails or project names from the list. There they can learn more about that specific project and see its full description.

Doubts or comments? Please, share them on!

Menu