{"id":210720,"date":"2020-04-26T03:58:34","date_gmt":"2020-04-26T10:58:34","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=210720"},"modified":"2020-04-26T03:58:34","modified_gmt":"2020-04-26T10:58:34","slug":"create-album-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/create-album-beaver-builder\/","title":{"rendered":"How to Create an Album with Beaver Builder?"},"content":{"rendered":"<p>If you build photography websites or if you have a collection of images, you can display them in an elegant manner with the <a href=\"https:\/\/wpbeaveraddons.com\/demo\/album\/\" target=\"_blank\" rel=\"noopener noreferrer\">Album module for Beaver Builder<\/a>. The Album module for <a href=\"https:\/\/wpbeaveraddons.com\/go\/beaverbuilder\/\" target=\"_blank\" rel=\"noopener noreferrer\">Beaver Builder<\/a> lets you create a group of images and display a cover image for the album. The cover image has a clickable title and button which opens up in a Lightbox gallery to display all the images.<\/p>\n<h2>What is Beaver Builder Album Module?<\/h2>\n<p><a href=\"https:\/\/wpbeaveraddons.com\/demo\/album\/\" target=\"_blank\" rel=\"noopener noreferrer\">Beaver Builder Album Module<\/a> is a creative way of setting up Photo Albums on your WordPress website. While we mostly see the use of Photo gallery, carousels, and sliders on websites, the Album module provides a better way of organizing and displaying the images. Adding a large number of images to a Photo Gallery or Slider can impact the loading time of the page but with Album Module you can do the same without any performance concerns.<\/p>\n<h2>How does Album Module Work?<\/h2>\n<p>The best real-life example of the Album Module is the Album functionality on your mobile phone. It allows you to group the images into a collection\/album, set a cover image and name. When you tap the cover image or name, it displays all the images in the collection\/album.<\/p>\n<p>Album Module uses the same approach. You can group all the images and set a cover image, and name. When the user clicks the Cover Image\/Name, it displays the collection in a Lightbox Gallery. <strong><a href=\"https:\/\/wpbeaveraddons.com\/demo\/album\/\" target=\"_blank\" rel=\"noopener noreferrer\">Click here for Demo<\/a>.<\/strong><\/p>\n<p>You can use this module to create multiple albums on a page. For e.g. a wedding website can have galleries for pre-wedding events, wedding day, portraits, etc. A photographer&#8217;s website can have albums for various categories like Portraits, Nature, Wildlife, etc. A business website can use the Album module to create albums for Events, Work Culture, Outings, etc.<\/p>\n<p><strong>Also Read:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/wpbeaveraddons.com\/portfolio-section-gallery-beaver-builder\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Create a Filterable Portfolio Gallery with Beaver Builder<\/a><\/li>\n<\/ul>\n<p>Here in this tutorial, we will see how you can create an album on your WordPress website built with Beaver Builder.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-211644\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/AwesomeScreenshot-wpbeaveraddons-demo-album-2019-08-05_2_05.jpg\" alt=\"\" width=\"585\" height=\"733\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/AwesomeScreenshot-wpbeaveraddons-demo-album-2019-08-05_2_05.jpg 585w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/AwesomeScreenshot-wpbeaveraddons-demo-album-2019-08-05_2_05-239x300.jpg 239w\" sizes=\"(max-width: 585px) 100vw, 585px\" \/><\/p>\n<p>For this tutorial, you will require the <a href=\"https:\/\/wpbeaveraddons.com\/demo\/album\/\" target=\"_blank\" rel=\"noopener noreferrer\">album module<\/a> of the PowerPack addon for Beaver Builder. This module will do the job of creating an album easy as a cakewalk.<\/p>\n<h2>Creating an Album with Beaver Builder<\/h2>\n<p>Firstly, you need to open the page where you want to add the album. Now, open the page in Beaver Builder.<\/p>\n<h3>Adding the Album module<\/h3>\n<p>First, we need to add the album. For this, drag and drop the Album module by PowerPack on the page.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-211650\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2-16.jpg\" alt=\"beaver builder album module\" width=\"1572\" height=\"685\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2-16.jpg 1572w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2-16-300x131.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2-16-768x335.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2-16-1024x446.jpg 1024w\" sizes=\"(max-width: 1572px) 100vw, 1572px\" \/><\/p>\n<h3>Adding the Images to the Album<\/h3>\n<p>Now to add the images to the album, go to the general tab and click on the &#8220;Edit Gallery&#8221; link and select the photos you want to display in your album. For the trigger, you can choose either Album cover or a button as the trigger. You can further customize the trigger if you want as well.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-211653\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/3-15.jpg\" alt=\"\" width=\"1553\" height=\"705\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/3-15.jpg 1553w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/3-15-300x136.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/3-15-768x349.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/3-15-1024x465.jpg 1024w\" sizes=\"(max-width: 1553px) 100vw, 1553px\" \/><\/p>\n<p>Here we are choosing Album cover as the trigger. Let&#8217;s see how you can customize it further.<\/p>\n<h3>Customizing the Trigger<\/h3>\n<p>Go to the Album cover tab and choose the cover image as custom. You can let the cover as the first image of the album as well if it works for you.<\/p>\n<p>Now change the width and height of the image as required. You can even go further and customize the cover content of the Album cover and can enable\/disable and customize the button accordingly.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-211801\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/4-15.jpg\" alt=\"\" width=\"544\" height=\"544\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/4-15.jpg 544w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/4-15-150x150.jpg 150w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/4-15-300x300.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/4-15-128x128.jpg 128w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/4-15-256x256.jpg 256w\" sizes=\"(max-width: 544px) 100vw, 544px\" \/><\/p>\n<h3>Customizing lightbox from the Settings tab<\/h3>\n<p>Now if you want to make further changes in the lightbox and how it looks, you can do it from the Settings tab. You can set the lightbox caption as the caption or the title. You can enable\/disable loops, arrows, slide counter, keyboard navigation, toolbar, thoub autostart, etc. Furthermore, you can even change the Open\/Close Animation and the transition effect for the Lightbox.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-211802\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/5-13.jpg\" alt=\"\" width=\"548\" height=\"810\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/5-13.jpg 548w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/5-13-203x300.jpg 203w\" sizes=\"(max-width: 548px) 100vw, 548px\" \/><\/p>\n<h3>Styling and Design Changes<\/h3>\n<p>You can change every element of the website in terms of design and visual appeal from the style tab. You can change the border, overlay, scaling, margins, margin radius, etc. Moreover, you can even change how the album cover effects on hover, content, content on hover, and the button styling.<\/p>\n<p>All these changes can be made from the style tab.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-211805\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/6-10.jpg\" alt=\"\" width=\"544\" height=\"814\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/6-10.jpg 544w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/6-10-200x300.jpg 200w\" sizes=\"(max-width: 544px) 100vw, 544px\" \/><\/p>\n<h3>Typography Changes<\/h3>\n<p>When it comes to typography, you can make changes to all the parts of the album where the text appears. You can alter the title, sub-title, button and can change their font, family, size, text-shadow, spacing easily from the style tab.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-211806\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/7-11.jpg\" alt=\"\" width=\"548\" height=\"814\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/7-11.jpg 548w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/7-11-202x300.jpg 202w\" sizes=\"(max-width: 548px) 100vw, 548px\" \/><\/p>\n<h2>Summing It Up!<\/h2>\n<p>With the design options and customizations available with the album module, you can create amazing albums on your website which will take less space and look better. Go ahead and <a href=\"https:\/\/wpbeaveraddons.com\/demo\/album\/\" target=\"_blank\" rel=\"noopener noreferrer\">check out various album designs<\/a> that you can make with the album module of PowerPack.<\/p>\n<p>Not using PowerPack <a href=\"https:\/\/wpbeaveraddons.com\" target=\"_blank\" rel=\"noopener noreferrer\">Beaver Builder addon<\/a>? You need to <a href=\"https:\/\/wpbeaveraddons.com\/pricing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Get it now!<\/a> PowerPack offers 55+ Creative Beaver Builder modules, extensions, and much more functionality. It&#8217;s the complete toolkit for your Beaver Builder websites.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you build photography websites or if you have a collection of images, you can display them in an elegant manner with the Album module for Beaver Builder. The Album module for Beaver Builder lets you create a group of images and display a cover image for the album. The cover image has a clickable&hellip;<\/p>\n","protected":false},"author":1811,"featured_media":283006,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-210720","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/210720"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1811"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=210720"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/210720\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/283006"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=210720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=210720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=210720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}