{"id":4425,"date":"2017-08-13T07:26:30","date_gmt":"2017-08-13T07:26:30","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=4425"},"modified":"2017-08-13T07:26:30","modified_gmt":"2017-08-13T07:26:30","slug":"image-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/image-design\/","title":{"rendered":"Mastering Image Design Without CSS Using Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4425\" class=\"elementor elementor-4425\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ahjtqfe elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ahjtqfe\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-phskkcb\" data-id=\"phskkcb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ehrebyl elementor-widget elementor-widget-text-editor\" data-id=\"ehrebyl\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When users come to your page, they&#8217;ll have some kind of reaction. Whether it&#8217;s positive or negative, in large part, is determined by what they see. Since vision is the strongest human sense, images are one of the fastest ways to grab a user&#8217;s attention.<\/p><p><b><i>Images speak louder than words<\/i><\/b><\/p><p>Visual communication has the supreme power of directly connecting with a user in a flash: <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"bold\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"6788\">bold<\/a>, graphic, and intentional imagery helps to engage the user.<\/p><p>In this article, we&#8217;ll walk you step-by-step through the process of adding, setting up and customizing images using 2 widgets available in Elementor: <i>Image<\/i> and <i>Image Box<\/i>. Also, in the final section, we&#8217;ll find out how to add a text overlay over the image.<\/p><h2>Layout<\/h2><p>For the purpose of this tutorial we&#8217;ll create a simple layout for a page which contains 5 images:<\/p><ul><li>1 primary image located at the top<\/li><li>3 secondary images with descriptions and links to the site&#8217;s section<\/li><li>1 marketing image with a text overlay<\/li><\/ul><p>The purpose of this page is to tell a story about augmented &amp; virtual reality and prepare viewers for the next steps. The wireframe for our page will look like this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b11dmkv elementor-widget elementor-widget-image\" data-id=\"b11dmkv\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/layout-36-r4q6x14oxsy4ykv3jmbqh0ak3url8ajb5d1eav4tde.png\" title=\"layout-36\" alt=\"layout-36\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4fum0vl elementor-widget elementor-widget-text-editor\" data-id=\"4fum0vl\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><i>The top area of the page is dedicated to the main image. The main image has a role of a powerful communication tool since it supposes to create a context. 3 supporting images add more details for the context created by the main image. Finally, marketing image located at the bottom of the page has call-to-action text.<\/i><\/p><h2>1. Adding a Primary Image Using Image Widget<\/h2><p>Without too much exaggeration, it\u2019s worth saying that the <i>Image<\/i> widget is essential for your design. It&#8217;s hard to imagine a layout that does not include at least one image. That\u2019s why this is a fundamental widget which you will most likely get to use a lot while designing your website.<\/p><p>To add a new image to your layout all you need to do is add a new section and drag the <i>Image <\/i>to from Elementor\u2019s widget panel to the section.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81kspm6 elementor-widget elementor-widget-image\" data-id=\"81kspm6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/add-image-28-r4q70fbpm9levvxlq358h5ghby1b0y0ey5uiou3iig.png\" title=\"add-image-28\" alt=\"add-image-28\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-yrz9ll6 elementor-widget elementor-widget-text-editor\" data-id=\"yrz9ll6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once you drag-n-drop widget on your layout, you\u2019ll see the <i>Content<\/i>, <i>Style <\/i>and <i>Advanced <\/i>tabs. Click the <i>Content<\/i> section and choose the image from a set of available images in WordPress media library. We\u2019ll choose the one that we need for our purposes.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-k5z4ig1 elementor-widget elementor-widget-image\" data-id=\"k5z4ig1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/add-image-to-elementor-4-r4q717ivbao0k6sn5fc1jycb5i6bfv4d21f334xpze.png\" title=\"add-image-to-elementor-4\" alt=\"add-image-to-elementor-4\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-xphs78j elementor-widget elementor-widget-image\" data-id=\"xphs78j\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image-settings-42-r4q6yuxe87g7ja7ivermbjototra73siqepdw8f5je.png\" title=\"image-settings-42\" alt=\"image-settings-42\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e0d63o7 elementor-widget elementor-widget-text-editor\" data-id=\"e0d63o7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>That\u2019s all! Now we are ready for the next steps.<\/p><h2>Style Customizations<\/h2><p>When designing page layout, small details really make a big difference in User Experience. These small details may include image size, opacity, or anything style related. Elementor provides fantastic possibilities for image properties modification \u2014 you\u2019ll have a vast control over every detail of your image and thanks to the WYSIWYG editor, you will be able to immediately see the result of your adjustments.<\/p><p>While we won\u2019t customize our primary image too much, it\u2019s important to go through all important customization options in order to be ready to use them in your next project. Below you\u2019ll see a few popular ways of customizing your images.<\/p><h3>Image Size<\/h3><p>This is one of the basic features that make it possible to change the size of the image. Size scale starts from 1% and 100% (full size image).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ti10sx0 elementor-widget elementor-widget-image\" data-id=\"ti10sx0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image-settings-20-r4q71kolyz612q9j0l0tiv0rgwdgfmklrujvt0e6p6.png\" title=\"image-settings-20\" alt=\"image-settings-20\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5r7re1a elementor-widget elementor-widget-text-editor\" data-id=\"5r7re1a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>If we want the image to only span through part of the column and not all of it., we can play with it&#8217;s display percentage.In our case we want to make our image the most prominent element on the page (the first element users see when they enter the page), that\u2019 why we\u2019ll select 100% for it.<\/p><p>What\u2019s great about <i>Size <\/i>feature in Elementor is that it makes it possible to check how your image looks on the different screens. Today visitors are coming to your site using many different types of devices and it\u2019s important to make sure your images are appropriately sized for displays and across platforms. With just one click you can check how your image looks on a desktop, on a tablet and mobile and correct the size if required!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-zjvhk9k elementor-widget elementor-widget-image\" data-id=\"zjvhk9k\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/mobile-image-size-30-r4q6yt1pujdmw2a96dyd6k5wi20jrpl225eexohxvu.png\" title=\"mobile-image-size-30\" alt=\"mobile-image-size-30\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5k1tco6 elementor-widget elementor-widget-text-editor\" data-id=\"5k1tco6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><i>Making sure an image is in the correct format ratio will go a long way to enhancing usability.<\/i><\/p><h3>Alignment<\/h3><p>Alignment property is available in <i>Content <\/i>tab. This feature is important when you have a few elements and need to create a strong visual hierarchy in order to guide user attention on the screen (such as F-layout or Z-layout). Website\u2019s visitors are more likely to quickly scan the screen than they are to read everything there. Therefore, if a visitor wants to find content or complete a task, they are going to scan until they find where they need to go. You can help them along by designing where they eyes should focus first, second, etc. by changing the alignment of the images.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6omskv5 elementor-widget elementor-widget-image\" data-id=\"6omskv5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/align-image-17-r4q6y4lwwug6i79r53e2dqbx21d07kw1asfsghi67i.png\" title=\"align-image-17\" alt=\"align-image-17\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-lu19jb9 elementor-widget elementor-widget-text-editor\" data-id=\"lu19jb9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Caption<\/h3><p>It worth say it loud: <i>accessibility matters<\/i>! Image accessibility is crucial to making your website usable by the widest range of people possible. That\u2019s why all images that contain important information should have a descriptive caption which conveys the same information as the image. Thanks to the Elementor, you can add a caption to each image that brings value to visitors.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7w5hqb9 elementor-widget elementor-widget-image\" data-id=\"7w5hqb9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/add-caption-22-r4q77zwwo7ykesxnicz1k8o5lopr162knn1bv2vct0.png\" title=\"add-caption-22\" alt=\"add-caption-22\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-j4p1aie elementor-widget elementor-widget-text-editor\" data-id=\"j4p1aie\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Opacity<\/h3><p>Using Elementor you can also customize opacity for your image. This style property is useful when you want to make the image less prominent. In our case, we\u2019ll leave this setting in 1 (100%).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-xf4zojp elementor-widget elementor-widget-image\" data-id=\"xf4zojp\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image-opacity-25-r4q721lpdzt6vpky9sc3rqr25u22a6fru6amfzp424.png\" title=\"image-opacity-25\" alt=\"image-opacity-25\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3zn2324 elementor-widget elementor-widget-text-editor\" data-id=\"3zn2324\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><h3>Hover Animation<\/h3><p>If your image is an interactive element, it&#8217;s important to give your users a visual signifier of clickability. While it\u2019s still possible to give the user a cue by changing a mouse pointer on-hover, we can achieve much better results using animation. Thanks to Elementor, you can create interactive hover effects using different types of animation. We\u2019ll use this feature for our secondary images (in section 2).<\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4q67r63 elementor-widget elementor-widget-text-editor\" data-id=\"4q67r63\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><i>In section Style you\u2019ll have a setting Hover Animation which contains different types of animated effects.<\/i><\/p><h3>Border<\/h3><p>It\u2019s known fact that <a href=\"http:\/\/www.basement.org\/2005\/11\/why_do_we_love_rounded_corners.html\">rounded corners are easier on the eyes<\/a>. Using Elementor\u2019s <i>Border <\/i>feature you can make aesthetically pleasing rounded corners for your images. The feature makes it possible to customize the color of the border, as well as width and radius for it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dme5ivj elementor-widget elementor-widget-image\" data-id=\"dme5ivj\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/border-type-radius-10-r4q75fsq2gggt0ngg95lrvwzdxbs2twvmz3qtynxky.png\" title=\"border-type-radius-10\" alt=\"border-type-radius-10\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-iekdhnw elementor-widget elementor-widget-text-editor\" data-id=\"iekdhnw\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><h3>Margin and Padding<\/h3><p>People often ask \u201cWhat is the difference between padding and margins?\u201d Thus, before we dive into details, it\u2019s important to specify the difference:<\/p><ul><li>Margin moves items away from other items.<\/li><li>Padding moves items inside the element away from the border of the element.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6cb6wr6 elementor-widget elementor-widget-image\" data-id=\"6cb6wr6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"216\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/margin-padding-border-content-18-300x216.gif\" class=\"attachment-medium size-medium wp-image-4512\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b18kxx elementor-widget elementor-widget-text-editor\" data-id=\"8b18kxx\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>Placing elements with the right amount of spacing makes a tremendous difference in UX. There are two most popular ways of using margin and padding for your UI using Elementor:<\/p><ul><li>To create a vertical rhythm. This is especially important when you have a website with a lot of different elements and have to create a solid unifying vertical rhythm to make layout more pleasing to use.<\/li><li>Align elements in a container. We\u2019ll see how this works in practice during the customization of the marketing image (section 3).<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-h93xu1q elementor-widget elementor-widget-image\" data-id=\"h93xu1q\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"279\" height=\"610\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=279,h=610\/blog\/wp-content\/uploads\/2017\/08\/padding-margin-7.png\" class=\"attachment-medium_large size-medium_large wp-image-4518\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=279\/blog\/wp-content\/uploads\/2017\/08\/padding-margin-7.png 279w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=137\/blog\/wp-content\/uploads\/2017\/08\/padding-margin-7-137x300.png 137w\" sizes=\"(max-width: 279px) 100vw, 279px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dsssag5 elementor-widget elementor-widget-text-editor\" data-id=\"dsssag5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Z-Index<\/h3><p>I&#8217;m sure you&#8217;re familiar with 3D coordinate space. We have an x-axis which is typically used to represent the horizontal, a y-axis to represent the vertical, and a z-axis used to represent what happens into and out of the page, or the screen in our case.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-gpgna65 elementor-widget elementor-widget-image\" data-id=\"gpgna65\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/z-index-14-r4q70vayug7ad9ae4s1w5jfbfhujnsruocxrujfv0c.png\" title=\"z-index-14\" alt=\"z-index-14\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca2mpmb elementor-widget elementor-widget-text-editor\" data-id=\"ca2mpmb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><p>We don&#8217;t literally see the z-axis, as the screen is a 2D plane. We see it in the form of perspective and of some elements appearing in front of or behind other elements when they share the same two-dimensional space.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9sofp4z elementor-widget elementor-widget-image\" data-id=\"9sofp4z\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/layers-elementor-6-r4q70vayug7ad9ae4s1w5jfbfhujnsruocxrujfu0s.jpg\" title=\"layers-elementor-6\" alt=\"layers-elementor-6\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-u8l0nlv elementor-widget elementor-widget-text-editor\" data-id=\"u8l0nlv\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Z-index makes it possible to show one widget on the top of other in a form of layers. For example, we can use the image as a background image and place an overlay element (such as a card in the example below) to create a layered layout.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-iz9dq65 elementor-widget elementor-widget-image\" data-id=\"iz9dq65\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/arrange-layers-32-r4q74rcx4rj0f5myeylaz22zxwo8ip7uvm54cro6gm.png\" title=\"arrange-layers-32\" alt=\"arrange-layers-32\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08phq53 elementor-widget elementor-widget-text-editor\" data-id=\"08phq53\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Customize Visibility Options<\/h3><p>Most of us probably familiar with a task of hiding certain elements for mobile devices. When we need to do it we usually use a custom <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"4255\">CSS<\/a> setting. This requires us to dive deep in coding. Using Elementor you can hide an element in just one click (literally!). Thanks to <i><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"Responsive\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"7165\">Responsive<\/a><\/i> settings you can customize visibility settings for your elements based on the device type \u2014 you can show a certain image only on a wide desktop screen (such as desktop) and hide it on mobile where screen estate is limited.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ox24rm elementor-widget elementor-widget-image\" data-id=\"4ox24rm\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/hide-on-mobile-34-r4q6x30dbh0plssd8n4zlzthamibnoqrtmcd9f1xa8.png\" title=\"hide-on-mobile-34\" alt=\"hide-on-mobile-34\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ukkz2cx elementor-widget elementor-widget-text-editor\" data-id=\"ukkz2cx\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>2. Adding Secondary Images Using Image Box Widget<\/h3><p>Now it\u2019s time to add 3 images below the heading image. They will provide additional information about the topic. For this purpose, we\u2019ll use Images Box widget. Using Image Box Widget you can display images on your page along with their titles and descriptions in neat layouts.<\/p><p>First, we\u2019ll add a new section with a 3 column structure.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5nu5bvb elementor-widget elementor-widget-text-editor\" data-id=\"5nu5bvb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, we should drag-n-drop Image Box widget from Elementor\u2019s widget panel to the first column.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-om8eque elementor-widget elementor-widget-image\" data-id=\"om8eque\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image-box-16-r4q72iist0gcoowdizne0mhcurqo4qaxwi1d2z017k.png\" title=\"image-box-16\" alt=\"image-box-16\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2burtff elementor-widget elementor-widget-text-editor\" data-id=\"2burtff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You should have the following layout:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-u4ogjlz elementor-widget elementor-widget-image\" data-id=\"u4ogjlz\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/add-image-box-33-r4q74rcx4rj0f5myeylaz22zxwo8ip7uvm54cro6lm.png\" title=\"add-image-box-33\" alt=\"add-image-box-33\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8pyegoc elementor-widget elementor-widget-text-editor\" data-id=\"8pyegoc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It\u2019s time to customize our image boxes.<\/p><h2>Style Customization<\/h2><p>Since most properties of <i>Image Box<\/i> widget are the same as for <i>Image<\/i> widget, we\u2019ll focus only on the properties that are important for our layout.<\/p><h3>Image, Title &amp; Description, Position<\/h3><p>First, we need to define the most important settings for our Image Box widget \u2014 choose the image and add a title &amp; description. This all can be done in one place \u2014 <i>Content<\/i> area.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3dc30x elementor-widget elementor-widget-text-editor\" data-id=\"f3dc30x\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here is what we\u2019ll have after adding a real data.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-gvtskxy elementor-widget elementor-widget-image\" data-id=\"gvtskxy\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image-box-39-r4q70lwky3uf55o1nnzmglsphn4vitqjb2ex1rtrz2.png\" title=\"image-box-39\" alt=\"image-box-39\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fkn01i0 elementor-widget elementor-widget-text-editor\" data-id=\"fkn01i0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Link To and Hover Effect<\/h3><p>The purpose of our secondary images isn&#8217;t only informative, they also navigation elements. Using <i>Link to<\/i> feature you can define a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/url\/\"   title=\"URL\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"6957\">URL<\/a> which will be used as a target destination when user click\/tap on the image.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4tm2gzy elementor-widget elementor-widget-image\" data-id=\"4tm2gzy\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/align-image-5-r4q70lwky3uf55o1nnzmglsphn4vitqjb2ex1rtuek.png\" title=\"align-image-5\" alt=\"align-image-5\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3x7ttw4 elementor-widget elementor-widget-text-editor\" data-id=\"3x7ttw4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Since each of <i>Image Box<\/i> is an interactive element, we need to add a hover animation effect. Go to the <i>Style<\/i> section and choose the most appropriate one. I recommend choosing <i>Grow<\/i> animation since it\u2019s the most familiar to the users.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5hykcdx elementor-widget elementor-widget-text-editor\" data-id=\"5hykcdx\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><p>Now when the hover on the image, it\u2019ll grow and this way user will understand that it\u2019s an interactive element.<\/p><h3>Spacing<\/h3><p>Properly using whitespace between elements can significantly increase comprehension of information. You can set the space between the image and the contents using \u00a0<i>Image Spacing<\/i>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ix6t3w5 elementor-widget elementor-widget-image\" data-id=\"ix6t3w5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image36-1-r4q6y3o2q0ew6lb4akzft8kggnhmzvsaynsaz7jk2w.png\" title=\"image36\" alt=\"image36\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7jn46gv elementor-widget elementor-widget-text-editor\" data-id=\"7jn46gv\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Image Size<\/h3><p>You can customize <i>Image Size<\/i> property for your images. It goes from 5 all the way to the full size of the image.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9nvvj3o elementor-widget elementor-widget-text-editor\" data-id=\"9nvvj3o\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><p>Elementor is a really flexible tool that makes it possible to select different image size for Desktop, Tablet and Mobile. In the example below the image has a size 70 for Desktop version (left), and 31 for mobile version (right).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-g3rwzo4 elementor-widget elementor-widget-text-editor\" data-id=\"g3rwzo4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><h3>Duplicate Widget<\/h3><p>As soon as you finish a customization of your widget, you can duplicate its properties. This will save you a lot of time. What you need to do is to choose an image and click <i>\u201cDuplicate Widget\u201d<\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-wxoei9e elementor-widget elementor-widget-image\" data-id=\"wxoei9e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"394\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=394,h=432\/blog\/wp-content\/uploads\/2017\/08\/image39-1.png\" class=\"attachment-medium_large size-medium_large wp-image-32039\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=394\/blog\/wp-content\/uploads\/2017\/08\/image39-1.png 394w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=274\/blog\/wp-content\/uploads\/2017\/08\/image39-1-274x300.png 274w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-j253kuo elementor-widget elementor-widget-text-editor\" data-id=\"j253kuo\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><p>Now all you need to do is to select an appropriate image and text copy for each box.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-yqjvy77 elementor-widget elementor-widget-text-editor\" data-id=\"yqjvy77\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>3. Adding Marketing Image With Text Overlay<\/h2><p>Finally, it\u2019s time to add our marketing image with promotional information. We\u2019ll add a new section down below the section with our image boxes.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6xcqjqf elementor-widget elementor-widget-image\" data-id=\"6xcqjqf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image8-1-r4q73y7x8wf4f8ta53zvbrfpiynuw306flx2h6vdny.png\" title=\"image8\" alt=\"image8\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ty9v9h8 elementor-widget elementor-widget-text-editor\" data-id=\"ty9v9h8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once the section will be added we need to change the background image. You can do it in section <i>Style<\/i> \u2192 <i>Background<\/i> \u2192 <i>Classic<\/i>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-vx2dak2 elementor-widget elementor-widget-text-editor\" data-id=\"vx2dak2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>We\u2019ll choose an image from Media folder. After you choose an image you might be wondering that nothing happened. But don\u2019t worry, that\u2019s OK since we don\u2019t have any elements in this section (except the selected image for a background). Once we add an element, you\u2019ll see the image.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8vpkmtx elementor-widget elementor-widget-text-editor\" data-id=\"8vpkmtx\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><h2>Adding a Text Overlay<\/h2><p>Now it\u2019s time to add your marketing copy for the section. For that we\u2019ll go to the widget panel and select the <i>Heading<\/i> widget.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-s564uf6 elementor-widget elementor-widget-text-editor\" data-id=\"s564uf6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><p>Simply drag-n-drop it to the section and you\u2019ll see that the image that was selected in the previous step finally becomes visible.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-wlygw2e elementor-widget elementor-widget-image\" data-id=\"wlygw2e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image15-r4q6y3o2q0ew6lb4akzft8kggnhmzvsaynsaz7jkgi.jpg\" title=\"image15\" alt=\"image15\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-yts7g5d elementor-widget elementor-widget-text-editor\" data-id=\"yts7g5d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>Let\u2019s change a default text copy to \u201cClick here to learn about our services.\u201d<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dp2pelm elementor-widget elementor-widget-text-editor\" data-id=\"dp2pelm\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><h2>Align Text<\/h2><p>It\u2019s time to align our text copy. For this purpose, we\u2019ll use Padding. We\u2019ll add 150px to the top and to the bottom of the image. The result of our work can be seen in the screenshot below. We\u2019ll also set content position to column to Center.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-w757gkg elementor-widget elementor-widget-image\" data-id=\"w757gkg\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image42-r4q778nl60x92418xj6v1xjsdig3ty2cvw48y1zrri.png\" title=\"image42\" alt=\"image42\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6wkwvwz elementor-widget elementor-widget-text-editor\" data-id=\"6wkwvwz\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><p>While this text overlay might look good from the first glance, it has one serious problem \u2014 the white text copy \u201cClick here to learn about our services\u201d is barely readable on mobile.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-pjgfzvh elementor-widget elementor-widget-text-editor\" data-id=\"pjgfzvh\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><h2>Add color overlay<\/h2><p>If the original image isn\u2019t dark enough (like the one we have), you can overlay the whole thing with translucent black. For that you should go to the text section, select Background \u2192 Normal and choose the color back with 50% or more opacity. Here is what we have now:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dm69cc6 elementor-widget elementor-widget-text-editor\" data-id=\"dm69cc6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p><p>Alternatively you can add an overlay over the image. For that you need to select the background image, and add a background using <i>Background Overlay<\/i> property in <i>Style <\/i>section.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-nv9pnb0 elementor-widget elementor-widget-text-editor\" data-id=\"nv9pnb0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>In Conclusion: Preview The Results Of Your Work<\/h2><p>So you successfully added all images and created a visual hierarchy according to the wireframe. Now it\u2019s time to test how your layout looks in different screen sizes. You can use <i>Page Preview<\/i> feature for that.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d2l2m5 elementor-widget elementor-widget-image\" data-id=\"2d2l2m5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image24-2-r4q6y3o2q0ew6lb4akzft8kggnhmzvsaynsaz7jkcw.png\" title=\"image24\" alt=\"image24\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-oki4lhk elementor-widget elementor-widget-text-editor\" data-id=\"oki4lhk\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p><span style=\"font-weight: 400\"><br \/> <\/span><i><span style=\"font-weight: 400\">Page preview feature<\/span><\/i><\/p><p><span style=\"font-weight: 400\">Make sure to test your layout to fit the different screens. Users should be able to see primary content including images without zooming or scrolling horizontally. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>When users come to your page, they\u2019ll have some kind of reaction. Whether it\u2019s positive or negative, in large part, is determined by what they see. Since vision is the strongest human sense, images are one of the fastest ways to grab a user\u2019s attention. Images speak louder than words Visual communication has the supreme [&hellip;]<\/p>\n","protected":false},"author":8813,"featured_media":4550,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79],"marketing_persona":[],"marketing_intent":[],"class_list":["post-4425","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mastering Image Design Without CSS | Blog | Elementor.com<\/title>\n<meta name=\"description\" content=\"In this article, we\u2019ll walk you step-by-step through the process of adding, setting up and customizing images. No need for CSS, just using Elementor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/image-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering Image Design Without CSS | Blog | Elementor.com\" \/>\n<meta property=\"og:description\" content=\"In this article, we\u2019ll walk you step-by-step through the process of adding, setting up and customizing images. No need for CSS, just using Elementor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/image-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-13T07:26:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2017\/08\/image-guide-post.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nick Babich\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Babich\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/image-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/image-design\/\"},\"author\":{\"name\":\"Nick Babich\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda\"},\"headline\":\"Mastering Image Design Without CSS Using Elementor\",\"datePublished\":\"2017-08-13T07:26:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/image-design\/\"},\"wordCount\":2245,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/image-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/image-guide-post.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/image-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/image-design\/\",\"url\":\"https:\/\/elementor.com\/blog\/image-design\/\",\"name\":\"Mastering Image Design Without CSS | Blog | Elementor.com\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/image-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/image-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/image-guide-post.png\",\"datePublished\":\"2017-08-13T07:26:30+00:00\",\"description\":\"In this article, we\u2019ll walk you step-by-step through the process of adding, setting up and customizing images. No need for CSS, just using Elementor.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/image-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/image-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/image-design\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/image-guide-post.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/image-guide-post.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/image-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mastering Image Design Without CSS Using Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda\",\"name\":\"Nick Babich\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g\",\"caption\":\"Nick Babich\"},\"description\":\"Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.\",\"sameAs\":[\"http:\/\/babich.biz\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/nickb\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mastering Image Design Without CSS | Blog | Elementor.com","description":"In this article, we\u2019ll walk you step-by-step through the process of adding, setting up and customizing images. No need for CSS, just using Elementor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/image-design\/","og_locale":"en_US","og_type":"article","og_title":"Mastering Image Design Without CSS | Blog | Elementor.com","og_description":"In this article, we\u2019ll walk you step-by-step through the process of adding, setting up and customizing images. No need for CSS, just using Elementor.","og_url":"https:\/\/elementor.com\/blog\/image-design\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2017-08-13T07:26:30+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2017\/08\/image-guide-post.png","type":"image\/png"}],"author":"Nick Babich","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Nick Babich"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/image-design\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/image-design\/"},"author":{"name":"Nick Babich","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda"},"headline":"Mastering Image Design Without CSS Using Elementor","datePublished":"2017-08-13T07:26:30+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/image-design\/"},"wordCount":2245,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/image-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/image-guide-post.png","keywords":["Build"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/image-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/image-design\/","url":"https:\/\/elementor.com\/blog\/image-design\/","name":"Mastering Image Design Without CSS | Blog | Elementor.com","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/image-design\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/image-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/image-guide-post.png","datePublished":"2017-08-13T07:26:30+00:00","description":"In this article, we\u2019ll walk you step-by-step through the process of adding, setting up and customizing images. No need for CSS, just using Elementor.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/image-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/image-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/image-design\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/image-guide-post.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/image-guide-post.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/image-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"Mastering Image Design Without CSS Using Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda","name":"Nick Babich","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g","caption":"Nick Babich"},"description":"Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.","sameAs":["http:\/\/babich.biz"],"url":"https:\/\/elementor.com\/blog\/author\/nickb\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/4425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/8813"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=4425"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/4425\/revisions"}],"predecessor-version":[{"id":93827,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/4425\/revisions\/93827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/4550"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=4425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=4425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=4425"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=4425"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=4425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}