Archives

Displaying Portfolio

In order to display Portfolio page, you can use our super configurable WPBakery portfolio shortcodes (fig. 1):

Fig. 1. Portfolio shortcodes.

Fig. 1. Portfolio shortcodes.

Portfolio Masonry and Grid

Fig. 2.1. Portfolio Masonry & Grid shortcode.

Fig. 2.1. Portfolio Masonry & Grid shortcode.

First “General” box in shortcode settings offers to select which posts to display (fig. 2.2).

Fig. 2.2. General portfolio settings.

Fig. 2.2. General portfolio settings.

You can select posts basing on their category or display all posts. Other settings from this tab allow to configure posts feed:

  • Masonry or Grid mode;
  • loading effect;
  • layout (classic, bottom overlap, side overlap);
  • content alignment;
  • image size, padding, animation, hover;
  • dividers;
  • background color and padding;
  • columns settings, where you can specify number of columns depending on device and browser width;
  • responsiveness (decide when to switch to a single-column layout).

“Project” tab allows to specify what link should be opened when a visitor clicks on a single project on portfolio page: project itself or a URL from its “external link” setting. The rest of options defines appearance of portfolio single post on portfolio page:

  • post title font, color, size;
  • meta information (whether to display post date, category, etc.) and its look;
  • text or, in another words, post content – its amount and appearance;
  • “Read more” button label and link/button mode.

In “Icons” tab, you can:

  • decide whether to display “External link”, “Zoom” and “Link to project page” icons on featured image hover;
  • select a specific icon;
  • configure its size, color, background and border.

It is possible to enable different modes of pagination and adjust the number of project to display in “Pagination & Categorization” tab. You can also configure category filter here: descending/ascending order, name/date ordering and look of filter buttons.

Portfolio Justified Grid

Fig. 3.1. Portfolio Justified Grid.

Fig. 3.1. Portfolio Justified Grid.

Fig. 3.1. Portfolio Justified Grid.

This shortcode has less settings than the “Masonry & Grid”. In “General” tab you can:

  • select categories to display (fig. 3.2);

    Fig. 3.2. General Portfolio Grid settings.

    Fig. 3.2. General Portfolio Grid settings.

  • specify how many posts should be displayed;
  • enable categories filter.

“Appearance” tab allows to specify:

  • loading animation effect;
  • row target height and gaps between images;
  • featured images proportions;
  • hide last row if there’s not enough images to fill it (in such a situation, projects get stretched in this row. If such an effect does not suit you, this row can be hidden).

You can also decide here:

  • how to display projects descriptions: on colored background, on dark gradient, in the bottom or with help of background and animated lines;
  • what animation effect to apply;
  • select image hover background color;
  • apply content alignment;
  • switch on/off projects titles, excerpts, details / link / zoom icons.

Finally, you can decide whether to display project meta (date, category, author, comments) with help of “Project Meta” tab.

Portfolio Carousel

Fig. 4.1. Portfolio Carousel.

Fig. 4.1. Portfolio Carousel.

Portfolio Carousel has almost the same settings as Portfolio Masonry & Grid, except options for scroll: whether to scroll one slide at time or all visible slides. Plus, settings for arrows (fig. 4.2) and bullets:

  • disable/enable;
  • select icon, its color, background and position.
Fig. 4.2. Arrows settings.

Fig. 4.2. Arrows settings.

Page Templates

In addition to WPBakery Portfolio elements, you can also use “Portfolio – list”, “Portfolio – masonry & grid” or “Portfolio – justified grid” templates (fig. 5). But please consider, they have less settings than the shortcodes described above.

Fig. 5. Portfolio page template.

Fig. 5. Portfolio page template.

Adding & Editing Projects

[Before diving into Portfolio Projects we strongly recommend you to get accustomed with Blog Posts]

To create a project navigate to “WP-admin > Portfolio > Add new”.
In addition to all standard stuffs like header options and widgetized areas, Portfolio project back-end interface has “Project Options” tab (fig. 1):

Fig. 1. Project settings.

Fig. 1. Project settings.

Here, you can configure:

  • specify a link for the “Back” button (more info is available here), different to the one pointed in Theme Options -> Post Types;
  • hide featured image on a single project page;
  • enable lightbox for this image on a single project page;
  • select categories for related projects (fig. 3):

    Fig. 3. Related projects.

    Fig. 3. Related projects.

  • choose post preview width on portfolio page: normal or wide (fig. 4):

    Fig. 4. Post preview width.

    Fig. 4. Post preview width.

Finally, there is such a legacy feature as “Project Media”, which can be enabled through The7 -> My The7. But it is meant to be used by buyers who started building a website with older generations of the theme.

Displaying Blog

In order to display Blog, you can use our super configurable WPBakery blog shortcodes (fig. 1):

Fig. 2. Blog shortcodes.

