And designers still seem not to agree on their definition.

So, here are the definitions I feel comfortable with:

• A slider is any web element that rotates through. It can contain images, videos, images, and text, etc. They can be managed manually by the user, or set on autoplay, like the one below. Many times people use “slideshow” instead of “slider”.Source: Lonely Planet

• Carousels are a type of slider that does not show entire large images at a time, but multiple ones in a row. Some web designers say the carousels and sliders are one and the same. When using WordPress, you will see them treated differently. Both sliders and carousels make use of visual cues in order to show the user that they can move left-right and uncover new images, etc.

• A gallery is a collection of images or videos presented in grids.Source: booking.com

So is your head spinning right now? Or is everything clear? I know it can look messy.

Now let’s see how you can create a WordPress carousel. Carousels are not a built-in WordPress feature, this is why we’ll need some other tools to help us out. Now, I’ve got three such tools that I’ll exemplify right away.

How to create WordPress carousels using WordPress plugins

If you want to use WordPress plugins, here’s how you can install them:

When choosing your plugin make sure to check:

• Reviews and popularity;
• If it has the features you need;
• Go to the plugin’s website and check the demos;
• Start a free trial if possible.
• Mobile responsiveness.

Now, you should be aware that most of the time these plugins might use the term slider instead of carousel. You can ask their support team if they support carousels while defining what a carousel means to you.

Next, I’m going to make a list for you of the most popular WordPress carousel plugins out there. After that, I’m going to show you a demo using one of the plugins. Let’s get going. 

• NextGEN GallerySource

Here you have the most popular features for the NextGEN WordPress plugin.

• Choose from 20+ gorgeous gallery styles.
• Multiple Upload Options (Image, Zip, Folder Import).
• Rotate Images and Custom Crop Thumbnails.
• Retina images.
• A wide array of options for controlling size, style, timing, transitions, controls, lightbox effects, and more

Pricing: starting at $24/year.

Free plan available: yes.

• ModulaSource

Let’s look at some of the most appreciated features of Modula:

• Drag & drop builder.
• Create galleries faster by starting from the saved options preset. Change settings in bulk for your galleries.
• Create the ultimate gallery experience by adding videos from YouTube, Vimeo, or self-hosted to your image galleries.
• Mobile responsiveness.
• Adds zoom functionality to images, when opened in the lightbox. 
• Shortcode functionality.
• Lots of presets available.
• Compatible with most of the most popular page builders.

Pricing: starting $39/year.

Free plan available: yes.

• FooGallerySource

Here are the FooGallery most popular features:

• Drag and drop builder.
• Customizable templates.
• Multi-level filtering.
• Mobile-responsiveness.
• Gutenberg-ready.

Pricing: starting at $19.99/year.

Free plan available: yes.

• Envira Photo Gallery

Source

Here are Envira’s most popular features:

• Drag & drop builder.
• Pre-built templates.
• WooCommerce integration.
• Slideshow and fullscreen options.
• Mobile-ready.
• SEO-friendly.

Pricing: starting at $29/year.

Free plan available: yes.

• Slider, Gallery, and Carousel by MetaSliderSource

Here are MetaSlider’s most popular features:

• Drag & drop builder.
• Gutenberg-ready.
• Slider configuration: transition effect, speed, timing, plus many more.
• Create completely customized HTML slides using the inline editor. 
• There are over 50 built-in CSS3 transitions available.
• MetaSlider carousels are compatible with all slide types: image, photo, video (YouTube/Vimeo), layer, HTML, product, and post-feed slides.

Pricing: starting at $39/year.

Free plan available: yes.

Now, most of the galleries out there have the slider option included in their paid plan. This is why for my demo I chose MetaSlider.

After activating the plugin, you will see MetaSlider showing up in your WordPress dashboard, on the left.

To create your first slideshow you have two options: dropping images or creating a blank slideshow.

I’m gonna go with the first option.

After the upload, I will be guided towards the “Add Slide” option.

Now,  I don’t quite understand why I directed once again to the Media Library, because I have already uploaded my images.

After the image selection, go to the button-right and add them to the slideshow.

Now, it’s time to preview the slideshow.

If you want to create a new slideshow, just head over to new.

