HTML/CSS Editor & Custom HTML Block

<!DOCTYPE html> <html > <head>  <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="generator" content="Mobirise v5.1.11, mobirise.com"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <link rel="shortcut icon" href="assets/images/logo.png" type="image/x-icon"> <meta name="description" content="Code Editor - Edit the HTML/CSS code of every block. With Custom HTML Block, you can insert your own on 3rd party code."> <title>HTML/CSS Editor & Custom HTML Block</title> <link rel="stylesheet" href="assets/web/assets/mobirise-icons2/mobirise2.css"> <link rel="stylesheet" href="ce-assets/tether/tether.min.css"> <link rel="stylesheet" href="ce-assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="ce-assets/bootstrap/css/bootstrap-grid.min.css"> <link rel="stylesheet" href="ce-assets/bootstrap/css/bootstrap-reboot.min.css"> <link rel="stylesheet" href="ce-assets/dropdown/css/style.css"> <link rel="stylesheet" href="ce-assets/socicon/css/styles.css"> <link rel="stylesheet" href="ce-assets/theme/css/style.css"> <link rel="preload" as="style" href="ce-assets/mobirise/css/mbr-additional.css"><link rel="stylesheet" href="ce-assets/mobirise/css/mbr-additional.css" type="text/css">  <script>(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= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PFK425');</script>  </head> <body>  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PFK425" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <section class="menu menu2 cid-sbjkTNxZjK" once="menu" id="menu2-z"> <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg"> <div class="container-fluid"> <div class="navbar-brand"> <span class="navbar-logo"> <a href="https://mobiri.se"> <img src="ce-assets/images/logo.png" alt="html css code editor" style="height: 3rem;"> </a> </span> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <div class="hamburger"> <span></span> <span></span> <span></span> <span></span> </div> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="navbar-buttons mbr-section-btn"><a class="btn btn-primary display-7" href="https://mobirise.com/extensions/kit/"> Get All-in-One Kit</a></div> </div> </div> </nav> </section> <section class="header10 cid-sbw0B55cad mbr-parallax-background" id="header10-41"> <div class="mbr-overlay" style="opacity: 0.3; background-color: rgb(236, 242, 253);"></div> <div class="align-center container-fluid"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-9"> <h1 class="mbr-section-title mbr-fonts-style mb-3 display-1"><strong>Code Editor</strong></h1> <p class="mbr-text mbr-fonts-style display-7"> Get the complete control over HTML/CSS in your Mobirise project.</p> <div class="mbr-section-btn mt-3"><a class="btn btn-primary display-7" href="index.html#features1-4i">Learn More</a> <a class="btn btn-secondary display-7" href="http://my.mobirise.com/buy.php?p=2">Buy Now</a></div> <div class="mbr-figure">   <div class="easyhtml5video" width="100%" height="100%"><video autoplay="" loop="" muted="" poster="ce-assets/video/code-editor-top.png" style="width:100%"> <source src="ce-assets/video/top.m4v" type="video/mp4"> <source src="ce-assets/video/top.webm" type="video/webm"> <source src="ce-assets/video/top.ogv" type="video/ogg"> <source src="ce-assets/video/top.mp4"> </video> </div> </div> </div> </div> </div> </section> <section class="features1 cid-scwW1lBlsN" id="features1-4i"> <div class="container"> <div class="row"> </div> <div class="row"> <div class="card col-12 col-md-6 col-lg-3"> <a href="#content9-f"> <div class="card-wrapper"> <div class="card-box align-center"> <div class="iconfont-wrapper"> <span class="mbr-iconfont mobi-mbri-download-2 mobi-mbri"></span> </div> <h5 class="card-title mbr-fonts-style display-5"><strong>How to install</strong></h5> </div> </div></a> </div> <div class="card col-12 col-md-6 col-lg-3"> <a href="#content4-4o"> <div class="card-wrapper"> <div class="card-box align-center"> <div class="iconfont-wrapper"> <span class="mbr-iconfont mobi-mbri-setting-2 mobi-mbri"></span> </div> <h5 class="card-title mbr-fonts-style display-5"><strong>How to use</strong></h5> </div> </div></a> </div> <div class="card col-12 col-md-6 col-lg-3"><a href="#content14-1c"> <div class="card-wrapper"> <div class="card-box align-center"> <div class="iconfont-wrapper"> <span class="mbr-iconfont mobi-mbri-pin mobi-mbri"></span> </div> <h5 class="card-title mbr-fonts-style display-5"><strong>FAQ</strong></h5> </div> </div></a> </div> </div> </div> </section> <section class="content9 cid-sbe7Bun3z1" id="content9-f"> <div class="container"> <div class="row justify-content-center"> <div class="counter-container col-md-12 col-lg-9"> <h4 class="mbr-section-title mbr-fonts-style mb-4 display-2"><strong> How to install Code Editor</strong></h4> <div class="mbr-text mbr-fonts-style display-7"> <ol> <li><strong>Code Editor</strong> is included in <a href="https://mobirise.com/extensions/kit/" class="text-primary">All-in-One Mobirise Kit</a>. Activate the key for All-in-One Kit or Code Editor in the <strong>Extensions</strong> list in the app.</li> <li>Find <strong>Code Editor</strong> in the <strong>Extensions </strong>list. Click on the <strong>Add </strong>button to add it. This button is available if your subscription is valid.</li> </ol> </div> </div> </div> </div> </section> <section class="content4 cid-scx0zw4w0j" id="content4-4o"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-12 col-lg-12"> <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-2"><strong>How to use Code Editor</strong></h3> </div> </div> </div> </section> <section class="features15 cid-scwWNMOvlh" id="features16-4j"> <div class="container"> <div class="content-wrapper"> <div class="row align-items-center"> <div class="col-12 col-lg"> <div class="text-wrapper"> <h6 class="card-title mbr-fonts-style display-5"><strong>Edit Blocks Code</strong></h6> <p class="mbr-text mbr-fonts-style mb-4 display-7"> Click the Edit Code button on the Tools panel to open the Code Editor.</p> </div> </div> <div class="col-12 col-lg-8"> <div class="image-wrapper"> <img src="ce-assets/images/code-editor-edit-blocks1.jpg" alt="html code editor"> </div> </div> </div> </div> </div> </section> <section class="features16 cid-scwWOKJEc0" id="features17-4k"> <div class="container"> <div class="content-wrapper"> <div class="row align-items-center"> <div class="col-12 col-lg-8"> <div class="image-wrapper"> <video autoplay="" loop="" muted="" poster="ce-assets/video/code-editor-custom.png" controlslist="nodownload" width="100%" height="100%"> <source src="ce-assets/video/custom.mp4" type="video/mp4"> Making your own responsive website with free website builder. Tutorial </video> </div> </div> <div class="col-12 col-lg"> <div class="text-wrapper"> <h6 class="card-title mbr-fonts-style display-5"><strong>Custom HTML block </strong></h6> <p class="mbr-text mbr-fonts-style mb-4 display-7"> This block appears in the Blocks list: you can add it to a page to add your code.</p> </div> </div> </div> </div> </div> </section> <section class="features15 cid-scwWPs2uXr" id="features16-4l"> <div class="container"> <div class="content-wrapper"> <div class="row align-items-center"> <div class="col-12 col-lg"> <div class="text-wrapper"> <h6 class="card-title mbr-fonts-style display-5"><strong>Global Style Editor</strong></h6> <p class="mbr-text mbr-fonts-style mb-4 display-7"> Get access to theme styles and set your CSS rules globally for a project. With Code Editor, you'll find the button Edit in Code Editor in Style Changer.</p> </div> </div> <div class="col-12 col-lg-7"> <div class="image-wrapper"> <img src="ce-assets/images/code-editor-global-css-1.jpg" alt="best html code editor"> </div> </div> </div> </div> </div> </section> <section class="features16 cid-scwWQr7kiE" id="features17-4m"> <div class="container"> <div class="content-wrapper"> <div class="row align-items-center"> <div class="col-12 col-lg-7"> <div class="image-wrapper"> <video autoplay="" loop="" muted="" controlslist="nodownload" poster="ce-assets/video/code-editor-global.png" width="100%" height="100%"> <source src="ce-assets/video/global.mp4" type="video/mp4"> </video> </div> </div> <div class="col-12 col-lg"> <div class="text-wrapper"> <h6 class="card-title mbr-fonts-style display-5"><strong>Global HTML Insert</strong></h6> <p class="mbr-text mbr-fonts-style mb-4 display-7"> Add code excepts to all pages globally with the Global HTML Insert. This functionality is available in Site Settings with Code Editor.</p> </div> </div> </div> </div> </div> </section> <section class="features14 cid-scwZxr2eTD" id="features15-4n"> <div class="container"> <div class="row justify-content-center"> <div class="card col-12 col-md-6 col-lg-4"> <div class="card-wrapper"> <span class="mbr-iconfont m-auto mobi-mbri-globe-2 mobi-mbri"></span> <div class="card-box"> <h4 class="card-title mbr-fonts-style mb-2 display-7"><strong>HTML lang Tag</strong></h4> <h5 class="card-text mbr-fonts-style display-4">Set the HTML lang tag for your site. This field will be available in Site Settings.</h5> </div> </div> </div> <div class="card col-12 col-md-6 col-lg-4"> <div class="card-wrapper"> <span class="mbr-iconfont m-auto mobi-mbri-drag-n-drop-2 mobi-mbri"></span> <div class="card-box"> <h4 class="card-title mbr-fonts-style mb-2 display-7"><strong>Place Your Scripts</strong></h4> <h5 class="card-text mbr-fonts-style display-4">You can add your code to HEAD and BODY parts of your page.</h5> </div> </div> </div> <div class="card col-12 col-md-6 col-lg-4"> <div class="card-wrapper"> <span class="mbr-iconfont m-auto mobi-mbri-code mobi-mbri"></span> <div class="card-box"> <h4 class="card-title mbr-fonts-style mb-2 display-7"><strong>No Mobirise Mentions</strong></h4> <h5 class="card-text mbr-fonts-style display-4">There will be no mentions about the app in the code of your sites.</h5> </div> </div> </div> </div> </div> </section> <section class="content14 cid-sbksE8J4xS" id="content14-1c"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-9"> <h3 class="mbr-section-title mbr-fonts-style mb-4 display-2"> <strong>Frequently asked questions</strong> </h3> <ul class="list mbr-fonts-style display-7"> <li><strong>I have installed Code Editor, but I still see Mobirise mentions.</strong><br>Open the main menu in the app, and then click on the Account tab. Open App Settings, and in the Code Editor section, enable the "Remove Mobirise from HTML" option.</li> <li><strong>I can't edit some Mobirise blocks fully, such as galleries in M4 themes.</strong><br>Unfortunately, these blocks are powered by Mobirise plugins that don't allow free editing of code. We are trying to avoid such practice in new themes. </li> <li><strong>Why don't my scripts work?</strong><br>In most cases, custom scripts are filtered by the app to avoid issues. You'll see your JS scripts when you preview your site. Your server-side scripts will work when you publish your site to your server.</li> <li><strong>My widget doesn't work when my page is published online.                         </strong><br>Please check the link used in your widget, and add a protocol to it, like "https://". It's often missed.</li> <li><strong>I have edited a Mobirise block with Code Editor, and now I can't edit its content visually.<br></strong>Please don't remove existing classes and attributes freely. Some of them are important for the visual editor.</li> </ul> </div> </div> </div> </section> <section class="info3 cid-sbksV9nTu4" id="info3-1d"> <div class="container"> <div class="row justify-content-center"> <div class="card col-12 col-lg-10"> <div class="card-wrapper"> <div class="card-box align-center"> <h4 class="card-title mbr-fonts-style align-center mb-4 display-1"> <strong>ALL-IN-ONE KIT</strong></h4> <p class="mbr-text mbr-fonts-style mb-4 display-7"> Get all Mobirise themes and extensions.</p> <div class="mbr-section-btn mt-3"><a class="btn btn-primary display-4" href="https://mobirise.com/extensions/kit/">Buy Mobirise Kit</a></div> </div> </div> </div> </div> </div> </section> <section class="footer3 cid-sbkt7ZXY5i" once="footers" id="footer3-1e"> <div class="container"> <div class="media-container-row align-center mbr-white"> <div class="row row-links"> <ul class="foot-menu"> <li class="foot-menu-item mbr-fonts-style display-7"><a href="https://mobirise.com/help/" class="text-primary">Help Cent<strong>e</strong>r</a></li><li class="foot-menu-item mbr-fonts-style display-7"><a href="https://mobirise.com/extensions/kit/" class="text-primary">Mobirise Kit</a></li><li class="foot-menu-item mbr-fonts-style display-7"><a href="https://forums.mobirise.com" class="text-primary">Mobirise Forums</a></li></ul> </div> <div class="row social-row"> <div class="social-list align-right pb-2"> <div class="soc-item"> <a href="https://twitter.com/mobirise" target="_blank"> <span class="socicon-twitter socicon mbr-iconfont mbr-iconfont-social"></span> </a> </div><div class="soc-item"> <a href="https://www.facebook.com/pages/Mobirise/1616226671953247" target="_blank"> <span class="socicon-facebook socicon mbr-iconfont mbr-iconfont-social"></span> </a> </div><div class="soc-item"> <a href="https://www.youtube.com/c/mobirise" target="_blank"> <span class="socicon-youtube socicon mbr-iconfont mbr-iconfont-social"></span> </a> </div></div> </div> <div class="row row-copirayt"> <p class="mbr-text mb-0 mbr-fonts-style mbr-white align-center display-7"> 漏 Copyright 2020 Mobirise. All Rights Reserved. </p> </div> </div> </div> </section><section style="background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; color:#aaa; font-size:12px; padding: 0; align-items: center; display: none;"><a href="https://mobirise.site/o" style="flex: 1 1; height: 3rem; padding-left: 1rem;"></a><p style="flex: 0 0 auto; margin:0; padding-right:1rem;">This <a href="https://mobirise.site/e" style="color:#aaa;">site</a> was created with Mobirise</p></section><script src="ce-assets/web/assets/jquery/jquery.min.js"></script> <script src="ce-assets/popper/popper.min.js"></script> <script src="ce-assets/tether/tether.min.js"></script> <script src="ce-assets/bootstrap/js/bootstrap.min.js"></script> <script src="ce-assets/smoothscroll/smooth-scroll.js"></script> <script src="ce-assets/dropdown/js/nav-dropdown.js"></script> <script src="ce-assets/dropdown/js/navbar-dropdown.js"></script> <script src="ce-assets/touchswipe/jquery.touch-swipe.min.js"></script> <script src="ce-assets/parallax/jarallax.min.js"></script> <script src="ce-assets/theme/js/script.js"></script> </body> </html>

CINXE.COM

HTML/CSS Editor & Custom HTML Block