Fig. 1. Blog shortcodes.

Blog List

fig. 3.1. Blog list shortcode.

Fig. 2.1. Blog List shortcode.

First “General” box in shortcode settings offers to select which posts to display (fig. 2.2).

Fig. 3.2. General settings.

Fig. 2.2. General settings.

You can select posts basing on their category or tags. Or display all posts. Other settings from this tab allow to configure posts feed:

  • layout (classic, centered, bottom overlap, side overlap);
  • image size, padding, animation, hover;
  • dividers;
  • background color and padding;
  • responsiveness (decide when to switch to a single-column layout).

Appearance of a post in the posts feed can be configured in “Post” tab:

  • post title font, color, size;
  • meta information (whether to display post date, category, etc.) and its look;
  • text or, in another words, post content – its amount and appearance;
  • “Read more” button label and link/button mode.

“Fancy Elements” tab allows to display/hide fancy elements and adjust their color settings.

In “Hover Icon” tab, you can:

  • decide whether to display an icon on image hover;
  • select a specific icon;
  • configure its size, color, background and border.

It is possible to enable different modes of pagination and adjust the number of posts to display in “Pagination & Categorization” tab. You can also configure category filter here: descending/ascending order, name/date ordering and look of filter buttons.

Blog Masonry and Grid

Fig. 3.1. Blog Masonry & Grid shortcode.

Fig. 3.1. Blog Masonry & Grid shortcode.

“Masonry & Grid” shortcode has almost the same settings as “Blog List”, apart from following:

  • choose Masonry or Grid layout;
  • choose Classic or Bottom overlap, or Overlay (plain background or gradient) style;
  • columns settings (fig. 3.2), where you can specify number of columns depending on device and browser width:

    Fig. 3.2. Column settings.

    Fig. 3.2. Column settings.

Blog Mini

Fig. 4.1. Blog Mini.

Fig. 4.1. Blog Mini.

This shortcode is a light version of Blog Masonry WPBakery element. It has settings to:

  • select post category to display;
  • specify number of posts to display;
  • choose among list, 2-columns and 3-columns layout;
  • style featured images;
  • switch on/off post excerpt.

Blog Carousel

Fig. 5.1. Blog Carousel.

Fig. 5.1. Blog Carousel.

Blog Carousel has almost the same settings as Blog Masonry & Grid, except options for scroll (fig. 5.2): whether to scroll one slide at time or all visible slides. Plus, settings for arrows and bullets:

  • disable/enable;
  • select icon, its color, background and position.
Fig. 5.2. Blog Carousle settings.

Fig. 5.2. Blog Carousle settings.

Page Templates

In addition to WPBakery Blog elements, you can also use “Blog – list” or “Blog – masonry & grid” templates (fig. 6). But please consider, they have less settings than the shortcodes described above.

Fig. 1. Assigning page template.

Fig. 6. Assigning page template.

Slideshow

[Displaying slideshow in the header of the page/post/project is described in this article.]

To create a slideshow navigate to “WP-admin > Slideshows > Add new”. Slideshow back-end interface is very simple: you need to enter slideshow Title and add some slides in the “Add/Edit slides” box.

Once you hit “Select or upload images” button, slides editing interface will pop up (fig. 1):

Fig. 1. Add/select slides.

Fig. 1. Add/select slides.

There are 4 additional fields on the right of the slides:

  • description is text that appears underneath slide title;
  • video URL (fig. 2) allows you to create a video slide in a slider;
  • image link adds a link to a slide;
  • hide title checkbox allows to hide the slide title.
Fig. 2. Video Link

Fig. 2. Video Link

Once slides are added, they can be edited, deleted and reordered by dragging with the cursor inside of the “Add/Edit slides” box (fig. 3):

Fig. 3. "Add/edit slides" box.

Fig. 3. “Add/edit slides” box.

Header Style

In every post/page back-end interface, you’ll notice “Page Header Options” box (fig. 1.1):

Fig. 1.1. Page header options.

Fig. 1.1. Page header options.

Here you can choose page header style:

  • “Show page title” option simply renders page title (and breadcrumbs, if enabled) the way it is configure in Theme Options -> Page Titles.
  • “Hide page title” removes the title from a page.
  • “Fancy header” allows to configure individual design of title area for the current page: background color or image, text color and size, etc. More details are available here.
  • “Slideshow” option displays a slider instead of a page title. More info is available here.

Activating “Fancy header” or “Slideshow” option unveils additional “Header overlay” bunch of settings (fig. 1.2). You can choose between default and transparent modes (last one will not work for sites with sidebar-style headers).

Fig. 1.2. Header overlay options.

Fig. 1.2. Header overlay options.

If “Transparent” option is chosen, you get additional styling settings (fig. 1.3):

Fig. 1.3. Additional settings for Transparent header.

