Instruction page for others to work on the website

<h2> Add and Edit Content following a few Simple Rules</h2> <h3> Adding Content</h3> <ol> <li> Click on EDIT underneath the title of the page to get to the input mask.</li> <li> Decide whether to drag and drop an image into the image field (as in this example) or pasting a URL from Youtube into the EMBED VIDEO field as your visual (see "video example).</li> </ol> <ul class="rteindent1"> <li> images should be at least 1200 x650 px wide to be nicely represented on social media</li> <li> Fill in the ALT field (it's the description that search engines can read, they cannot 'see' the image</li> <li> Give images a title. It will show up when people hover over the image.</li> </ul> <ol> <li> Copy and paste content into the body field.</li> <li> Categorize your content with one of the checkboxes below the body field.<br /> &nbsp;</li> </ol> <p> &nbsp;</p> <p> <a href="/sites/default/files/images/editmask.png" target="_blank"><img alt="" src="/sites/default/files/styles/large/public/images/editmask.png?itok=1qTTFvaX" /></a></p> <p> &nbsp;</p> <h3> How to add Content from existing content. (by Dan)</h3> <p> Some pages will only be accessible to the Main Website administrator. In those cases, material must be passed through&nbsp;the Manager then to the Main Administrator.</p> <p> New content should be put into the Blog&nbsp;or the Membership section. A membership section should be available but it will be designed by Katja and be hidden until becoming a member. This is how we get an email list.</p> <p> Material can be created for the general viewership and go into the Blog category. From there it can be copied into sidebars as desired. It can be copied using auto systems as much as possible. The "tag" system is one of the auto systems.</p> <p> Information can be created for the members only and stay in members only for a certain amount of time at least. Said information may become general later on.</p> <p> Most material must be visible to guests. This way the menu and sidebar will show people what information we have. This way people will be more tempted to look at the information thus keeping them on the site. We can write some large articles for members but we have to then write a lesser detailed version for the blog section. That way guests can see more. Somehow we must tempt the guests to become members to see more information.</p> <p> &nbsp;</p> <h3> How to Add new pages in the Blog and Membership area.</h3> <p> Generally, we should be using the "Content --- Add Content --- Basic Page system"&nbsp; then we will have to use a set of systems to add side-articles to the sidebar. Katja will be revising the system for adding sidebar articles</p> <p> How to Copy Blog pages into sidebars</p> <p> These will be done by auto systems generally rather than manually. The idea is to add a few sidebar items from 1) the actually category from the main menu, 2) CTA's created by Karen/Katja (Karen has created several excellent CTA icons to use for Sign up Now), 3) Flagship articles that will usually remain there and 4) manually placed articles to diversify the articles so viewers can find some of them - this will hopefully expand visitors searches and keep them on the website longer.</p> <h3> How to Copy Pages into sidebars</h3> <h3> &nbsp;</h3> <h3> How to re-arrange pages.</h3> <h4> Go to "Structure --- menus --- main menu. Can then click on the page to move and drag it to the place it is wanted</h4> <p> &nbsp;</p> <h3> How to Copy sections of pages into sidebars</h3> <p> &nbsp;</p> <h3> For files that are needed to be viewed by other administrators,</h3> <p> we will use Google Drive. Katja is supposed to send me a link for the Google Drive so I/Karen can put the files there. All articles for future use will be put there so Karen can check them out and edit them etc etc etc.</p> <h3> &nbsp;</h3> <h3> Editing Content in the Body Field</h3> <p> The text that you just pasted into your body field is plain. This is on purpose because you don't want to have styling settings from your source appear on the site.</p> <p> <a href="/sites/default/files/images/menu.png" target="_blank"><img alt="" src="/sites/default/files/styles/large/public/images/menu.png?itok=R31v2NUm" /></a></p> <p> Therefore, it likely needs some formatting. Please use the formatting options available to you:</p> <p> &nbsp;</p> <ol> <li> By clicking on the numbered list icon you can make lists like these</li> <li> By clicking on the dotted list you can create dotted lists</li> <li> with the globe you can add a link</li> <li> with the icon with the red dotted line you can control how much people will see in a teaser (this is good for blog articles and not so important for basic pages like these)</li> <li> by clicking on the arrow next to "Format or Normal" you can format your text hierarchially into headers. Please see further below how Heading 1, 2, 3, 4, 5 can structure your page differently.</li> <li> The little blue upwards pointing arrow lets you upload images with one click (use only very sparingly - usually the top image is the main image)</li> </ol> <p> &nbsp;</p> <div class="well"> <p> (This is formatted as a grey box - a well)</p> <h4> For Reasons of conformity, design and SEO, please consider:</h4> <ol> <li> Use all forms of formatting sparingly, less is more.</li> <li> Avoid the format of <strong>heading 1&nbsp;</strong>as the page title is in this format and for SEO reasons, there should only be one heading 1 format.</li> <li> use the same formatting for similar text areas. Here are some examples: <ol> <li> You have a set of financial tips - only use one style of formatting (numbered list, heading 5 for the title, or a dotted list, etc.).</li> <li> Always use <strong>heading 2</strong> for your little title under the video or image</li> <li> Subtitles of paragraphs should be in <strong>heading 3.</strong></li> <li> If a further subcategorization is necessary (as often is in complex texts), use <strong>heading</strong>&nbsp;4, then <strong>heading 5</strong></li> </ol> </li> <li> <strong>​</strong>Avoid putting images into the body text. They usually are not conform in size and sometimes don't resize on mobile. That looks funky. I'm happy to help with exceptions.</li> </ol> </div> <p> &nbsp;</p> <p> <strong>Here's some example text that shows you a few format options: (I formatted this bold)</strong></p> <p> &nbsp;</p> <h2> Format Heading 2</h2> <h3> Format Heading 3</h3> <p> Nam pulvinar felis velit, vel tincidunt tortor elementum sed. Nam semper convallis nibh vel maximus. Praesent aliquet urna a neque feugiat, porta viverra mi consectetur. Cras et ullamcorper leo. Vivamus consectetur ante non placerat commodo.</p> <ol> <li> Numbered List</li> <li> Donec sodales.</li> <li> Urna sed faucibus volutpat.</li> </ol> <p> Dolor ligula auctor nunc, sed aliquam sapien leo condimentum massa. Pellentesque sit amet elit a sapien egestas porta ut quis metus. Vestibulum molestie lacus et condimentum varius. Pellentesque facilisis accumsan risus, vitae semper eros iaculis ac. Mauris at velit erat. Cras pharetra vestibulum elit vel lobortis. Phasellus non nulla urna.</p> <h4> Format Heading 4</h4> <p> vestibulum consectetur mi.</p> <div class="well rtecenter"> This is text formatted in with the class="well" in the backend. If you're familiar with html the structure is:<br /> <br /> &lt;div class="<strong>well</strong>"&gt;This is where your text goes&lt;/div&gt;<br /> <br /> Please let me know if you want this effect and I can add this to your text or show you.</div> <div class="well danger"> This is text formatted in with the class="well and danger" in the backend. &lt;div class="well danger"&gt;This is where your text goes&lt;/div&gt; Please let me know if you want this effect and I can add this to your text or show you.</div> <div class="well success"> This is text formatted in with the class="well and success" in the backend. &lt;div class="well success"&gt;This is where your text goes&lt;/div&gt; Please let me know if you want this effect and I can add this to your text or show you.</div> <div class="well brown"> This is text formatted in with the class="well and brown" in the backend. Please let me know if you want this effect and I can add this to your text or show you.</div> <div class="well warning"> This is text formatted in with the class="well warning" in the backend. Please let me know if you want this effect and I can add this to your text or show you.</div> <p> Integer sagittis eros sit amet sem rhoncus, a condimentum odio scelerisque. Nunc porttitor non lectus quis facilisis. Maecenas vitae aliquet diam. Curabitur sed posuere arcu. Ut sodales tempor quam sed aliquam. Praesent neque felis, pharetra sit amet erat sit amet, finibus finibus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent scelerisque mi nibh, ac porttitor elit scelerisque et.</p> <p> &nbsp;</p> <h5> Format Heading 5</h5> <p> justo mauris, tincidunt nec eros ac, tempor eleifend ante. Sed eget erat non urna pellentesque pulvinar sit amet in lorem. In hac habitasse platea dictumst. In vel pulvinar turpis. Aliquam dictum lobortis orci, vitae lobortis nunc hendrerit at. Vivamus elit dui, congue sed tincidunt eget, pulvinar vel augue. Fusce facilisis accumsan nunc in viverra. Mauris non mauris dapibus, pellentesque enim non, ultricies justo. Cum sociis natoque penatibus</p> <ul> <li> dotted list</li> <li> nascetur ridiculus mus.</li> <li> Morbi eleifend nisl sed massa placerat convallis.</li> <li> Ut velit mauris, rhoncus sed lacus eu, lacinia suscipit sem.</li> </ul> <p> Nam vulputate, massa sit amet ullamcorper faucibus, enim magna ullamcorper turpis, in dapibus sapien magna ut mi. Sed enim ipsum, rhoncus ut lectus non, pharetra interdum nulla. Praesent posuere enim lectus, a rutrum nibh rutrum in. Aenean lacus libero, efficitur id pharetra ac, dapibus id neque. Sed ac scelerisque justo.</p> <p> &nbsp;</p> <h3> Haven't found what you're looking for?</h3> <p> If you already know that you need some specific formatting in your texts that you cannot find here, please let me know and I can set it up, so that you can use this formatting again and again.</p> <p> &nbsp;</p> <p> <em>Let me know if you have any questions! Have fun formatting.</em></p>

<h2> Add and Edit Content following a few Simple Rules</h2> <h3> Adding Content</h3> <ol><li> Click on EDIT underneath the title of the page to get to the input mask.</li> <li> Decide whether to drag and drop an image into the image field (as in this example) or pasting a URL from Youtube into the EMBED VIDEO field as your visual (see "video example).</li> </ol><ul class="rteindent1"><li> images should be at least 1200 x650 px wide to be nicely represented on social media</li> <li> Fill in the ALT field (it's the description that search engines can read, they cannot 'see' the image</li> <li> Give images a title. It will show up when people hover over the image.</li> </ul><ol><li> Copy and paste content into the body field.</li> <li> Categorize your content with one of the checkboxes below the body field.<br />  </li> </ol><p>  </p> <p> <a href="/sites/default/files/images/editmask.png" target="_blank"><img alt="" src="/sites/default/files/styles/large/public/images/editmask.png?itok=1qTTFvaX" /></a></p> <p>  </p> <h3> How to add Content from existing content. (by Dan)</h3> <p> Some pages will only be accessible to the Main Website administrator. In those cases, material must be passed through the Manager then to the Main Administrator.</p> <p> New content should be put into the Blog or the Membership section. A membership section should be available but it will be designed by Katja and be hidden until becoming a member. This is how we get an email list.</p> <p> Material can be created for the general viewership and go into the Blog category. From there it can be copied into sidebars as desired. It can be copied using auto systems as much as possible. The "tag" system is one of the auto systems.</p> <p> Information can be created for the members only and stay in members only for a certain amount of time at least. Said information may become general later on.</p> <p> Most material must be visible to guests. This way the menu and sidebar will show people what information we have. This way people will be more tempted to look at the information thus keeping them on the site. We can write some large articles for members but we have to then write a lesser detailed version for the blog section. That way guests can see more. Somehow we must tempt the guests to become members to see more information.</p> <p>  </p> <h3> How to Add new pages in the Blog and Membership area.</h3> <p> Generally, we should be using the "Content --- Add Content --- Basic Page system"  then we will have to use a set of systems to add side-articles to the sidebar. Katja will be revising the system for adding sidebar articles</p> <p> How to Copy Blog pages into sidebars</p> <p> These will be done by auto systems generally rather than manually. The idea is to add a few sidebar items from 1) the actually category from the main menu, 2) CTA's created by Karen/Katja (Karen has created several excellent CTA icons to use for Sign up Now), 3) Flagship articles that will usually remain there and 4) manually placed articles to diversify the articles so viewers can find some of them - this will hopefully expand visitors searches and keep them on the website longer.</p> <h3> How to Copy Pages into sidebars</h3> <h3>  </h3> <h3> How to re-arrange pages.</h3> <h4> Go to "Structure --- menus --- main menu. Can then click on the page to move and drag it to the place it is wanted</h4> <p>  </p> <h3> How to Copy sections of pages into sidebars</h3> <p>  </p> <h3> For files that are needed to be viewed by other administrators,</h3> <p> we will use Google Drive. Katja is supposed to send me a link for the Google Drive so I/Karen can put the files there. All articles for future use will be put there so Karen can check them out and edit them etc etc etc.</p> <h3>  </h3> <h3> Editing Content in the Body Field</h3> <p> The text that you just pasted into your body field is plain. This is on purpose because you don't want to have styling settings from your source appear on the site.</p> <p> <a href="/sites/default/files/images/menu.png" target="_blank"><img alt="" src="/sites/default/files/styles/large/public/images/menu.png?itok=R31v2NUm" /></a></p> <p> Therefore, it likely needs some formatting. Please use the formatting options available to you:</p> <p>  </p> <ol><li> By clicking on the numbered list icon you can make lists like these</li> <li> By clicking on the dotted list you can create dotted lists</li> <li> with the globe you can add a link</li> <li> with the icon with the red dotted line you can control how much people will see in a teaser (this is good for blog articles and not so important for basic pages like these)</li> <li> by clicking on the arrow next to "Format or Normal" you can format your text hierarchially into headers. Please see further below how Heading 1, 2, 3, 4, 5 can structure your page differently.</li> <li> The little blue upwards pointing arrow lets you upload images with one click (use only very sparingly - usually the top image is the main image)</li> </ol><p>  </p> <div class="well"> <p> (This is formatted as a grey box - a well)</p> <h4> For Reasons of conformity, design and SEO, please consider:</h4> <ol><li> Use all forms of formatting sparingly, less is more.</li> <li> Avoid the format of <strong>heading 1 </strong>as the page title is in this format and for SEO reasons, there should only be one heading 1 format.</li> <li> use the same formatting for similar text areas. Here are some examples: <ol><li> You have a set of financial tips - only use one style of formatting (numbered list, heading 5 for the title, or a dotted list, etc.).</li> <li> Always use <strong>heading 2</strong> for your little title under the video or image</li> <li> Subtitles of paragraphs should be in <strong>heading 3.</strong></li> <li> If a further subcategorization is necessary (as often is in complex texts), use <strong>heading</strong> 4, then <strong>heading 5</strong></li> </ol></li> <li> <strong>​</strong>Avoid putting images into the body text. They usually are not conform in size and sometimes don't resize on mobile. That looks funky. I'm happy to help with exceptions.</li> </ol></div> <p>  </p> <p> <strong>Here's some example text that shows you a few format options: (I formatted this bold)</strong></p> <p>  </p> <h2> Format Heading 2</h2> <h3> Format Heading 3</h3> <p> Nam pulvinar felis velit, vel tincidunt tortor elementum sed. Nam semper convallis nibh vel maximus. Praesent aliquet urna a neque feugiat, porta viverra mi consectetur. Cras et ullamcorper leo. Vivamus consectetur ante non placerat commodo.</p> <ol><li> Numbered List</li> <li> Donec sodales.</li> <li> Urna sed faucibus volutpat.</li> </ol><p> Dolor ligula auctor nunc, sed aliquam sapien leo condimentum massa. Pellentesque sit amet elit a sapien egestas porta ut quis metus. Vestibulum molestie lacus et condimentum varius. Pellentesque facilisis accumsan risus, vitae semper eros iaculis ac. Mauris at velit erat. Cras pharetra vestibulum elit vel lobortis. Phasellus non nulla urna.</p> <h4> Format Heading 4</h4> <p> vestibulum consectetur mi.</p> <div class="well rtecenter"> This is text formatted in with the class="well" in the backend. If you're familiar with html the structure is: <p> &lt;div class="<strong>well</strong>"&gt;This is where your text goes&lt;/div&gt;</p> <p> Please let me know if you want this effect and I can add this to your text or show you.</p></div> <div class="well danger"> This is text formatted in with the class="well and danger" in the backend. &lt;div class="well danger"&gt;This is where your text goes&lt;/div&gt; Please let me know if you want this effect and I can add this to your text or show you.</div> <div class="well success"> This is text formatted in with the class="well and success" in the backend. &lt;div class="well success"&gt;This is where your text goes&lt;/div&gt; Please let me know if you want this effect and I can add this to your text or show you.</div> <div class="well brown"> This is text formatted in with the class="well and brown" in the backend. Please let me know if you want this effect and I can add this to your text or show you.</div> <div class="well warning"> This is text formatted in with the class="well warning" in the backend. Please let me know if you want this effect and I can add this to your text or show you.</div> <p> Integer sagittis eros sit amet sem rhoncus, a condimentum odio scelerisque. Nunc porttitor non lectus quis facilisis. Maecenas vitae aliquet diam. Curabitur sed posuere arcu. Ut sodales tempor quam sed aliquam. Praesent neque felis, pharetra sit amet erat sit amet, finibus finibus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent scelerisque mi nibh, ac porttitor elit scelerisque et.</p> <p>  </p> <h5> Format Heading 5</h5> <p> justo mauris, tincidunt nec eros ac, tempor eleifend ante. Sed eget erat non urna pellentesque pulvinar sit amet in lorem. In hac habitasse platea dictumst. In vel pulvinar turpis. Aliquam dictum lobortis orci, vitae lobortis nunc hendrerit at. Vivamus elit dui, congue sed tincidunt eget, pulvinar vel augue. Fusce facilisis accumsan nunc in viverra. Mauris non mauris dapibus, pellentesque enim non, ultricies justo. Cum sociis natoque penatibus</p> <ul><li> dotted list</li> <li> nascetur ridiculus mus.</li> <li> Morbi eleifend nisl sed massa placerat convallis.</li> <li> Ut velit mauris, rhoncus sed lacus eu, lacinia suscipit sem.</li> </ul><p> Nam vulputate, massa sit amet ullamcorper faucibus, enim magna ullamcorper turpis, in dapibus sapien magna ut mi. Sed enim ipsum, rhoncus ut lectus non, pharetra interdum nulla. Praesent posuere enim lectus, a rutrum nibh rutrum in. Aenean lacus libero, efficitur id pharetra ac, dapibus id neque. Sed ac scelerisque justo.</p> <p>  </p> <h3> Haven't found what you're looking for?</h3> <p> If you already know that you need some specific formatting in your texts that you cannot find here, please let me know and I can set it up, so that you can use this formatting again and again.</p> <p>  </p> <p> <em>Let me know if you have any questions! Have fun formatting.</em></p>