hero - FORUM - Ning Creators Social Network2024-03-29T13:38:55Zhttps://creators.ning.com/forum/topics/feed/tag/heroSimple Tip: How to Add a Responsive Hero Header to a Page in Ninghttps://creators.ning.com/forum/topics/simple-tip-how-to-add-a-responsive-hero-header-to-a-page-in-ning2020-01-16T22:44:20.000Z2020-01-16T22:44:20.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p><span style="font-size:14pt;">I've been creating topics pages inside my community and if you are doing something similar, having a different Hero style header (<a href="https://landsurveyorsunited.com/topics/total-stations" target="_blank">example</a>). In brief, topics pages aggregates photos by tag or category, discussions by tag or category,videos by tag or category, etc.</span></p><p><a href="https://landsurveyorsunited.com/topics/total-stations" target="_blank"><img class="align-full" src="{{#staticFileLink}}3822785033,RESIZE_710x{{/staticFileLink}}" alt="hero image tip for Ning communities" /></a></p><p><span style="font-size:14pt;">Embedded here is the pen for you to fork and play around with for your community, but i will save you some time if you wanna try it out.</span></p><p class="codepen" style="height:300px;border:2px solid;margin:1em 0;padding:1em;">See the Pen <a href="https://codepen.io/JFarrow/pen/yLyxQqw"> Hero Section with Text Overlay</a> by JFarrow (<a href="https://codepen.io/JFarrow">@JFarrow</a>) on <a href="https://codepen.io">CodePen</a>.</p><p><span style="font-size:14pt;">The time saver. Simply copy and paste the following code into a notepad to alter it before installing it. Replace the underlined image URL with your own image URL and change the text for title and subtitle.</span></p><p><style>.hero {<br /> background: linear-gradient(#0006, #0006), url(<span style="text-decoration:underline;"><strong><a href="{{#staticFileLink}}3822778870,RESIZE_1200x{{/staticFileLink}}">{{#staticFileLink}}3822778870,RESIZE_1200x{{/staticFileLink}}</a></strong></span>);</p><p>background-position: bottom;<br /> background-size: cover;<br /> background-repeat: no-repeat;<br /> height: 70vh;<br />/* background-color: #eee; */<br /> display: flex;<br /> justify-content: center;<br /> align-items: center;<br />}</p><p>.hero-inner {<br /> <br />/* text-align: center; */<br /> padding: 0 1.5rem;<br />}</p><p>.hero-headline {<br /> margin: 0;<br /> color: #fff;<br /> font-weight: 400;<br />}</p><p>h2 {<br /> margin: 0;<br /> color: #fff;<br /> font-weight: 400;<br /> font-size: 1.2rem;<br />}</p><p><br /></style><br /><header class="hero"><br /> <br /> <br /> <div class="hero-inner"><br /> <br /> <h1 style="font-size:2em;"class="hero-headline">Your Title</h1><br /> <h2>A curated collection of blah blah blah.</h2><br /> <br /> </div><br /> <br /></header></p><p> </p><p> </p><p><span style="font-size:14pt;">Once you have it the way you want it, simply copy and paste it inside a Below Header HTML module like so:</span></p><p><a href="https://landsurveyorsunited.com/topics/total-stations" target="_blank"><img class="align-full" src="{{#staticFileLink}}3822790979,RESIZE_710x{{/staticFileLink}}" width="710" alt="3822790979?profile=RESIZE_710x" /></a></p><p> </p><p>If you have trouble, let me know. If you need help with your community, <a href="https://creators.ning.com/members/JFarrow" target="_blank">let me know</a>. Happy to help.</p></div>Tip N2 or N3: Customizable Multi-panel Hero Template For Driving Engagementhttps://creators.ning.com/forum/topics/tip-n2-n3-customizable-multi-panel-hero-template-for-driving-enga2018-06-22T19:14:11.000Z2018-06-22T19:14:11.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>This week, one of my communities hosted 2 worldwide events - International Surveyors Week 2018 and Survey Earth in a Day 7. One of the challenges this presented was keeping everyone on the same page. One of the ways this was accomplished was by creating a multi-panel Hero unit for the site (which is currently on 2.0 awaiting the migration-which is hopefully coming soon). The following Hero template uses no javascript and it is simple to customize and easy to install. Here is what we are making:</p><p><a href="http://landsurveyorsunited.com/main" target="_blank" rel="noopener"><img class="align-center" src="https://go.srvyr.com/2yBEQTm" width="710"/></a></p><p style="text-align: center;">I am providing you with the code to accomplish this on your own or if it seems too complicated or if you would like for me to customize it for your community, <a href="https://creators.ning.com/members/JFarrow" target="_blank" rel="noopener">send me a message on my profile</a> and i'll help you for a fee or in trade. Let's get started:</p><p class="codepen">See the Pen <a rel="nofollow" href="https://codepen.io/JFarrow/pen/XYqjBZ/">CSS Grid: Multiple image hero block</a> by JFarrow (<a rel="nofollow" href="https://codepen.io/JFarrow">@JFarrow</a>) on <a rel="nofollow" href="https://codepen.io">CodePen</a>.</p><p style="text-align: center;"></p><p style="text-align: left;">First thing you will want to do is either fork a copy of the following pen into your own codepen account or copy and paste the HTML and CSS into a notepad to edit it with your own links and background images (which you change inside the CSS). HTML part goes into a page module (under header in 3.0 or inside a Ads Box under header in 2.0)</p><p style="text-align: left; width: 800px;"><iframe src="//codepen.io/JFarrow/embed/XYqjBZ/?height=300&theme-id=3719&default-tab=result&embed-version=2" height="300" frameborder="no">See the Pen <a href="https://codepen.io/JFarrow/pen/XYqjBZ/" rel="nofollow">CSS Grid: Multiple image hero block</a> by JFarrow (<a href="https://codepen.io/JFarrow" rel="nofollow">@JFarrow</a>) on <a href="https://codepen.io" rel="nofollow">CodePen</a>.</iframe></p><p style="text-align: left;">The CSS portion will go inside your Design Studio CSS. HTML portion goes inside a page module.</p><p style="text-align: left;"><a href="https://creators.ning.com/members/JFarrow" target="_blank" rel="noopener">Let me know </a>if you have any questions whatsoever...or if you need someone to help you set up any aspect of your community. Enjoy!</p></div>