Nicepage 6.20: October 21, 2024 - Multi-Layer Backgrounds

<!DOCTYPE html> <html lang="en"> <head> <title>Nicepage 6.20: October 21, 2024 - Multi-Layer Backgrounds - Nicepage Documentation</title> <link rel="shortcut icon" href="//csite.nicepage.com/favicon.ico" type="image/x-icon"> <meta charset="utf-8" /> <meta name="Keywords" content=" "> <meta name="Description" content="We have implemented the Multi-Layer Background, which you can use on Blocks, Boxes, Grid Cells, and Grid Repeater Items. This option allows you to add creative effects, including masking and shading."> <meta property="og:type" content="article"> <meta property="og:url" content="https://nicepage.com/doc/539264/multi-layer-backgrounds"> <meta property="og:title" content="Nicepage 6.20: October 21, 2024 - Multi-Layer Backgrounds - Nicepage Documentation"> <meta property="og:image" content="https://resources.nicepage.com/691/140691/add-background-layer.png"> <meta property="og:description" content="We have implemented the Multi-Layer Background, which you can use on Blocks, Boxes, Grid Cells, and Grid Repeater Items. This option allows you to add creative effects, including masking and shading."> <meta property="og:site_name" content="Nicepage.com" /> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width"> <script src="//capp.nicepage.com/1662e8971b75e227453abf2b0c0bb260dcad244d/main-libs.js" ></script> <link href="//capp.nicepage.com/1662e8971b75e227453abf2b0c0bb260dcad244d/main-libs.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:200,300,400,700,800,900&subset=latin" rel="preload" as="font" /> <script> window.isAuthenticated = 0; window.useExternalGtmCode = 0; window.clientUserId = 0; window.clientUserName = ''; window.userCountryCode = ''; window.logPageEvent = 1; window.userHasAdsParams = 0; window.utmSourceFromReferrer = 0; window.currentLang = ''; window.baseUrl = 'html-templates'; window.currentUrl = ''; window.np_userId = ''; window.isAmplitudeInitialized = false; window.sha256Email = ''; function getCookieOrLocalStorage(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) { return c.substring(nameEQ.length, c.length); } } var lsValue = localStorage.getItem(name); return !!lsValue; } function sendAnalyticsData(eventType, props, cb) { var json = { data: {} }; json.userToken = np_userId; json.data.adsParams = $.cookie('AdsParameters'); json.data.ga = $.cookie('_ga'); json.data.gac = $.cookie('_gac_UA-88868916-2'); json.data.userAgent = navigator.userAgent; json.data.eventType = eventType; json.data.props = props; $.ajax({ 'type': 'POST', 'url': '/Feedback/SendAdsLog', 'contentType': 'application/json; charset=utf-8', 'data': JSON.stringify(json), 'dataType': 'json', 'complete': cb || function() {} }); } function initializeAmplitudeUser() { if (isAmplitudeInitialized) { return; } isAmplitudeInitialized = true; if (clientUserId > 0) { identifyAmplitudeUser(clientUserId, clientUserName); } else { identifyAmplitudeUser(null); } } function sendAmplitudeAnalyticsData(eventName, eventProperties, userProperties, callback_function) { initializeAmplitudeUser(); if (userProperties) { if(userProperties.utm_source || userProperties.utm_campaign) { var identify = new amplitude.Identify(); identify.setOnce("utm_campaign", userProperties.utm_campaign); identify.setOnce("utm_source", userProperties.utm_source); identify.setOnce("utm_content", userProperties.utm_content); identify.setOnce("utm_group", userProperties.utm_group); identify.setOnce("utm_term", userProperties.utm_term); identify.setOnce("utm_page", userProperties.utm_page); identify.setOnce("utm_page2", userProperties.utm_page); identify.setOnce("referrer", userProperties.referrer); amplitude.getInstance().identify(identify); userProperties.utm_source_last = userProperties.utm_source; userProperties.utm_campaign_last = userProperties.utm_campaign; userProperties.utm_content_last = userProperties.utm_content; userProperties.utm_group_last = userProperties.utm_group; userProperties.utm_term_last = userProperties.utm_term; userProperties.utm_page_last = userProperties.utm_page; } var userProps = objectWithoutProperties(userProperties, ["utm_campaign", "utm_source","utm_content", "utm_term", "utm_page", "utm_group", "referrer"]); amplitude.getInstance().setUserProperties(userProps); } if (!eventProperties) { eventProperties = {}; } eventProperties.WebSite = 'true'; eventProperties.IsAuthenticated = window.isAuthenticated; eventProperties.country_code = getCountryCode(); eventProperties.lang = window.currentLang || ''; var fullPageUrl = window.location.pathname.split('?')[0]; eventProperties.full_page_url = fullPageUrl; eventProperties.page_url = clearPageUrl(fullPageUrl); if (typeof callback_function === 'function') { amplitude.getInstance().logEvent(eventName, eventProperties, callback_function); } else { amplitude.getInstance().logEvent(eventName, eventProperties); } } function identifyAmplitudeUser(userId, token) { if (userId) { amplitude.getInstance().setUserProperties({ "Token": token, "UserId": userId }); } var identify = new amplitude.Identify(); amplitude.getInstance().identify(identify); if (userId) { amplitude.getInstance().setUserId(userId); } } function getUtmParamsFromUrl() { var hash = window.location.hash; var url = new URL(window.location.href); if (hash && hash.indexOf('utm_') >= 0) { url = new URL(window.location.origin + window.location.pathname + hash.replace('#', '?')); } if (!url.searchParams) { return ''; } return getUtmParams(url); } function hasGoogleIdFromUrl() { var url = new URL(window.location.href); if (!url.searchParams) { return false; } return !!url.searchParams.get('gclid'); } function sendAnalyticsFromUrl(referrer, pageType) { var urlIsAvailable = typeof URL === "function" || (navigator.userAgent.indexOf('MSIE') !== -1 && typeof URL === 'object'); if (!urlIsAvailable) { return; } var utmParams = getUtmParamsFromUrl(); if (!utmParams) { return; } var gclidFromUrl = utmParams.gclid; var utmParamsFromUrl = !!utmParams.utmSource || !!utmParams.utmCampaign || !!utmParams.gclid; if (!utmParamsFromUrl && userHasAdsParams) { utmParams = getUtmParamsFromCookie(); } var canLog = canLogToAmplitude(pageType); if (utmParamsFromUrl || utmSourceFromReferrer) { var fullPageUrl = window.location.pathname.split('?')[0]; var pageUrl = clearPageUrl(fullPageUrl); var userProps = { "utm_source": utmParams.utmSource, "utm_campaign": utmParams.utmCampaign, "utm_content": utmParams.utmContent, "utm_group": utmParams.utmGroup, "utm_term": utmParams.utmTerm, "utm_page": getUtmPageValue(pageUrl), "utm_lang": window.currentLang || '', "referrer": referrer }; if (gclidFromUrl) { var landingUrl = pageUrl.startsWith('/') && pageUrl !== '/' ? pageUrl.substr(1) : pageUrl; userProps.landing_page = landingUrl; var event = { 'Page': landingUrl, 'Url': window.location.href, 'utm_campaign_event': utmParams.utmCampaign, 'utm_group_event': utmParams.utmGroup } sendAmplitudeAnalyticsData('Landing Page', event, userProps); } else { var eventProps = { "utm_source": utmParams.utmSource, "utm_campaign": utmParams.utmCampaign, "utm_content": utmParams.utmContent, "utm_group": utmParams.utmGroup, "utm_term": utmParams.utmTerm }; if (utmParams.utmSource === "elastic") { sendAmplitudeAnalyticsData('Email Click', eventProps); } if (canLog) { sendAmplitudeAnalyticsData('Campaign', eventProps, userProps); } } } if (logPageEvent && canLog || (pageType === 'Pricing Page' && window.isValidCountry(true))) { var pageEventProps = { 'type': pageType, 'accepted_country': isValidCountry(), 'force_log': !canLog }; if (utmParams.gclid) { pageEventProps.googleClickId = utmParams.gclid; } sendAmplitudeAnalyticsData('Page View', pageEventProps); } } document.addEventListener('DOMContentLoaded', function () { if (location.href.indexOf('/frame/') === -1 && window.location.href.indexOf('skipCookie') === -1) { PureCookie.initCookieConsent(); } setCountryCode('https://location.nicepagesrv.com/country'); setUserIdCookie(); var referrer = ''; var pageType = 'Doc Article'; sendAnalyticsFromUrl(referrer, pageType); }); </script> <script> // Define dataLayer and the gtag function. window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } var consentDefaultValue = 'granted'; gtag('consent', 'default', { 'ad_storage': consentDefaultValue, 'ad_user_data': consentDefaultValue, 'ad_personalization': consentDefaultValue, 'analytics_storage': consentDefaultValue }); if (hasGoogleIdFromUrl()) { useExternalGtmCode = 1; } </script>  <script> if (useExternalGtmCode) { (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://load.api9.nicepage.com/nldlswob.js?st='+i+dl+'';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','W76XGFR'); } else { (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-W76XGFR'); } </script>   <script> if(window.hideFacebookPixelCode !== true) { !function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'); var fbInitOptions = { em: '' }; if (clientUserId > 0) { fbInitOptions.external_id = clientUserId; } fbq('init', '251025992170426', fbInitOptions); fbq('track', 'PageView'); } </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=251025992170426&ev=PageView&noscript=1" /></noscript>   <script type="text/javascript"> (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script") ;r.type="text/javascript" ;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW" ;r.crossOrigin="anonymous";r.async=true ;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js" ;r.onload=function(){if(!e.amplitude.runQueuedFunctions){ console.log("[Amplitude] Error: could not load SDK")}} ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i) ;function s(e,t){e.prototype[t]=function(){ this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}} var o=function(){this._q=[];return this} ;var a=["add","append","clearAll","prepend","set","setOnce","unset"] ;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[] ;return this} ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"] ;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"] ;function v(e){function t(t){e[t]=function(){ e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}} for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){ e=(!e||e.length===0?"$default_instance":e).toLowerCase() ;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]} ;e.amplitude=n})(window,document); amplitude.getInstance().init("878f4709123a5451aff838c1f870b849"); </script> <script> var shareasaleSSCID=shareasaleGetParameterByName("sscid");function shareasaleSetCookie(e,a,r,s,t){if(e&&a){var o,n=s?"; path="+s:"",i=t?"; domain="+t:"",S="";r&&((o=new Date).setTime(o.getTime()+r),S="; expires="+o.toUTCString()),document.cookie=e+"="+a+S+n+i+"; SameSite=None;Secure"}}function shareasaleGetParameterByName(e,a){a||(a=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var r=new RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)").exec(a);return r?r[2]?decodeURIComponent(r[2].replace(/\+/g," ")):"":null}shareasaleSSCID&&shareasaleSetCookie("shareasaleSSCID",shareasaleSSCID,94670778e4,"/"); </script> <link rel="preconnect" href="https://images01.nicepagecdn.com" /> <link rel="preconnect" href="https://csite.nicepage.com" />  <script> window.serverSettings = { fbAppId: '290410448063109', googleAppId: '13150095650-mo8psu2colep6uv90a2mu6r87u87s35a.apps.googleusercontent.com' }; </script> <script src="https://accounts.google.com/gsi/client?hl=en" async></script> <script src="//csite.nicepage.com/Scripts/Site/auth-common.js?version=1662e8971b75e227453abf2b0c0bb260dcad244d" defer></script> <script> var T = new Object(); T['Post.Delete'] = 'Delete'; T['Loading'] = 'Loading'; T['Attachment.File.Limit.Error'] = 'You can attach only 5 files'; T['Attachment.General.Error'] = 'There is an error with the file or the file size exceeds the allowed limit (20MB). Try putting the file in a shared location and sending a link instead.'; T['Attachment.Insert'] = 'Insert Attachment'; T['Report.Spam.Success'] = 'Thank you for Report!'; </script> <link rel="canonical" href="https://nicepage.com/doc/539264/multi-layer-backgrounds" /> <style> @media (min-width: 1400px) { .container { width: 1370px; } } .col-sticky { position: sticky; top: 10px; } .col-widgets { max-height: calc(100vh - 50px); overflow-x: hidden; overflow-y: auto; } </style> <script> function getAcnhor() { return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null; } function updateWaypoints() { var list = document.querySelector('.doc-waypoint-list'); if (!list) { return; } var items = list.querySelectorAll('.doc-waypoint-item'); if (!items.length) { return; } var i, active = 0; var scroller = document.documentElement; var height = scroller.clientHeight; var isScrollEnd = Math.abs(scroller.scrollTop + scroller.clientHeight - scroller.scrollHeight) < 1; var top = 30; // heading top offest var viewHeight = height * 0.5; // find visible anchor in viewport for (i = 0; i < items.length; i++) { var item = items[i]; var id = item.getAttribute('data-id'); if (!id) { continue; } var heading = document.getElementById(id); if (!heading) { continue; } var rect = heading.getBoundingClientRect(); if (!rect) { continue; } if (rect.top < -top) { // scrolled under top active = i; // or last scrolled } else if (rect.top + rect.height < viewHeight) { // in the upper half active = i; break; } } // check active anchor visible in viewport var anchor = getAcnhor(); if (anchor) { for (i = 0; i < items.length; i++) { var item = items[i]; var id = item.getAttribute('data-id'); if (!id || id !== anchor) { continue; } var heading = document.getElementById(id); if (!heading) { continue; } var rect = heading.getBoundingClientRect(); if (!rect) { continue; } if (rect.top >= -top && (rect.top + rect.height < viewHeight || isScrollEnd)) { // is visible in the upper half active = i; } break; } } // set active item for (i = 0; i < items.length; i++) { var item = items[i]; if (i === active) { if (!item.classList.contains('active')) { item.classList.add('active'); } } else { if (item.classList.contains('active')) { item.classList.remove('active'); } } } } var ticking; function onScroll() { if (!ticking) { window.requestAnimationFrame(function () { updateWaypoints(); ticking = false; }); ticking = true; } } function onClick(event) { if (event && event.target && event.target.closest('.doc-waypoint-item')) { onScroll(); // updateWaypoints(); } } function scrollToAnchorWaypoint() { var anchor = getAcnhor(); if (!anchor) { return; } var list = document.querySelector('.doc-waypoint-list'); if (!list) { return; } var items = list.querySelectorAll('.doc-waypoint-item'); if (!items.length) { return; } for (var i = 0; i < items.length; i++) { var item = items[i]; var id = item.getAttribute('data-id'); if (!id || id !== anchor) { continue; } var heading = document.getElementById(id); if (!heading) { continue; } heading.scrollIntoView({behavior: 'smooth', block: 'start'}); break; } } // try to disable default browser scroll position restore history.scrollRestoration = 'manual'; //try #1 (all browser, exclude IE11) document.documentElement.scrollTop = 0; // try #2 (all browser) document.addEventListener("DOMContentLoaded", function initWaypoints() { setTimeout(function () { // skip default scroll restoration, if triggered scrollToAnchorWaypoint(); setTimeout(function () { // skip scroll to anchor document.addEventListener('scroll', onScroll); document.addEventListener('click', onClick); // May be navigate without scroll onScroll(); // updateWaypoints(); }, 500); }, 250); }); </script> <script src="//capp.nicepage.com/1662e8971b75e227453abf2b0c0bb260dcad244d/forum-main-libs.js" defer></script> <link href="//capp.nicepage.com/1662e8971b75e227453abf2b0c0bb260dcad244d/forum-main-libs.css" rel="stylesheet" />  <!— Pinterest Tag —>  <!— end Pinterest Tag —> <style> .navbar { margin-bottom: 0; } </style> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { if (typeof IOlazy === 'function') { var lazy = new IOlazy(); } }); </script> </head> <body>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W76XGFR" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>  <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0&appId=290410448063109" nonce="zGb432eF"></script> <div class="wrap wrap-fluid"> <div id="top-navbar" class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand clearfix" href="https://nicepage.com"><img class="pull-left" width="123" height="40" alt="Nicepage.com" src="//csite.nicepage.com/Images/logo-w.png" /></a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="logon-block nav navbar-nav nav-list navbar-left u-unstyled" style="font-size: 14px;"> <li class="dropdown"> <a href="/download">Download</a> </li> <li class="dropdown"> <a href="/features">400+ Features</a> </li> <li class="dropdown"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle template-menu-item" href="/html-templates">15,000+ Templates <span class="caret"></span></a> <ul role="menu" class="dropdown-menu dropdown-menu-hover u-unstyled"> <li><a href="/website-templates" class="templates-url" data-urls="website-templates;templates">Website Templates</a></li> <li><a href="/website-design" class="templates-url">Website Designs</a></li> <li><a href="/wordpress-themes">WordPress Themes</a></li> <li><a href="/joomla-templates">Joomla Templates</a></li> <li><a href="/html-templates" class="templates-url" data-urls="html-templates;html5-template;css-templates">HTML Templates</a></li> </ul> </a> </li> <li class="dropdown"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"> Website Builders <span class="caret"></span> </a> <ul role="menu" class="dropdown-menu dropdown-menu-hover u-unstyled"> <li><a class="builder-link" href="/html-website-builder">HTML Website Builder</a></li> <li><a class="builder-link" href="/wordpress-website-builder">WordPress Website Builder</a></li> <li><a class="builder-link" href="/joomla-page-builder">Joomla Page Builder</a></li> </ul> </li> <li class="dropdown"> <a href="/premium?code=bf24">Pricing</a> </li> <li><a href="/forum">Forums</a></li> <li class="dropdown"> <a href="/blog">Blog</a> </li> <li class="dropdown"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Help<span class="caret"></span></a> <ul role="menu" class="dropdown-menu dropdown-menu-hover u-unstyled"> <li><a href="/doc/1318/video-lessons">Video Tutorials</a></li> <li><a href="/doc">Documentation</a></li> <li><a href="/Forum/Topic/Create">Contact Support</a></li> </ul> </li> </ul> <ul class="logon-block nav navbar-nav nav-list navbar-right u-unstyled"> <li><a href="/Editor/Account/LogOn">Sign In</a></li><li class="divider-vertical"></li><li><a href="https://nicepage.com/Editor/Account/Register">Register</a></li><li class="divider-vertical"></li> </ul> </div> </div> </div> <section class="container-fluid" style="padding: 0; margin-bottom: 0;"> <a href="/premium?code=bf24"> <img style="margin: 0 auto; display: block; width: 100%;" alt="Black Friday Sale! Save up to 50% off!" src="https://images02.nicepagecdn.com/cd46d0ff82086185e4d7aa0f/688183eae375568a98de87aa/coupon_34_1800-bf-87a8.jpg"/> </a> </section> <section id="" class="container"> <div id="jsquickmessage" style="display:none;"></div> <article class="article-containter"> <div class="row"> <div class="col-md-8"> <ol class="breadcrumb"> <li><a href="/doc">Home</a></li> <li><a href="/doc/c/release-notes">Release Notes</a></li> <li class="active">Nicepage 6.20: October 21, 2024 - Multi-Layer Backgrounds </li> </ol> </div> <div class="col-md-4"> <div style="margin-top: 10px;" > <a class="youtube-subscribe-btn" href="//youtube.com/c/nicepage?sub_confirmation=1" target="_blank"> <img src="//csite.nicepage.com/Images/Site/subscribe.png" alt="Subscribe on Youtube" style="width: 135px; vertical-align: bottom; margin-right: 5px;" /> </a> <div style="display: inline-block;"> <div class="fb-like" data-href="https://www.facebook.com/nicepageapp" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-12"> <h1> Nicepage 6.20: October 21, 2024 - Multi-Layer Backgrounds </h1> </div> </div> <div class="row"> <div class="col-md-12"> <div class="postbody"> <div id="postcontent-539264" class="postcontent"> <h2 id="whats-new-in-this-update">What's New in This Update?</h2> <ul> <li>Multi-Layer Backgrounds<br /> <ul><li>Add Background Layer</li><li>Background Layer Opacity</li><li>Reorder Background Layers</li><li>Remove Background Layer</li></ul></li> <li>Post Editor Reworked</li> <li>Search Results Improved</li> <li>Block Width Property Reworked</li> <li>Issue Resolution</li> <li>New Page and Block Designs</li> </ul> <h2 id="multi-layer-backgrounds">Multi-Layer Backgrounds</h2> <p>We have implemented the Multi-Layer Background, which you can use on Blocks, Boxes, Grid Cells, and Grid Repeater Items. This option allows you to add creative effects, including masking and shading.</p> <p>You can change the Opacity of the Color Fill layer. This option will be supported for the Gradient layer in the future. However, you can already use the transparent Gradient Colors to overlay the Background Image with the Gradient.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/715/140715/multi-layer-background.jpg" alt="multi-layer-background.jpg" /></div> <h3>Add Background Layer</h3> <p>Click the Plus Icon at the top of the Background section to add the Background Layer, which can be Color, Gradient, Image, or Video. </p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/691/140691/add-background-layer.png" alt="add-background-layer.png" /></div> <p>Alternatively, you can add two Background Layers simultaneously by choosing the Image with Shade or Video with Shade option.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/692/140692/background-image-with-shade.png" alt="background-image-with-shade.png" /></div> <h3>Background Layer Opacity</h3> <p>You can change the Opacity of the Color Layer. And use the transparent Gradient Color to overlay the Image Background.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/693/140693/background-layer-opacity.png" alt="background-layer-opacity.png" /></div> <h3>Reorder Background Layers</h3> <p>Click the Move icon to the left and drag the Layer up or down to change the Background Layer order.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/700/140700/reorder-background-layers.gif" alt="reorder-background-layers.gif" /></div> <h3>Remove Background Layer</h3> <p>You can delete the Background Layer by clicking the Minus icon to the Layer's left in the Property Panel.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/701/140701/background-layer-delete.png" alt="background-layer-delete.png" /></div> <h2 id="post-editor-reworked">Post Editor Reworked</h2> <p>We have also continued to improve the Post Editor. In this update, we simplified the properties, made the Featured Image easily accessible, and reworked the Editor Area.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/705/140705/post-editor-reworked.png" alt="post-editor-reworked.png" /></div> <h2 id="search-results-improved">Search Results Improved</h2> <p>We continued to improve the results provided by the Search features. We now show less text in the results, and if the keyword has two or more instances, the text is split into three dots.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/709/140709/serach-results-improved.png" alt="serach-results-improved.png" /></div> <h2 id="block-width-property-reworked">Block Width Property Reworked</h2> <p>We have reworked the Block Width property by making the selection of its options more obvious and intuitive.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/785/140785/block-width-property-reworked.gif" alt="block-width-property-reworked.gif" /></div> <h2 id="issue-resolution">Issue Resolution</h2> <ul> <li>Invalid Border for the Post Button </li> <li>Invalid spacing for the Options in the Radius Popup</li> <li>Invalid display of the Image Reset Icons on the Toolbar</li> <li>Invalid Shading of the Image Background for the Header Over Block option</li> <li>Invalid Width of the Post Hyperlink converted from the Button by the Fill removal</li> <li>Invalid Width of the PayPal Button on the iPhone screen</li> <li>Invalid Circle Shape proportions after converting Groups to a Grid Repeater</li> <li>Invalid Custom Color for the Image Shading</li> <li>Invalid Height of the Hover selection on the Context Toolbar</li> <li>Invalid Header after clicking the Vertical Align icons in the Property Panel</li> <li>Invalid display of the Guides while moving the Menu Element in the Header</li> <li>Invalid display of the New Block Button while resizing a Block</li> <li>Invalid display of the Plus Icon on the Grid Repeater side</li> <li>Invalid Block Height while resizing the Horizontal Grid Repeater</li> <li>Invalid display of the Border Property for the Post Button in the Property Panel</li> <li>Invalid display of the Product Image in the Product List Element added to a Page</li> <li>Invalid space symbols for the Calculation Field in the Contact Form Element</li> <li>Invalid Width of the Text Elements grouped and moved to another Block</li> <li>Invalid display of the Block Types in the list for the AI Block Builder Ideas</li> <li>Invalid wording for the AI Page Builder Prompt</li> <li>Invalid Button Alignment in the Change Folder dialog</li> <li>Malfunctioning of the Grid Resize operation in the Responsive Mode</li> <li>Malfunctioning of the Number Range Layout Change operation</li> <li>Malfunctioning of the Image Resize operation for the Grid Repeater Item</li> <li>Malfunctioning of the Animation Effects on the Shape after the Block Import</li> <li>Joomla: Invalid display of the Position Element in the Footer on some user websites</li> <li>Joomla: Malfunctioning of the Nicepage Extension update giving error 500 on some user websites</li> </ul> <h2 id="block-and-page-designs">Block and Page Designs</h2> <p>We have created <a href="https://nicepage.com/html-templates">new block and page designs</a> up to this update.<br /> <a href="https://nicepage.com/html-templates"><div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/711/140711/new-designs-620.jpg" alt="new-designs-620.jpg" /></div></a></p> <span class="post-content-quote" id="post-content-539264">## What's New in This Update? - Multi-Layer Backgrounds - Add Background Layer - Background Layer Opacity - Reorder Background Layers - Remove Background Layer - Post Editor Reworked - Search Results Improved - Block Width Property Reworked - Issue Resolution - New Page and Block Designs ## Multi-Layer Backgrounds We have implemented the Multi-Layer Background, which you can use on Blocks, Boxes, Grid Cells, and Grid Repeater Items. This option allows you to add creative effects, including masking and shading. You can change the Opacity of the Color Fill layer. This option will be supported for the Gradient layer in the future. However, you can already use the transparent Gradient Colors to overlay the Background Image with the Gradient. !multi-layer-background.jpg! ### Add Background Layer Click the Plus Icon at the top of the Background section to add the Background Layer, which can be Color, Gradient, Image, or Video. !add-background-layer.png! Alternatively, you can add two Background Layers simultaneously by choosing the Image with Shade or Video with Shade option. !background-image-with-shade.png! ### Background Layer Opacity You can change the Opacity of the Color Layer. And use the transparent Gradient Color to overlay the Image Background. !background-layer-opacity.png! ### Reorder Background Layers Click the Move icon to the left and drag the Layer up or down to change the Background Layer order. !reorder-background-layers.gif! ### Remove Background Layer You can delete the Background Layer by clicking the Minus icon to the Layer's left in the Property Panel. !background-layer-delete.png! ## Post Editor Reworked We have also continued to improve the Post Editor. In this update, we simplified the properties, made the Featured Image easily accessible, and reworked the Editor Area. !post-editor-reworked.png! ## Search Results Improved We continued to improve the results provided by the Search features. We now show less text in the results, and if the keyword has two or more instances, the text is split into three dots. !serach-results-improved.png! ## Block Width Property Reworked We have reworked the Block Width property by making the selection of its options more obvious and intuitive. !block-width-property-reworked.gif! ## Issue Resolution - Invalid Border for the Post Button - Invalid spacing for the Options in the Radius Popup - Invalid display of the Image Reset Icons on the Toolbar - Invalid Shading of the Image Background for the Header Over Block option - Invalid Width of the Post Hyperlink converted from the Button by the Fill removal - Invalid Width of the PayPal Button on the iPhone screen - Invalid Circle Shape proportions after converting Groups to a Grid Repeater - Invalid Custom Color for the Image Shading - Invalid Height of the Hover selection on the Context Toolbar - Invalid Header after clicking the Vertical Align icons in the Property Panel - Invalid display of the Guides while moving the Menu Element in the Header - Invalid display of the New Block Button while resizing a Block - Invalid display of the Plus Icon on the Grid Repeater side - Invalid Block Height while resizing the Horizontal Grid Repeater - Invalid display of the Border Property for the Post Button in the Property Panel - Invalid display of the Product Image in the Product List Element added to a Page - Invalid space symbols for the Calculation Field in the Contact Form Element - Invalid Width of the Text Elements grouped and moved to another Block - Invalid display of the Block Types in the list for the AI Block Builder Ideas - Invalid wording for the AI Page Builder Prompt - Invalid Button Alignment in the Change Folder dialog - Malfunctioning of the Grid Resize operation in the Responsive Mode - Malfunctioning of the Number Range Layout Change operation - Malfunctioning of the Image Resize operation for the Grid Repeater Item - Malfunctioning of the Animation Effects on the Shape after the Block Import - Joomla: Invalid display of the Position Element in the Footer on some user websites - Joomla: Malfunctioning of the Nicepage Extension update giving error 500 on some user websites ## Block and Page Designs We have created [new block and page designs](https://nicepage.com/html-templates) up to this update. [!new-designs-620.jpg!](https://nicepage.com/html-templates) </span> </div> </div> </div> </div> </div> <div class="col-md-4 col-sticky"> <div class=" sidebar-container col-widgets"> <div class="row"> <div class="col-md-12"> <h3>In this article</h3> </div> </div> <div class="row"> <div class="col-md-12"> <div> <ul class="doc-article-list doc-waypoint-list"> <li class="doc-waypoint-item" data-id="whats-new-in-this-update"> <a href="#whats-new-in-this-update">What's New in This Update?</a> </li> <li class="doc-waypoint-item" data-id="multi-layer-backgrounds"> <a href="#multi-layer-backgrounds">Multi-Layer Backgrounds</a> </li> <li class="doc-waypoint-item" data-id="post-editor-reworked"> <a href="#post-editor-reworked">Post Editor Reworked</a> </li> <li class="doc-waypoint-item" data-id="search-results-improved"> <a href="#search-results-improved">Search Results Improved</a> </li> <li class="doc-waypoint-item" data-id="block-width-property-reworked"> <a href="#block-width-property-reworked">Block Width Property Reworked</a> </li> <li class="doc-waypoint-item" data-id="issue-resolution"> <a href="#issue-resolution">Issue Resolution</a> </li> <li class="doc-waypoint-item" data-id="block-and-page-designs"> <a href="#block-and-page-designs">Block and Page Designs</a> </li> </ul> </div> </div> </div> <div class="row"> <div class="col-md-12"> <h3><a class="doc-category-caption" href="/doc/c/release-notes">Release Notes</a></h3> </div> </div> <div class="row"> <div class="col-md-12"> <ul class="doc-article-list"> <li> <a href="/doc/542428/nicepage-7-released-calendar-booking-form" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 7.0: November 14, 2024 - V7 Released! </a> </li> <li> <a href="/doc/545436/calendar-appointments-and-booking" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Nicepage 6.21: November 1, 2024 - Calendar Appointments and Booking </a> </li> <li> <a href="/doc/539264/multi-layer-backgrounds" class="link-current"> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#808080" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#808080" d="M13,4H3v1h10V4L13,4z"/> <path fill="#808080" d="M13,7H3v1h10V7L13,7z"/> <path fill="#808080" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.20: October 21, 2024 - Multi-Layer Backgrounds </a> </li> <li> <a href="/doc/536948/site-search-results-improvements" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Nicepage 6.19: October 8, 2024 - Site Search Results Improvements </a> </li> <li> <a href="/doc/534072/site-search-manage-instant-site-preview" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.18: September 24, 2024 - Site Search. Instant Site Preview </a> </li> <li> <a href="/doc/530570/ai-powered-template-ideas" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.17: September 6, 2024 - AI-Powered Template Ideas </a> </li> <li> <a href="/doc/527464/ai-personalized-block-content" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.16: August 21, 2024 - AI-Personalized Block Content </a> </li> <li> <a href="/doc/524822/ai-powered-anti-spam-filter-personalize-design-content-ai" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.15: August 5, 2024 - AI-Powered Anti-Spam Filter. Personalize Design Content With AI </a> </li> <li> <a href="/doc/521400/new-page-dialog-reworked" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.14: July 22, 2024 - New Page Dialog Reworked </a> </li> <li> <a href="/doc/517518/page-and-block-designs-translated" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.13: July 5, 2024 - Page And Block Designs Translated </a> </li> <li> <a href="/doc/513823/ai-powered-block-builder-rework" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.12: June 19, 2024 - AI-Powered Block Builder Rework </a> </li> <li><a href="/doc/c/release-notes">show more »</a></li> </ul> </div> </div> </div> </div> </div> </article> <script> $(function () { var loadingTime = new Date(); var timeoutMsec = 3 * 1000; var longTimeoutMsec = 10 * 1000; var imgNode = "<img src='//static.nicepage.com/images/social/icont-attention.png'/>"; var calculateScrollPercents = function() { var s = $(window).scrollTop(), d = $(document).height(), c = $(window).height(); var scrollPercent = (s / (d - c)) * 100; return scrollPercent; }; var showStickyFooter = function () { if (calculateScrollPercents() > 20 && !$('.subscribe-modal').hasClass('show')) { $('.subscribe-modal').addClass('show'); } }; var isEmail = function(email) { var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; return regex.test(email); }; var hideTooltip = function () { var emailInput = $('.email-input'); if (emailInput.data('ui-tooltip')) {//if tooltip has been initialized emailInput.tooltip('option', 'content', '').tooltip('close').tooltip('disable'); } } var timerId = null; var hasScrollbar = document.body.scrollHeight > document.body.clientHeight; if (!hasScrollbar) { timerId = setTimeout(function () { $('.subscribe-modal').addClass('show'); clearTimeout(timerId); timerId = null; }, longTimeoutMsec); } var emailInput = $('.email-input'); emailInput.attr("title", " "); emailInput .tooltip({ tooltipClass: 'top', position: { my: 'left top+10', at: 'left bottom' } }) .tooltip("disable") .on('mouseout focusout', function (event) { event.stopImmediatePropagation(); }) .on('input', hideTooltip); $('.subscribe-close').on('click', function () { $('.subscribe-modal').removeClass('show'); $.cookie("HideStickyFooter", 1, { expires: 180 }); }); $('.subscribe-btn').on('click', function (e) { e.preventDefault(); $('.error').hide(); var email = $('.email-input').val(); if (!isEmail(email)) { var tooltipContent = 'Enter a valid email address'; $('.email-input') .tooltip('option', 'content', imgNode + "<span style='margin-left: 10px;'>" + tooltipContent + '</span>') .tooltip('enable') .tooltip('open'); return; } $('#subscribe-form').submit(); }); $(window).on('scroll', function() { if ($.cookie("HideStickyFooter")) return; hideTooltip(); var currentTime = new Date(); if (currentTime.getTime() - loadingTime.getTime() > timeoutMsec) { if (!timerId) showStickyFooter(); } else if (!timerId) { timerId = setTimeout(function () { showStickyFooter(); clearTimeout(timerId); timerId = null; }, timeoutMsec - (currentTime - loadingTime)); } if (calculateScrollPercents() < 20 && $('.subscribe-modal').hasClass('show')) { $('.subscribe-modal').removeClass('show'); if (timerId) { clearTimeout(timerId); timerId = null; } } }); }); </script> <div class="subscribe-modal" data-backdrop="false"> <button type="button" class="subscribe-close"></button> <div class="content subscribe-form-holder"> <h1>Join Us</h1> <p>Get free website builder. Easy drag-and-drop.<br/> Choose from 15,000+ Templates.</p> <form method="post" id="subscribe-form" action="/Editor/Account/RegisterByEmail?returnUrl=%2Fdoc%2F539264%2Fmulti-layer-backgrounds&source=Article"> <input class="email-input" type="text" name="email" placeholder="Enter your email address"> <input class="subscribe-btn" type="submit" value="Join"> </form> </div> <div class="subscribe-success"> <div class="content"> <h2>Thanks for subscribing!</h2> </div> </div> </div> </section> <div id="push"></div> </div> <div class="footer"> <div class="footer-top"> <div class="container"> <style> .footer-top a { color: #ddd !important; font-size: 16px; } </style> <div class="row"> <div class="col-md-2 col-sm-6 col-xs-12"> <h6>Company</h6> <ul> <li><a href="/Terms">Terms of Use</a></li> <li><a href="/Privacy">Privacy Policy</a></li> <li><a href="/Agreement">License Agreement</a></li> <li><a href="/About">About Us</a></li> <li><a href="/partners">Partners</a></li> <li><a href="/Abuse">Abuse</a></li> <li><a href="/Forum/Topic/Create">Contact Support</a></li> </ul> </div> <div class="col-md-2 col-sm-6 col-xs-12"> <h6>Product</h6> <ul> <li><a href="/doc/frequently-asked-questions-16656">FAQ</a></li> <li><a href="/download">Download</a></li> <li><a href="/features">400+ Features</a></li> <li><a href="/affiliates">Affiliates</a></li> <li><a href="/doc">Documentation</a></li> <li><a href="/forum">Forum</a></li> <li><a href="/blog">Blog</a></li> </ul> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h6><a href="/templates">Themes & Templates</a></h6> <ul> <li><a href="/website-templates">Website Templates</a></li> <li><a href="/wordpress-themes">WordPress Themes</a></li> <li><a href="/html-templates">HTML Templates</a></li> <li><a href="/css-templates">CSS Templates</a></li> <li><a href="/joomla-templates">Joomla Templates</a></li> <li><a href="/html5-template">HTML5 Templates</a></li> <li><a href="/one-page-template">One Page Templates</a></li> </ul> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h6>Nicepage</h6> <ul> <li><a href="/website-builder">Website Builder</a></li> <li><a href="/html-website-builder">HTML Website Builder</a></li> <li><a href="/wordpress-website-builder">WordPress Website Builder</a></li> <li><a href="/joomla-page-builder">Joomla Page Builder</a></li> <li><a href="/wysiwyg-html-editor">WYSIWYG HTML Editor</a></li> <li><a href="/static-site-generator">Static Site Generator</a></li> <li><a href="/html-code">HTML Code Generator</a></li> </ul> </div> <div class="col-md-2 col-sm-6 col-xs-12"> <h6>Web Design</h6> <ul> <li><a href="/website-design">Website Designs</a></li> <li><a href="/web-page-design">Web Page Designs</a></li> <li><a href="/ecommerce-templates">eCommerce Designs</a></li> <li><a href="/landing-page">Landing Pages</a></li> <li><a href="/homepage-design">Homepage Designs</a></li> <li><a href="/website-mockup">Website Mockup</a></li> </ul> </div> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="row"> <div id="footer-links" class="footer-inline col-sm-12 pull-right"> <div style="white-space: nowrap; float: left; text-align: left;"> <div class="row"> <div class="col-sm-3"> <a href="https://facebook.com/nicepageapp" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#3B5998" cx="56.1" cy="56.1" r="55"></circle> <path fill="#FFFFFF" d="M73.5,31.6h-9.1c-1.4,0-3.6,0.8-3.6,3.9v8.5h12.6L72,58.3H60.8v40.8H43.9V58.3h-8V43.9h8v-9.2 c0-6.7,3.1-17,17-17h12.5v13.9H73.5z"></path> </svg><span style="position: relative;top: -7px;margin-left: 5px;">Facebook</span></a> </div> <div class="col-sm-3"> <a href="https://twitter.com/NicepageApp" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#55ACEE" class="st0" cx="56.1" cy="56.1" r="55"/> <path fill="#FFFFFF" d="M83.8,47.3c0,0.6,0,1.2,0,1.7c0,17.7-13.5,38.2-38.2,38.2C38,87.2,31,85,25,81.2c1,0.1,2.1,0.2,3.2,0.2 c6.3,0,12.1-2.1,16.7-5.7c-5.9-0.1-10.8-4-12.5-9.3c0.8,0.2,1.7,0.2,2.5,0.2c1.2,0,2.4-0.2,3.5-0.5c-6.1-1.2-10.8-6.7-10.8-13.1 c0-0.1,0-0.1,0-0.2c1.8,1,3.9,1.6,6.1,1.7c-3.6-2.4-6-6.5-6-11.2c0-2.5,0.7-4.8,1.8-6.7c6.6,8.1,16.5,13.5,27.6,14 c-0.2-1-0.3-2-0.3-3.1c0-7.4,6-13.4,13.4-13.4c3.9,0,7.3,1.6,9.8,4.2c3.1-0.6,5.9-1.7,8.5-3.3c-1,3.1-3.1,5.8-5.9,7.4 c2.7-0.3,5.3-1,7.7-2.1C88.7,43,86.4,45.4,83.8,47.3z"/> </svg><span style="position: relative;top: -7px;margin-left: 5px;">Twitter</span></a> </div> <div class="col-sm-3"> <a href="https://youtube.com/nicepage?sub_confirmation=1" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#D22215" cx="56.1" cy="56.1" r="55"></circle> <path fill="#FFFFFF" d="M74.9,33.3H37.3c-7.4,0-13.4,6-13.4,13.4v18.8c0,7.4,6,13.4,13.4,13.4h37.6c7.4,0,13.4-6,13.4-13.4V46.7 C88.3,39.3,82.3,33.3,74.9,33.3L74.9,33.3z M65.9,57l-17.6,8.4c-0.5,0.2-1-0.1-1-0.6V47.5c0-0.5,0.6-0.9,1-0.6l17.6,8.9 C66.4,56,66.4,56.8,65.9,57L65.9,57z"></path> </svg><span style="position: relative;top: -7px;margin-left: 5px;">YouTube</span></a> </div> <div class="col-sm-3"> <a href="https://www.pinterest.com/nicepagecom/pins" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#CB2027" cx="56.1" cy="56.1" r="55"></circle> <path fill="#FFFFFF" d="M61.1,76.9c-4.7-0.3-6.7-2.7-10.3-5c-2,10.7-4.6,20.9-11.9,26.2c-2.2-16.1,3.3-28.2,5.9-41 c-4.4-7.5,0.6-22.5,9.9-18.8c11.6,4.6-10,27.8,4.4,30.7C74.2,72,80.3,42.8,71,33.4C57.5,19.6,31.7,33,34.9,52.6 c0.8,4.8,5.8,6.2,2,12.9c-8.7-1.9-11.2-8.8-10.9-17.8C26.5,32.8,39.3,22.5,52.2,21c16.3-1.9,31.6,5.9,33.7,21.2 C88.2,59.5,78.6,78.2,61.1,76.9z"></path> </svg><span style="position: relative;top: -7px;margin-left: 5px;">Pinterest</span></a> </div> </div> </div>  <div class="copy">© 2024 Nicepage Free Website Builder Software - All Rights Reserved</div> </div> </div> </div> </div> </div> </body> </html>

CINXE.COM

Nicepage 6.20: October 21, 2024 - Multi-Layer Backgrounds - Nicepage Documentation