Create awesome websites using 400+ Nicepage features

<!DOCTYPE html> <html lang="en"> <head> <title>Create awesome websites using 400+ Nicepage features</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="Review 400+ Nicepage Features. Everything you need to design a stunning website today without code. "> <meta property="og:type" content="website"> <meta property="og:url" content="https://nicepage.com/features"> <meta property="og:title" content="Create awesome websites using 400+ Nicepage features"> <meta property="og:image" content="https://static.nicepage.com/images/site/nicepage.jpg"> <meta property="og:description" content="Review 400+ Nicepage Features. Everything you need to design a stunning website today without code. "> <meta property="og:site_name" content="Nicepage.com" /> <link rel="alternate" hreflang="en" href="https://nicepage.com/features"> <link rel="alternate" hreflang="de" href="https://nicepage.com/de/features"> <link rel="alternate" hreflang="nl" href="https://nicepage.com/nl/features"> <link rel="alternate" hreflang="fr" href="https://nicepage.com/fr/features"> <link rel="alternate" hreflang="it" href="https://nicepage.com/it/features"> <link rel="alternate" hreflang="es" href="https://nicepage.com/es/features"> <link rel="alternate" hreflang="pl" href="https://nicepage.com/pl/features"> <link rel="alternate" hreflang="pt" href="https://nicepage.com/pt/features"> <link rel="alternate" hreflang="tr" href="https://nicepage.com/tr/features"> <link rel="alternate" hreflang="ru" href="https://nicepage.com/ru/features"> <link rel="alternate" hreflang="hu" href="https://nicepage.com/hu/features"> <link rel="alternate" hreflang="cs" href="https://nicepage.com/cs/features"> <link rel="alternate" hreflang="sv" href="https://nicepage.com/sv/features"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width"> <script src="//capp.nicepage.com/c0110c17441c82489ad1bbcf16e1b24bcc7eea03/templates-page-libs.js" defer></script> <link href="//capp.nicepage.com/c0110c17441c82489ad1bbcf16e1b24bcc7eea03/templates-page-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 = 'Features'; 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 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=c0110c17441c82489ad1bbcf16e1b24bcc7eea03" defer></script> <style> #main { margin: 0; } #top-navbar { position: sticky; top: 0; z-index: 200; } .navbar { margin-bottom: 0; } h1 { font-size: 40px; font-weight: bold; margin-bottom: 30px; } .custom-block h2, .custom-block .split-layout h2 { font-size: 36px !important; } .pages-content { max-width: 1920px; padding: 35px; margin: 0 auto; } .heading-container { padding: 10px; position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 350px; text-align: center; background-position: 50% 50%; border-radius: 10px; } @media (max-width: 768px) { .heading-container { margin: 0 -15px; } } .heading-container { background-color: #94AAC2; background-size: cover; } @media (min-width: 576px) and (max-width: 1281px) { .heading-container { background-image: url('//csite.nicepage.com/Images/Site/features-1200.jpg?v1'); } } @media (min-width: 1281px) and (max-width: 1700px) { .heading-container { background-image: url('//csite.nicepage.com/Images/Site/features-1600.jpg?v1'); } } @media (min-width: 1700px) { .heading-container { background-image: url('//csite.nicepage.com/Images/Site/features-1920.jpg?v1'); } } .heading-block { color: #fff; max-width: 650px; display: inline-block; } .heading-description { font-size: 16px; line-height: 1.5; width: 90%; margin: 0 auto 30px; } </style>  <!— Pinterest Tag —>  <!— end Pinterest Tag —> <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 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">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 class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">EN <span class="caret"></span></a> <ul class="dropdown-menu u-unstyled" role="menu"> <li><a href="/features">EN</a></li> <li><a href="/de/features">DE</a></li> <li><a href="/nl/features">NL</a></li> <li><a href="/fr/features">FR</a></li> <li><a href="/it/features">IT</a></li> <li><a href="/es/features">ES</a></li> <li><a href="/pl/features">PL</a></li> <li><a href="/pt/features">PT</a></li> <li><a href="/tr/features">TR</a></li> <li><a href="/ru/features">RU</a></li> <li><a href="/hu/features">HU</a></li> <li><a href="/cs/features">CS</a></li> <li><a href="/sv/features">SV</a></li> </ul> </li> <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 id="main" class="container-fluid"> <div class="pages-content"> <div class="row"> <div class="col-md-12"> <div class="heading-container"> <div class="heading-block"> <h1 class="">Review 400+ Nicepage Features</h1> <p class="heading-description">Explore the powerful features you can use to build and customize stunning, instantly mobile-friendly websites and themes with no coding.</p> <div class="custom-block"> <div class="download-buttons"> <a class="btn btn-lg win-download" href="/download-windows" type="button">Download for Windows</a> <a class="btn btn-lg mac-download" href="/download-mac" type="button">Download for Mac</a> </div> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/web-page-elements">Web Page Elements</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>The Web Elements are the essential components of any website used to create the structure of a page and present content and information in various ways. For example, you can use Text, Images, Buttons, Hyperlinks, Grid, Gallery, and tens of other elements in your web design without coding.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/web-page-elements" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="intro-layout fixed"> <div class="row"> <div class="col-sm-12"> <div class="text-block"> </div> <div class="image-block"> <a title="Web Page Elements" href="/features/c/web-page-elements"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/531925/web-page-elements.jpg" alt="Web Page Elements" title="Web Page Elements" /> </a> </div> </div> </div> </div> </div> </div> <div class="features-block"> <div class="row"> <div class="col-md-12"> <div class="custom-block "> <div class="features-grid"> <ul class="thumbnails-loading list-unstyled"> <li class="thumbnail-item " style=""> <a href="/feature/grid-446715" data-detail-link="1" data-type-video="0" data-lang="" data-id="446715" data-url="https://images04.nicepage.com/feature/446715/grid.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Grid. The Grid is a container element that you can use to place web page elements in cells. We recommend using the Grid Element, as it is good for responsive designs, as cells move one under another automatically on smaller screens." data-title="" data-learn-more="/feature/grid-446715" data-examples-url="/c/grid-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/446715/grid-small.jpg" alt="Grid" /> </div> <div class="feature-meta"> <div class="feature-title ">Grid</div> <p class="feature-description narrow" style="">The Grid is a container element that you can use to place web page elements in cells. We recommend using the Grid Element, as it is good for responsive designs, as cells move one under another automatically on smaller screens.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/gallery-thumbnails-447818" data-detail-link="0" data-type-video="1" data-lang="" data-id="447818" data-url="https://images04.nicepage.com/feature/447818/gallery-thumbnails.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Gallery Thumbnails. Create a beautiful Preview for your images with one of the most popular Gallery layouts. Click on thumbnails to switch the Main Image." data-title="" data-learn-more="/doc/99951/gallery-thumbnails" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/447818/gallery-thumbnails-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Gallery Thumbnails</div> <p class="feature-description narrow" style="">Create a beautiful Preview for your images with one of the most popular Gallery layouts. Click on thumbnails to switch the Main Image.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/gallery-447743" data-detail-link="0" data-type-video="0" data-lang="" data-id="447743" data-url="https://images04.nicepage.com/feature/447743/gallery.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Gallery. Add a collection of your favorite images to your web designs using the Gallery Element. Add text titles, apply hover effects, and styling." data-title="" data-learn-more="/doc/98179/gallery" data-examples-url="/c/gallery-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/447743/gallery-small.jpg" alt="Gallery" /> </div> <div class="feature-meta"> <div class="feature-title ">Gallery</div> <p class="feature-description narrow" style="">Add a collection of your favorite images to your web designs using the Gallery Element. Add text titles, apply hover effects, and styling.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/video-463213" data-detail-link="0" data-type-video="1" data-lang="" data-id="463213" data-url="https://images04.nicepage.com/feature/463213/video.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Video. Insert Videos the same way you add images and icons. You can expand a video to make a video background. You can use links to YouTube, Vimeo, and your hosting and upload videos." data-title="" data-learn-more="/doc/164382/video" data-examples-url="/c/video-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/463213/video-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Video</div> <p class="feature-description narrow" style="">Insert Videos the same way you add images and icons. You can expand a video to make a video background. You can use links to YouTube, Vimeo, and your hosting and upload videos.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/social-icons-463061" data-detail-link="0" data-type-video="0" data-lang="" data-id="463061" data-url="https://images04.nicepage.com/feature/463061/social-icons.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Social Icons. Add Icons with links to your social networks on your web pages to connect with your audience. You can use the preset icons and also select your own if needed." data-title="" data-learn-more="/doc/134512/social-icons" data-examples-url="/c/social-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/463061/social-icons-small.jpg" alt="Social Icons" /> </div> <div class="feature-meta"> <div class="feature-title ">Social Icons</div> <p class="feature-description narrow" style="">Add Icons with links to your social networks on your web pages to connect with your audience. You can use the preset icons and also select your own if needed.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/gallery-caption-458301" data-detail-link="0" data-type-video="1" data-lang="" data-id="458301" data-url="https://images04.nicepage.com/feature/458301/gallery-caption.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Gallery Caption. Present your photos as a Gallery Caption. Add texts below to describe your images. Click on arrows or indicators to switch the Gallery Slides." data-title="" data-learn-more="/doc/97211/gallery" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/458301/gallery-caption-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Gallery Caption</div> <p class="feature-description narrow" style="">Present your photos as a Gallery Caption. Add texts below to describe your images. Click on arrows or indicators to switch the Gallery Slides.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/google-maps-463218" data-detail-link="0" data-type-video="0" data-lang="" data-id="463218" data-url="https://images04.nicepage.com/feature/463218/google-maps.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Google Maps. Allow your visitors to find faster and easier offline. You can specify the exact location of your business or yourself with Google Maps." data-title="" data-learn-more="/doc/164383/google-maps" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/463218/google-maps-small.jpg" alt="Google Maps" /> </div> <div class="feature-meta"> <div class="feature-title ">Google Maps</div> <p class="feature-description narrow" style="">Allow your visitors to find faster and easier offline. You can specify the exact location of your business or yourself with Google Maps.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/grid-repeater-447740" data-detail-link="0" data-type-video="1" data-lang="" data-id="447740" data-url="https://images04.nicepage.com/feature/447740/grid-repeater.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Grid Repeater. Design one column and the Grid Repeater will automatically repeat your design to other columns, including a set of elements, styling, and positioning. Specify text, images in each column to finalize your design. It will save time, allowing you to focus on creativity." data-title="" data-learn-more="/doc/83204/grid-repeater" data-examples-url="/c/grid-repeater-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/447740/grid-repeater-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Grid Repeater</div> <p class="feature-description narrow" style="">Design one column and the Grid Repeater will automatically repeat your design to other columns, including a set of elements, styling, and positioning. Specify text, images in each column to finalize your design. It will save time, allowing you to focus on creativity.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/full-width-slider-458284" data-detail-link="0" data-type-video="1" data-lang="" data-id="458284" data-url="https://images04.nicepage.com/feature/458284/full-width-slider.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Full-Width Slider. Create hero-image or introduction blocks with a slider easily, taking the whole width of your screens. Add lead texts, call to action buttons, and other elements. All full-width slider blocks are mobile-friendly by default." data-title="" data-learn-more="/doc/164373/full-width-slider" data-examples-url="/c/full-width-slider-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/458284/full-width-slider-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Full-Width Slider</div> <p class="feature-description narrow" style="">Create hero-image or introduction blocks with a slider easily, taking the whole width of your screens. Add lead texts, call to action buttons, and other elements. All full-width slider blocks are mobile-friendly by default.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/repeated-carousel-458291" data-detail-link="0" data-type-video="1" data-lang="" data-id="458291" data-url="https://images04.nicepage.com/feature/458291/repeated-carousel.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Repeated Carousel. Use Repeated Carousel containing various elements like images, icons, texts, buttons, etc., to rotate on your site web pages. There are also Carousels for Posts and Products." data-title="" data-learn-more="/doc/158747/repeated-carousel" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/458291/repeated-carousel-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Repeated Carousel</div> <p class="feature-description narrow" style="">Use Repeated Carousel containing various elements like images, icons, texts, buttons, etc., to rotate on your site web pages. There are also Carousels for Posts and Products.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/form-builder-458435" data-detail-link="0" data-type-video="0" data-lang="" data-id="458435" data-url="https://images04.nicepage.com/feature/458435/form-builder.png" data-target="#feature-modal-preview" onclick="return false;" title="Form Builder. You can easily build the login, contact, subscription, and other types of forms with the Form Builder Element to communicate with your website visitors. All forms are fully responsive and ready to use." data-title="" data-learn-more="/doc/98378/contact-form" data-examples-url="/c/contact-form-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/458435/form-builder-small.png" alt="Form Builder" /> </div> <div class="feature-meta"> <div class="feature-title ">Form Builder</div> <p class="feature-description narrow" style="">You can easily build the login, contact, subscription, and other types of forms with the Form Builder Element to communicate with your website visitors. All forms are fully responsive and ready to use.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/gallery-carousel-425845" data-detail-link="0" data-type-video="1" data-lang="" data-id="425845" data-url="https://images04.nicepage.com/feature/425845/gallery-carousel.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Gallery Carousel. Scroll several images in one click. Add interaction with your visitors to a website. You can allow customers to study your portfolio gallery in a modern way." data-title="" data-learn-more="/doc/149946/gallery-carousel" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/425845/gallery-carousel-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Gallery Carousel</div> <p class="feature-description narrow" style="">Scroll several images in one click. Add interaction with your visitors to a website. You can allow customers to study your portfolio gallery in a modern way.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/counter-463233" data-detail-link="0" data-type-video="1" data-lang="" data-id="463233" data-url="https://images04.nicepage.com/feature/463233/counter.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Counter. Present your personal and website achievements in numbers and figures. You can improve the building of trustful relationships with your visitors." data-title="" data-learn-more="/doc/164386/counter" data-examples-url="/c/counter-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/463233/counter-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Counter</div> <p class="feature-description narrow" style="">Present your personal and website achievements in numbers and figures. You can improve the building of trustful relationships with your visitors.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/back-to-top-467419" data-detail-link="0" data-type-video="1" data-lang="" data-id="467419" data-url="https://images04.nicepage.com/feature/467419/back-to-top.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Back To Top. Allow your site visitors and users to scroll back to the top of the page smoothly. It's a minor detail that enhances the navigation experience on a website or long landing page." data-title="" data-learn-more="/doc/98419/back-to-top" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/467419/back-to-top-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Back To Top</div> <p class="feature-description narrow" style="">Allow your site visitors and users to scroll back to the top of the page smoothly. It's a minor detail that enhances the navigation experience on a website or long landing page.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/slider-458285" data-detail-link="0" data-type-video="1" data-lang="" data-id="458285" data-url="https://images04.nicepage.com/feature/458285/slider.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Slider. Add Slider as an essential interaction element to any place on your web page. You can set a different width for your slides, unlike the Full-Width Slider. And you can use various sets of Elements on slides adding variety to your web blocks." data-title="" data-learn-more="/doc/97200/slider" data-examples-url="/c/slider-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/458285/slider-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Slider</div> <p class="feature-description narrow" style="">Add Slider as an essential interaction element to any place on your web page. You can set a different width for your slides, unlike the Full-Width Slider. And you can use various sets of Elements on slides adding variety to your web blocks.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=" display:none;"> <a href="/feature/gallery-slider-490293" data-detail-link="0" data-type-video="1" data-lang="" data-id="490293" data-url="https://images04.nicepage.com/feature/490293/gallery-slider.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Gallery Slider. The Gallery Slider allows showing your images as slides. You can also add captions to be displayed on hover and set the transparency of the hovered layer." data-title="" data-learn-more="/doc/175881/gallery-slider" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/490293/gallery-slider-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Gallery Slider</div> <p class="feature-description narrow" style="">The Gallery Slider allows showing your images as slides. You can also add captions to be displayed on hover and set the transparency of the hovered layer.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=" display:none;"> <a href="/feature/group-446722" data-detail-link="0" data-type-video="0" data-lang="" data-id="446722" data-url="https://images04.nicepage.com/feature/446722/group-.png" data-target="#feature-modal-preview" onclick="return false;" title="Group . Group Elements to use as a whole in your designs. It will help you move, resize, add background, border, and effects around for the Group." data-title="" data-learn-more="/doc/13180/responsive-group" data-examples-url="/c/group-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/446722/group--small.png" alt="Group " /> </div> <div class="feature-meta"> <div class="feature-title ">Group </div> <p class="feature-description narrow" style="">Group Elements to use as a whole in your designs. It will help you move, resize, add background, border, and effects around for the Group.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=" display:none;"> <a href="/feature/tabs-462708" data-detail-link="0" data-type-video="1" data-lang="" data-id="462708" data-url="https://images04.nicepage.com/feature/462708/tabs.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Tabs. Add the Accordion to present tabbed data in the form of expanding and collapsing panels. You can see only one panel of the Accordion open and can expand only one panel at a time." data-title="" data-learn-more="/doc/84635/tabs" data-examples-url="/c/tabs-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/462708/tabs-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Tabs</div> <p class="feature-description narrow" style="">Add the Accordion to present tabbed data in the form of expanding and collapsing panels. You can see only one panel of the Accordion open and can expand only one panel at a time.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=" display:none;"> <a href="/feature/modal-popup-462707" data-detail-link="0" data-type-video="0" data-lang="" data-id="462707" data-url="https://images04.nicepage.com/feature/462707/modal-popup.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Modal Popup. Promote your offers with the Modal Popup dialog. You can add the link to the popup dialog for the Hyperlink and Button dialog and trigger it on an event." data-title="" data-learn-more="/doc/97483/modal-popup" data-examples-url="/c/modal-popup-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/462707/modal-popup-small.jpg" alt="Modal Popup" /> </div> <div class="feature-meta"> <div class="feature-title ">Modal Popup</div> <p class="feature-description narrow" style="">Promote your offers with the Modal Popup dialog. You can add the link to the popup dialog for the Hyperlink and Button dialog and trigger it on an event.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=" display:none;"> <a href="/feature/accordion-462724" data-detail-link="0" data-type-video="1" data-lang="" data-id="462724" data-url="https://images04.nicepage.com/feature/462724/accordion.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Accordion. Add the Accordion to present tabbed data in the form of expanding and collapsing panels. You can see only one panel of the Accordion open and can expand only one panel at a time." data-title="" data-learn-more="/doc/134506/accordion" data-examples-url="/c/accordion-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/462724/accordion-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Accordion</div> <p class="feature-description narrow" style="">Add the Accordion to present tabbed data in the form of expanding and collapsing panels. You can see only one panel of the Accordion open and can expand only one panel at a time.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=" display:none;"> <a href="/feature/table-461174" data-detail-link="0" data-type-video="0" data-lang="" data-id="461174" data-url="https://images04.nicepage.com/feature/461174/table.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Table. Organize your text data in Tables. Unlike the Grid Element, the Table can contain only texts and icons in the text. You can use the Table element to create pricing tables, time tables, schedules, and more." data-title="" data-learn-more="/doc/97196/table" data-examples-url="/c/table-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/461174/table-small.jpg" alt="Table" /> </div> <div class="feature-meta"> <div class="feature-title ">Table</div> <p class="feature-description narrow" style="">Organize your text data in Tables. Unlike the Grid Element, the Table can contain only texts and icons in the text. You can use the Table element to create pricing tables, time tables, schedules, and more.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=" display:none;"> <a href="/feature/faq-424988" data-detail-link="0" data-type-video="1" data-lang="" data-id="424988" data-url="https://images04.nicepage.com/feature/424988/faq.mp4" data-target="#feature-modal-preview" onclick="return false;" title="FAQ. Organize your questions and answers with the FAQ Element into the one Frequently Asked Questions structure. Your users can click on the question's row to expand and collapse it to see the answer." data-title="" data-learn-more="/doc/143739/faq" data-examples-url="/c/faq-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/424988/faq-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">FAQ</div> <p class="feature-description narrow" style="">Organize your questions and answers with the FAQ Element into the one Frequently Asked Questions structure. Your users can click on the question's row to expand and collapse it to see the answer.</p> </div> </div> </a> </li> </ul> <div class="show-all-features"> <a href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><path d="M3.2,6.3c-0.3,0.3-0.3,0.8,0,1.2l3.5,4c0.7,0.8,1.8,0.8,2.5,0l3.5-4c0,0,0,0,0,0c0.3-0.3,0.3-0.9,0-1.2 c-0.3-0.3-0.8-0.3-1.1,0l-3.5,4c-0.1,0.1-0.3,0.1-0.4,0l-3.5-4C4,6,3.5,6,3.2,6.3z" /></svg> </span> </a> </div> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/supported-systems">Supported Systems</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Download and install the Nicepage Application for Windows or Mac OS, WordPress Plugin, and Joomla Extension or work with Nicepage Online to build mobile-friendly websites and themes.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/supported-systems" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="intro-layout fixed"> <div class="row"> <div class="col-sm-12"> <div class="text-block"> </div> <div class="image-block"> <a title="Supported Systems" href="/features/c/supported-systems"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/531942/supported-systems.jpg" alt="Supported Systems" title="Supported Systems" /> </a> </div> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="features-cards "> <div class="layout-row"> <div class="layout-cell cell-size-5" style=""> <a href="/feature/windows-application-429377" data-detail-link="0" data-type-video="0" data-lang="" data-id="429377" data-url="https://images04.nicepage.com/feature/429377/windows-application.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Windows Application. Download the Nicepage Application for Windows to get all the powerful features in one package. Design websites and themes, build blog and eCommerce templates." data-title="" data-learn-more="/doc/67063/installation-on-windows" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/429377/windows-application-small.jpg" alt="Windows Application" /> </div> <div class="feature-meta"> <div class="feature-title ">Windows Application</div> <p class="feature-description " style="display:none;">Download the Nicepage Application for Windows to get all the powerful features in one package. Design websites and themes, build blog and eCommerce templates.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-5" style=""> <a href="/feature/mac-os-application-429373" data-detail-link="0" data-type-video="0" data-lang="" data-id="429373" data-url="https://images04.nicepage.com/feature/429373/mac-os-application.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Mac OS Application. Download and install the Nicepage Application for Mac OS to start building and editing websites and themes on your computer. Use user-friendly intuitive editor, modify properties and options, blog, and eCommerce templates easily." data-title="" data-learn-more="/doc/67064/installation-on-mac-os" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/429373/mac-os-application-small.jpg" alt="Mac OS Application" /> </div> <div class="feature-meta"> <div class="feature-title ">Mac OS Application</div> <p class="feature-description " style="display:none;">Download and install the Nicepage Application for Mac OS to start building and editing websites and themes on your computer. Use user-friendly intuitive editor, modify properties and options, blog, and eCommerce templates easily.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-5" style=""> <a href="/feature/wordpress-plugin-431815" data-detail-link="0" data-type-video="0" data-lang="" data-id="431815" data-url="https://images04.nicepage.com/feature/431815/wordpress-plugin.jpg" data-target="#feature-modal-preview" onclick="return false;" title="WordPress Plugin. Use Nicepage directly in your WordPress. Build design, add Images, edit Content - all from your favorite CMS. Add the power of modern responsive layouts to your web pages and templates. Work directly on your WordPress." data-title="" data-learn-more="/doc/66707/installation-of-wordpress-theme-and-pages" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/431815/wordpress-plugin-small.jpg" alt="WordPress Plugin" /> </div> <div class="feature-meta"> <div class="feature-title ">WordPress Plugin</div> <p class="feature-description " style="display:none;">Use Nicepage directly in your WordPress. Build design, add Images, edit Content - all from your favorite CMS. Add the power of modern responsive layouts to your web pages and templates. Work directly on your WordPress.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-5" style=""> <a href="/feature/joomla-extension-431816" data-detail-link="0" data-type-video="0" data-lang="" data-id="431816" data-url="https://images04.nicepage.com/feature/431816/joomla-extension.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Joomla Extension. Add the beautiful design to your Joomla articles. You can use the Nicepage Joomla Editor Extension the same way you work on your desktop. Our Joomla Extension helps create modern responsive web pages with rich texts, images, and layouts directly on your Joomla website." data-title="" data-learn-more="/doc/70107/installation-of-joomla-template-and-articles" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/431816/joomla-extension-small.jpg" alt="Joomla Extension" /> </div> <div class="feature-meta"> <div class="feature-title ">Joomla Extension</div> <p class="feature-description " style="display:none;">Add the beautiful design to your Joomla articles. You can use the Nicepage Joomla Editor Extension the same way you work on your desktop. Our Joomla Extension helps create modern responsive web pages with rich texts, images, and layouts directly on your Joomla website.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-5" style=""> <a href="/feature/web-application-490092" data-detail-link="0" data-type-video="0" data-lang="" data-id="490092" data-url="https://images04.nicepage.com/feature/490092/web-application.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Web Application. Get started and work with Nicepage Online from anywhere easily. You get the Web Application with hosting to begin designing your unique mobile-friendly websites with no coding and as you want." data-title="" data-learn-more="/doc/1316/getting-started-online" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/490092/web-application-small.jpg" alt="Web Application" /> </div> <div class="feature-meta"> <div class="feature-title ">Web Application</div> <p class="feature-description " style="display:none;">Get started and work with Nicepage Online from anywhere easily. You get the Web Application with hosting to begin designing your unique mobile-friendly websites with no coding and as you want.</p> </div> </div> </a> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/visual-page-editor">Visual Page Editor</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Use the Visual Page Editor to edit content like text, images, grids, and other elements using the powerful drag-and-drop positioning. It is very time-saving as it requires no coding to design any websites, themes, eCommerce templates, and blog posts.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/visual-page-editor" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="intro-layout fixed"> <div class="row"> <div class="col-sm-12"> <div class="text-block"> </div> <div class="image-block"> <a title="Visual Page Editor" href="/features/c/visual-page-editor"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/537312/visual-page-editor.jpg" alt="Visual Page Editor" title="Visual Page Editor" /> </a> </div> </div> </div> </div> </div> </div> <div class="features-block"> <div class="row"> <div class="col-md-12"> <div class="custom-block "> <div class="features-grid"> <ul class="thumbnails-loading list-unstyled"> <li class="thumbnail-item " style=""> <a href="/feature/expand-image-421309" data-detail-link="0" data-type-video="1" data-lang="" data-id="421309" data-url="https://images04.nicepage.com/feature/421309/expand-image.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Expand Image. Turn your image into a background in one click. And, if needed, collapse any image background to an image with a click and place it in your layout." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/421309/expand-image-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Expand Image</div> <p class="feature-description narrow" style="">Turn your image into a background in one click. And, if needed, collapse any image background to an image with a click and place it in your layout.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/drag-and-drop-434857" data-detail-link="0" data-type-video="1" data-lang="" data-id="434857" data-url="https://images04.nicepage.com/feature/434857/drag-and-drop.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Drag and Drop. Design your web pages and templates by drag and drop. Enjoy your works while building beautiful websites in a playful manner with no coding. Design and customize your design with our revolutionary freehand Editor. It is intuitive, visual, easy-to-use, freehand, drag-and-drop. Using Nicepage is similar to working in Microsoft PowerPoint, Apple Keynote, and professional design systems like Adobe Photoshop and Adobe XD." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/434857/drag-and-drop-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Drag and Drop</div> <p class="feature-description narrow" style="">Design your web pages and templates by drag and drop. Enjoy your works while building beautiful websites in a playful manner with no coding. Design and customize your design with our revolutionary freehand Editor. It is intuitive, visual, easy-to-use, freehand, drag-and-drop. Using Nicepage is similar to working in Microsoft PowerPoint, Apple Keynote, and professional design systems like Adobe Photoshop and Adobe XD.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/move-block-444421" data-detail-link="0" data-type-video="1" data-lang="" data-id="444421" data-url="https://images04.nicepage.com/feature/444421/move-block.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Move Block. Switch Block Positions easily in the Page Navigator. You can also use the Arrows in the Block Sidebar and Content Toolbar to move Blocks up and down in the Editor." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/444421/move-block-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Move Block</div> <p class="feature-description narrow" style="">Switch Block Positions easily in the Page Navigator. You can also use the Arrows in the Block Sidebar and Content Toolbar to move Blocks up and down in the Editor.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/resize-element-444557" data-detail-link="0" data-type-video="1" data-lang="" data-id="444557" data-url="https://images04.nicepage.com/feature/444557/resize-element.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Resize Element. Drag markers for images, texts, and other Elements to resize. You can hold the SHIFT key to resize proportionally and the ALT key for fixing the center. You can follow and snap to the red magnetic guides for precision." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/444557/resize-element-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Resize Element</div> <p class="feature-description narrow" style="">Drag markers for images, texts, and other Elements to resize. You can hold the SHIFT key to resize proportionally and the ALT key for fixing the center. You can follow and snap to the red magnetic guides for precision.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/smart-magnetic-guides-519183" data-detail-link="0" data-type-video="1" data-lang="" data-id="519183" data-url="https://images04.nicepage.com/feature/519183/smart-magnetic-guides.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Smart Magnetic Guides. Use the Smart Magnetic Guides to align and perfect the position of elements in the design. You can see the quick guides while moving an element that snaps to other elements and containers. They are very helpful for the alignment, editing, and transforming elements relative to other elements and containers when you design a website." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/519183/smart-magnetic-guides-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Smart Magnetic Guides</div> <p class="feature-description narrow" style="">Use the Smart Magnetic Guides to align and perfect the position of elements in the design. You can see the quick guides while moving an element that snaps to other elements and containers. They are very helpful for the alignment, editing, and transforming elements relative to other elements and containers when you design a website.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/distances-520436" data-detail-link="0" data-type-video="1" data-lang="" data-id="520436" data-url="https://images04.nicepage.com/feature/520436/distances.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Distances. You can measure the Distances between elements in a Block while dragging and aligning by the Smart Magnetic Guides. You see the Distances while measuring the spacing between, Texts, Images, Icons, Shapes, etc., and inside Groups and Grids, and other container elements." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/520436/distances-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Distances</div> <p class="feature-description narrow" style="">You can measure the Distances between elements in a Block while dragging and aligning by the Smart Magnetic Guides. You see the Distances while measuring the spacing between, Texts, Images, Icons, Shapes, etc., and inside Groups and Grids, and other container elements.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/resize-block-520898" data-detail-link="0" data-type-video="1" data-lang="" data-id="520898" data-url="https://images04.nicepage.com/feature/520898/resize-block.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Resize Block. Resize Blocks by simply clicking and dragging the bar markers on the top or bottom of any Block. While resizing, you can see the distances before and after the Elements placed inside a Block." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/520898/resize-block-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Resize Block</div> <p class="feature-description narrow" style="">Resize Blocks by simply clicking and dragging the bar markers on the top or bottom of any Block. While resizing, you can see the distances before and after the Elements placed inside a Block.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/crop-image-521000" data-detail-link="0" data-type-video="1" data-lang="" data-id="521000" data-url="https://images04.nicepage.com/feature/521000/crop-image.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Crop Image. Crop your images to focus the viewer's sight on an object in the picture. You can also zoom the image while cropping to get the perfect fit to your layout and highlight your design idea." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/521000/crop-image-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Crop Image</div> <p class="feature-description narrow" style="">Crop your images to focus the viewer's sight on an object in the picture. You can also zoom the image while cropping to get the perfect fit to your layout and highlight your design idea.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/multi-select-elements-709245" data-detail-link="0" data-type-video="1" data-lang="" data-id="709245" data-url="https://images04.nicepage.com/feature/709245/multi-select-elements.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Multi-Select Elements. You can select multiple elements by clicking and dragging a cursor around the area. You can move, align, duplicate all multi-selected elements together, and convert them into a Group or Grid Repeater if needed." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/709245/multi-select-elements-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Multi-Select Elements</div> <p class="feature-description narrow" style="">You can select multiple elements by clicking and dragging a cursor around the area. You can move, align, duplicate all multi-selected elements together, and convert them into a Group or Grid Repeater if needed.</p> </div> </div> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/design-elements">Design Elements</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Design your great-looking pages with essential web design elements, like Text, Image, Hyperlink, Icon, Shape, and Button. You can place all design elements freely in the Editor with the powerful drag-and-drop.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/design-elements" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="intro-layout fixed"> <div class="row"> <div class="col-sm-12"> <div class="text-block"> </div> <div class="image-block"> <a title="Design Elements" href="/features/c/design-elements"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/535612/design-elements.jpg" alt="Design Elements" title="Design Elements" /> </a> </div> </div> </div> </div> </div> </div> <div class="features-block"> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var thumbSlider = $('.thumbnail-slider'); thumbSlider.thumbnailSlider(); }); </script> <div class="custom-block "> <div class="thumbnail-slider "> <div class="thumbnail-slider-viewport-wrapper"> <div class="thumbnail-slider-viewport"> <div class="thumbnail-slider-list "> <a href="/feature/text-element-476595" data-detail-link="1" data-type-video="0" data-lang="" data-id="476595" data-url="https://images04.nicepage.com/feature/476595/text-element.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Text Element. Insert the Text Element to define a text. You can use the standard formatting to emphasize the part of the text in Bold, Italic, and others. You can apply the uppercase and choose various colors and sizes for pieces of the text." data-title="" data-learn-more="/feature/text-element-476595" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476595/text-element-small.jpg" alt="Text Element" /> </div> <div class="feature-meta"> <div class="feature-title ">Text Element</div> <p class="feature-description narrow" style="">Insert the Text Element to define a text. You can use the standard formatting to emphasize the part of the text in Bold, Italic, and others. You can apply the uppercase and choose various colors and sizes for pieces of the text.</p> </div> </div> </a> <a href="/feature/image-element-476806" data-detail-link="0" data-type-video="0" data-lang="" data-id="476806" data-url="https://images04.nicepage.com/feature/476806/image-element.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Image Element. Embed the images into your web pages with the Image Element. You can drag images from the desktop. The Image Elements supports all the primary formats for the pictures, including SVG and WEBP." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476806/image-element-small.jpg" alt="Image Element" /> </div> <div class="feature-meta"> <div class="feature-title ">Image Element</div> <p class="feature-description narrow" style="">Embed the images into your web pages with the Image Element. You can drag images from the desktop. The Image Elements supports all the primary formats for the pictures, including SVG and WEBP.</p> </div> </div> </a> <a href="/feature/icon-element-476828" data-detail-link="0" data-type-video="0" data-lang="" data-id="476828" data-url="https://images04.nicepage.com/feature/476828/icon-element.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Icon Element. Icons are small vector or raster images illustrating and explaining your text ideas. They improve the design of your web pages. You can choose from the library of 1’000’000+ icons or upload your own icon." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476828/icon-element-small.jpg" alt="Icon Element" /> </div> <div class="feature-meta"> <div class="feature-title ">Icon Element</div> <p class="feature-description narrow" style="">Icons are small vector or raster images illustrating and explaining your text ideas. They improve the design of your web pages. You can choose from the library of 1’000’000+ icons or upload your own icon.</p> </div> </div> </a> <a href="/feature/button-element-481899" data-detail-link="0" data-type-video="0" data-lang="" data-id="481899" data-url="https://images04.nicepage.com/feature/481899/button-element.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Button Element. The Button is the primary call-to-action element of your web pages. You can stylize each Button State separately and align Buttons in one row. You can also use the Button Presets, copy and paste the Button Styles." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/481899/button-element-small.jpg" alt="Button Element" /> </div> <div class="feature-meta"> <div class="feature-title ">Button Element</div> <p class="feature-description narrow" style="">The Button is the primary call-to-action element of your web pages. You can stylize each Button State separately and align Buttons in one row. You can also use the Button Presets, copy and paste the Button Styles.</p> </div> </div> </a> <a href="/feature/hyperlink-element-481903" data-detail-link="0" data-type-video="0" data-lang="" data-id="481903" data-url="https://images04.nicepage.com/feature/481903/hyperlink-element.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Hyperlink Element. The Hyperlink is a text working similar to the Button to call action or go to a specified destination. The Hyperlink? like the Button, has States. However, you can stylize it more similar to the Text Element, and add Icons." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/481903/hyperlink-element-small.jpg" alt="Hyperlink Element" /> </div> <div class="feature-meta"> <div class="feature-title ">Hyperlink Element</div> <p class="feature-description narrow" style="">The Hyperlink is a text working similar to the Button to call action or go to a specified destination. The Hyperlink? like the Button, has States. However, you can stylize it more similar to the Text Element, and add Icons.</p> </div> </div> </a> <a href="/feature/shapes-481905" data-detail-link="0" data-type-video="0" data-lang="" data-id="481905" data-url="https://images04.nicepage.com/feature/481905/shapes.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Shapes. Shapes allow improving the graphics of your web pages by adding various modern vector figures. You can resize the Shapes without distortion, add the Fill, and use the Gradient and Shadow on basic shapes, like Rectangles and Circles." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/481905/shapes-small.jpg" alt="Shapes" /> </div> <div class="feature-meta"> <div class="feature-title ">Shapes</div> <p class="feature-description narrow" style="">Shapes allow improving the graphics of your web pages by adding various modern vector figures. You can resize the Shapes without distortion, add the Fill, and use the Gradient and Shadow on basic shapes, like Rectangles and Circles.</p> </div> </div> </a> </div> </div> </div> <a class="thumbnail-slider-control left off" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M9.53 11.71L5.99 8.18a.25.25 0 0 1 0-.36L9.53 4.3a.75.75 0 1 0-1.06-1.06L4.93 6.76c-.68.69-.68 1.8 0 2.48l3.54 3.53a.75.75 0 0 0 1.06-1.06z"></path> </svg> </span> </a> <a class="thumbnail-slider-control right" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M6.47 4.29l3.54 3.53c.1.1.1.26 0 .36L6.47 11.7a.75.75 0 1 0 1.06 1.06l3.54-3.53c.68-.69.68-1.8 0-2.48L7.53 3.23a.75.75 0 0 0-1.06 1.06z"></path> </svg> </span> </a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/feature/form-builder-458435">Contact Form Builder</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Build contact forms with the best free website creator. With no coding, it is easy to use to create forms for collecting feedback, leads, or data for mailing lists or registrations and sign-ups on your website. You can create custom contact forms in minutes with drag and drop, customize them visually, and instantly preview them in all responsive modes for mobile devices.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/feature/form-builder-458435" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="row"> <div class="col-md-12"> <div class="custom-block "> <div class="features-grid"> <ul class="thumbnails-loading list-unstyled"> </ul> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/e-commerce">E-Сommerce</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Start your E-Commerce by editing Products, setting up Elements, and designing Page Templates for your online stores built with Nicepage to sell goods or services instantly. You can make a unique E-Commerce design of an HTML website, a WooCommerce theme, or a VirtueMart template to stand out from your competitors.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/e-commerce" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="features-cards "> <div class="layout-row"> <div class="layout-cell cell-size-6" style=""> <a href="/feature/product-list-461192" data-detail-link="0" data-type-video="0" data-lang="" data-id="461192" data-url="https://images04.nicepage.com/feature/461192/product-list.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Product List. Show the latest Products on any page of your website, including the home page. You can specify layouts and choose the number of posts to display." data-title="" data-learn-more="" data-examples-url="/c/product-list-html-templates"> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/461192/product-list-small.jpg" alt="Product List" /> </div> <div class="feature-meta"> <div class="feature-title ">Product List</div> <p class="feature-description " style="">Show the latest Products on any page of your website, including the home page. You can specify layouts and choose the number of posts to display.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-6" style=""> <a href="/feature/product-details-461198" data-detail-link="0" data-type-video="0" data-lang="" data-id="461198" data-url="https://images04.nicepage.com/feature/461198/product-details.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Product Details. Present the featured Product on your website pages. You can modify the layout and stylize the product block to give it a unique look." data-title="" data-learn-more="" data-examples-url="/c/product-details-html-templates"> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/461198/product-details-small.jpg" alt="Product Details" /> </div> <div class="feature-meta"> <div class="feature-title ">Product Details</div> <p class="feature-description " style="">Present the featured Product on your website pages. You can modify the layout and stylize the product block to give it a unique look.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-6" style=""> <a href="/feature/shopping-cart-icon-461261" data-detail-link="0" data-type-video="0" data-lang="" data-id="461261" data-url="https://images04.nicepage.com/feature/461261/shopping-cart-icon.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Shopping Cart Icon. Add the Shopping Cart icon to your website header, which will show the number of added products to the cart and allow you to open the checkout page with a click." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/461261/shopping-cart-icon-small.jpg" alt="Shopping Cart Icon" /> </div> <div class="feature-meta"> <div class="feature-title ">Shopping Cart Icon</div> <p class="feature-description " style="">Add the Shopping Cart icon to your website header, which will show the number of added products to the cart and allow you to open the checkout page with a click.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-6" style=""> <a href="/feature/shopping-cart-template-490294" data-detail-link="0" data-type-video="0" data-lang="" data-id="490294" data-url="https://images04.nicepage.com/feature/490294/shopping-cart-template.png" data-target="#feature-modal-preview" onclick="return false;" title="Shopping Cart Template. The Shopping Cart Template is a concluding page of any online store. It should include product summary, quantity, price, totals, other essential data, and most importantly, proceed to checkout button." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/490294/shopping-cart-template-small.png" alt="Shopping Cart Template" /> </div> <div class="feature-meta"> <div class="feature-title ">Shopping Cart Template</div> <p class="feature-description " style="">The Shopping Cart Template is a concluding page of any online store. It should include product summary, quantity, price, totals, other essential data, and most importantly, proceed to checkout button.</p> </div> </div> </a> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/media-libraries">Media Libraries</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Use our rich media libraries to add images and icons to your pages. You can also use our fully responsive web templates as the easy start of your web design creation process and expand any of your websites with our designer-made blocks.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/media-libraries" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="intro-layout fixed"> <div class="row"> <div class="col-sm-12"> <div class="text-block"> </div> <div class="image-block"> <a title="Media Libraries" href="/features/c/media-libraries"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/546036/media-libraries.jpg" alt="Media Libraries" title="Media Libraries" /> </a> </div> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="features-cards fixed"> <div class="layout-row"> <div class="layout-cell cell-size-4" style=""> <a href="/feature/25m-icon-collection-518701" data-detail-link="0" data-type-video="0" data-lang="" data-id="518701" data-url="https://images04.nicepage.com/feature/518701/2-5m-icon-collection.jpg" data-target="#feature-modal-preview" onclick="return false;" title="2.5M+ Icon Collection. Use millions of beautiful icons perfect for any website design. All icons are vector-based, fully sizable, and adjusted to any web layout. The Icons come in various styles, including Colored, Solid Fill, and Linear. You can also upload your icons and apply icon presets." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/518701/2-5m-icon-collection-small.jpg" alt="2.5M+ Icon Collection" /> </div> <div class="feature-meta"> <div class="feature-title ">2.5M+ Icon Collection</div> <p class="feature-description " style="">Use millions of beautiful icons perfect for any website design. All icons are vector-based, fully sizable, and adjusted to any web layout. The Icons come in various styles, including Colored, Solid Fill, and Linear. You can also upload your icons and apply icon presets.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/3m-image-library-518671" data-detail-link="0" data-type-video="0" data-lang="" data-id="518671" data-url="https://images04.nicepage.com/feature/518671/3m-image-library.jpg" data-target="#feature-modal-preview" onclick="return false;" title="3M+ Image Library. Get access to millions of free and paid photos, vector illustrations, and cut-outs. Quickly search and find necessary images by topic and reuse them later from the My Images collection. You can also upload your photos and vector SVG images if needed." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/518671/3m-image-library-small.jpg" alt="3M+ Image Library" /> </div> <div class="feature-meta"> <div class="feature-title ">3M+ Image Library</div> <p class="feature-description " style="">Get access to millions of free and paid photos, vector illustrations, and cut-outs. Quickly search and find necessary images by topic and reuse them later from the My Images collection. You can also upload your photos and vector SVG images if needed.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/7000-block-designs-518709" data-detail-link="0" data-type-video="0" data-lang="" data-id="518709" data-url="https://images04.nicepage.com/feature/518709/7-000-block-designs.jpg" data-target="#feature-modal-preview" onclick="return false;" title="7'000+ Block Designs. You can create websites from ready-made blocks. Enjoy your web design process, as you can now play with Blocks like with the Lego bricks for websites." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/518709/7-000-block-designs-small.jpg" alt="7'000+ Block Designs" /> </div> <div class="feature-meta"> <div class="feature-title ">7'000+ Block Designs</div> <p class="feature-description " style="">You can create websites from ready-made blocks. Enjoy your web design process, as you can now play with Blocks like with the Lego bricks for websites.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/1000-web-page-templates-518704" data-detail-link="0" data-type-video="0" data-lang="" data-id="518704" data-url="https://images04.nicepage.com/feature/518704/1000-web-page-templates.jpg" data-target="#feature-modal-preview" onclick="return false;" title="1000+ Web Page Templates. Design your new website in minutes. Start with the collection of designer-made templates for web pages. All templates are fully customizable and mobile-friendly. You can create any kind of website you like or want to build for your clients." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/518704/1000-web-page-templates-small.jpg" alt="1000+ Web Page Templates" /> </div> <div class="feature-meta"> <div class="feature-title ">1000+ Web Page Templates</div> <p class="feature-description " style="">Design your new website in minutes. Start with the collection of designer-made templates for web pages. All templates are fully customizable and mobile-friendly. You can create any kind of website you like or want to build for your clients.</p> </div> </div> </a> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/element-properties">Element Properties</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>The Element Properties make it easy to customize and fine-tune the web and design elements to control all details and aspects of your web design to build a professional website.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/element-properties" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="row"> <div class="col-md-12"> <div class="custom-block "> <div class="features-grid"> <ul class="thumbnails-loading list-unstyled"> <li class="thumbnail-item " style=""> <a href="/feature/900-google-fonts-425844" data-detail-link="0" data-type-video="0" data-lang="" data-id="425844" data-url="https://images04.nicepage.com/feature/425844/900-google-fonts.jpg" data-target="#feature-modal-preview" onclick="return false;" title="900+ Google Fonts. Use over 900 Google Fonts on your web pages. You can add Google Fonts in the Nicepage Applications, WordPress and Joomla Plugins. " data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/425844/900-google-fonts-small.jpg" alt="900+ Google Fonts" /> </div> <div class="feature-meta"> <div class="feature-title ">900+ Google Fonts</div> <p class="feature-description narrow" style="">Use over 900 Google Fonts on your web pages. You can add Google Fonts in the Nicepage Applications, WordPress and Joomla Plugins. </p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/80-grid-layouts-447593" data-detail-link="0" data-type-video="0" data-lang="" data-id="447593" data-url="https://images04.nicepage.com/feature/447593/80-grid-layouts.jpg" data-target="#feature-modal-preview" onclick="return false;" title="80+ Grid Layouts. Get the widest variety of Grid layouts for your web design. The Grid Elements helps you to make your designs mobile-friendly automatically." data-title="" data-learn-more="" data-examples-url="/c/grid-html-templates"> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/447593/80-grid-layouts-small.jpg" alt="80+ Grid Layouts" /> </div> <div class="feature-meta"> <div class="feature-title ">80+ Grid Layouts</div> <p class="feature-description narrow" style="">Get the widest variety of Grid layouts for your web design. The Grid Elements helps you to make your designs mobile-friendly automatically.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/shadow-481912" data-detail-link="0" data-type-video="0" data-lang="" data-id="481912" data-url="https://images04.nicepage.com/feature/481912/shadow.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Shadow. Apply the Shadow to the Text, Image, Group, Basic Shapes, and others. You can use many Shadow Presets, customize, copy and paste the Shadow effect on your web pages." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/481912/shadow-small.jpg" alt="Shadow" /> </div> <div class="feature-meta"> <div class="feature-title ">Shadow</div> <p class="feature-description narrow" style="">Apply the Shadow to the Text, Image, Group, Basic Shapes, and others. You can use many Shadow Presets, customize, copy and paste the Shadow effect on your web pages.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/on-scroll-animation-481913" data-detail-link="0" data-type-video="1" data-lang="" data-id="481913" data-url="https://images04.nicepage.com/feature/481913/on-scroll-animation.mp4" data-target="#feature-modal-preview" onclick="return false;" title="On-Scroll Animation. Animation is an effect used on all kinds of web components. It can occur as visitors scroll through your web page, which draws their attention to an element by adding some entertainment and engagement. Nicepage offers all the basic Animation Effects to help you make Text stand out. Select an Element and choose a desired Animation Effect on the Property Panel. In addition, you can control it by defining the start time of the playback and its duration." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/481913/on-scroll-animation-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">On-Scroll Animation</div> <p class="feature-description narrow" style="">Animation is an effect used on all kinds of web components. It can occur as visitors scroll through your web page, which draws their attention to an element by adding some entertainment and engagement. Nicepage offers all the basic Animation Effects to help you make Text stand out. Select an Element and choose a desired Animation Effect on the Property Panel. In addition, you can control it by defining the start time of the playback and its duration.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/background-484189" data-detail-link="0" data-type-video="1" data-lang="" data-id="484189" data-url="https://images04.nicepage.com/feature/484189/background.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Background. Add Background to your Shape, Icons, Groups, and even Page. You can choose between the solid Fill, Gradient, Image, and Video." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/484189/background-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Background</div> <p class="feature-description narrow" style="">Add Background to your Shape, Icons, Groups, and even Page. You can choose between the solid Fill, Gradient, Image, and Video.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/color-presets-484203" data-detail-link="0" data-type-video="0" data-lang="" data-id="484203" data-url="https://images04.nicepage.com/feature/484203/color-presets.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Color Presets. Color Presets help you to get the variety of Shades of the selected Palette. You get the shades automatically for any new Color you modify in the Palette." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/484203/color-presets-small.jpg" alt="Color Presets" /> </div> <div class="feature-meta"> <div class="feature-title ">Color Presets</div> <p class="feature-description narrow" style="">Color Presets help you to get the variety of Shades of the selected Palette. You get the shades automatically for any new Color you modify in the Palette.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/transparency-484204" data-detail-link="0" data-type-video="1" data-lang="" data-id="484204" data-url="https://images04.nicepage.com/feature/484204/transparency.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Transparency. Transparency is the opposite of opacity, and it shows the percentage of visibility of content behind an element. It is a very popular effect in modern web design." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/484204/transparency-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Transparency</div> <p class="feature-description narrow" style="">Transparency is the opposite of opacity, and it shows the percentage of visibility of content behind an element. It is a very popular effect in modern web design.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/border-484221" data-detail-link="0" data-type-video="1" data-lang="" data-id="484221" data-url="https://images04.nicepage.com/feature/484221/border.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Border. The Border is an essential and very popular effect in web design. You can add the Border to Shapes, Icons, Groups, and Grids." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/484221/border-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Border</div> <p class="feature-description narrow" style="">The Border is an essential and very popular effect in web design. You can add the Border to Shapes, Icons, Groups, and Grids.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/radius-484230" data-detail-link="0" data-type-video="1" data-lang="" data-id="484230" data-url="https://images04.nicepage.com/feature/484230/radius.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Radius. Use the Radius property to define the radius of the Element's corners. This property allows you to add rounded corners to Shapes and Containers." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/484230/radius-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Radius</div> <p class="feature-description narrow" style="">Use the Radius property to define the radius of the Element's corners. This property allows you to add rounded corners to Shapes and Containers.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/color-picker-490381" data-detail-link="0" data-type-video="0" data-lang="" data-id="490381" data-url="https://images04.nicepage.com/feature/490381/color-picker.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Color Picker. Use the Color Picker to select custom colors and create color schemes for your themes. It is an essential feature of any graphical user interface." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/490381/color-picker-small.jpg" alt="Color Picker" /> </div> <div class="feature-meta"> <div class="feature-title ">Color Picker</div> <p class="feature-description narrow" style="">Use the Color Picker to select custom colors and create color schemes for your themes. It is an essential feature of any graphical user interface.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=" display:none;"> <a href="/feature/video-background-520903" data-detail-link="0" data-type-video="1" data-lang="" data-id="520903" data-url="https://images04.nicepage.com/feature/520903/video-background.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Video Background. Add videos as background to Groups, Cells, and Blocks. You can use the link to YouTube and Vimeo, your server links to videos, and upload video files." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/520903/video-background-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Video Background</div> <p class="feature-description narrow" style="">Add videos as background to Groups, Cells, and Blocks. You can use the link to YouTube and Vimeo, your server links to videos, and upload video files.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=" display:none;"> <a href="/feature/font-556222" data-detail-link="0" data-type-video="0" data-lang="" data-id="556222" data-url="https://images04.nicepage.com/feature/556222/font.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Font. The Fort Property is essential for styling any text Elements like Headings, Text, Hyperlink, Lists, etc. It sets the font family, boldness, variant, size, line height. And you can use this property to specify the overall Theme Typography and individual font properties of any Text Element." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/556222/font-small.jpg" alt="Font" /> </div> <div class="feature-meta"> <div class="feature-title ">Font</div> <p class="feature-description narrow" style="">The Fort Property is essential for styling any text Elements like Headings, Text, Hyperlink, Lists, etc. It sets the font family, boldness, variant, size, line height. And you can use this property to specify the overall Theme Typography and individual font properties of any Text Element.</p> </div> </div> </a> </li> </ul> <div class="show-all-features"> <a href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><path d="M3.2,6.3c-0.3,0.3-0.3,0.8,0,1.2l3.5,4c0.7,0.8,1.8,0.8,2.5,0l3.5-4c0,0,0,0,0,0c0.3-0.3,0.3-0.9,0-1.2 c-0.3-0.3-0.8-0.3-1.1,0l-3.5,4c-0.1,0.1-0.3,0.1-0.4,0l-3.5-4C4,6,3.5,6,3.2,6.3z" /></svg> </span> </a> </div> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block gray-block"> <h2 class=>Download Free Website Builder</h2> </div> </div> <div class="features-block"> <div class="custom-block gray-block"> <p class=>Download the best website builder for Windows and Mac OS today for free. Start generating mobile-friendly websites and themes that look great on any browser and device.</p> </div> </div> <div class="features-block"> <div class="custom-block gray-block"> <div class="download-buttons"> <a class="btn btn-lg win-download" href="/download-windows" type="button">Download for Windows</a> <a class="btn btn-lg mac-download" href="/download-mac" type="button">Download for Mac</a> </div> </div> </div> <div class="features-block"> <div class="custom-block"> <div class="split-layout "> <div class="split-item" style=" "> <div class="row "> <div class="col-md-5 text-column" style="margin: auto 0;"> <div class="text-block"> <h2 class=" align-left">Mobile-Friendly Web Design</h2> <p class="align-left">The Mobile-Friendly Web Design allows you to adapt the web design of web pages to all main sizes of the device screens and browsers of the mobile devices. Responsive Web Design becomes more and more significant since the number of mobile device users grows every day.</p> <div class="link align-left"> <a class="btn btn-lg" href="/features/c/responsive" type="button">Learn more</a> </div> </div> </div> <div class="col-md-7 image-column" style="margin: auto 0;"> <div class="image-block "> <a href="/feature/mobile-friendly-web-design-502095"> <img width="1100" height="600" class="lazyload" data-src="https://images04.nicepage.com/feature/502095/mobile-friendly-web-design.jpg" alt="Mobile-Friendly Web Design" title="Mobile-Friendly Web Design" /> </a> </div> </div> </div> </div> </div> </div> </div> <div class="features-block"> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var thumbSlider = $('.thumbnail-slider'); thumbSlider.thumbnailSlider(); }); </script> <div class="custom-block "> <div class="thumbnail-slider "> <div class="thumbnail-slider-viewport-wrapper"> <div class="thumbnail-slider-viewport"> <div class="thumbnail-slider-list "> <a href="/feature/auto-adaptation-for-devices-447178" data-detail-link="0" data-type-video="1" data-lang="" data-id="447178" data-url="https://images04.nicepage.com/feature/447178/auto-adaptation-for-devices.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Auto-Adaptation for Devices. Transform Cells and Items automatically to adapt layouts for Responsive Modes. You can use the Grid, List, and Gallery, and other Elements for that." data-title="" data-learn-more="/doc/5249/mobile-friendly-or-responsive-web-design" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/447178/auto-adaptation-for-devices-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Auto-Adaptation for Devices</div> <p class="feature-description narrow" style="">Transform Cells and Items automatically to adapt layouts for Responsive Modes. You can use the Grid, List, and Gallery, and other Elements for that.</p> </div> </div> </a> <a href="/feature/edit-mobile-views-444440" data-detail-link="0" data-type-video="1" data-lang="" data-id="444440" data-url="https://images04.nicepage.com/feature/444440/edit-mobile-views.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Edit Mobile Views. Design your websites for all screens at once. Switch Mobile Views to see how your websites look on Desktops, Laptops, Tablets, and Phones, and edit each Responsive Mode separately." data-title="" data-learn-more="/doc/5249/mobile-friendly-or-responsive-web-design" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/444440/edit-mobile-views-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Edit Mobile Views</div> <p class="feature-description narrow" style="">Design your websites for all screens at once. Switch Mobile Views to see how your websites look on Desktops, Laptops, Tablets, and Phones, and edit each Responsive Mode separately.</p> </div> </div> </a> <a href="/feature/hide-on-device-444649" data-detail-link="0" data-type-video="1" data-lang="" data-id="444649" data-url="https://images04.nicepage.com/feature/444649/hide-on-device.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Hide on Device. Easily hide Elements, Blocks, and Containers on Mobile Modes separately instead of deleting them in Responsive Views." data-title="" data-learn-more="/doc/5249/mobile-friendly-or-responsive-web-design" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/444649/hide-on-device-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Hide on Device</div> <p class="feature-description narrow" style="">Easily hide Elements, Blocks, and Containers on Mobile Modes separately instead of deleting them in Responsive Views.</p> </div> </div> </a> <a href="/feature/how-grid-works-on-mobile-devices-446928" data-detail-link="0" data-type-video="0" data-lang="" data-id="446928" data-url="https://images04.nicepage.com/feature/446928/how-grid-works-on-mobile-devices.png" data-target="#feature-modal-preview" onclick="return false;" title="How Grid Works On Mobile Devices. Use the Grid Element to make the Responsive Modes easily. On the smaller screens, the Grid Cells move one under another automatically." data-title="" data-learn-more="/doc/17389/responsive-grid" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/446928/how-grid-works-on-mobile-devices-small.png" alt="How Grid Works On Mobile Devices" /> </div> <div class="feature-meta"> <div class="feature-title ">How Grid Works On Mobile Devices</div> <p class="feature-description narrow" style="">Use the Grid Element to make the Responsive Modes easily. On the smaller screens, the Grid Cells move one under another automatically.</p> </div> </div> </a> <a href="/feature/customize-for-devices-444455" data-detail-link="0" data-type-video="1" data-lang="" data-id="444455" data-url="https://images04.nicepage.com/feature/444455/customize-for-devices.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Customize For Devices. Edit each Mobile View to customize for your needs, move cells, change the size, and make each mode of your site stand out." data-title="" data-learn-more="/doc/5249/mobile-friendly-or-responsive-web-design" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/444455/customize-for-devices-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Customize For Devices</div> <p class="feature-description narrow" style="">Edit each Mobile View to customize for your needs, move cells, change the size, and make each mode of your site stand out.</p> </div> </div> </a> </div> </div> </div> <a class="thumbnail-slider-control left off" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M9.53 11.71L5.99 8.18a.25.25 0 0 1 0-.36L9.53 4.3a.75.75 0 1 0-1.06-1.06L4.93 6.76c-.68.69-.68 1.8 0 2.48l3.54 3.53a.75.75 0 0 0 1.06-1.06z"></path> </svg> </span> </a> <a class="thumbnail-slider-control right" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M6.47 4.29l3.54 3.53c.1.1.1.26 0 .36L6.47 11.7a.75.75 0 1 0 1.06 1.06l3.54-3.53c.68-.69.68-1.8 0-2.48L7.53 3.23a.75.75 0 0 0-1.06 1.06z"></path> </svg> </span> </a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/animation-effects">Animation Effects</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Add the Animation Effects to your website, which is a powerful way to draw visitors' attention to essential aspects of your web design. Animation can improve the emotional experience by bringing delight to your web design.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/animation-effects" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="intro-layout fixed"> <div class="row"> <div class="col-sm-12"> <div class="text-block"> </div> <div class="image-block"> <a title="Animation Effects" href="/features/c/animation-effects"> <video data-src="https://images04.nicepage.com/feature/550723/animation-effects.mp4" class="big-video embed-responsive-item lazyload lazyloading" loop="" muted="" autoplay="autoplay" playsinline=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </a> </div> </div> </div> </div> </div> </div> <div class="features-block"> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var thumbSlider = $('.thumbnail-slider'); thumbSlider.thumbnailSlider(); }); </script> <div class="custom-block "> <div class="thumbnail-slider fixed"> <div class="thumbnail-slider-viewport-wrapper"> <div class="thumbnail-slider-viewport"> <div class="thumbnail-slider-list "> <a href="/feature/on-hover-animation-974356" data-detail-link="1" data-type-video="1" data-lang="" data-id="974356" data-url="https://images04.nicepage.com/feature/974356/on-hover-animation-large.mp4" data-target="#feature-modal-preview" onclick="return false;" title="On-Hover Animation. The Hover Effect for an Element is its appearance change when you hover over it. The Hover Animation automatically draws visitors' attention to the Content and improves the engagement and interaction on a website. In the Property Panel, you can change the hover for Color, Border, Radius, Shadow, etc., and set the Duration." data-title="" data-learn-more="/feature/on-hover-animation-974356" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/974356/on-hover-animation-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">On-Hover Animation</div> <p class="feature-description narrow" style="">The Hover Effect for an Element is its appearance change when you hover over it. The Hover Animation automatically draws visitors' attention to the Content and improves the engagement and interaction on a website. In the Property Panel, you can change the hover for Color, Border, Radius, Shadow, etc., and set the Duration.</p> </div> </div> </a> <a href="/feature/animation-on-group-hover-974708" data-detail-link="1" data-type-video="1" data-lang="" data-id="974708" data-url="https://images04.nicepage.com/feature/974708/animation-on-group-hover-large.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Animation On Group Hover. The Element Animation on hovering a Group or a Grid Cell is also interesting. Such animation effects look elegant and natural. Choose an Element in a Group, click on the Property Panel's Hover section link, and then select the Hover checkbox. Select a Preset and then modify the properties to achieve the designed effect." data-title="" data-learn-more="/feature/animation-on-group-hover-974708" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/974708/animation-on-group-hover-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Animation On Group Hover</div> <p class="feature-description narrow" style="">The Element Animation on hovering a Group or a Grid Cell is also interesting. Such animation effects look elegant and natural. Choose an Element in a Group, click on the Property Panel's Hover section link, and then select the Hover checkbox. Select a Preset and then modify the properties to achieve the designed effect.</p> </div> </div> </a> <a href="/feature/animation-start-position-974802" data-detail-link="1" data-type-video="1" data-lang="" data-id="974802" data-url="https://images04.nicepage.com/feature/974802/animation-start-position-large.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Animation Start Position. For Elements in Groups or Grid Cells, you can set the Start Position option to change the start for the Elements, like, Text, Image, Icon, Button, etc., the Move, Scale, Rotate, and Transparency properties On Hover. To modify the Start Position, go to the Property Panel to the right. Click on the Start Position link and edit the needed properties." data-title="" data-learn-more="/feature/animation-start-position-974802" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/974802/animation-start-position-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Animation Start Position</div> <p class="feature-description narrow" style="">For Elements in Groups or Grid Cells, you can set the Start Position option to change the start for the Elements, like, Text, Image, Icon, Button, etc., the Move, Scale, Rotate, and Transparency properties On Hover. To modify the Start Position, go to the Property Panel to the right. Click on the Start Position link and edit the needed properties.</p> </div> </div> </a> <a href="/feature/image-background-hover-animation-974827" data-detail-link="1" data-type-video="1" data-lang="" data-id="974827" data-url="https://images04.nicepage.com/feature/974827/image-background-hover-animation-large.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Image Background Hover Animation. You can add interaction to the Image Galleries and Image Backgrounds to attract and retain visitors' attention. There are several popular presets for the Image Background Hover Animation, including Zoom In and Out, Resize, and Slide, that you can apply to Image Backgrounds. Choose those on the Image Hover Panel while editing Properties to the right. " data-title="" data-learn-more="/feature/image-background-hover-animation-974827" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/974827/image-background-hover-animation-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Image Background Hover Animation</div> <p class="feature-description narrow" style="">You can add interaction to the Image Galleries and Image Backgrounds to attract and retain visitors' attention. There are several popular presets for the Image Background Hover Animation, including Zoom In and Out, Resize, and Slide, that you can apply to Image Backgrounds. Choose those on the Image Hover Panel while editing Properties to the right. </p> </div> </div> </a> <a href="/feature/hover-slider-977981" data-detail-link="1" data-type-video="1" data-lang="" data-id="977981" data-url="https://images04.nicepage.com/feature/977981/hover-slider-large.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Hover Slider. The Hover Slider is an Element with a slide appearing when you hover the mouse on a Group for some time without clicking. It adds interaction to Groups and Grid Cells as you can show different sets of Elements for normal and mouse-hover states. To add the Hover Slide, select a Group. Modify the needed properties in the Hover Slide section of the Property Panel." data-title="" data-learn-more="/feature/hover-slider-977981" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/977981/hover-slider-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Hover Slider</div> <p class="feature-description narrow" style="">The Hover Slider is an Element with a slide appearing when you hover the mouse on a Group for some time without clicking. It adds interaction to Groups and Grid Cells as you can show different sets of Elements for normal and mouse-hover states. To add the Hover Slide, select a Group. Modify the needed properties in the Hover Slide section of the Property Panel.</p> </div> </div> </a> <a href="/feature/on-scroll-animation-985112" data-detail-link="1" data-type-video="1" data-lang="" data-id="985112" data-url="https://images04.nicepage.com/feature/985112/on-scroll-animation-large.mp4" data-target="#feature-modal-preview" onclick="return false;" title="On-Scroll Animation. The Animation On Scroll is the basic effect of loading and scrolling web pages. You can add it by selecting an Element and then going to the Property Panel. Click on the On Scroll link and check the Animation checkbox. Select a Preset and customize the On Scroll Effect if needed. " data-title="" data-learn-more="/feature/on-scroll-animation-985112" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/985112/on-scroll-animation-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">On-Scroll Animation</div> <p class="feature-description narrow" style="">The Animation On Scroll is the basic effect of loading and scrolling web pages. You can add it by selecting an Element and then going to the Property Panel. Click on the On Scroll link and check the Animation checkbox. Select a Preset and customize the On Scroll Effect if needed. </p> </div> </div> </a> </div> </div> </div> <a class="thumbnail-slider-control left off" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M9.53 11.71L5.99 8.18a.25.25 0 0 1 0-.36L9.53 4.3a.75.75 0 1 0-1.06-1.06L4.93 6.76c-.68.69-.68 1.8 0 2.48l3.54 3.53a.75.75 0 0 0 1.06-1.06z"></path> </svg> </span> </a> <a class="thumbnail-slider-control right" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M6.47 4.29l3.54 3.53c.1.1.1.26 0 .36L6.47 11.7a.75.75 0 1 0 1.06 1.06l3.54-3.53c.68-.69.68-1.8 0-2.48L7.53 3.23a.75.75 0 0 0-1.06 1.06z"></path> </svg> </span> </a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/header-footer">Header & Footer</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>The Header and Footer are special blocks shared among all site's pages. The Header usually contains the logo and menu, and the Footer contains the links and copyright information.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/header-footer" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="features-cards fixed"> <div class="layout-row"> <div class="layout-cell cell-size-4" style=""> <a href="/feature/multi-row-header-424996" data-detail-link="0" data-type-video="0" data-lang="" data-id="424996" data-url="https://images04.nicepage.com/feature/424996/multi-row-header.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Multi-Row Header. Combine several Header blocks at the top of your pages into one large Header. It allows placing more information than into the classic one-row Header. You can add Menu, Search Field, Shopping Cart, Social Icons, and Contacts into two and more Header blocks. Usually having different colors for the block backgrounds. It is the most popular on eCommerce websites." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/424996/multi-row-header-small.jpg" alt="Multi-Row Header" /> </div> <div class="feature-meta"> <div class="feature-title ">Multi-Row Header</div> <p class="feature-description " style="">Combine several Header blocks at the top of your pages into one large Header. It allows placing more information than into the classic one-row Header. You can add Menu, Search Field, Shopping Cart, Social Icons, and Contacts into two and more Header blocks. Usually having different colors for the block backgrounds. It is the most popular on eCommerce websites.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/stick-footer-down-425818" data-detail-link="0" data-type-video="0" data-lang="" data-id="425818" data-url="https://images04.nicepage.com/feature/425818/stick-footer-down.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Stick Footer Down. Stick the Footer down to the bottom of any web page. You can apply this option to snap the Footer to the screen's bottom if you do not have enough content to push the Footer down." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/425818/stick-footer-down-small.jpg" alt="Stick Footer Down" /> </div> <div class="feature-meta"> <div class="feature-title ">Stick Footer Down</div> <p class="feature-description " style="">Stick the Footer down to the bottom of any web page. You can apply this option to snap the Footer to the screen's bottom if you do not have enough content to push the Footer down.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/header-471804" data-detail-link="0" data-type-video="0" data-lang="" data-id="471804" data-url="https://images04.nicepage.com/feature/471804/header.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Header. Use the Header, the top shared Block on website pages. It usually contains a logo, a menu, a call to action, contact information, etc. The Header can overlap the next Block and can be sticky on scrolling." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/471804/header-small.jpg" alt="Header" /> </div> <div class="feature-meta"> <div class="feature-title ">Header</div> <p class="feature-description " style="">Use the Header, the top shared Block on website pages. It usually contains a logo, a menu, a call to action, contact information, etc. The Header can overlap the next Block and can be sticky on scrolling.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/logo-471809" data-detail-link="0" data-type-video="0" data-lang="" data-id="471809" data-url="https://images04.nicepage.com/feature/471809/logo.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Logo. Add your company or personal logo to differentiate your website on the web. The logo is an image that can be in any modern graphic format, including SVG and WEBP." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/471809/logo-small.jpg" alt="Logo" /> </div> <div class="feature-meta"> <div class="feature-title ">Logo</div> <p class="feature-description " style="">Add your company or personal logo to differentiate your website on the web. The logo is an image that can be in any modern graphic format, including SVG and WEBP.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/headline-471810" data-detail-link="0" data-type-video="0" data-lang="" data-id="471810" data-url="https://images04.nicepage.com/feature/471810/headline.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Headline. Insert the Нeadline Element into the Header, which you can use as a Title for your website. You can use the Headline instead of the graphic logo and stylize it as any text in the Editor." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/471810/headline-small.jpg" alt="Headline" /> </div> <div class="feature-meta"> <div class="feature-title ">Headline</div> <p class="feature-description " style="">Insert the Нeadline Element into the Header, which you can use as a Title for your website. You can use the Headline instead of the graphic logo and stylize it as any text in the Editor.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/search-471826" data-detail-link="0" data-type-video="0" data-lang="" data-id="471826" data-url="https://images04.nicepage.com/feature/471826/search.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Search. Allow your users to find the required information on your website using the Search Element in the Header. Please note that the Search uses the standard functions of WordPress and Joomla, and to enable it for the HTML website, you will need to write the code." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/471826/search-small.jpg" alt="Search" /> </div> <div class="feature-meta"> <div class="feature-title ">Search</div> <p class="feature-description " style="">Allow your users to find the required information on your website using the Search Element in the Header. Please note that the Search uses the standard functions of WordPress and Joomla, and to enable it for the HTML website, you will need to write the code.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/login-link-476255" data-detail-link="0" data-type-video="0" data-lang="" data-id="476255" data-url="https://images04.nicepage.com/feature/476255/login-link.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Login Link. Insert the Login link to connect to the sign-in page on your website. You can stylize the link if needed." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476255/login-link-small.jpg" alt="Login Link" /> </div> <div class="feature-meta"> <div class="feature-title ">Login Link</div> <p class="feature-description " style="">Insert the Login link to connect to the sign-in page on your website. You can stylize the link if needed.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/website-menu-490451" data-detail-link="0" data-type-video="0" data-lang="" data-id="490451" data-url="https://images04.nicepage.com/feature/490451/website-menu-.png" data-target="#feature-modal-preview" onclick="return false;" title="Website Menu . The menu is the essential navigation element of any website. You can add the menu only to the Header and Footer and create subitems if you have many web pages on your site." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/490451/website-menu--small.png" alt="Website Menu " /> </div> <div class="feature-meta"> <div class="feature-title ">Website Menu </div> <p class="feature-description " style="">The menu is the essential navigation element of any website. You can add the menu only to the Header and Footer and create subitems if you have many web pages on your site.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=" display:none;"> <a href="/feature/footer-552072" data-detail-link="0" data-type-video="0" data-lang="" data-id="552072" data-url="https://images04.nicepage.com/feature/552072/footer.png" data-target="#feature-modal-preview" onclick="return false;" title="Footer. The Footer is a bottom block of any website shared among all web pages containing data common to other pages. The information in footers may include links to pages, posts, or external resources, references, and copyright notices, as well as links to the social accounts, contact and subscribe information, and more." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/552072/footer-small.png" alt="Footer" /> </div> <div class="feature-meta"> <div class="feature-title ">Footer</div> <p class="feature-description " style="">The Footer is a bottom block of any website shared among all web pages containing data common to other pages. The information in footers may include links to pages, posts, or external resources, references, and copyright notices, as well as links to the social accounts, contact and subscribe information, and more.</p> </div> </div> </a> </div> </div> <div class="show-all-features"> <a href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><path d="M3.2,6.3c-0.3,0.3-0.3,0.8,0,1.2l3.5,4c0.7,0.8,1.8,0.8,2.5,0l3.5-4c0,0,0,0,0,0c0.3-0.3,0.3-0.9,0-1.2 c-0.3-0.3-0.8-0.3-1.1,0l-3.5,4c-0.1,0.1-0.3,0.1-0.4,0l-3.5-4C4,6,3.5,6,3.2,6.3z" /></svg> </span> </a> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/seo">SEO</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Set up the properties essential for your website's SEO or search engine optimization. It allows increasing the quantity and quality of your website's traffic and the higher ranking and presentation in search engine results, using organic, in other words, non-paid, methods.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/seo" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var thumbSlider = $('.thumbnail-slider'); thumbSlider.thumbnailSlider(); }); </script> <div class="custom-block "> <div class="thumbnail-slider fixed"> <div class="thumbnail-slider-viewport-wrapper"> <div class="thumbnail-slider-viewport"> <div class="thumbnail-slider-list "> <a href="/feature/seo-page-properties-497087" data-detail-link="0" data-type-video="0" data-lang="" data-id="497087" data-url="https://images04.nicepage.com/feature/497087/seo-page-properties.png" data-target="#feature-modal-preview" onclick="return false;" title="SEO Page Properties. The SEO Properties in the Page Settings allow you to increase your content's chances to appear in the search engine results by adding the appropriate metadata, including Title, Description, Keywords and Canonical if needed." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/497087/seo-page-properties-small.png" alt="SEO Page Properties" /> </div> <div class="feature-meta"> <div class="feature-title ">SEO Page Properties</div> <p class="feature-description narrow" style="">The SEO Properties in the Page Settings allow you to increase your content's chances to appear in the search engine results by adding the appropriate metadata, including Title, Description, Keywords and Canonical if needed.</p> </div> </div> </a> <a href="/feature/headings-for-seo-497094" data-detail-link="0" data-type-video="0" data-lang="" data-id="497094" data-url="https://images04.nicepage.com/feature/497094/headings-for-seo.png" data-target="#feature-modal-preview" onclick="return false;" title="Headings for SEO. The Headings in the text are the critical part of SEO, as they provide the structure and context for your content and break up the text making them scannable for search engines. Also, it is advisable to use keywords in the Headings." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/497094/headings-for-seo-small.png" alt="Headings for SEO" /> </div> <div class="feature-meta"> <div class="feature-title ">Headings for SEO</div> <p class="feature-description narrow" style="">The Headings in the text are the critical part of SEO, as they provide the structure and context for your content and break up the text making them scannable for search engines. Also, it is advisable to use keywords in the Headings.</p> </div> </div> </a> <a href="/feature/image-alt-text-497095" data-detail-link="0" data-type-video="0" data-lang="" data-id="497095" data-url="https://images04.nicepage.com/feature/497095/image-alt-text.png" data-target="#feature-modal-preview" onclick="return false;" title="Image Alt Text. Use the Alt Text property for Images to add keywords and key phrases relevant to the topic of your website. This text allows search engines to crawl and rank your website better, which is good for SEO." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/497095/image-alt-text-small.png" alt="Image Alt Text" /> </div> <div class="feature-meta"> <div class="feature-title ">Image Alt Text</div> <p class="feature-description narrow" style="">Use the Alt Text property for Images to add keywords and key phrases relevant to the topic of your website. This text allows search engines to crawl and rank your website better, which is good for SEO.</p> </div> </div> </a> <a href="/feature/seo-text-highlights-497101" data-detail-link="0" data-type-video="0" data-lang="" data-id="497101" data-url="https://images04.nicepage.com/feature/497101/seo-text-highlights.png" data-target="#feature-modal-preview" onclick="return false;" title="SEO Text Highlights. Emphasize your keyword and key phrases with the highlights in the text. It boosts your keywords importance, which ranks better, and gets better scores in the results of the search engines." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/497101/seo-text-highlights-small.png" alt="SEO Text Highlights" /> </div> <div class="feature-meta"> <div class="feature-title ">SEO Text Highlights</div> <p class="feature-description narrow" style="">Emphasize your keyword and key phrases with the highlights in the text. It boosts your keywords importance, which ranks better, and gets better scores in the results of the search engines.</p> </div> </div> </a> <a href="/feature/seo-plugin-compatibility-498512" data-detail-link="0" data-type-video="0" data-lang="" data-id="498512" data-url="https://images04.nicepage.com/feature/498512/seo-plugin-compatibility.jpg" data-target="#feature-modal-preview" onclick="return false;" title="SEO Plugin Compatibility. Design websites for WordPress fully compatible with the SEO plugins, such are Yoast and RankMath. These plugins are the most popular WordPress tools used for SEO analysis." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/498512/seo-plugin-compatibility-small.jpg" alt="SEO Plugin Compatibility" /> </div> <div class="feature-meta"> <div class="feature-title ">SEO Plugin Compatibility</div> <p class="feature-description narrow" style="">Design websites for WordPress fully compatible with the SEO plugins, such are Yoast and RankMath. These plugins are the most popular WordPress tools used for SEO analysis.</p> </div> </div> </a> <a href="/feature/image-lazy-loading-498759" data-detail-link="0" data-type-video="1" data-lang="" data-id="498759" data-url="https://images04.nicepage.com/feature/498759/image-lazy-loading.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Image Lazy Loading. Lazy Loading is a method allowing to load the page images gradually on a page scrolling. It increases the web page's loading speed since the images are not loaded all at once, which is good for SEO." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/498759/image-lazy-loading-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Image Lazy Loading</div> <p class="feature-description narrow" style="">Lazy Loading is a method allowing to load the page images gradually on a page scrolling. It increases the web page's loading speed since the images are not loaded all at once, which is good for SEO.</p> </div> </div> </a> </div> </div> </div> <a class="thumbnail-slider-control left off" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M9.53 11.71L5.99 8.18a.25.25 0 0 1 0-.36L9.53 4.3a.75.75 0 1 0-1.06-1.06L4.93 6.76c-.68.69-.68 1.8 0 2.48l3.54 3.53a.75.75 0 0 0 1.06-1.06z"></path> </svg> </span> </a> <a class="thumbnail-slider-control right" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M6.47 4.29l3.54 3.53c.1.1.1.26 0 .36L6.47 11.7a.75.75 0 1 0 1.06 1.06l3.54-3.53c.68-.69.68-1.8 0-2.48L7.53 3.23a.75.75 0 0 0-1.06 1.06z"></path> </svg> </span> </a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/custom-code">Custom Code</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Customize your websites by implementing connectivity among various third-party components. If you need, you have the tools to build the integration between applications, databases, or other systems, which data you need to use or output.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/custom-code" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="row"> <div class="col-md-12"> <div class="custom-block "> <div class="features-grid"> <ul class="thumbnails-loading list-unstyled"> <li class="thumbnail-item " style=""> <a href="/feature/custom-html-470115" data-detail-link="0" data-type-video="0" data-lang="" data-id="470115" data-url="https://images04.nicepage.com/feature/470115/custom-html.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Custom HTML. Expand the layouts with custom HTML. You can use HTML and CSS code to add functionality that has not yet been implemented in Nicepage." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/470115/custom-html-small.jpg" alt="Custom HTML" /> </div> <div class="feature-meta"> <div class="feature-title ">Custom HTML</div> <p class="feature-description narrow" style="">Expand the layouts with custom HTML. You can use HTML and CSS code to add functionality that has not yet been implemented in Nicepage.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/css-code-471754" data-detail-link="0" data-type-video="1" data-lang="" data-id="471754" data-url="https://images04.nicepage.com/feature/471754/css-code.mp4" data-target="#feature-modal-preview" onclick="return false;" title="CSS Code. Add the CSS code as classes for any Element expanding the functionality. You can write the CSS code in the Page Settings and assign a Class in the Property Panel." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/471754/css-code-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">CSS Code</div> <p class="feature-description narrow" style="">Add the CSS code as classes for any Element expanding the functionality. You can write the CSS code in the Page Settings and assign a Class in the Property Panel.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/custom-php-code-470119" data-detail-link="0" data-type-video="0" data-lang="" data-id="470119" data-url="https://images04.nicepage.com/feature/470119/custom-php-code.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Custom PHP Code. Write the custom PHP code for your websites if needed. You can add the required programming modules using the powerful web design editor." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/470119/custom-php-code-small.jpg" alt="Custom PHP Code" /> </div> <div class="feature-meta"> <div class="feature-title ">Custom PHP Code</div> <p class="feature-description narrow" style="">Write the custom PHP code for your websites if needed. You can add the required programming modules using the powerful web design editor.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/shortcode-476122" data-detail-link="0" data-type-video="0" data-lang="" data-id="476122" data-url="https://images04.nicepage.com/feature/476122/shortcode.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Shortcode. Customize your website by adding a link to third-party code to your website. You can place the Shortcode Element into a post or page and immediately see it on the live view of your website." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476122/shortcode-small.jpg" alt="Shortcode" /> </div> <div class="feature-meta"> <div class="feature-title ">Shortcode</div> <p class="feature-description narrow" style="">Customize your website by adding a link to third-party code to your website. You can place the Shortcode Element into a post or page and immediately see it on the live view of your website.</p> </div> </div> </a> </li> <li class="thumbnail-item " style=""> <a href="/feature/widget-area-and-position-474688" data-detail-link="0" data-type-video="0" data-lang="" data-id="474688" data-url="https://images04.nicepage.com/feature/474688/widget-area-and-position.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Widget Area and Position. Expand your websites with WordPress widgets and Joomla modules by adding those into the Position and Widget Area Element to your web pages." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/474688/widget-area-and-position-small.jpg" alt="Widget Area and Position" /> </div> <div class="feature-meta"> <div class="feature-title ">Widget Area and Position</div> <p class="feature-description narrow" style="">Expand your websites with WordPress widgets and Joomla modules by adding those into the Position and Widget Area Element to your web pages.</p> </div> </div> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/application-features">Application Features</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Use the powerful Application Features to work with your projects more efficiently. You can work in ten languages, auto-save, export and import your projects, search for any element, block, document, presets anything available in the Application, do the backups, and much more.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/application-features" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="features-cards fixed"> <div class="layout-row"> <div class="layout-cell cell-size-3" style=""> <a href="/feature/edit-content-mode-447335" data-detail-link="0" data-type-video="1" data-lang="" data-id="447335" data-url="https://images04.nicepage.com/feature/447335/edit-content-mode.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Edit Content Mode. Edit texts, change images and icons. Preserve your designs from accidental damage. It is especially useful for the Client Roles in WordPress and Joomla." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <video data-src="https://images04.nicepage.com/feature/447335/edit-content-mode.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Edit Content Mode</div> <p class="feature-description " style="">Edit texts, change images and icons. Preserve your designs from accidental damage. It is especially useful for the Client Roles in WordPress and Joomla.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-3" style=""> <a href="/feature/support-for-10-languages-431829" data-detail-link="0" data-type-video="0" data-lang="" data-id="431829" data-url="https://images04.nicepage.com/feature/431829/support-for-10-languages.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Support for 10 Languages. Use Nicepage Applications and Plugins to design websites and templates in your native language. We have translated the Nicepage User Interface into ten languages, including English, French, German, Spanish, Dutch, Italian, and others, and we plan to add more." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/431829/support-for-10-languages.jpg" alt="Support for 10 Languages" /> </div> <div class="feature-meta"> <div class="feature-title ">Support for 10 Languages</div> <p class="feature-description " style="">Use Nicepage Applications and Plugins to design websites and templates in your native language. We have translated the Nicepage User Interface into ten languages, including English, French, German, Spanish, Dutch, Italian, and others, and we plan to add more.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-3" style=""> <a href="/feature/quick-access-panels-768494" data-detail-link="1" data-type-video="1" data-lang="" data-id="768494" data-url="https://images04.nicepage.com/feature/768494/quick-access-panels.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Quick Access Panels. Quick Access allows you to easily navigate to all the main Nicepage's user interface areas, such as Pages, Posts, Modal Popups, and Theme, Templates, Media Libraries, Site Settings, and Help." data-title="" data-learn-more="/feature/quick-access-panels-768494" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <video data-src="https://images04.nicepage.com/feature/768494/quick-access-panels.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Quick Access Panels</div> <p class="feature-description " style="">Quick Access allows you to easily navigate to all the main Nicepage's user interface areas, such as Pages, Posts, Modal Popups, and Theme, Templates, Media Libraries, Site Settings, and Help.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-3" style=""> <a href="/feature/project-backups-432591" data-detail-link="0" data-type-video="0" data-lang="" data-id="432591" data-url="https://images04.nicepage.com/feature/432591/project-backups.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Project Backups. Restore your Projects with the Backup since Nicepage stores them in a folder specified in the Preferences. You will never lose your works, roll back if necessary, and, therefore, save your time and efforts." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/432591/project-backups.jpg" alt="Project Backups" /> </div> <div class="feature-meta"> <div class="feature-title ">Project Backups</div> <p class="feature-description " style="">Restore your Projects with the Backup since Nicepage stores them in a folder specified in the Preferences. You will never lose your works, roll back if necessary, and, therefore, save your time and efforts.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-3" style=""> <a href="/feature/quick-search-447480" data-detail-link="0" data-type-video="0" data-lang="" data-id="447480" data-url="https://images04.nicepage.com/feature/447480/quick-search.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Quick Search. Type the beginning of your search query any time you need to find anything in Nicepage. Select the required Element, Block, or Documentation article from the results." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/447480/quick-search.jpg" alt="Quick Search" /> </div> <div class="feature-meta"> <div class="feature-title ">Quick Search</div> <p class="feature-description " style="">Type the beginning of your search query any time you need to find anything in Nicepage. Select the required Element, Block, or Documentation article from the results.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-3" style=""> <a href="/feature/auto-save-447228" data-detail-link="0" data-type-video="0" data-lang="" data-id="447228" data-url="https://images04.nicepage.com/feature/447228/auto-save.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Auto-Save. Save your works automatically not to lose any idea or important detail. You can disable this option in the Preferences." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/447228/auto-save.jpg" alt="Auto-Save" /> </div> <div class="feature-meta"> <div class="feature-title ">Auto-Save</div> <p class="feature-description " style="">Save your works automatically not to lose any idea or important detail. You can disable this option in the Preferences.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-3" style=" display:none;"> <a href="/feature/export-and-import-project-431967" data-detail-link="0" data-type-video="0" data-lang="" data-id="431967" data-url="https://images04.nicepage.com/feature/431967/export-and-import-project.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Export and Import Project. Export your works as Project, Page, or a single Block to save and reuse for yourself and share with other Nicepage users. Import the exported parts or the whole Project back and enjoy the flexibility of working with Nicepage." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/431967/export-and-import-project.jpg" alt="Export and Import Project" /> </div> <div class="feature-meta"> <div class="feature-title ">Export and Import Project</div> <p class="feature-description " style="">Export your works as Project, Page, or a single Block to save and reuse for yourself and share with other Nicepage users. Import the exported parts or the whole Project back and enjoy the flexibility of working with Nicepage.</p> </div> </div> </a> </div> </div> <div class="show-all-features"> <a href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><path d="M3.2,6.3c-0.3,0.3-0.3,0.8,0,1.2l3.5,4c0.7,0.8,1.8,0.8,2.5,0l3.5-4c0,0,0,0,0,0c0.3-0.3,0.3-0.9,0-1.2 c-0.3-0.3-0.8-0.3-1.1,0l-3.5,4c-0.1,0.1-0.3,0.1-0.4,0l-3.5-4C4,6,3.5,6,3.2,6.3z" /></svg> </span> </a> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/theme-settings">Theme Settings</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Theme Settings allow you to set the global styling for Colors, Fonts, and Typography applied to all Pages and Blocks. You can also edit the Header with the Menu and Footer and modify the EU Cookie Popup in this section.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/theme-settings" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="features-cards fixed"> <div class="layout-row"> <div class="layout-cell cell-size-4" style=""> <a href="/feature/typography-580335" data-detail-link="0" data-type-video="0" data-lang="" data-id="580335" data-url="https://images04.nicepage.com/feature/580335/typography.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Typography. Typography sets the styling of all text elements on a whole website. It allows pages and blocks to look in one style, which is essential for a good web design. It helps stylize such elements as Title, Heading, Text, Hyperlink, Button, Quote, and Lists. You can modify the Font, Size, Weight, Color, Indents, and Spacing between text lines and letters. To simplify your work, we have prepared the ready-made Presets." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/580335/typography-small.jpg" alt="Typography" /> </div> <div class="feature-meta"> <div class="feature-title ">Typography</div> <p class="feature-description " style="">Typography sets the styling of all text elements on a whole website. It allows pages and blocks to look in one style, which is essential for a good web design. It helps stylize such elements as Title, Heading, Text, Hyperlink, Button, Quote, and Lists. You can modify the Font, Size, Weight, Color, Indents, and Spacing between text lines and letters. To simplify your work, we have prepared the ready-made Presets.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/sidebar-669416" data-detail-link="0" data-type-video="0" data-lang="" data-id="669416" data-url="https://images04.nicepage.com/feature/669416/sidebar.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Sidebar. The Sidebar located to the right or left of the main content area of your website allows your visitors to access various information quickly. Usually, in WordPress Theme or Joomla Templates, you can assign the Sidebar to output widgets or modules, which require WordPress Widget Areas or Joomla Positions that you can add and modify in your website's Administration Panel." data-title="" data-learn-more="/doc/75803/sidebar-and-primary-widget-area-in-blog-and-post" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/669416/sidebar-small.jpg" alt="Sidebar" /> </div> <div class="feature-meta"> <div class="feature-title ">Sidebar</div> <p class="feature-description " style="">The Sidebar located to the right or left of the main content area of your website allows your visitors to access various information quickly. Usually, in WordPress Theme or Joomla Templates, you can assign the Sidebar to output widgets or modules, which require WordPress Widget Areas or Joomla Positions that you can add and modify in your website's Administration Panel.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/font-scheme-580328" data-detail-link="0" data-type-video="0" data-lang="" data-id="580328" data-url="https://images04.nicepage.com/feature/580328/font-scheme.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Font Scheme. The Font Schemes are a pair of fonts presented as Font Presets, which you can select for all text on a website. The first font corresponds and is applied to all Headings and Titles of a website, and the second font fits well and is used for all regular texts and paragraphs." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/580328/font-scheme-small.jpg" alt="Font Scheme" /> </div> <div class="feature-meta"> <div class="feature-title ">Font Scheme</div> <p class="feature-description " style="">The Font Schemes are a pair of fonts presented as Font Presets, which you can select for all text on a website. The first font corresponds and is applied to all Headings and Titles of a website, and the second font fits well and is used for all regular texts and paragraphs.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/color-scheme-584145" data-detail-link="0" data-type-video="0" data-lang="" data-id="584145" data-url="https://images04.nicepage.com/feature/584145/color-scheme.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Color Scheme. It is recommended to use not more than five main colors throughout the website, making a good web design. It gives your web pages a consistent and professional look. Set five colors for your Color Scheme or select one from ready-made Presets. Nicepage automatically generated more colors with different brightness based on the main scheme. You can also add custom colors as many as you want." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/584145/color-scheme-small.jpg" alt="Color Scheme" /> </div> <div class="feature-meta"> <div class="feature-title ">Color Scheme</div> <p class="feature-description " style="">It is recommended to use not more than five main colors throughout the website, making a good web design. It gives your web pages a consistent and professional look. Set five colors for your Color Scheme or select one from ready-made Presets. Nicepage automatically generated more colors with different brightness based on the main scheme. You can also add custom colors as many as you want.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/blog-templates-584544" data-detail-link="0" data-type-video="0" data-lang="" data-id="584544" data-url="https://images04.nicepage.com/feature/584544/blog-templates.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Blog Templates. In WordPress and Joomla, Blogs are stylized with the Theme Templates. The Blog Template is used to display briefs of several posts, and the Post Template outputs the content of a single post. You can modify and fine-tune those templates to get a unique look and make the Blog pages consistent with the rest of your web design. Additionally, you can create custom blog templates to assign them to different post categories." data-title="" data-learn-more="/doc/119177/blog-template" data-examples-url="/c/blog-posts-html-templates"> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/584544/blog-templates-small.jpg" alt="Blog Templates" /> </div> <div class="feature-meta"> <div class="feature-title ">Blog Templates</div> <p class="feature-description " style="">In WordPress and Joomla, Blogs are stylized with the Theme Templates. The Blog Template is used to display briefs of several posts, and the Post Template outputs the content of a single post. You can modify and fine-tune those templates to get a unique look and make the Blog pages consistent with the rest of your web design. Additionally, you can create custom blog templates to assign them to different post categories.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/ecommerce-templates-632536" data-detail-link="0" data-type-video="0" data-lang="" data-id="632536" data-url="https://images04.nicepage.com/feature/632536/ecommerce-templates.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Ecommerce Templates. If you have an online store in WordPress or Joomla, you can modify the eCommerce templates with Nicepage. Use the Product List Template to show the product catalog with prices and short descriptions. The Product Details displays the information about each Product allowing your users to choose the quantity, variation, and slide through the Product images. By adjusting the layouts and colors of your eCommerce templates, you can keep them in style with other pages. Similar to other templates, you can create custom eCommerce templates for various Product categories." data-title="" data-learn-more="/doc/102300/product-list-template" data-examples-url="/c/product-list-html-templates"> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/632536/ecommerce-templates-small.jpg" alt="Ecommerce Templates" /> </div> <div class="feature-meta"> <div class="feature-title ">Ecommerce Templates</div> <p class="feature-description " style="">If you have an online store in WordPress or Joomla, you can modify the eCommerce templates with Nicepage. Use the Product List Template to show the product catalog with prices and short descriptions. The Product Details displays the information about each Product allowing your users to choose the quantity, variation, and slide through the Product images. By adjusting the layouts and colors of your eCommerce templates, you can keep them in style with other pages. Similar to other templates, you can create custom eCommerce templates for various Product categories.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/404-not-found-template-632558" data-detail-link="0" data-type-video="0" data-lang="" data-id="632558" data-url="https://images04.nicepage.com/feature/632558/404-not-found-template.jpg" data-target="#feature-modal-preview" onclick="return false;" title="404 Not Found Template. People may come to your website for a wrong URL or mistype it in the address bar of a browser. For that case, many websites show the special 404 Not Found page instead of the browser error allowing visitors to stay on your website and continue navigation. You can modify that page for your WordPress or Joomla website with the Nicepage Application by editing the 404 Not Found Template." data-title="" data-learn-more="/doc/172341/404-not-found-template" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/632558/404-not-found-template-small.jpg" alt="404 Not Found Template" /> </div> <div class="feature-meta"> <div class="feature-title ">404 Not Found Template</div> <p class="feature-description " style="">People may come to your website for a wrong URL or mistype it in the address bar of a browser. For that case, many websites show the special 404 Not Found page instead of the browser error allowing visitors to stay on your website and continue navigation. You can modify that page for your WordPress or Joomla website with the Nicepage Application by editing the 404 Not Found Template.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=""> <a href="/feature/login-template-632580" data-detail-link="0" data-type-video="0" data-lang="" data-id="632580" data-url="https://images04.nicepage.com/feature/632580/login-template.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Login Template. Suppose you have a site in WordPress or Joomla, and you need your users to add content via a website's Administration. However, the standard login page offered by your content management system is not consistent with the rest of your website design-wise. In that case, you can stylize the layout of the Login Template in the Nicepage Application giving the Login Page a consistent but at the same time unique look for your particular website project." data-title="" data-learn-more="/doc/171971/login-template-for-wordpress" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/632580/login-template-small.jpg" alt="Login Template" /> </div> <div class="feature-meta"> <div class="feature-title ">Login Template</div> <p class="feature-description " style="">Suppose you have a site in WordPress or Joomla, and you need your users to add content via a website's Administration. However, the standard login page offered by your content management system is not consistent with the rest of your website design-wise. In that case, you can stylize the layout of the Login Template in the Nicepage Application giving the Login Page a consistent but at the same time unique look for your particular website project.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=" display:none;"> <a href="/feature/export-571727" data-detail-link="0" data-type-video="0" data-lang="" data-id="571727" data-url="https://images04.nicepage.com/feature/571727/export.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Export. Export HTML Websites, WordPress Themes, and Joomla Templates from the Nicepage Application for Windows or Mac OS. Share projects with other users and show screenshots to your existing and potential customers." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/571727/export-small.jpg" alt="Export" /> </div> <div class="feature-meta"> <div class="feature-title ">Export</div> <p class="feature-description " style="">Export HTML Websites, WordPress Themes, and Joomla Templates from the Nicepage Application for Windows or Mac OS. Share projects with other users and show screenshots to your existing and potential customers.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=" display:none;"> <a href="/feature/user-roles-571953" data-detail-link="0" data-type-video="0" data-lang="" data-id="571953" data-url="https://images04.nicepage.com/feature/571953/user-roles.jpg" data-target="#feature-modal-preview" onclick="return false;" title="User Roles. If several people work on a website, there is a problem that someone with less experience can break design or content. Or you are a design studio, and you want to prevent your customers from modifying the website and want to do the editing only by yourself. To separate editing capabilities, you can use the User Roles, like Design Editor or Content Editor. To add an editor in WordPress, you can register a new user and assign a needed role." data-title="" data-learn-more="/doc/177004/role-management-in-wordpress" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/571953/user-roles-small.jpg" alt="User Roles" /> </div> <div class="feature-meta"> <div class="feature-title ">User Roles</div> <p class="feature-description " style="">If several people work on a website, there is a problem that someone with less experience can break design or content. Or you are a design studio, and you want to prevent your customers from modifying the website and want to do the editing only by yourself. To separate editing capabilities, you can use the User Roles, like Design Editor or Content Editor. To add an editor in WordPress, you can register a new user and assign a needed role.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=" display:none;"> <a href="/feature/white-label-571740" data-detail-link="0" data-type-video="0" data-lang="" data-id="571740" data-url="https://images04.nicepage.com/feature/571740/white-label.jpg" data-target="#feature-modal-preview" onclick="return false;" title="White Label. The White Label feature allows you or your company to re-brand websites and themes produced with Nicepage for WordPress and Joomla to appear like yours. It will build your brand credibility, strengthens your customer loyalty, saves you a lot of time and money. Many design studios and digital marketing agencies enjoy having the White Label option. Having your branding on plugins helps build awareness and a stronger sense of trust with your customers." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/571740/white-label-small.jpg" alt="White Label" /> </div> <div class="feature-meta"> <div class="feature-title ">White Label</div> <p class="feature-description " style="">The White Label feature allows you or your company to re-brand websites and themes produced with Nicepage for WordPress and Joomla to appear like yours. It will build your brand credibility, strengthens your customer loyalty, saves you a lot of time and money. Many design studios and digital marketing agencies enjoy having the White Label option. Having your branding on plugins helps build awareness and a stronger sense of trust with your customers.</p> </div> </div> </a> </div> <div class="layout-cell cell-size-4" style=" display:none;"> <a href="/feature/gdpr-cookie-popup-579370" data-detail-link="0" data-type-video="0" data-lang="" data-id="579370" data-url="https://images04.nicepage.com/feature/579370/gdpr-cookie-popup.jpg" data-target="#feature-modal-preview" onclick="return false;" title="GDPR Cookie Popup. Add the Cookie Popup compliant to the EU's General Data Protection Regulation requirements. It is the law regulation on data protection and privacy required for the European Economic Area. It also addresses the transfer of personal data outside the European Union." data-title="" data-learn-more="/doc/98476/gdpr-cookie-popup" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style=""> <img class="lazyload" data-src="https://images04.nicepage.com/feature/579370/gdpr-cookie-popup-small.jpg" alt="GDPR Cookie Popup" /> </div> <div class="feature-meta"> <div class="feature-title ">GDPR Cookie Popup</div> <p class="feature-description " style="">Add the Cookie Popup compliant to the EU's General Data Protection Regulation requirements. It is the law regulation on data protection and privacy required for the European Economic Area. It also addresses the transfer of personal data outside the European Union.</p> </div> </div> </a> </div> </div> <div class="show-all-features"> <a href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><path d="M3.2,6.3c-0.3,0.3-0.3,0.8,0,1.2l3.5,4c0.7,0.8,1.8,0.8,2.5,0l3.5-4c0,0,0,0,0,0c0.3-0.3,0.3-0.9,0-1.2 c-0.3-0.3-0.8-0.3-1.1,0l-3.5,4c-0.1,0.1-0.3,0.1-0.4,0l-3.5-4C4,6,3.5,6,3.2,6.3z" /></svg> </span> </a> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/site-page-properties">Site & Page Properties</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>The Site Properties are global parameters that you can use to specify configuration values for the whole website. In addition, you can apply Page Settings to set the specific values for a web page.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/site-page-properties" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var thumbSlider = $('.thumbnail-slider'); thumbSlider.thumbnailSlider(); }); </script> <div class="custom-block "> <div class="thumbnail-slider fixed"> <div class="thumbnail-slider-viewport-wrapper"> <div class="thumbnail-slider-viewport"> <div class="thumbnail-slider-list "> <a href="/feature/social-share-497088" data-detail-link="0" data-type-video="0" data-lang="" data-id="497088" data-url="https://images04.nicepage.com/feature/497088/social-share.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Social Share. Use the Social Share tab in the Page Settings to specify how your web page will be presented in the social media. You need to enter the Title, Description, Image, and URL." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/497088/social-share-small.jpg" alt="Social Share" /> </div> <div class="feature-meta"> <div class="feature-title ">Social Share</div> <p class="feature-description narrow" style="">Use the Social Share tab in the Page Settings to specify how your web page will be presented in the social media. You need to enter the Title, Description, Image, and URL.</p> </div> </div> </a> <a href="/feature/custom-domain-500530" data-detail-link="0" data-type-video="0" data-lang="" data-id="500530" data-url="https://images04.nicepage.com/feature/500530/custom-domain.png" data-target="#feature-modal-preview" onclick="return false;" title="Custom Domain. The Custom Domain a unique name that you have purchased for your website or brand from one of the popular registrants. You can assign this Custom Domain to one site designed instead of the auto-generated subdomain name by the Nicepage Online Builder." data-title="" data-learn-more="/doc/1293/assign-a-domain" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/500530/custom-domain-small.png" alt="Custom Domain" /> </div> <div class="feature-meta"> <div class="feature-title ">Custom Domain</div> <p class="feature-description narrow" style="">The Custom Domain a unique name that you have purchased for your website or brand from one of the popular registrants. You can assign this Custom Domain to one site designed instead of the auto-generated subdomain name by the Nicepage Online Builder.</p> </div> </div> </a> <a href="/feature/google-analysis-tools-500531" data-detail-link="0" data-type-video="0" data-lang="" data-id="500531" data-url="https://images04.nicepage.com/feature/500531/google-analysis-tools.png" data-target="#feature-modal-preview" onclick="return false;" title="Google Analysis Tools. Connect your sites to Google Analytics, Google Tag Manager, and Google Optimize Container to gather data and get a deeper understanding of your site audience. You get all analysis tools for free and in one place for any personal or business tasks." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/500531/google-analysis-tools-small.png" alt="Google Analysis Tools" /> </div> <div class="feature-meta"> <div class="feature-title ">Google Analysis Tools</div> <p class="feature-description narrow" style="">Connect your sites to Google Analytics, Google Tag Manager, and Google Optimize Container to gather data and get a deeper understanding of your site audience. You get all analysis tools for free and in one place for any personal or business tasks.</p> </div> </div> </a> <a href="/feature/favicon-500524" data-detail-link="0" data-type-video="0" data-lang="" data-id="500524" data-url="https://images04.nicepage.com/feature/500524/favicon.png" data-target="#feature-modal-preview" onclick="return false;" title="Favicon. Add your website's Favicon in the Site Settings. The modern browsers usually have the Favicon support and display it in the browser's address bar, tabs next to the page's name, and the bookmark list. Usually, the Favicon has the ICO format." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/500524/favicon-small.png" alt="Favicon" /> </div> <div class="feature-meta"> <div class="feature-title ">Favicon</div> <p class="feature-description narrow" style="">Add your website's Favicon in the Site Settings. The modern browsers usually have the Favicon support and display it in the browser's address bar, tabs next to the page's name, and the bookmark list. Usually, the Favicon has the ICO format.</p> </div> </div> </a> </div> </div> </div> <a class="thumbnail-slider-control left off" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M9.53 11.71L5.99 8.18a.25.25 0 0 1 0-.36L9.53 4.3a.75.75 0 1 0-1.06-1.06L4.93 6.76c-.68.69-.68 1.8 0 2.48l3.54 3.53a.75.75 0 0 0 1.06-1.06z"></path> </svg> </span> </a> <a class="thumbnail-slider-control right" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M6.47 4.29l3.54 3.53c.1.1.1.26 0 .36L6.47 11.7a.75.75 0 1 0 1.06 1.06l3.54-3.53c.68-.69.68-1.8 0-2.48L7.53 3.23a.75.75 0 0 0-1.06 1.06z"></path> </svg> </span> </a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/blog">Blog</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Design, write, and maintain your web blog, focusing mainly on content written in the blog posts. Blogs are still popular on the Internet, and starting a successful blog on just any topic you can imagine has never been easier.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/blog" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <div class="row"> <div class="col-md-12"> <div class="custom-block "> <div class="features-grid"> <ul class="thumbnails-loading list-unstyled"> <li class="thumbnail-item border-item" style=""> <a href="/feature/blog-461183" data-detail-link="0" data-type-video="0" data-lang="" data-id="461183" data-url="https://images04.nicepage.com/feature/461183/blog.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Blog. Add the Blog to start a discussion or put some interesting information on your website. A blog usually contains posts, which in some CMS may be also be called articles." data-title="" data-learn-more="" data-examples-url="/c/blog-posts-html-templates"> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/461183/blog-small.jpg" alt="Blog" /> </div> <div class="feature-meta"> <div class="feature-title ">Blog</div> <p class="feature-description narrow" style="">Add the Blog to start a discussion or put some interesting information on your website. A blog usually contains posts, which in some CMS may be also be called articles.</p> </div> </div> </a> </li> <li class="thumbnail-item border-item" style=""> <a href="/feature/post-details-461191" data-detail-link="0" data-type-video="0" data-lang="" data-id="461191" data-url="https://images04.nicepage.com/feature/461191/post-details.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Post Details. Output the featured or any other Post from your Blog to a web page. You can specify the style and the particular post to show." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/461191/post-details-small.jpg" alt="Post Details" /> </div> <div class="feature-meta"> <div class="feature-title ">Post Details</div> <p class="feature-description narrow" style="">Output the featured or any other Post from your Blog to a web page. You can specify the style and the particular post to show.</p> </div> </div> </a> </li> <li class="thumbnail-item border-item" style=""> <a href="/feature/blog-editor-574707" data-detail-link="0" data-type-video="1" data-lang="" data-id="574707" data-url="https://images04.nicepage.com/feature/574707/blog-editor.mp4" data-target="#feature-modal-preview" onclick="return false;" title="Blog Editor. You can use the Blog Editor to produce your HTML, WordPress, and Joomla articles and illustrate them with images. Your benefits start from working offline, which means less distraction and more comfort. You can easily manage multiple blog posts and have backups - all in one place. Regardless if you are a PC or Mac user, you can use the Blog Editor in your application to enhance your productivity and save time and effort before publishing." data-title="" data-learn-more="/doc/131306/html-blog" data-examples-url=""> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <video data-src="https://images04.nicepage.com/feature/574707/blog-editor-small.mp4" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> </div> <div class="feature-meta"> <div class="feature-title ">Blog Editor</div> <p class="feature-description narrow" style="">You can use the Blog Editor to produce your HTML, WordPress, and Joomla articles and illustrate them with images. Your benefits start from working offline, which means less distraction and more comfort. You can easily manage multiple blog posts and have backups - all in one place. Regardless if you are a PC or Mac user, you can use the Blog Editor in your application to enhance your productivity and save time and effort before publishing.</p> </div> </div> </a> </li> <li class="thumbnail-item border-item" style=""> <a href="/feature/blog-posts-461189" data-detail-link="0" data-type-video="0" data-lang="" data-id="461189" data-url="https://images04.nicepage.com/feature/461189/blog-posts.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Blog Posts. Add the Blog Posts element to any page of your site. You can use various layouts and the number of posts on each page." data-title="" data-learn-more="" data-examples-url="/c/blog-posts-html-templates"> <div class="feature-item border-item"> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/461189/blog-posts-small.jpg" alt="Blog Posts" /> </div> <div class="feature-meta"> <div class="feature-title ">Blog Posts</div> <p class="feature-description narrow" style="">Add the Blog Posts element to any page of your site. You can use various layouts and the number of posts on each page.</p> </div> </div> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=><a href="/features/c/wordpress-widgets">WordPress Widgets</a></h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>The WordPress Widgets are the default widgets presented in WordPress, including Calendar, Categories, Tag Cloud, etc., to provide a simple and easy-to-use way to design and maintain your WordPress Theme. You can use widgets anywhere on a web page, including the Header, Footer, and Sidebar. Аnd it requires no coding.</p> </div> </div> <div class="features-block"> <div class="custom-block "> <div class="link "> <a class="btn btn-lg" href="/features/c/wordpress-widgets" type="button">Learn more</a> </div> </div> </div> <div class="features-block"> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var thumbSlider = $('.thumbnail-slider'); thumbSlider.thumbnailSlider(); }); </script> <div class="custom-block "> <div class="thumbnail-slider fixed"> <div class="thumbnail-slider-viewport-wrapper"> <div class="thumbnail-slider-viewport"> <div class="thumbnail-slider-list "> <a href="/feature/pages-wordpress-widget-476352" data-detail-link="0" data-type-video="0" data-lang="" data-id="476352" data-url="https://images04.nicepage.com/feature/476352/pages-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Pages WordPress Widget. Display your WordPress website’s pages in your widget areas with the Pages Widget. It makes it easier for visitors and readers to navigate and find information around your web pages." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476352/pages-wordpress-widget-small.jpg" alt="Pages WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Pages WordPress Widget</div> <p class="feature-description narrow" style="">Display your WordPress website’s pages in your widget areas with the Pages Widget. It makes it easier for visitors and readers to navigate and find information around your web pages.</p> </div> </div> </a> <a href="/feature/rss-wordpress-widget-476594" data-detail-link="0" data-type-video="0" data-lang="" data-id="476594" data-url="https://images04.nicepage.com/feature/476594/rss-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="RSS WordPress Widget. Use the RSS Widget to pull headlines from RSS feeds of WordPress sites, blogs, other news sites, and sources that offer RSS feeds. You can use this tool to gather and aggregate information from syndicated RSS-feed sources to display on your websites." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476594/rss-wordpress-widget-small.jpg" alt="RSS WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">RSS WordPress Widget</div> <p class="feature-description narrow" style="">Use the RSS Widget to pull headlines from RSS feeds of WordPress sites, blogs, other news sites, and sources that offer RSS feeds. You can use this tool to gather and aggregate information from syndicated RSS-feed sources to display on your websites.</p> </div> </div> </a> <a href="/feature/recent-posts-wordpress-widget-476477" data-detail-link="0" data-type-video="0" data-lang="" data-id="476477" data-url="https://images04.nicepage.com/feature/476477/recent-posts-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Recent Posts WordPress Widget. Show the most Recent Posts with titles, thumbnails, authors, categories, dates, etc., on your WordPress websites. You can specify whether to show the dates with your posts or not and the number of posts to display." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476477/recent-posts-wordpress-widget-small.jpg" alt="Recent Posts WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Recent Posts WordPress Widget</div> <p class="feature-description narrow" style="">Show the most Recent Posts with titles, thumbnails, authors, categories, dates, etc., on your WordPress websites. You can specify whether to show the dates with your posts or not and the number of posts to display.</p> </div> </div> </a> <a href="/feature/text-wordpress-widget-476267" data-detail-link="0" data-type-video="0" data-lang="" data-id="476267" data-url="https://images04.nicepage.com/feature/476267/text-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Text WordPress Widget. Add the Text WordPress widget directly in Nicepage. You will see the result after you export and import the Theme and content." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476267/text-wordpress-widget-small.jpg" alt="Text WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Text WordPress Widget</div> <p class="feature-description narrow" style="">Add the Text WordPress widget directly in Nicepage. You will see the result after you export and import the Theme and content.</p> </div> </div> </a> <a href="/feature/categories-wordpress-widget-476428" data-detail-link="0" data-type-video="0" data-lang="" data-id="476428" data-url="https://images04.nicepage.com/feature/476428/categories-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Categories WordPress Widget. Organize your WordPress pages and posts by category on the widget area with the Categories Widget. It can be beneficial for your readers who want to find more information on specific topics." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476428/categories-wordpress-widget-small.jpg" alt="Categories WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Categories WordPress Widget</div> <p class="feature-description narrow" style="">Organize your WordPress pages and posts by category on the widget area with the Categories Widget. It can be beneficial for your readers who want to find more information on specific topics.</p> </div> </div> </a> <a href="/feature/archives-wordpress-widget-476451" data-detail-link="0" data-type-video="0" data-lang="" data-id="476451" data-url="https://images04.nicepage.com/feature/476451/archives-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Archives WordPress Widget. Use the Archives Widget to make your monthly/daily archives look like a calendar, usually on the sidebar of your WordPress websites." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476451/archives-wordpress-widget-small.jpg" alt="Archives WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Archives WordPress Widget</div> <p class="feature-description narrow" style="">Use the Archives Widget to make your monthly/daily archives look like a calendar, usually on the sidebar of your WordPress websites.</p> </div> </div> </a> <a href="/feature/calendar-wordpress-widget-476275" data-detail-link="0" data-type-video="0" data-lang="" data-id="476275" data-url="https://images04.nicepage.com/feature/476275/calendar-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Calendar WordPress Widget. Insert the Calendar WordPress widget in the Application. After the export and import to WordPress, you will see the Calendar already added to your widget list and web page." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476275/calendar-wordpress-widget-small.jpg" alt="Calendar WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Calendar WordPress Widget</div> <p class="feature-description narrow" style="">Insert the Calendar WordPress widget in the Application. After the export and import to WordPress, you will see the Calendar already added to your widget list and web page.</p> </div> </div> </a> <a href="/feature/comments-wordpress-widget-476515" data-detail-link="0" data-type-video="0" data-lang="" data-id="476515" data-url="https://images04.nicepage.com/feature/476515/comments-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Comments WordPress Widget. Add your user reviews with the Comments Widget to display those right after the main content of your particular web pages. This widget is usually placed in the Widget Area of the Sidebar. " data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476515/comments-wordpress-widget-small.jpg" alt="Comments WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Comments WordPress Widget</div> <p class="feature-description narrow" style="">Add your user reviews with the Comments Widget to display those right after the main content of your particular web pages. This widget is usually placed in the Widget Area of the Sidebar. </p> </div> </div> </a> <a href="/feature/tag-cloud-wordpress-widget-476390" data-detail-link="0" data-type-video="0" data-lang="" data-id="476390" data-url="https://images04.nicepage.com/feature/476390/tag-cloud-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Tag Cloud WordPress Widget. Show a list of all the tags assigned to your WordPress pages and posts with the Tag Cloud Widget. This widget gives your readers an immediate idea of your favorite topics you post most frequently. You can display the most common tags in the largest font size. " data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476390/tag-cloud-wordpress-widget-small.jpg" alt="Tag Cloud WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Tag Cloud WordPress Widget</div> <p class="feature-description narrow" style="">Show a list of all the tags assigned to your WordPress pages and posts with the Tag Cloud Widget. This widget gives your readers an immediate idea of your favorite topics you post most frequently. You can display the most common tags in the largest font size. </p> </div> </div> </a> <a href="/feature/meta-wordpress-widget-476295" data-detail-link="0" data-type-video="0" data-lang="" data-id="476295" data-url="https://images04.nicepage.com/feature/476295/meta-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Meta WordPress Widget. Insert a handy list of default links for showing on your WordPress site with the Meta Widget. The main benefit is that this widget contains main links for your site, including a login link, as some new users don't know where to find it. " data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476295/meta-wordpress-widget-small.jpg" alt="Meta WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Meta WordPress Widget</div> <p class="feature-description narrow" style="">Insert a handy list of default links for showing on your WordPress site with the Meta Widget. The main benefit is that this widget contains main links for your site, including a login link, as some new users don't know where to find it. </p> </div> </div> </a> <a href="/feature/menu-wordpress-widget-476416" data-detail-link="0" data-type-video="0" data-lang="" data-id="476416" data-url="https://images04.nicepage.com/feature/476416/menu-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Menu WordPress Widget. Create and add custom navigation links to ensure your WordPress website is easy to use with the Menu Widget. You can make a vertical menu by placing it in the added widget areas to help your visitors and readers." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476416/menu-wordpress-widget-small.jpg" alt="Menu WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Menu WordPress Widget</div> <p class="feature-description narrow" style="">Create and add custom navigation links to ensure your WordPress website is easy to use with the Menu Widget. You can make a vertical menu by placing it in the added widget areas to help your visitors and readers.</p> </div> </div> </a> <a href="/feature/search-wordpress-widget-476272" data-detail-link="0" data-type-video="0" data-lang="" data-id="476272" data-url="https://images04.nicepage.com/feature/476272/search-wordpress-widget.jpg" data-target="#feature-modal-preview" onclick="return false;" title="Search WordPress Widget. Implement the simple search functionality with the Search WordPress widget in the Application. You will see it on your web page after exporting and importing." data-title="" data-learn-more="" data-examples-url=""> <div class="feature-item "> <div class="feature-media" style="width: 260px; height: 173px;"> <img class="lazyload" data-src="https://images04.nicepage.com/feature/476272/search-wordpress-widget-small.jpg" alt="Search WordPress Widget" /> </div> <div class="feature-meta"> <div class="feature-title ">Search WordPress Widget</div> <p class="feature-description narrow" style="">Implement the simple search functionality with the Search WordPress widget in the Application. You will see it on your web page after exporting and importing.</p> </div> </div> </a> </div> </div> </div> <a class="thumbnail-slider-control left off" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M9.53 11.71L5.99 8.18a.25.25 0 0 1 0-.36L9.53 4.3a.75.75 0 1 0-1.06-1.06L4.93 6.76c-.68.69-.68 1.8 0 2.48l3.54 3.53a.75.75 0 0 0 1.06-1.06z"></path> </svg> </span> </a> <a class="thumbnail-slider-control right" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M6.47 4.29l3.54 3.53c.1.1.1.26 0 .36L6.47 11.7a.75.75 0 1 0 1.06 1.06l3.54-3.53c.68-.69.68-1.8 0-2.48L7.53 3.23a.75.75 0 0 0-1.06 1.06z"></path> </svg> </span> </a> </div> </div> </div> <div class="features-block"> <div class="custom-block gray-block"> <h2 class=>Download and Install Free Website Designer</h2> </div> </div> <div class="features-block"> <div class="custom-block gray-block"> <p class=>Get the best free website maker for Windows or Mac OS by downloading and installing it today. Start designing modern and fully responsive websites and themes visually with no coding.</p> </div> </div> <div class="features-block"> <div class="custom-block gray-block"> <div class="download-buttons"> <a class="btn btn-lg win-download" href="/download-windows" type="button">Download for Windows</a> <a class="btn btn-lg mac-download" href="/download-mac" type="button">Download for Mac</a> </div> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=>Free Website Templates</h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Select any popular template page category and create creative agencies, music stores, car repair services, fitness gyms, legal companies, and other websites easily and quickly.</p> </div> </div> <div class="templates-block "> <div class="thumbnail-slider"> <div class="thumbnail-slider-viewport-wrapper"> <div class="thumbnail-slider-viewport"> <div class="thumbnail-slider-list"> <a href="/c/art-design-html-templates" data-title="Art & Design" title="Art & Design HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Art & Design HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/23/73/html-template-23732.jpg" class="lazyload" /> </span> </a> <a href="/c/technology-html-templates" data-title="Technology" title="Technology HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Technology HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/31/08/html-template-31086.jpg" class="lazyload" /> </span> </a> <a href="/c/food-restaurant-html-templates" data-title="Food & Restaurant" title="Food & Restaurant HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Food & Restaurant HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/87/43/html-template-87432.jpg" class="lazyload" /> </span> </a> <a href="/c/architecture-building-html-templates" data-title="Architecture & Building" title="Architecture & Building HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Architecture & Building HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/66/95/html-template-66953.jpg" class="lazyload" /> </span> </a> <a href="/c/business-law-html-templates" data-title="Business & Law" title="Business & Law HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Business & Law HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/96/73/html-template-96735.jpg" class="lazyload" /> </span> </a> <a href="/c/education-html-templates" data-title="Education" title="Education HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Education HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/29/37/html-template-29376.jpg" class="lazyload" /> </span> </a> <a href="/c/fashion-beauty-html-templates" data-title="Fashion & Beauty" title="Fashion & Beauty HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Fashion & Beauty HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/25/12/html-template-25122.jpg" class="lazyload" /> </span> </a> <a href="/c/interior-html-templates" data-title="Interior" title="Interior HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Interior HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/35/41/html-template-35411.jpg" class="lazyload" /> </span> </a> <a href="/c/industrial-html-templates" data-title="Industrial" title="Industrial HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Industrial HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/48/83/html-template-48832.jpg" class="lazyload" /> </span> </a> <a href="/c/cars-transportation-html-templates" data-title="Cars & Transportation" title="Cars & Transportation HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Cars & Transportation HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/60/11/html-template-60111.jpg" class="lazyload" /> </span> </a> <a href="/c/travel-hotels-html-templates" data-title="Travel & Hotels" title="Travel & Hotels HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Travel & Hotels HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/24/59/html-template-24595.jpg" class="lazyload" /> </span> </a> <a href="/c/sports-html-templates" data-title="Sports" title="Sports HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Sports HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/88/77/html-template-88779.jpg" class="lazyload" /> </span> </a> <a href="/c/sale-html-templates" data-title="Sale" title="Sale HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Sale HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/83/73/html-template-83730.jpg" class="lazyload" /> </span> </a> <a href="/c/music-entertainment-html-templates" data-title="Music & Entertainment" title="Music & Entertainment HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Music & Entertainment HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/19/53/html-template-19530.jpg" class="lazyload" /> </span> </a> <a href="/c/nature-html-templates" data-title="Nature" title="Nature HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Nature HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/17/05/html-template-17055.jpg" class="lazyload" /> </span> </a> <a href="/c/real-estate-html-templates" data-title="Real Estate" title="Real Estate HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Real Estate HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/29/64/html-template-29649.jpg" class="lazyload" /> </span> </a> <a href="/c/medicine-science-html-templates" data-title="Medicine & Science" title="Medicine & Science HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Medicine & Science HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/29/40/html-template-29405.jpg" class="lazyload" /> </span> </a> <a href="/c/wedding-html-templates" data-title="Wedding" title="Wedding HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Wedding HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/32/36/html-template-32364.jpg" class="lazyload" /> </span> </a> <a href="/c/pets-animals-html-templates" data-title="Pets & Animals" title="Pets & Animals HTML Templates"> <span style="width: 150px; height: 275px;"> <img alt="Pets & Animals HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/66/64/html-template-66646.jpg" class="lazyload" /> </span> </a> </div> </div> </div> <a class="thumbnail-slider-control left off" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M9.53 11.71L5.99 8.18a.25.25 0 0 1 0-.36L9.53 4.3a.75.75 0 1 0-1.06-1.06L4.93 6.76c-.68.69-.68 1.8 0 2.48l3.54 3.53a.75.75 0 0 0 1.06-1.06z"></path> </svg> </span> </a> <a class="thumbnail-slider-control right" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M6.47 4.29l3.54 3.53c.1.1.1.26 0 .36L6.47 11.7a.75.75 0 1 0 1.06 1.06l3.54-3.53c.68-.69.68-1.8 0-2.48L7.53 3.23a.75.75 0 0 0-1.06 1.06z"></path> </svg> </span> </a> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=>Templates Block Categories</h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Select any popular template page category and create creative agencies, music stores, car repair services, fitness gyms, legal companies, and other websites easily and quickly.</p> </div> </div> <div class="templates-block block-slider"> <div class="thumbnail-slider"> <div class="thumbnail-slider-viewport-wrapper"> <div class="thumbnail-slider-viewport"> <div class="thumbnail-slider-list"> <a href="/c/art-design-html-templates" data-title="Art & Design" title="Art & Design HTML Templates"> <span style="width: 262px; height: 173px;"> <img alt="Art & Design HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/10/12/html-template-101288.jpg" class="lazyload" /> </span> </a> <a href="/c/technology-html-templates" data-title="Technology" title="Technology HTML Templates"> <span style="width: 262px; height: 157px;"> <img alt="Technology HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/96/79/html-template-96792.jpg" class="lazyload" /> </span> </a> <a href="/c/food-restaurant-html-templates" data-title="Food & Restaurant" title="Food & Restaurant HTML Templates"> <span style="width: 262px; height: 139px;"> <img alt="Food & Restaurant HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/81/37/html-template-81379.jpg" class="lazyload" /> </span> </a> <a href="/c/architecture-building-html-templates" data-title="Architecture & Building" title="Architecture & Building HTML Templates"> <span style="width: 262px; height: 149px;"> <img alt="Architecture & Building HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/80/01/html-template-80018.jpg" class="lazyload" /> </span> </a> <a href="/c/business-law-html-templates" data-title="Business & Law" title="Business & Law HTML Templates"> <span style="width: 262px; height: 162px;"> <img alt="Business & Law HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/97/38/html-template-97385.jpg" class="lazyload" /> </span> </a> <a href="/c/education-html-templates" data-title="Education" title="Education HTML Templates"> <span style="width: 262px; height: 178px;"> <img alt="Education HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/26/52/html-template-265274.jpg" class="lazyload" /> </span> </a> <a href="/c/fashion-beauty-html-templates" data-title="Fashion & Beauty" title="Fashion & Beauty HTML Templates"> <span style="width: 262px; height: 162px;"> <img alt="Fashion & Beauty HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/65/69/html-template-65696.jpg" class="lazyload" /> </span> </a> <a href="/c/interior-html-templates" data-title="Interior" title="Interior HTML Templates"> <span style="width: 262px; height: 167px;"> <img alt="Interior HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/54/90/html-template-54900.jpg" class="lazyload" /> </span> </a> <a href="/c/industrial-html-templates" data-title="Industrial" title="Industrial HTML Templates"> <span style="width: 262px; height: 176px;"> <img alt="Industrial HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/53/72/html-template-53728.jpg" class="lazyload" /> </span> </a> <a href="/c/cars-transportation-html-templates" data-title="Cars & Transportation" title="Cars & Transportation HTML Templates"> <span style="width: 262px; height: 139px;"> <img alt="Cars & Transportation HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/55/72/html-template-55720.jpg" class="lazyload" /> </span> </a> <a href="/c/travel-hotels-html-templates" data-title="Travel & Hotels" title="Travel & Hotels HTML Templates"> <span style="width: 262px; height: 192px;"> <img alt="Travel & Hotels HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/27/39/html-template-273933.jpg" class="lazyload" /> </span> </a> <a href="/c/sports-html-templates" data-title="Sports" title="Sports HTML Templates"> <span style="width: 262px; height: 183px;"> <img alt="Sports HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/11/02/html-template-110215.jpg" class="lazyload" /> </span> </a> <a href="/c/sale-html-templates" data-title="Sale" title="Sale HTML Templates"> <span style="width: 262px; height: 132px;"> <img alt="Sale HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/53/00/html-template-53001.jpg" class="lazyload" /> </span> </a> <a href="/c/music-entertainment-html-templates" data-title="Music & Entertainment" title="Music & Entertainment HTML Templates"> <span style="width: 262px; height: 158px;"> <img alt="Music & Entertainment HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/11/24/html-template-112435.jpg" class="lazyload" /> </span> </a> <a href="/c/nature-html-templates" data-title="Nature" title="Nature HTML Templates"> <span style="width: 262px; height: 142px;"> <img alt="Nature HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/92/75/html-template-92757.jpg" class="lazyload" /> </span> </a> <a href="/c/real-estate-html-templates" data-title="Real Estate" title="Real Estate HTML Templates"> <span style="width: 262px; height: 150px;"> <img alt="Real Estate HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/54/46/html-template-54464.jpg" class="lazyload" /> </span> </a> <a href="/c/medicine-science-html-templates" data-title="Medicine & Science" title="Medicine & Science HTML Templates"> <span style="width: 262px; height: 183px;"> <img alt="Medicine & Science HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/72/64/html-template-72642.jpg" class="lazyload" /> </span> </a> <a href="/c/wedding-html-templates" data-title="Wedding" title="Wedding HTML Templates"> <span style="width: 262px; height: 169px;"> <img alt="Wedding HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/42/47/html-template-42479.jpg" class="lazyload" /> </span> </a> <a href="/c/pets-animals-html-templates" data-title="Pets & Animals" title="Pets & Animals HTML Templates"> <span style="width: 262px; height: 135px;"> <img alt="Pets & Animals HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/66/63/html-template-66633.jpg" class="lazyload" /> </span> </a> </div> </div> </div> <a class="thumbnail-slider-control left off" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M9.53 11.71L5.99 8.18a.25.25 0 0 1 0-.36L9.53 4.3a.75.75 0 1 0-1.06-1.06L4.93 6.76c-.68.69-.68 1.8 0 2.48l3.54 3.53a.75.75 0 0 0 1.06-1.06z"></path> </svg> </span> </a> <a class="thumbnail-slider-control right" href="#" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="currentColor" d="M6.47 4.29l3.54 3.53c.1.1.1.26 0 .36L6.47 11.7a.75.75 0 1 0 1.06 1.06l3.54-3.53c.68-.69.68-1.8 0-2.48L7.53 3.23a.75.75 0 0 0-1.06 1.06z"></path> </svg> </span> </a> </div> </div> <div class="features-block"> <div class="custom-block "> <h2 class=>Best Block Designs</h2> </div> </div> <div class="features-block"> <div class="custom-block "> <p class=>Choose from our awesome multi-purpose block templates hand-picked by our designer community. Create and customize them with our powerful free website generator.</p> </div> </div> <div class="custom-block block-styles-container "> <div class="templates-block block-styles"> <a href="/c/text-on-image-html-templates" data-title="Text On Image" title="Text On Image HTML Templates" style="" > <span style="width: 262px; height: 165px;"> <img alt="Text On Image HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/54/79/html-template-54794.jpg" class="lazyload" /> </span> </a> <a href="/c/features-html-templates" data-title="Features" title="Features HTML Templates" style="" > <span style="width: 262px; height: 189px;"> <img alt="Features HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/11/03/html-template-110347.jpg" class="lazyload" /> </span> </a> <a href="/c/contacts-html-templates" data-title="Contacts" title="Contacts HTML Templates" style="" > <span style="width: 262px; height: 153px;"> <img alt="Contacts HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/98/82/html-template-98828.jpg" class="lazyload" /> </span> </a> <a href="/c/about-us-html-templates" data-title="About Us" title="About Us HTML Templates" style="" > <span style="width: 262px; height: 195px;"> <img alt="About Us HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/83/06/html-template-83067.jpg" class="lazyload" /> </span> </a> <a href="/c/full-width-slider-html-templates" data-title="Full Width Slider" title="Full Width Slider HTML Templates" style="" > <span style="width: 262px; height: 201px;"> <img alt="Full Width Slider HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/79/31/html-template-79311.jpg" class="lazyload" /> </span> </a> <a href="/c/shapes-html-templates" data-title="Shapes" title="Shapes HTML Templates" style="" > <span style="width: 262px; height: 201px;"> <img alt="Shapes HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/12/54/html-template-125443.jpg" class="lazyload" /> </span> </a> <a href="/c/wide-html-templates" data-title="Wide" title="Wide HTML Templates" style="" > <span style="width: 262px; height: 135px;"> <img alt="Wide HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/76/59/html-template-76596.jpg" class="lazyload" /> </span> </a> <a href="/c/over-grid-html-templates" data-title="Over Grid" title="Over Grid HTML Templates" style="" > <span style="width: 262px; height: 160px;"> <img alt="Over Grid HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/42/64/html-template-42649.jpg" class="lazyload" /> </span> </a> <a href="/c/split-html-templates" data-title="Split" title="Split HTML Templates" style="" > <span style="width: 262px; height: 149px;"> <img alt="Split HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/80/02/html-template-80028.jpg" class="lazyload" /> </span> </a> <a href="/c/group-html-templates" data-title="Group" title="Group HTML Templates" style="" > <span style="width: 262px; height: 185px;"> <img alt="Group HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/10/88/html-template-108822.jpg" class="lazyload" /> </span> </a> <a href="/c/layered-images-html-templates" data-title="Layered Images" title="Layered Images HTML Templates" style="" > <span style="width: 262px; height: 229px;"> <img alt="Layered Images HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/10/03/html-template-100302.jpg" class="lazyload" /> </span> </a> <a href="/c/gallery-html-templates" data-title="Gallery" title="Gallery HTML Templates" style="" > <span style="width: 262px; height: 159px;"> <img alt="Gallery HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/76/40/html-template-76408.jpg" class="lazyload" /> </span> </a> <a href="/c/grid-html-templates" data-title="Grid" title="Grid HTML Templates" style="" > <span style="width: 262px; height: 185px;"> <img alt="Grid HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/50/90/html-template-50907.jpg" class="lazyload" /> </span> </a> <a href="/c/tiles-html-templates" data-title="Tiles" title="Tiles HTML Templates" style="" > <span style="width: 262px; height: 203px;"> <img alt="Tiles HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/72/86/html-template-72867.jpg" class="lazyload" /> </span> </a> <a href="/c/grid-repeater-html-templates" data-title="Grid Repeater" title="Grid Repeater HTML Templates" style="" > <span style="width: 262px; height: 180px;"> <img alt="Grid Repeater HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/85/97/html-template-85970.jpg" class="lazyload" /> </span> </a> <a href="/c/slider-html-templates" data-title="Slider" title="Slider HTML Templates" style=" display:none;" > <span style="width: 262px; height: 147px;"> <img alt="Slider HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/96/00/html-template-96002.jpg" class="lazyload" /> </span> </a> <a href="/c/overlap-block-html-templates" data-title="Overlap Block" title="Overlap Block HTML Templates" style=" display:none;" > <span style="width: 262px; height: 206px;"> <img alt="Overlap Block HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/69/14/html-template-69144.jpg" class="lazyload" /> </span> </a> <a href="/c/thirds-html-templates" data-title="Thirds" title="Thirds HTML Templates" style=" display:none;" > <span style="width: 262px; height: 161px;"> <img alt="Thirds HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/44/83/html-template-44833.jpg" class="lazyload" /> </span> </a> <a href="/c/modal-popup-html-templates" data-title="Modal Popup" title="Modal Popup HTML Templates" style=" display:none;" > <span style="width: 262px; height: 205px;"> <img alt="Modal Popup HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/12/37/html-template-123744.jpg" class="lazyload" /> </span> </a> <a href="/c/blog-posts-html-templates" data-title="Blog Posts" title="Blog Posts HTML Templates" style=" display:none;" > <span style="width: 262px; height: 169px;"> <img alt="Blog Posts HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/90/90/html-template-90908.jpg" class="lazyload" /> </span> </a> <a href="/c/product-list-html-templates" data-title="Product List" title="Product List HTML Templates" style=" display:none;" > <span style="width: 262px; height: 155px;"> <img alt="Product List HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/88/85/html-template-88852.jpg" class="lazyload" /> </span> </a> <a href="/c/product-details-html-templates" data-title="Product Details" title="Product Details HTML Templates" style=" display:none;" > <span style="width: 262px; height: 111px;"> <img alt="Product Details HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/11/51/html-template-115128.jpg" class="lazyload" /> </span> </a> <a href="/c/testimonials-html-templates" data-title="Testimonials" title="Testimonials HTML Templates" style=" display:none;" > <span style="width: 262px; height: 115px;"> <img alt="Testimonials HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/98/54/html-template-98542.jpg" class="lazyload" /> </span> </a> <a href="/c/brands-html-templates" data-title="Brands" title="Brands HTML Templates" style=" display:none;" > <span style="width: 262px; height: 120px;"> <img alt="Brands HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/83/93/html-template-83936.jpg" class="lazyload" /> </span> </a> <a href="/c/video-html-templates" data-title="Video" title="Video HTML Templates" style=" display:none;" > <span style="width: 262px; height: 124px;"> <img alt="Video HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/57/18/html-template-57185.jpg" class="lazyload" /> </span> </a> <a href="/c/contact-form-html-templates" data-title="Contact Form" title="Contact Form HTML Templates" style=" display:none;" > <span style="width: 262px; height: 121px;"> <img alt="Contact Form HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/91/51/html-template-91513.jpg" class="lazyload" /> </span> </a> <a href="/c/counter-html-templates" data-title="Counter" title="Counter HTML Templates" style=" display:none;" > <span style="width: 262px; height: 106px;"> <img alt="Counter HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/80/92/html-template-80924.jpg" class="lazyload" /> </span> </a> <a href="/c/text-html-templates" data-title="Text" title="Text HTML Templates" style=" display:none;" > <span style="width: 262px; height: 129px;"> <img alt="Text HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/95/49/html-template-95498.jpg" class="lazyload" /> </span> </a> <a href="/c/text-button-html-templates" data-title="Text & Button" title="Text & Button HTML Templates" style=" display:none;" > <span style="width: 262px; height: 139px;"> <img alt="Text & Button HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/25/09/html-template-250994.jpg" class="lazyload" /> </span> </a> <a href="/c/team-html-templates" data-title="Team" title="Team HTML Templates" style=" display:none;" > <span style="width: 262px; height: 171px;"> <img alt="Team HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/69/46/html-template-69463.jpg" class="lazyload" /> </span> </a> <a href="/c/pricing-html-templates" data-title="Pricing" title="Pricing HTML Templates" style=" display:none;" > <span style="width: 262px; height: 154px;"> <img alt="Pricing HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/90/66/html-template-90665.jpg" class="lazyload" /> </span> </a> <a href="/c/table-html-templates" data-title="Table" title="Table HTML Templates" style=" display:none;" > <span style="width: 262px; height: 160px;"> <img alt="Table HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/87/27/html-template-87275.jpg" class="lazyload" /> </span> </a> <a href="/c/tabs-html-templates" data-title="Tabs" title="Tabs HTML Templates" style=" display:none;" > <span style="width: 262px; height: 109px;"> <img alt="Tabs HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/92/92/html-template-92929.jpg" class="lazyload" /> </span> </a> <a href="/c/faq-html-templates" data-title="FAQ" title="FAQ HTML Templates" style=" display:none;" > <span style="width: 262px; height: 153px;"> <img alt="FAQ HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/26/54/html-template-265408.jpg" class="lazyload" /> </span> </a> <a href="/c/accordion-html-templates" data-title="Accordion" title="Accordion HTML Templates" style=" display:none;" > <span style="width: 262px; height: 140px;"> <img alt="Accordion HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/23/06/html-template-230602.jpg" class="lazyload" /> </span> </a> <a href="/c/social-html-templates" data-title="Social" title="Social HTML Templates" style=" display:none;" > <span style="width: 262px; height: 149px;"> <img alt="Social HTML Templates" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" data-src="https://images01.nicepagecdn.com/page/83/06/html-template-83062.jpg" class="lazyload" /> </span> </a> </div> <a href="#" class="block-styles-all" rel="noopener" aria-label="thumbnail slider show more"> <span class="thumbnail-slider-control-btn"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><path d="M3.2,6.3c-0.3,0.3-0.3,0.8,0,1.2l3.5,4c0.7,0.8,1.8,0.8,2.5,0l3.5-4c0,0,0,0,0,0c0.3-0.3,0.3-0.9,0-1.2 c-0.3-0.3-0.8-0.3-1.1,0l-3.5,4c-0.1,0.1-0.3,0.1-0.4,0l-3.5-4C4,6,3.5,6,3.2,6.3z" /></svg> </span> </a> </div> </div> <div class="custom-block">  <div class="modal fade" id="feature-modal-preview" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="modal-container"> <video src="" class="big-video embed-responsive-item lazyload lazyloading" autoplay="autoplay" playsinline="" loop="" muted=""> <source type="video/mp4" /> <p>Your browser does not support HTML5 video.</p> </video> <img src="" alt="" /> <h2 class="modal-title" id="modalLabel"></h2> <p></p> <div class="link align-left"> <a class="learn-more-link" href="#">Learn more</a> <a class="examples-link" href="#">See examples</a> </div> <h4>Free Website Builder with 200+ Features</h4> </div> <div class="download-buttons"> <a class="btn btn-lg win-download" href="/download-windows" type="button">Download for Windows</a> <a class="btn btn-lg mac-download" href="/download-mac" type="button">Download for Mac</a> </div> </div> </div> </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">© 2025 Nicepage Free Website Builder Software - All Rights Reserved</div> </div> </div> </div> </div> </div> </body> </html>

CINXE.COM

Create awesome websites using 400+ Nicepage features