Great for creatively displaying blog posts, images, and more. In this tutorial you will learn how to take different Divi modules and form them into a carousel that scrolls from side to side. How to add, configure and customize the Divi image module. We have some great tutorials about how to use Divi’s row and section elements. Select a custom color from the color picker to apply it to your border. I’ve also the margin to 0 to keep everything tidy. After doing some searching I've only found ways to use a hyperlink ref in a text box or, I have the option to use a plug-in, which I'm trying to avoid if I … It can be a link inside a text module, code module or any module with link (like blurb, image etc.) Reply. If you are starting a new page, don’t forget to add a row to your page first. Add another Image Module in the second 1/4 column (or middle column) and update the Image Settings as follows: That takes care of the first section. Here's how to make the blog module's featured images non-clickable. This plugin is 100% compatible with the Divi Visual builder, and thus creating your image hotspots is fun and easy. Place a valid image url here, or choose/upload an image via the WordPress Media Library. From there you should understand how you can create your own carousel with almost any of the standard modules. To achieve this, place an image module in your Divi layout and be sure to add a link. Image modules can be placed in any column that you create, and their size will be adjusted to fit. Enter optional CSS classes to be used for this module. Popups for Divi Create Popups in the Visual Builder! Open the setting section as shown in the below image. If you are have having issues locating it then you can use the search feature in the module list. This is the tab you will use to change how your module looks. This will change the label of the module in the builder for easy identification. Please Note: 1. in the code .et_pb_slide_0 indicates the first slide…. New modules can only be added inside of Rows. Now for the next service section we can duplicate the section we just created for the first service section. Notice though, that the default behaviour is for only the image and header to be clickable. Well, a few folks have asked how to make the whole text module clickable, so in this tutorial I’m going to show you how to do just that, in other words, hyperlink the whole text module. Before I shared how to make your wordpress site secured.If you are using Divi Theme and trying to make the default Divi theme slider image to be clickable then this post is for you.. I need to right click the image and hit save as. Elegant Themes & Divi Special 20% Off Discount Deal, 2. Locate the image module within the list of modules and click it to add it to your page. Clicking on a small image to see a larger version can be important to website visitors. We offer a 30 Day Money Back Guarantee, so joining is Risk-Free! Four linkable image hover effects which show descriptions for use in your Divi projects. Learn High Income Skills! Unlimited Websites. I’ll show you how you can make them from the text module, button module and I’ll provide you the HTML code. Avi on May 17, 2018 at 16:49 . The download attribute also allows you to designate a filename other than the original file name. Then add a Text Module to the right 1/2 column of your row. Enter a header and description of the service. Last Updated on March 19, 2018 by Mister Tuts. Creating Animated Image Hover Effects with Captions in Divi - Duration: 14:31. Harness the power of Divi with any WordPress theme. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Divi’s Image Module. Now navigate to the Dashboard >> Divi Theme Options >> Add code to the < head > of your blog>> and here paste the below code in this field. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. The Divi Menu and the Fullwidth Menu modules started gaining more popularity among Divi users since the release of the Divi Theme Builder which allows creating headers using the Divi Builder. Divi Image … After doing some searching I've only found ways to use a hyperlink ref in a text box or, I have the option to use a plug-in, which I'm trying to avoid if I … However, you can choose to force the image to extend the full width of the parent column by enabling this option. Hello, my fellow Web Benders of Divi Nation!I am trying to make an image clickable on mobile that will make a call. Reply. This option only affects images when they are the last module in a column. This plugin use Divi’s Native Lightbox also for individual self linked images. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Follow the Simple Steps for Making the Divi Section Clickable. * Affiliate Disclaimer: Some of the links in this site are affiliate links. Continue Reading…, UPDATED TUTORIAL ON SHOWING BLOG POSTS IN A CAROUSEL, In this new tutorial the writer shows you how to turn the built-in Divi Blog Module into an advanced draggable/swipe carousel with Divi’s built-in elements and the free slick js library. Divi Blurb modules are incredibly useful because they combine an image (or icon), a title (the header) and some text (the body) into a single object. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. So open up the gallery module, set the layout to grid, set the number of images you want to show (I’m using 8) and make sure show title and caption is set to yes.Then click on update gallery.. Zooming in on an image with clickable text is so easy with Divi! Built to get you more shares and more followers. Often times small images are more pleasing to the eye on mobile devices when they are centered. When enabled, the distance between the bottom of the image and the following section is removed, allowing the image to border the top of the next section on the page. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers. If enabled, an overlay color and icon will be displayed when a visitors hovers over the image. The Divi Builder Image Module - Duration: 6:50. This is a great feature for portfolios. So, a while back I showed you how to Create An Image That Scrolls Up When You Hover Over It.This is basically done by scrolling the background image of a text module. 6:50. In fact, I can imagine the graphic designer's website (or any other artwork) use this system to display a portfolio and refer the user to each project page. It is very easy to make these links on your Divi website. If you sign up through them we will earn a small commission, at no extra cost to you. Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Once the section is duplicated, change the column structure of the row to a 1/2 1/4 1/4 column layout (the opposite of the one before). You can see the result at my website (: So you can follow the same dimensions as for column layouts for instance if you’re using a 2 column layout in 4 x 3 ratio you can use an image with dimensions 510px x 384px. Images will always appeared left justified within their columns and will span the full width of your column. This option affects the color of your border. By default, the Divi Blog Module makes the featured image, title, and read more link clickable. Elegant Themes 4,364 views. The plugin is free and is currently in beta. * Divi is a registered trademark of Elegant Themes, Inc. * Divi Tutorials Directory is not affiliated with nor endorsed by Elegant Themes. 6. Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it. You can add custom margin values to any of the module’s four sides. This means that the image will be displayed at its natural width unless the width of the image exceeds the width of the parent column, in which case the image will be limited to 100% of the width of the column. Simply add a new spot on the image using the repeater field and add your tooltip content and style everything right there visually, thanks to the divi visual builder. Divi’s new sticky position options open the door for many new and exciting design possibilities. Reply. Thank you so much!! Plugin descriptions include an image from the settings screen and GIF’s of the effects. Click here to redeem, List of Best Divi Tutorials Published by Elegant Themes, Learn How to Match Elegant Themes Site Design, ET Layout Pack Setup Guides and Use Cases. You can […] In this tutorial, we are going to show you how to combine Divi’s sticky position options with smooth scrolling anchor links to create an accordion-like way to index and navigate your page. Preview 110+ Premade Websites & 880+ Premade Layouts. Leaving this field blank will simply leave your image as a static element. Here i have shared the technique to make the divi full width slider image to be clickable.. Use the visual builder to add a standard section with a 1/4 1/4 1/2 layout. This option lets you control which devices your module appears on. The new module combines features from three Divi modules (image, text, and button modules) and then adds new features to add an overlay and hover effects to images. Required fields are marked *. Recipe #7 is again something I have seen asked in the Facebook groups quite frequently lately. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons. In this episode of Divi Nation I show you step by step how to make images on your full width sliders clickable. Method . These options are separated into three main groups: Content, Design and Advanced. Since the image modules are duplicates, we need to upload the new images for this particular service section. Since adding an image to a page is a pretty simple and straightforward process, I’m going to add a little custom styling to position my images so that they overlap, creating a stacking effect. Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. Free Divi Black Friday Layout Collection – 2020, Use Cases of Free Divi Bike Repair Layout Pack, Use Cases of Free Divi Pizzeria Layout Pack, Use Cases of Free Divi Astrologist Layout Pack, Use Cases of Free Divi Realtor Layout Pack, 1. Make Divi Slider Module Image into a Clickable Link. Before you can add a image module to your page, you will first need to jump into the Divi Builder. Enabling this option will place a border around your module. No need to use third party extensions for that! The ultimate email opt-in plugin for WordPress. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. By default, clicking on the featured images will take you to the corresponding post. I am sorry it is not possible to make the images clickable and make each one point to a specific link. I have tested this code with Divi theme, WooCommerce 3.3.5 and a WordPress-friendly hosting on PHP 7.0.27. Michiel on July 31, 2017 at 15:59 . Make sure to drag the two image modules to fill each 1/4 column (now on the right). Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules.