{"id":6287,"date":"2021-02-09T10:49:53","date_gmt":"2021-02-09T10:49:53","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=6287"},"modified":"2022-04-27T06:37:30","modified_gmt":"2022-04-27T06:37:30","slug":"wordpress-video-galleries","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-video-galleries\/","title":{"rendered":"WordPress Video Galleries 101"},"content":{"rendered":"

In a previous article of ours, we talked about <\/span>embedding videos in a WordPress site<\/span><\/a>. Now, we\u2019re going to take the conversation even further by designing a WordPress video gallery.<\/span><\/p>\n

Before we proceed, let\u2019s sum up a bit the shortest process of embedding videos in WordPress, via the \u201cAdd media\u201d feature in WordPress.<\/span><\/p>\n

    \n
  1. Go to your WordPress post\/page<\/span><\/li>\n
  2. Select \u201cAdd Media\u201d<\/span><\/li>\n
  3. Upload a locally stored video or paste the URL of a Youtube video.<\/span><\/li>\n<\/ol>\n

    and you\u2019re done!<\/span><\/p>\n

    Next, we\u2019re going to cover two ways of designing WordPress video galleries:<\/span><\/p>\n

      \n
    • Via WordPress page builders (my favorite one, I\u2019m going to explain later why – and I promise I won\u2019t be biased)<\/span><\/li>\n
    • Via WordPress plugins<\/span><\/li>\n<\/ul>\n

      Do we have a deal?<\/span><\/p>\n

      Let\u2019s get going!<\/span><\/p>\n

       <\/p>\n

      Creating WordPress video galleries using WordPress page builders<\/span><\/h2>\n

      As I mentioned before, I like using page builders. They give me lots of options. We all know that themes kinda have limited capabilities. And plugins usually come to the rescue with their added functionalities.\u00a0<\/span><\/p>\n

      If I wouldn\u2019t use a page builder, I would need a different plugin for:<\/span><\/p>\n

        \n
      • Sliders<\/span><\/li>\n
      • Accordions<\/span><\/li>\n
      • Galleries<\/span><\/li>\n
      • Shortcodes<\/span><\/li>\n
      • Sidebars<\/span><\/li>\n
      • Carousels<\/span><\/li>\n<\/ul>\n

        and the list can go on.<\/span><\/p>\n

         <\/p>\n

        Every plugin has its own way of dealing with things, and it can be daunting trying to understand how they function. On the other hand, if you use a page builder, the learning curve is way shorter. Everything goes inside blocks or components and can be edited in a very similar fashion. No more headaches.\u00a0<\/span><\/p>\n

        But the best of all is the fact that your website\u2019s speed will be better. The more plugins you use, the less performant your site will be.<\/span><\/p>\n

        Now, let\u2019s get to the technical side of this conversation.<\/span><\/p>\n

        WordPress page, builders are very similar, so the moment you know one, the learning curve for another one shortens rapidly.<\/span><\/p>\n

        For the purpose of this example, I\u2019ll be using the Colibri PRO theme and the Colibri page builder. Usually, paid themes come with extra options, that\u2019s why I didn\u2019t go for a free plan.\u00a0<\/span><\/p>\n

        This combo can be really powerful.\u00a0 You\u2019ll see right away in how many ways we can design a WordPress video gallery.<\/span><\/p>\n

        Now, I headed over to \u201cPages\u201d and select \u201cCustomize with Colibri\u201d from underneath my \u201cHomepage\u201d.\u00a0<\/span>Here are some of the options available to you for crafting a WordPress video gallery (I\u2019m telling ya, we\u2019re gonna get creative).<\/span><\/p>\n

          \n
        • Portfolio block combined with video components<\/span><\/li>\n
        • Slider component<\/span><\/li>\n<\/ul>\n

          Before going deeper I want to make sure we are all on the same page.<\/span><\/p>\n

          Blocks are content elements that you can add to a website page or post. In Colibri, there are pre-designed content blocks for the following categories: Hero Accent, About, Features, Content, Call To Action, Blog, Counters, Portfolio, Photo Gallery, Testimonials, Clients, Team, Contact, F.A.Q., and Pricing.<\/span><\/p>\n

          Here\u2019s a pricing block example:<\/span><\/p>\n

          \"WordPress<\/p>\n

          Blocks are definitely making anyone\u2019s life easier. They offer a starting point for almost every section of a site.\u00a0<\/span><\/p>\n

          Blocks and components can be added from the \u201c+\u201d symbol at the top of the left-hand side panel. You will see all the categories available, and you can also search by name.<\/span><\/p>\n

          You can also add blocks by going to the bottom of the site and selecting \u201cAdd Predefined Block\u201d, or to the panel on the left, by selecting \u201cAdd Predesigned Block\u201d. You\u2019ll be guided to the same list of blocks as before.\u00a0<\/span><\/p>\n

          \"Adding<\/p>\n

          Now, all blocks are added at the end of a page. To move it somewhere else, just drag and drop it from the left-hand side menu.<\/span><\/p>\n

          \"drag<\/p>\n

          Each block can be customized from the menu on the left. The same 3 options will show up if you want to change rows or blocks: Layout, Style, and Advanced. This is making your life easier because you do not need to adapt to the settings of various plugins.<\/span><\/p>\n

          \"Customizing-sections-and-blocks\"<\/p>\n

          I repeat, all design roads will lead to:<\/span><\/p>\n

            \n
          • Layout – where you can adjust the structure, spacing, width, and height of the container. Simply put, the container is the actual space a block occupies. Inside the container, you place the content (text, images).<\/span><\/li>\n
          • Style – where you can customize the background of your block or add dividers (visual elements that signalize when a website section ends or begins).<\/span><\/li>\n
          • Advanced – from typography and spacing to responsiveness, this is where you can get into the details of your block.<\/span><\/li>\n<\/ul>\n

            Components are tinier modules. They can come in various shapes: headings, sliders, dividers, buttons, carousels, and more. They can be added from the same \u201c+\u201d symbol. The difference is that you can drag them from the window of components and drop them anywhere you like on the site on the right!<\/span><\/p>\n

            They can be customized from the left panel as well, only that instead of \u201cLayout\u201d, you\u2019ll see \u201cContent\u201d.<\/span><\/p>\n

            One important suggestion: <\/span>don\u2019t upload videos to WordPress.<\/b> They occupy too much space and will affect your website\u2019s performance.\u00a0<\/span><\/p>\n

            Sorry for the long intro, folks, but the moment we all have the same baseline, the actual creation of a video gallery will be a p-i-e-c-e-o-f-c-a-k-e! Pinky promise!<\/span><\/p>\n

             <\/p>\n

            A. How to create a WordPress video gallery using a portfolio block and video components inside Colibri<\/span><\/h3>\n

            I\u2019ll make it as short as I can.<\/span><\/p>\n

              \n
            1. Select a portfolio block that fits your vision.\"Create<\/span><\/li>\n
            2. Delete the images. Because most of the blocks use images, we\u2019ll replace them with videos.\"delete<\/span><\/li>\n
            3. From the \u201c+\u201d sign head over to components and drag the video one. A sample video will be inserted into the design.<\/span><\/li>\n
            4. Select the sample video.<\/span><\/li>\n
            5. From the panel on the left, choose the video that you want to place there. You can insert Youtube or Vimeo links or self-hosted videos.\"Insert<\/span><\/li>\n
            6. Make the final adjustments: change the title, descriptions, the number of rows or columns. All the customization will happen in the panel on the left. Careful with your selections: a component, a column, the whole block, etc.<\/span><\/li>\n<\/ol>\n

              And you\u2019re done.<\/span><\/p>\n

               <\/p>\n

              B. How to create a WordPress video gallery using a slider in Colibri<\/span><\/h3>\n

              Here are the steps:<\/span><\/p>\n

                \n
              1. Drag and drop the slider component<\/span><\/li>\n
              2. Select your slider and click on \u201cMore background options\u201d from the \u201cContent\u201d option on the left.\"Select<\/span><\/li>\n
              3. Select \u201cVideo\u201d from the 3 options for your slider\u2019s background.\"Sliders<\/span><\/li>\n
              4. Upload your own video or insert a Youtube URL.<\/span><\/li>\n
              5. Add (use the \u201cAdd slide\u201d button) or delete slides (use the \u201cx\u201d sign) from the slider.\"Customize<\/span><\/li>\n
              6. Make other design customizations from the menu on the left: borders, spacing, transitions, sliding controls, typography, colors, etc.\u00a0<\/span><\/li>\n<\/ol>\n

                Et voil\u00e0, you\u2019re done!<\/span><\/p>\n

                Now, there\u2019s one more rock to turn over.<\/span><\/p>\n

                 <\/p>\n

                Creating WordPress video galleries using plugins<\/span><\/h2>\n

                I\u2019m going to keep this short.\u00a0<\/span>I picked three of the most popular video gallery plugins in the WordPress repository.<\/span><\/p>\n

                If you don\u2019t know how to search for plugins and install them, here\u2019s how you do it.<\/span><\/p>\n