Whenever you go to the MetaSlider menu on the left, you’ll be seeing all your previously-created slideshows.

When you select your slideshow, you’ll see all your images  (aka slides). Now, you can make some extra edits to the images in your slideshow: cropping, scheduling, SEO optimizations, captions, attaching an URL.

On the right, you’ll see a panel with some extra settings.

You can choose the width and height of the slider, but also set up effects.

There are also some custom themes that you can choose from.

In the advanced settings, you can tick an option if you want your slideshow to behave like a carousel.

Here you can play with hovering effects, autoplay, CSS classes, alignment, and more.

On the right, there’s also a section named “How to use”.

Here you will find a tiny piece of code (aka shortcode) that you can copy and place inside any post or page you want. This is how you can go live with your WordPress carousel. It’s that easy!

How to create WordPress carousels using Gutenberg blocks

Now, let’s say you are using the Default WordPress Editor (aka Gutenberg). It looks like below. For every element that you want to insert on your page, you will need a block: heading, paragraph, image, table, quote, etc. You can do this from the “+” sign in the upper-left corner.

Now, there are no carousel or slider blocks available. Right now, the only default block is for galleries. But, you can add such blocks with the help of….WordPress plugins.

I’ve already mentioned in the previous chapter that some of the plugins there are Gutenberg-ready. This means that you can find their blocks available in the editor.

Here’s the MetaSlider block, for example:

When you select the MetaSlider block, this is how it will look inside your page or post.

In the previous chapter, I made a little demo on how to use MetaSlider to create your first WordPress carousel. After creating it, you can select it from the block. I named mine “First Slideshow” and “Second Slideshow”. Not very creative, I know. And that’s it!

The whole process is pretty straightforward.

Now, let me show you a special use of WordPress carousels: creating carousel slideshows dynamically sourced from the posts, pages, or custom post types of your website. You can use it to display product carousels as well for your WooCommerce store.

This is a common practice used on blogs when you want to suggest some new content to your visitors.

And there’s a cool WordPress plugin that can help you with this, and it’s blocks all-in, so to speak.

Introducing Getwid Blocks: Post Carousel Gutenberg Block.

Here’s how such a carousel can look like.

How to create WordPress carousels using WordPress page builders

For the purpose of this exercise, we are using the multipurpose Colibri PRO WordPress theme and the Colibri page builder. Why am I using a WordPress website builder? Because it gives me drag and drop functionalities and the design experience is really seamless. 

The Colibri builder has built-in carousel components.

Now, the moment you install the Colibri theme, you will be prompted with an upgrade message so that you can fully experience the theme. During the upgrade you’ll install the Colibri page builder. 

When you will head over to a page for editing, when you’ll hover over it you’ll see the “Edit in Colibri” option. This is where all the magic will happen.

When inside the page, go in the upper-left corner, and click on the “+” sign.

Now, head over to “Components” and select the “Carousel” option.

Simply drag it to your desired location on the page.

In my case, this is how it will look like:

When you select the carousel, you’ll see a bunch of editing options on the left. They are split into content, style, and advanced.

Here you can adjust the overall carousel look, as well as each individual carousel item.

There are so many possibilities here: from adding text, uploading images and videos, to arrow and dots styling, and spacing, borders, shadows.

All you need is inspiration. The tool is pretty intuitive.

Don’t forget to hit “Publish” when done.

This being said, it’s time to choose your weapon and create your WordPress carousel today! 

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

[sibwp_form id=1]

The post All You Need to Know About WordPress Carousels appeared first on ColibriWP Blog.

Even if platforms like Behance and Dribbble have emerged recently and are used to show off designers’ portfolios, you still need a website. Because your work doesn’t fit in a box. You need something to match your personality, and to be customized according to your own vision. 

By the end of this article, you’ll find out which are your options in WordPress for showcasing portfolios and which are the most popular WordPress tools to bring your portfolio to a whole new level.

But before we get into the technicalities, let’s look at a friendly tips and tricks checklist for a beautiful and smart portfolio.

Tips and tricks when creating your portfolios in WordPress

The main purpose of a portfolio website is to show off one’s skills and work. Before getting into designing your website, you should definitely make a plan and do some research for inspiration. 

In your portfolio you can include:

• Logos of clients you’ve worked with
• Case studies
• Project descriptions
• Photographs
• Testimonials 

Now, If you need some inspiration, I definitely recommend this website: SaaSpages.xyz. It can provide inspiration for every section of your website, from header to footer.

Let’s check 3 examples they showcase.

This case study features a video, a logo, a testimonial, and a headline that makes you really curious.

The testimonials section below has a memorable headline: “Wall of love”, really creative I’d say. They don’t use fluff superlatives. They keep it simple and convincing with their copy.

This projects portfolio looks simple. It uses tags to filter different topics and also companies’ logos.

The photography portfolio below is just stunning. As a photographer myself, I know that having a unified vision and style is helping a lot the portfolio (this does not apply to designers and other freelancers).

Source: rotundperfect.ro

Now, as per the tips and tricks, here’s the tiny checklist I promised:

1. Make sure to showcase diverse projects you’ve worked on. Don’t go for a certain type of project (unless you want to have a niche approach).
2. Make sure your website is mobile-friendly. According to Statista, mobile accounted for approximately half of the web traffic worldwide in the second quarter of 2020. If you’re interested in ranking high in Google’s search results, you should know that in March 2020 Google announced mobile-first indexing for the whole web. This means that Google predominantly uses the mobile version of a website for ranking.
3. Present testimonials from former clients. We live in a world where peer reviews are more important than ever. Recommendations are your best marketing channel, and it’s practically free.
4. Use videos and images as well to catch the visitors’ attention. Video has the power to create engagement and it can make your brand stand out.
5. Experiment with full-width visuals if you are a photographer and love minimalism. Full-width designs are a great touch when mages are more important than text.
6. Don’t forget to add an “About me” section, where visitors can get to know you better, your vision and objectives, your experience.
7. You can create separate pages for each project. The details you’ll want to include will match the type of portfolio you need. If you’re a web designer, you’ll want to provide the link for the websites you’ve built, together with some project description in terms of technology, scope, timeframe, challenges. If you’re a photographer, you’ll want to include information on the topic, the subjects, the location, and the date of the event. A visual artist will include information about the assets used, the vision, perhaps inspiration, and even the price of the item.

Now that we’ve set up these things straight, it’s time to go to WordPress and identify the tools you need for your portfolio website.

How to make a portfolio in WordPress

Now, the first thing you should do is choose a theme that has the features that match your expectations or get close enough.

When creating a portfolio in WordPress you will make use of one of the following:

• a slider. A slider is any web element that rotates through. It can contain images, videos, images and text, etc.

Source: rotundperfect.ro

In the example below, the slider is used to show off current promotions.

Source: limetreekids.com.au/

• a carousel. Now, not everyone agrees on this definition: carousels are a type of slider that do not show entire large images at a time, but multiple ones in a row. Some web designers say the carousels and sliders are one and the same. When using WordPress, you will see them treated differently. both sliders and carousels make use of visual cues in order to show the user that they can move left-right and uncover new images, etc.
• a gallery. A gallery is a collection of images or videos presented in grids.

Next, it’s time for some design.

How to make a portfolio in WordPress using the Default Editor

As you might already know by now,  the Default WordPress Editor works with blocks (the so-called Gutenberg blocks). You can have blocks for paragraphs, tables, custom HTML, and…galleries. At the moment we do not have options for sliders or carousels.

Let’s add a gallery block to a page.

We start by heading to the WordPress dashboard -> Pages. You could either add a new page or edit an existing one.

Next, from the “+” icon in the upper-left, open the blocks panel.

Select the gallery block.

Drag the block to your desired place inside the page.

When you select the block, you will be able to see on the right a panel where you can add some additional CSS classes to this gallery block. Next, you could add styling to these classes using custom CSS. We’ve written an article on the topic here. Now, you can add images to the gallery using the “Upload” or “Media Library” options”.

Now, as you can see, there are no gallery customization options available. The block features are still a work in progress. If you need some extra enhancements, you could go for a WordPress gallery plugin that is Gutenberg-ready, such as Envira or Kadence. Kadence also has options for carousels and sliders.

Besides blocks, in the Editor, you’ll also find patterns. You can access them from the same “+” sign in the upper-left. Patterns are are predefined block layouts, available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration.