Fig. 1.3. Additional settings for Transparent header.

    • “Light” color scheme – helpful when transparent header has dark background;
    • topbar background color;
    • header background color.

Slideshow

All slideshow settings are gathered inside the “Slideshow Options” box.

Note that in order to display a slideshow in page header, you’ll need to create at least one slideshow in corresponding post type:

  • in “WP-admin > Slideshows” for Porthole and Photo scroller;
  • in “WP-admin > Revolution Slider” for Slider Revolution.

When you select slideshow option in Default mode, you will get an option to place it above or below header (fig. 1).

Fig. 1. Header below slideshow.

Fig. 1. Header below slideshow.

You can choose from the following slideshows:

Slider Revolution

Fig. 4.1. Slider Revolution.

Fig. 2.1. Slider Revolution.

The7 is delivered together with extremely popular Slider Revolution plugin. Read on how to install it here. In Slideshow Options (fig. 2.2), you just need to select which slideshow to display and… that’s it.

Fig. 4.2. Slider Revolution settings.

Fig. 2.2. Slider Revolution settings.

Porthole Slider

Fig. 1-1. Porthole slider.

Fig. 3.1. Porthole slider.

Fig. 2.2. Porthole slider options.

Fig. 3.2. Porthole slider options.

After choosing this type of slider, you will be presented with following options (see fig. 3.2) :

  • In the multi-select (or checkbox group) box called “Slideshow(s)” you can specify which slideshows from corresponding post type will be shown on this page. Note that if you do not select any slideshow, all of them will be displayed on this page.
  • Slider layout: full-width (will be huge on “non-boxed” sites) or content width.
  • Set slider layout and its proportions. Note that since theme is responsive and has no fixed width, you need to specify slider proportions rather than absolute values.
  • Select image sizing. This feature is important if you have portrait images and do not want them to be cropped. Simply select the “fit” option. Otherwise select “fill” to make every image fill entire slider area.
  • Also you can enable slider autoplay and set its interval.
  • Hide slider captions.

Photo Scroller

Settings for this slider are very complicated (see fig. 4.2). However, it allows you to craft slider layout carefully and make showy “slider-gallery” type pages. We highly recommend this slider for photographers.

Fig. 2-1. Photo Scroller.

Fig. 4.1. Photo Scroller.

Fig. 3.2. Photo Scroller settings.

Fig. 4.2. Photo Scroller settings.

Settings for Photo Scroller:

  • In the checkbox group called “Slideshow(s)” you can specify which slideshows from corresponding post type will be shown on this page. Note that if you do not select any slideshow, all of them will be displayed on this page.
  • Layout: fullscreen slideshow (will hide text area) or fullscreen slideshow + text area.
  • Background behind the slider (fig. 4.3).

    Fig. 2.1. Slideshow background colour.

    Fig. 4.3. Slideshow background colour.

  • Show/hide pixel overlay. Pixel overlay is handy if you are uploading images with relatively low resolution – it will mask upscaling artifacts (fig. 4.4):

    Fig. 2.2. Pixel (dotted) overlay.

    Fig. 4.4. Pixel (dotted) overlay.

  • Top padding.
  • Bottom padding.
  • Side paddings (paddings between slides).
  • Inactive slides opacity (fig. 4.5):

    Fig. 2.3. Inactive image transparency.

    Fig. 4.5. Inactive image transparency.

  • Thumbnail stripe. You can hide/show it by default or disable it altogether (fig. 4.6):

    arm-thumb

    Fig. 4.6. Slideshow thumbnails (enabled).

  • Thumbnails width and height.
  • Specify slider default state: playing or paused.
  • Autoplay speed (interval).
  • 2 blocks of settings for landscape and portrait images: min and max width, filling mode (fit or fill) for desktops and mobile devices.

Last 2 blocks of settings make this slider very powerful – it allows you to craft a regular slideshow or a scrolling stripe of photos from it.

Fancy Title

Example of a Fancy Title is shown on fig. 1. Basically, it is a page title customized with individual background, color scheme, subtitle and breadcrumbs.

Fig. 1. Fancy title.

Fig. 1. Fancy title.

Beneath the “Page Header Options”, you’ll find a “Fancy Title Options” box (fig. 2):

Fig. 2. Fancy Title Options.

There’s whole lotta settings among which:

  • fancy title layout (alignment of title + breadcrumbs) height and padding. Note that on practice, “height” setting actually is a “minimal height” value. If it’s not enough to accommodate the title, height will automatically increase to fit it;
  • option to show breadcrumbs and adjust their styling;
  • title and subtitle settings which allow to use default name of a page or type in custom text title. Apply text transformation and control size and styling;
  • various settings for Fancy Title background. Here you can upload background image, set up a parallax background, etc.;
  • responsive settings that allow applying different text sizes for different types of devices.