CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#"> <head profile="http://www.w3.org/1999/xhtml/vocab"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Generator" content="Drupal 7 (http://drupal.org)" /> <link rel="canonical" href="/ucsf-site-builder" /> <link rel="shortlink" href="/node/36" /> <link rel="shortcut icon" href="https://websites.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/favicon.ico" type="image/vnd.microsoft.icon" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta property="og:image" content="https://websites.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/img/img-metatag.jpg" /> <meta property="og:image:width" content="940" /> <meta property="twitter:image" content="https://websites.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/img/img-metatag.jpg" /> <meta property="twitter:card" content="summary" /> <meta property="og:site_name" content="UCSF Websites" /> <meta property="twitter:url" content="https://websites.ucsf.edu/ucsf-site-builder" /> <meta property="og:url" content="https://websites.ucsf.edu/ucsf-site-builder" /> <meta property="twitter:title" content="UCSF Site Builder | UCSF Websites" /> <meta property="og:title" content="UCSF Site Builder" /> <title>UCSF Site Builder | UCSF Websites</title> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_kShW4RPmRstZ3SpIC-ZvVGNFVAi0WEMuCnI0ZkYIaFw.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_skhFl2AhilhxAlHjGa_fTNSPVanaq_LTvzbp87QV8BM.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_KtV_0W2L1RpBdKj5ObC3CRUchB_iaxUEL8n1_iqwt5o.css" media="all" /> <style type="text/css" media="all"> <![CDATA[/*> </style> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.2.5/css/hopscotch.min.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_0wq-oSMa1dZUDrswIs--ZE9BmEbEiCxrgJH-DEpoXrI.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="print" /> <style type="text/css" media="all"> <![CDATA[/*> </style> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_MB_OJmOWZ3q8_itIvibVBCwqx5eIBtmFezuG3FGZPnE.css" media="all" /> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_Pt6OpwTd6jcHLRIjrE-eSPLWMxWDkcyYrPTIrXDSON0.js"></script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_onbE0n0cQY6KTDQtHO_E27UBymFC-RuqypZZ6Zxez-o.js"></script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_gHk2gWJ_Qw_jU2qRiUmSl7d8oly1Cx7lQFrqcp3RXcI.js"></script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_ROty9TLRT7GvgDUFw_QNzL45vlatntRp6wuC_6otqeQ.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.2.5/js/hopscotch.min.js"></script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_X29AUVcfuG5wHH9ySA6s5LgOAjmkzlakDPpSV6MBBjY.js"></script> <script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=UA-174314-31"></script> <script type="text/javascript"> <![CDATA[//><!]]> </script> <script type="text/javascript"> <![CDATA[//><!]]> </script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_pBJ9BqqTImG5h6xNRUOzZ4_9dQezvjMt-I7yPp8naQY.js"></script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_QQeuJpMVaNOcbJ6HF3pJFdPsqb0L--SFT89e1HBmNhE.js"></script> <script type="text/javascript"> <![CDATA[//><!]]> </script> </head> <body class="html not-front not-logged-in page-node page-node- page-node-36 node-type-page slider-secondary ucsf-b1gfoot font--header--granjon slider-secondary-no-image profile--grid sidebar sidebar--right sidebar-color--white" > <div id="skip-link"> <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a> </div> <div id="page-wrapper"> <div id="page"> <div class="ucsf-top-header row-full-width no-logo"> <div class="inside"> <ul class="menu"> <li class="first"><a href="http://www.ucsf.edu">University of California San Francisco</a></li> <li><a href="http://www.ucsfhealth.org/">UCSF Health</a></li> <li><a href="http://www.ucsf.edu/search" title="">Search UCSF</a></li> <li><a href="http://www.ucsf.edu/about">About UCSF</a></li> </ul> </div> </div> <div id="header" class="row-full-width"> <div class="inside clearfix"> <h1 id="site-name"> <a href="/" title="Home" rel="home"> UCSF Websites </a> </h1> <div class="region region-header"> <div id="block-search-form" class="block block-search"> <div class="content"> <form onsubmit="if(this.search_block_form.value=='Search'){ alert('Please enter a search'); return false; }" action="/ucsf-site-builder" method="post" id="search-block-form" accept-charset="UTF-8"><div><div class="container-inline"> <h2 class="element-invisible">Search form</h2> <div class="form-item form-type-textfield form-item-search-block-form"> <label class="element-invisible" for="edit-search-block-form--2">Search... </label> <input title="Enter the terms you wish to search for." placeholder="Search..." class="text-input fa fa-search form-text" aria-hidden="" type="text" id="edit-search-block-form--2" name="search_block_form" value="" size="40" maxlength="128" /> </div> <div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="" class="form-submit" /></div><input type="hidden" name="form_build_id" value="form-IqPZ6-ccnAHTMnDeDnclGKEPO9GUaOQVVBQZvlUMSd8" /> <input type="hidden" name="form_id" value="search_block_form" /> </div> </div></form> </div> </div> <div id="block-ucsf-b1gfoot-tweaks-header-socialmedia" class="block block-ucsf-b1gfoot-tweaks"> <div class="content"> <div class="nav-social"></div> </div> </div> <div id="block-menu-block-1" class="block block-menu-block"> <div class="content"> <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1"> <ul class="menu"><li class="first expanded active-trail menu-mlid-1966"><a href="/checklist-create-website" class="active-trail">Get Started</a><ul class="menu"><li class="first leaf menu-mlid-2036"><a href="/checklist-create-website" title="">New Website Checklist</a></li> <li class="leaf menu-mlid-1976"><a href="/quiz-do-i-need-website">Quiz: Do I Need A Website?</a></li> <li class="leaf active-trail active menu-mlid-2021"><a href="/ucsf-site-builder" class="active-trail active">UCSF Site Builder</a></li> <li class="leaf has-children menu-mlid-2032"><a href="/custom-built-sites">Custom-Built Sites</a></li> <li class="leaf menu-mlid-3921"><a href="/website-hosting">Website Hosting</a></li> <li class="last leaf menu-mlid-5791"><a href="/consulting-services">Consulting Services</a></li> </ul></li> <li class="expanded menu-mlid-1981"><a href="/policies-standards">Policies & Standards</a><ul class="menu"><li class="first leaf menu-mlid-2041"><a href="/policies-standards" title="">Overview & Requirements</a></li> <li class="leaf menu-mlid-4051"><a href="/policies-standards/ucsf-policy-registration-and-use-domain-names">Registration and Use of Domain Names</a></li> <li class="leaf menu-mlid-2046"><a href="/brand-standards">Brand Standards</a></li> <li class="leaf has-children menu-mlid-2051"><a href="/digital-accessibility">Digital Accessibility</a></li> <li class="last leaf menu-mlid-12426"><a href="/website-security">Website Security</a></li> </ul></li> <li class="leaf menu-mlid-1996"><a href="/showcase">Showcase</a></li> <li class="expanded menu-mlid-2256"><a href="/blog" title="">News & Events</a><ul class="menu"><li class="first leaf menu-mlid-2261"><a href="/blog" title="">News & Announcements</a></li> <li class="last leaf menu-mlid-2061"><a href="/events">Events</a></li> </ul></li> <li class="expanded menu-mlid-2001"><a href="/help">Help</a><ul class="menu"><li class="first leaf menu-mlid-13161"><a href="/training">Training</a></li> <li class="leaf menu-mlid-2016"><a href="/frequently-asked-questions">Frequently Asked Questions</a></li> <li class="leaf menu-mlid-2006"><a href="https://it.ucsf.edu/service/digital-accessibility-program" title="">Accessibility Resources</a></li> <li class="last leaf menu-mlid-9841"><a href="/drupal-tutorials" title="">Tutorials</a></li> </ul></li> <li class="last expanded menu-mlid-8591"><a href="/azlist" title="">A-Z Websites</a><ul class="menu"><li class="first leaf menu-mlid-9836"><a href="/azlist" title="">A-Z Websites List</a></li> <li class="last leaf menu-mlid-9826"><a href="/updating-z-website-list">Updating the A-Z list</a></li> </ul></li> </ul></div> </div> </div> </div> </div> </div> <div id="breadcrumb" class="row-full-width"><div class="inside"><h2 class="element-invisible">You are here</h2><div class="breadcrumb"><a href="/">Home</a> > <a href="/checklist-create-website">Get Started</a> > <span class="breadcrumb-page-title">UCSF Site Builder</span></div></div></div> <h1 class="title" id="page-title">UCSF Site Builder</h1> <div class="content-top"> </div> <div id="main-wrapper"> <div id="main" class="clearfix"> <div id="content" class="column"> <div class="inside"> <a id="main-content"></a> <div class="tabs"></div> <div class="region region-content"> <div id="block-system-main" class="block block-system"> <div class="content"> <div id="node-36" class="node node-page slider-secondary clearfix" about="/ucsf-site-builder" typeof="sioc:Item foaf:Document"> <span property="dc:title" content="UCSF Site Builder" class="rdf-meta element-hidden"></span><span property="sioc:num_replies" content="0" datatype="xsd:integer" class="rdf-meta element-hidden"></span> <div class="content"> <div class="field field-name-field-body field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p>The UCSF Site Builder is a Drupal-based turnkey template built and maintained by UCSF. It comes with a host of attractive features, including the ability to integrate with UCSF's events calendar, faculty and researcher profiles and news content. Best of all, it's free to use for anyone starting a UCSF site.</p> <p>In fact, this entire site was made with the UCSF Site Builder. If you're looking for other examples, <a href="/showcase">visit our showcase</a>.</p> </div></div></div> <div class="paragraphs-items paragraphs-items-field-paragraph-sections paragraphs-items-field-paragraph-sections-full paragraphs-items-full"> <div class="field field-name-field-paragraph-sections field-type-paragraphs field-label-hidden"><div class="field-items"><div class="field-item even"><div class="entity entity-paragraphs-item paragraphs-item-textarea"> <div class="content"> <div class="field field-name-field-pg-textarea-text field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><div class="wysiwyg_twocols layout--20-80"> <div class="wysiwyg_twocols--first"> <p style="text-align:center"><img alt="Jigsaw piece" height="120" src="/sites/websites.ucsf.edu/files/wysiwyg/customizable.png" width="120" /></p> </div> <div class="wysiwyg_twocols--second"> <h2>Customizable</h2> <p>The template comes with five different homepage splashes, a number of color combos, choice of font, sidebar styling, and left or right sidebar placement. Pages are built modularly and content can easily be shifted around to suit your needs.</p> <p>Pull in a feed of news or events, create automatically updated profile pages, build a one-, two- or three-column layout, call out important quotes, add images or videos... it's all possible. Build each page exactly as you'd like it, each and every time.</p> <p><strong>Examples of customization options:</strong></p> <p><img alt="Examples of customization options" height="633" src="/sites/websites.ucsf.edu/files/wysiwyg/customization-options-site-builder-01.jpg" width="1000" /></p> </div> </div> </div></div></div> </div> </div> </div><div class="field-item odd"><div class="entity entity-paragraphs-item paragraphs-item-textarea"> <div class="content"> <div class="field field-name-field-pg-textarea-text field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><div class="wysiwyg_twocols layout--20-80"> <div class="wysiwyg_twocols--first"> <p style="text-align:center"><img alt="Diamond" height="120" src="/sites/websites.ucsf.edu/files/wysiwyg/diamond-v2-02.png" width="120" /></p> </div> <div class="wysiwyg_twocols--second"> <h2>Branded</h2> <p>Our brand helps all of us — as part of the UCSF community — make a strong and lasting impression with supporters, patients, colleagues and students. Using a common visual identity helps to raise awareness and tell a more powerful and memorable story. It also builds associations that give audiences confidence that they are on an official and legitimate site.</p> <p>Site Builder is created with fonts, colors and design elements to help you build a unique site that fits within the UCSF identity. </p> </div> </div> </div></div></div> </div> </div> </div><div class="field-item even"><div class="entity entity-paragraphs-item paragraphs-item-textarea"> <div class="content"> <div class="field field-name-field-pg-textarea-text field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><div class="wysiwyg_twocols layout--20-80"> <div class="wysiwyg_twocols--first"> <p style="text-align:center"><img alt="Lock" height="120" src="/sites/websites.ucsf.edu/files/wysiwyg/icons-lock-03.png" width="120" /></p> </div> <div class="wysiwyg_twocols--second"> <h2>Secure</h2> <p>Websites aren't one-off projects. They require ongoing maintenance and updates to protect against hacking and corruption.</p> <p>All UCSF Site Builder websites are updated and maintained by the Information Technology Services team, who will ensure that strict data security standards are met at all times. </p> </div> </div> </div></div></div> </div> </div> </div><div class="field-item odd"><div class="entity entity-paragraphs-item paragraphs-item-textarea"> <div class="content"> <div class="field field-name-field-pg-textarea-text field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><div class="wysiwyg_twocols layout--20-80"> <div class="wysiwyg_twocols--first"> <p style="text-align:center"><img alt="Door" height="120" src="/sites/websites.ucsf.edu/files/wysiwyg/accessible.png" width="120" /></p> </div> <div class="wysiwyg_twocols--second"> <h2>Accessible</h2> <p>As a public institution, we have an obligation — both legally and ethically — to make sure our websites are accessible to all.</p> <p>The UCSF Site Builder meets all WCAG 2.0 standards for web accessibility, which means it was built from the ground up to meet stringent accessibility rules. This includes important but often missed aspects, like color contrast levels and properly tagged navigation.</p> </div> </div> </div></div></div> </div> </div> </div><div class="field-item even"><div class="entity entity-paragraphs-item paragraphs-item-textarea"> <div class="content"> <div class="field field-name-field-pg-textarea-text field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><div class="wysiwyg_twocols layout--20-80"> <div class="wysiwyg_twocols--first"> <p style="text-align:center"><img alt="Mobile phone and tablet" height="120" src="/sites/websites.ucsf.edu/files/wysiwyg/responsive.png" width="120" /></p> </div> <div class="wysiwyg_twocols--second"> <h2>Responsive</h2> <p>The UCSF Site Builder was designed to look great on tablets, phablets, phones and desktops, regardless of browser or monitor size.</p> <p>Columns will automatically stack when viewed on a smaller screen, images will become full-width, and fonts will adjust to ensure the best possible browsing experience, whatever device someone's using.</p> </div> </div> </div></div></div> </div> </div> </div><div class="field-item odd"><div class="entity entity-paragraphs-item paragraphs-item-textarea"> <div class="content"> <div class="field field-name-field-pg-textarea-text field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><div class="wysiwyg_twocols layout--20-80"> <div class="wysiwyg_twocols--first"> <p style="text-align:center"><img alt="Light bulb" height="120" src="/sites/websites.ucsf.edu/files/wysiwyg/evolve.png" width="120" /></p> </div> <div class="wysiwyg_twocols--second"> <h2>Evolving</h2> <p>Web standards change, and so do your needs.</p> <p>The UCSF Site Builder will continue to develop as time goes on, giving you better ways to display and improve your content. If you have an idea of what you'd like to have, we can potentially add it to our development roadmap.</p> </div> </div> </div></div></div> </div> </div> </div></div></div></div> </div> </div> </div> </div> </div> </div> </div> <div id="sidebar" class="column"> <div class="sidebar_top"> <div class="region region-sidebar-top"> <div id="block-menu-block-2" class="block block-menu-block"> <h3><a href="/checklist-create-website" class="active-trail">Get Started</a></h3> <div class="content"> <div class="menu-block-wrapper menu-block-2 menu-name-main-menu parent-mlid-0 menu-level-2"> <ul class="menu"><li class="first leaf menu-mlid-2036"><a href="/checklist-create-website" title="">New Website Checklist</a></li> <li class="leaf menu-mlid-1976"><a href="/quiz-do-i-need-website">Quiz: Do I Need A Website?</a></li> <li class="leaf active-trail active menu-mlid-2021"><a href="/ucsf-site-builder" class="active-trail active">UCSF Site Builder</a></li> <li class="expanded menu-mlid-2032"><a href="/custom-built-sites">Custom-Built Sites</a><ul class="menu"><li class="first last collapsed menu-mlid-4061"><a href="/node/256">UCSF Web Patterns Library</a></li> </ul></li> <li class="leaf menu-mlid-3921"><a href="/website-hosting">Website Hosting</a></li> <li class="last leaf menu-mlid-5791"><a href="/consulting-services">Consulting Services</a></li> </ul></div> </div> </div> </div> </div> <div class="sidebar"> <div class="section"> <div class="region region-sidebar"> <div id="block-fieldblock-node-page-default-field-blockref-sidebar" class="block block-fieldblock"> <div class="content"> <div class="field field-name-field-blockref-sidebar field-type-blockreference field-label-hidden"><div class="field-items"><div class="field-item even"><div id="block-block-11" class="block block-block"> <div class="content"> <h3>Get Site Builder</h3> <p class="rtecenter" style="text-align: left;"><span style="color:#058488;"><span style="font-size: 26px;"><strong>1. Request your site</strong></span></span></p> <p> </p> <p class="rtecenter" style="text-align: left;"><a href="https://ucsf.service-now.com/ess/web_requests.do" target="_blank">Complete a Drupal Web Hosting Request</a> with IT and specify that you want a UCSF Site Builder template.</p> <p> </p> <p class="rtecenter"> </p> <hr /> <p class="rtecenter"> </p> <p class="rtecenter" style="text-align: left;"><font color="#6ea400"><span style="font-size: 26px; font-weight: 600;">2. Learn the basics</span></font></p> <p> </p> <p class="rtecenter" style="text-align: left;">Learn key features of Drupal and how to use the main features of the UCSF Site Builder with this<a href="https://vimeo.com/407732320"> training video</a>.</p> <p> </p> <p class="rtecenter"> </p> <hr /> <p class="rtecenter"> </p> <p class="rtecenter" style="text-align: left;"><font color="#716fb2"><span style="font-size: 26px; font-weight: 600;">3. Build your site</span></font></p> <p> </p> <p class="rtecenter" style="text-align: left;">Create pages, build your menu, and add images or videos.</p> <p> </p> </div> </div></div></div></div> </div> </div> </div> </div> </div> </div> </div></div> <div id="footer"> <div class="section"> <div class="region region-footer"> <div id="block-block-31" class="block block-block"> <div class="content"> <p>Is there additional information on UCSF websites that would be helpful to you? Send us feedback at <a href="/cdn-cgi/l/email-protection#f18694938294838798929482b184928297df949584"><span class="__cf_email__" data-cfemail="16617374657364607f757365566375657038737263">[email protected]</span></a>.</p> </div> </div> </div> <div class="footer-bottom"> <nav aria-label="Footer Navigation" class="footer--navigation"> <ul> <li><a href="/consulting-services">Contact Us</a></li> <li><a href="https://websites.ucsf.edu/digital-accessibility">Accessibility</a></li> <li><a href="https://www.ucsf.edu/website-privacy-policy">Privacy Policy</a></li> <li><a href="https://websites.ucsf.edu/website-terms-use">Terms of Use </a></li> <li><a href="https://websites.ucsf.edu/azlist">A-Z Website List</a></li> </ul> </nav> <div class="footer--copyright"> <p>© 2024 The Regents of the University of California</p> </div> </div> </div> </div> </div> </div> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript"> /*<![CDATA[*/ (function() { var sz = document.createElement('script'); sz.type = 'text/javascript'; sz.async = true; sz.src = '//siteimproveanalytics.com/js/siteanalyze_8343.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sz, s); })(); /*]]>*/ </script> </body> </html>