The WordPress folks have just released a pattern directory from where you could select some nice gallery layouts.

In order to add them to your design, just hover over the pattern until you see the “Copy” button.

Next, go to your page, and just right-click and paste the design.

From the panel on the right, you can make some additional edits such as padding, opacity, overlay, minimum height, etc.

If you select an image from the gallery, on top of it you’ll see a menu with some extra editing options. In here you can replace the image, crop it, add text on it, align it, etc.

And that was all for the Default Editor portfolio editing options.

How to make a portfolio in WordPress using page builders

For the purpose of this exercise, we are using the multipurpose Colibri PRO WordPress theme and the Colibri page builder. 

Why am I using a WordPress website builder? Because it gives me drag and drop functionalities and the design experience is just piece of cake.

In the theme-builder combo I have these options for creating portfolios:

• Using the gallery or portfolio blocks
• Using the sliders and carousels components

Now, as per the difference between blocks and components…The blocks are pre-defined designs that can be used as whole website sections (portfolio, features, the team). The components, on the other hand, are tinier items that can help in building new blocks (buttons, headings, videos, images, etc.).

Let’s take them one by one.

How to design a WordPress portfolio using the portfolio or gallery blocks (not the same as Gutenberg blocks)

With builders, everything is almost a click away. You just need to click on the “+” sign and open the blocks and components panel, and scroll down till you find the gallery or portfolio block.

The portfolio block can contain:

• A header
• A description
• Images with or without description

You can insert your block by positioning yourself in the website place where you want the new section to be. Next, click on the block itself from the left-hand side panel. You can click on the desired block and press the “delete” key on your keyboard if you want to place something else instead.

You can always mix a portfolio block with some other components, such as text or video. The cool thing is that you can even save your block to reuse it in other designs.

If you’re going for a gallery block, there are multiple options as well. Galleries are usually the choice when you want to list photos.

No matter the choice, you can always customize your portfolio using the options from the left-hand side panel.

There are 3 options: layout, style, and advanced.

You can change spacing, borders, shadows, typography, and colors, and even add your own CSS. Everything is easy and intuitive.

How to design a WordPress portfolio using the slider and carousel components

As shown earlier, components can be found near the WordPress blocks. When you hit the “+” sign you’ll open the blocks and components panel. From components, you can either type in “slider” or “carousel” or just scroll until you find them. There’s also an option for “Image collage”. All you have to do now is drag and drop the component on the website on the right.

If you go for a slider, you can:

• Make image adjustments in terms of size, positioning
• You can insert self-hosted videos or Youtube URLs
• Align content and visuals in the same slide
• Change colors and typography
• Add fading effects
• Select which elements should show up on mobile devices
• Style the arrows that help sliders “slide”

The same goes for the carousel. This is why a page builder is so versatile. 

Here’s a more in-depth article we wrote on sliders, with design tips included.

How to make a portfolio in WordPress using plugins

Before getting into this topic, I want to clear something for you. If you can avoid plugins, do it. Lots of things require plugins in WordPress. The more plugins you have, the slower your website’s loading time. So, choose wisely. 

As I said, a page builder can give you options and functionalities that a lot of plugins offer, without having to worry about lots of updates and performance and security issues.

Now, first thing first. Head over to WordPress.org, the plugins section.  Next, type in “Portfolio”, “Grid”, or “Gallery”.

When choosing your plugin make sure to check:

• Reviews and popularity
• If it has the features you need
• Go to the plugin’s website and check the demos
• Start a free trial if possible

As far as the WordPress plugin installation goes, it’s all in our tutorial:

Now, here are the most popular gallery plugins out there:

• NextGEN Gallery
• FooGallery
• Envira Photo Gallery
• Slider, Gallery, and Carousel by MetaSlider

 Conclusions

A stunning WordPress portfolio site can set you apart from your competition. Don’t underestimate it. 

This article just proved how easy it is to make a portfolio in WordPress. The actual setup will take less than the process of figuring out what to include in your portfolio.

This being said, start building your portfolio today!

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

[sibwp_form id=1]

The post How to Make a Portfolio in WordPress (UPDATED 2021) appeared first on ColibriWP Blog.