Each of these can be seen as a layer, on which you can set a background image. Hi Katherine, great question! My idea was showing a different Design on mobiles without using media Queries. After posting my first comment, I went back to my site and noticed that I had not seen the style tab before. Notice that for the template I just mentioned, we used the same overlay in the bottom section as well: 4. Next, you can manually set the height in pixels, getting an exact height to be displayed across devices. Elementor is best plagin of wordpress! The guidance you have provided has been so helpful but I am really struggling with having only a single background for the multiple pages of my wordpress website. Basic Elementor plugin Tricks & Tips for beginners will help you get more layout & content control. It appears the background image is applied to the section class = “elementor-element…..” which has a calculated width of the screen, 1900 px. Any suggestions? Thank you for all your hard work!!! You could try adding button as CSS class but I’m not sure if that would work.. Hey. You might also want to take a look at our free AccessAlly Elementor templates to help you get your site up and running faster. I could find nobody else talking about this on elementor which seemed weird; it seems like a huge deal when it comes to page load time. Now if only Elementor allowed us to choose more than one background image at a time, to create a background image slideshow effect…. Do you have any plans to integrate soon? This is not a simple task and requires some planning in advance. One of the good things about Elementor is that it allows the adjustment of Margin and Padding. Even if you’re not a designer… In fact – especially if you are not a designer, you need structure to make sure your efforts don’t go to waste. Even after many years as a graphic designer and now a web designer, I found this post very useful and a great source for future reference. You can set the height of the background image by going to Section > Layout. One of the features introduced in Elementor 1.8 is Inline Editing. 2. I now have 4 different backgrounds on 4 different pages of my website. SOOOO this actually lets you control which image is loaded based on the screen size (note: it ONLY loads the image that is set to display, so no undue increase in page size – in fact it could help make your sizes smaller). This site made by the community for the community. Animations should be used to provide users with a better understanding of the nature of objects and to contribute to the image of the project. Boxed websites – These are websites wherein both the content and the background are boxed inside a confined width. You can use one of the colors of our site’s main color palette, this way create a sort of filter to the entire section. I’ve built a custom shortcode in wordpress and would like to use it with the elementor shortcode widget. I tried to enter the shortcode … Thanks, Johan Fri, 6 Oct 2017 22:18:31. How It Works: SRCSET doesn’t play all that nicely with backgrounds (read: it doesn’t play at all without some JS, which I didn’t want to add), so I did a little playing with media queries on the Elementor row element I wanted to control the background for. When you are starting to work on recreating a part of the wireframe in Elementor, you need to first decide if you will place the background image of the wireframe in the section, column or widget level. I add it through Elementor as background color in the sections. This might mean leaving some white space on the left and right of the section or getting the image to repeat. To display the column background image, you need to add a widget to the column. Or is there something more straightforward? You can set the position of the image, so the image gets a focus on any one of 9 locations: Top left, top center, top right, center left, center center, center right, bottom left, bottom center and bottom right. Please, use this for detailed information. After uploading the image to Elementor, you go to Section > Style > Background Overlay. It’s really tedious to fix it by hand after having an otherwise awesome, time saving experience laying things out in Elementor . Choose an image wherein the focal point just isn’t very important. But when I made my site live on Windows Server 2012 and tried to update section backgrounds, background is not updating. Because there is a clear focal point in this image, it will most likely not be consistently viewed across devices. When I test on various mobile devices none of the background images render, even with the built in starter templates. We would be gratiful if you add one or two templates with a slider at the free vrsion. That way mobile devices aren’t downloading massive images. The businessman will stay at a relative distance to the form in both desktop and tablet views. For our build, we were using the Elementor 2.5.14 with Elementor Pro 2.5.5 plugins. You also don’t want an image that is too small, making for a pixelated background. Step 1: The first step involves modifying the wp-config.php file. Don’t think you’re any different. Next, you upload a 1x1px transparent png – this is the “holding” image that will never display, but which will help cut down on the amount of code needed by letting you control default position, overlay, transparency etc within Elementor. Try to deactivate all plugins except Elementor and switch to theme TwentySixteen, also update Elementor. Full width background – The other type of website layout, which has become very trendy in the last few years, includes a grid with full width images, with boxed content. You can get the Shortcode of Saved Templates without Elementor Pro because Piotnet Addons Free has this feature. Actually, there is a much more elaborate process for getting your website background images to fit your website perfectly. If this is only available to Pro users, or if Elementor has changed these options since this post was published, I’d appreciate it if the post could be updated with that information. It doesn’t work on mobile. This way, if the focal point gets cut on mobile, the background image can still portray the experience and the atmosphere you want the user to receive. The default positioning looked good on desktop and but the focus points were too far right on mobile. Whenever I add new image to server, it's not displaying in section background. Follow me on. An excellent article about effective BG images. In case the section content height exceeds the section size, Elementor will show the entire content, and the section will get an increase in height. If you choose to use an overlay for background images, my recommendation is to try to stay as consistent as possible. But I am also using the page builder Elementor. Hi Ben, thanks for the tut, but by now it’s 3 years old and with updates to Elementor there are quite a few differences, and I hope that you can help me. If you don’t want to add a visible widget, you can simply add a Spacer widget. It doesn't seem to be working as expected when I use Elementor's dynamic content feature. Center/center was the trick! Is there CSS to hide the background image? However, you could always add a background overlay that matches the color behind the image, which should give it the appearance of being slightly transparent. This is a question we get asked about a lot. Not only disappointed but also genuinely curious about the reason behind this limitation. In most cases, you will upload an image background that is larger than the actual background area. Therefore it cannot be supported for now. If you want to work straight in the Elementor editor, you can do a rough estimate of the crop, and use a free tool like Pixlr to crop the image. . But when I try old uploaded images, all those images display. From here, you can set a basic color overlay, and play with the opacity to increase or decrease its effect. The shortcode will be different for each post, so I want to place it in a custom field. This is great for mobile responsiveness, because it makes sure the image always takes up the entire screen height. @Peter Nelis This is so useful, thanks! This is the method we’ve used in some of our templates, like in this Real estate template page. PLEASE! 3. The large size is useful in terms of resolution, but trust me – you don’t want to load this full size of images to your website. Preferably you will also do some adjustment of colors, balance, lighting and contrasts. Or, is there another way to do it? It is great, centred, fixed, and looks great on desktop and tablet. Your email address will not be published. One of the factors that can make or break a website design has to do with how you setup your website background images. The topic ‘Custom shortcode in WordPress Elementor not working properly in editor mode’ is closed to new replies. Elementor Tabs Widget with Templates Shortodes! Its located inside your WordPress directory which you can access through your cPanel File Manager or FTP server. Preview your page to ensure that the shortcode added is where you’d like it and displays correctly. Using Elementor’s image overlay, you can add color and gradient image overlays from inside the editor, resulting in some really nice effects. Here’s a common situation that occurs when using Elementor. Write down all the exact sizes of the images on your website. In one column we placed the contact form and in the other we placed the image of the businessman. 3. One of the elements that I love in Elementor is the way a background image (e.g., a hero section) can be aligned in multiple ways. I can take a 640×480 image and set the DPI to 72, 300, or 4235 and it will look exactly the same online in a browser. Everything works fine but after I saved the elementor page and trying to edit it again the shortcode is fired once at the beginning of the content area and another time in the container like I placed it before. We changed some of the controls. Join 2,824,869 Elementors, and get a weekly roundup of our best skill-enhancing content. The shortcode is perfectly working an all normal pages and posts. Amazing post! I’m a writer, not a techy, so though I’ve built WP websites before I’m finding Elementor, while powerful, doesn’t explain the simple things in its documentation. I might be wrong and missed an obvious setting, but I’ve spent a couple of hours on this already. When I work on a WordPress site I face a problem called I am not able to add a background image on blank elementor section on Column.When I add an image it’s not displayed to me on my website. What grid system do your designers use in Sketch to wireframe your templates? Next, add this CSS to your page/stylesheet (adjust the min max break points however you like): @media screen and (max-width: 767px) {.elementor-element.elementor-element-******* {background-image: url(http://***/767.jpg) !important;}} @media screen and (max-width: 1024px) and (min-width: 768px) {.elementor-element.elementor-element-******* {background-image: url(http://***/1024.jpg) !important;}} @media screen and (max-width: 1280px) and (min-width: 1025px) {.elementor-element.elementor-element-******* {background-image: url(http://***/1280.jpg) !important;}} @media screen and (max-width: 1440px) and (min-width: 1281px){.elementor-element.elementor-element-******* {background-image: url(http://***/1440.jpg) !important;}} @media screen and (max-width: 1920px) and (min-width: 1441px){.elementor-element.elementor-element-******* {background-image: url(http://***/1920.jpg) !important;}} @media screen and (min-width: 1921px) {.elementor-element.elementor-element-******* {background-image: url(http://***/2650.jpg) !important;}}. The publish button can pose a problem where it does not work it should be, and like most of the issues, the cause of this problem is a limited amount of memory. Am I missing something obvious because I have been editing my site for hours making little or no progress because I need a different background on each of my pages. Ben, there MUST be a way to enable fixed background images (or even better: parallax) for mobile.