{"id":1171,"date":"2012-02-10T23:37:47","date_gmt":"2012-02-10T23:37:47","guid":{"rendered":"http:\/\/help-o.ning.com\/?page_id=1171"},"modified":"2019-08-27T12:05:48","modified_gmt":"2019-08-27T12:05:48","slug":"design","status":"publish","type":"page","link":"https:\/\/www.ning.com\/help\/center\/design\/","title":{"rendered":"The Design of Your Site"},"content":{"rendered":"<p><img class=\"alignnone\" title=\"design studio\" src=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533835?profile=original\" alt=\"The Design of Your Site 1\" width=\"550\" \/><\/p>\n<h2>The Design Studio: customization made simple<\/h2>\n<p>The Design Studio is what you use to customize your site&#8217;s appearance. Select a theme, insert a header or background image, two columns or three \u2014 lots more details you can change and experiment with. Start with the <a href=\"\/help\/introduction-to-the-design-studio-2\/\">Introduction to the Design Studio<\/a>.<\/p>\n<div class=\"divider_thin\"><\/div>\n<h2>Customizing headers and backgrounds<\/h2>\n<p>Making a custom header can seem daunting, but it&#8217;s not that hard. You&#8217;ll need to start with the image of your choice, crop it or resize it to be the correct size, and then upload it to your Ning Network. The width of your Ning Network&#8217;s header area is 955 pixels (the height is up to you), and we can show you how to use free online programs to crop or resize your image width to the right size. Dig in and <a href=\"\/help\/create-a-custom-header\/\">Create a Custom Header<\/a>.<\/p>\n<p><img src=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533843?profile=original\" alt=\"Image\" width=\"585\" border=\"0\" \/><\/p>\n<h4>Removing your network&#8217;s name and tagline from the header<\/h4>\n<p><img class=\"alignright\" title=\"display none css\" src=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533874?profile=original\" alt=\"The Design of Your Site 2\" width=\"200\" \/>Instead of having your Ning Network name and tagline appear over your header, you might want to place the text in your image. If that&#8217;s the case, you won&#8217;t want the text-based name and tagline to appear on top of your image-only header. It&#8217;s easy to change. Just follow these steps to <a href=\"\/help\/remove-your-ning-networks-name-and-tagline\/\">Remove Your Site&#8217;s Name and Tagline<\/a>.<\/p>\n<h4>Setting up a custom background image<\/h4>\n<p><img class=\"alignright\" title=\"background image\" src=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533747?profile=original\" alt=\"The Design of Your Site 3\" width=\"250\" \/> A background image that sits behind all of your content can be a distraction from the content \u2014 or it can be a nice complement to your design. It doesn&#8217;t always work, but it can look great when it does. If you&#8217;re up for the challenge of creating your own background image, check out this <a href=\"\/help\/using-images-as-backgrounds-of-pages-and-modules\/\">walk-through article<\/a>. This one requires some knowledge of CSS!<\/p>\n<div class=\"divider_thin\"><\/div>\n<h2>Standalone pages: a blank canvas<\/h2>\n<p><img class=\"alignleft\" title=\"add page\" src=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533749?profile=original\" alt=\"The Design of Your Site 4\" width=\"75\" \/>Your site is set up around modules and features that you can place in tabs, and each feature\/module also sits on its own page, but what if you want to create a standalone page composed of custom HTML you&#8217;ve created? Use the Pages feature as a blank canvas to place custom HTML content and link to it from a tab. Some Network Creators use this to add pages that hold content like community guidelines, &#8220;about us&#8221; content, &#8220;welcome center&#8221; pages, etc. Just about any type of HTML will work. Pages have a built-in rich text editor that can help with simple styling if you don&#8217;t know any HTML. Check out the <a href=\"\/help\/introduction-to-pages\/\">Introduction to Pages<\/a>.<\/p>\n<p><img loading=\"lazy\" class=\"alignleft\" title=\"html\" src=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533905?profile=original\" alt=\"The Design of Your Site 5\" width=\"32\" height=\"32\" \/> Need some templates for standalone pages? We&#8217;ve put together some <a href=\"\/help\/handy-html-templates-for-pages-or-notes\/\">Handy HTML Templates for Pages and Notes<\/a>.\u00a0Simply copy and paste the documents you want to use and modify them to fit your network.<\/p>\n<div class=\"divider_thin\"><\/div>\n<h2>Tabs: primary navigation<\/h2>\n<p><img class=\"alignnone\" title=\"tabs\" src=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533907?profile=original\" alt=\"The Design of Your Site 6\" width=\"585\" \/><\/p>\n<p>The tabs on your network point to modules you&#8217;ve enabled in your Features Layout, but you can add more tabs, remove tabs, or even hide tabs from some people (without affecting the functionality of the modules). You can even link out to content outside of your network. Learn all about tabs in the <a href=\"\/help\/introduction-to-the-tabs-feature\/\">Introduction to Tabs<\/a> article.<\/p>\n<div class=\"divider_thin\"><\/div>\n<h2>CSS: A little knowledge goes a long way<\/h2>\n<p><img loading=\"lazy\" class=\"alignleft\" title=\"css\" src=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533910?profile=original\" alt=\"The Design of Your Site 7\" width=\"75\" height=\"75\" \/>You don&#8217;t need to know anything about the underlying design code to use your Ning Network, but if you ever want broaden out your skills a bit, CSS is the way to go. Many of the elements on the page you see are put in place using CSS. You can alter your CSS to nudge things around, hide elements you don&#8217;t want to show, or completely redesign your site. If you&#8217;re ready to learn a bit about CSS, start with the <a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"nofollow\">W3School&#8217;s CSS Tutorials<\/a>. Once you&#8217;ve gotten the hang of it, you can start using the <a href=\"https:\/\/developer.ning.com\/notes\/HTML_and_CSS_Guidelines\" target=\"_blank\">HTML and CSS Guidelines<\/a> from our Developer&#8217;s network to make alterations. Obviously, this requires some extra skill, so please use your test network when trying out alterations to your CSS code.<\/p>\n<div class=\"divider_thin\"><\/div>\n<h2>Are you a designer? Use Developer Mode.<\/h2>\n<p><img class=\"alignleft\" title=\"less css\" src=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533915?profile=original\" alt=\"The Design of Your Site 8\" width=\"225\" \/>If you have some CSS skills already, you may want to read up on Developer Mode in our Design Studio, which lets you alter nearly anything in the design framework of a theme. If you have some serious design chops and want to make your own custom theme from scratch, we have some <a href=\"https:\/\/www.ning.com\/\">Ning Theme Documentation<\/a> that will most certainly help.<\/p>\n<div class=\"divider_thin\"><\/div>\n<h2>Main Page advice from successful Network Creators<\/h2>\n<p><img class=\"alignright\" title=\"best practices\" src=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533211?profile=original\" alt=\"The Design of Your Site 9\" width=\"85\" \/>How much time do you have to persuade a visitor to join your Ning Network before they hit the back button or move on to another Web page? Five seconds? If your members can&#8217;t find a reason to be on your Ning Network right away, you&#8217;ll lose them, maybe forever. We have a bunch of examples from Network Creators that can help you really <a href=\"\/help\/work-portfolio-gallery\/make-your-main-page-work\/\">Make Your Main Page Work<\/a>.<\/p>\n<div class=\"divider_thin\"><\/div>\n<div class=\"box box_green warrning_box\">\u00a0<strong>A word of warning and advice: Always use a test network!<\/strong>: You will undoubtedly find a lot of widgets across the Internet that you might want to integrate into your Ning Network. Some of that third-party code can do unpredictable things or make parts of your site look funky or weird. We always recommend trying out any third-party code or scripts by <a href=\"https:\/\/www.ning.com\/help\/learn-about-test-networks\/\">Using a Test Network<\/a> before deploying it to your live site.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Design Studio: customization made simple<br \/>\nThe Design Studio is what you use to customize your site&#8217;s appearance. Select a theme, insert a header or background image, two columns or three \u2014 lots more details you can change and experiment with. Start with the <a href=\"\/help\/introduction-to-the-design-studio-2\/\">Introduction to the Design Studio<\/a>.<br \/>\nCustomizing headers and backgrounds<br \/>\nMaking a custom header can seem daunting, but it&#8217;s not that hard. You&#8217;ll need to start with the image of your choice, crop it or resize it to be the correct size, and then upload it to your Ning Network. The width of your Ning Network&#8217;s header area is 955 pixels (the height is up to you), and we can show you how to use free online programs to crop or resize your image width to the right size. Dig in and <a href=\"\/help\/create-a-custom-header\/\">Create a Custom Header<\/a>.<\/p>\n<p>Removing your network&#8217;s name and tagline from the header<br \/>\nInstead of having your Ning Network name and tagline appear over your header, you might want to place the text in your image. If that&#8217;s the case, you won&#8217;t want the text-based name and tagline to appear on top of your image-only header. It&#8217;s easy to change. Just follow these steps to <a href=\"\/help\/remove-your-ning-networks-name-and-tagline\/\">Remove Your &#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":876,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Design of Your Site | Ning Help Center<\/title>\n<meta name=\"description\" content=\"The Design of Your Site | Ning Help Center\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ning.com\/ning3help\/the-design-of-your-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Design of Your Site | Ning Help Center\" \/>\n<meta property=\"og:description\" content=\"The Design of Your Site | Ning Help Center\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ning.com\/ning3help\/the-design-of-your-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Ning Help Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Ning\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-27T12:05:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533835?profile=original\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:site\" content=\"@Ning\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ning.com\/help\/#website\",\"url\":\"https:\/\/www.ning.com\/help\/\",\"name\":\"Ning Help Center\",\"description\":\"The place to look for help with the details of your Ning Network.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ning.com\/help\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.ning.com\/ning3help\/the-design-of-your-site\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533835?profile=original\",\"contentUrl\":\"https:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/50533835?profile=original\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ning.com\/ning3help\/the-design-of-your-site\/#webpage\",\"url\":\"https:\/\/www.ning.com\/ning3help\/the-design-of-your-site\/\",\"name\":\"The Design of Your Site | Ning Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/www.ning.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ning.com\/ning3help\/the-design-of-your-site\/#primaryimage\"},\"datePublished\":\"2012-02-10T23:37:47+00:00\",\"dateModified\":\"2019-08-27T12:05:48+00:00\",\"description\":\"The Design of Your Site | Ning Help Center\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ning.com\/ning3help\/the-design-of-your-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ning.com\/ning3help\/the-design-of-your-site\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ning.com\/ning3help\/the-design-of-your-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.ning.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Start here for answers and advice\",\"item\":\"https:\/\/www.ning.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"The Design of Your Site\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/pages\/1171"}],"collection":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/comments?post=1171"}],"version-history":[{"count":158,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/pages\/1171\/revisions"}],"predecessor-version":[{"id":10919,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/pages\/1171\/revisions\/10919"}],"up":[{"embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/pages\/876"}],"wp:attachment":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/media?parent=1171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}