Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

AIESEC digital guidelines [ AIESEC in Spain ]

6.563 visualizaciones

Publicado el

AIESEC digital guidelines

Publicado en: Educación
  • Attraction study shows 74% of men are secretly obsessed with this one thing. read more ♣♣♣ https://bit.ly/315kzPF
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • New resesrch shows 74% of men are more attracted to women who do this one thing, click here ♥♥♥ http://scamcb.com/hissecret/pdf
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

AIESEC digital guidelines [ AIESEC in Spain ]

  1. 1. 1 AIESEC Digital Guidelines
  2. 2. AIESEC Digital Guidelines Overview 5 i. Style guide overview 7 ii. General page structure - main 9 iii. General page structure - footer 11 1. Logo 13 1.1. How to display the AIESEC logo 15 1.2. Use of affiliated AIESEC logos 17 2. Colors 19 2.1. Updated AIESEC Blue 21 2.1.1. New AIESEC color palette 23 2.2. Gray and other colors 25 3. Font and typography 27 3.1. Lato is used for all communications 29 3.2. <h> tags – an overview 31 3.2.1. <h1> is for page headers 33 3.2.2. <h2> is for page subheaders 33 3.2.3. <h3> is a light subheader 33 3.2.4. <h4> is the smallest heading size 33 3.3 More on coding text 35 4. Images 37 4.1. Image layout tips 39 4.2. Related links 41 4.2.1. Editing partner logos 43 4.2.2. Editing a logo using a grid 45 5. Writing new content 47 5.1. Tone of voice – general guidelines 49 5.2. Writing for students 51 5.3. Writing for companies / NGOs 51 5.4. Writing about AIESEC 53 5.5. Writing blog posts 53
  3. 3. 6. Site structure 55 6.1. Global header 57 6.2.1. Editing the social footer 59 6.2.2. Editing the global footer 59 7. Content structure 61 7.1. Responsive user journey 63 7.2. Creating a header image 65 7.3. Accessibility & contrast 67 7.4. Panels 69 7.5. Display of statistics 71 7.6. Calls to action 73 7.7. Text links within paragraphs 75 7.8. Three-column image links 77 7.9. Three different button types 79 7.10. Keep text at a readable width 81 7.11.Using columns to create a layout 83 7.12. Contact and feedback forms 85 8. Update protocol 87 8.1. WordPress admin roles 89 8.2. Be careful when editing 91 8.3. Any questions? 93
  4. 4. 5 Overview
  5. 5. In order to be cost effective, aiesec.org has been built as a flexible template. The underlying structure and main navigation should stay the same for all AIESEC entities. We started the web redesign project by understanding more about the key journeys AIESEC needs people to go on. The site design has been simplified to help as many people as possible find what they are looking for. The theme is easily administered and highly customisable in terms of page structure, images, video and content; you can be creative and tailor it to your local audience. Our approach enables AIESEC Member Committees to consistently communicate the AIESEC vision while making it relevant to each local audience.
  6. 6. 7 i. Style guide overview The AIESEC Global website (aiesec.org) is a custom template built on WordPress 4.0 based on the Enfold theme. You can find out more about WordPress here, and you can find out more about how to maintain and administer a WordPress site here. These digital guidelines will help to establish and maintain consistency across all digital communications and properties. The guide is designed to be a useful tool to help AI (AIESEC International) and MC (Member Committee) digital and marketing teams reach key AIESEC audiences.
  7. 7. 2,000 30,000126 Activate your potentialE A B C D F G K I J L H
  8. 8. 9 ii. General page structure - main The global navigation (nav) at the top of each page contains the AIESEC logo (which should link to the homepage (A)), buttons linking to the main sections (B) and a Join Us button which takes people to the Opportunities Portal/Global Information System (OP/GIS) (C). Site-wide search (D) is accessed via the magnifying glass icon; this expands to display a search field when selected. Each page has a hero image/header at the top. This consists of a white headline (E), which should be concisely written and centre- aligned. It may be supported by a further short paragraph of introductory copy (F). Behind this copy there will be a suitable full- width header image or video (G). [You will need to make sure the headline, introductory copy and header image/video are chosen in such a way that the text is easy to read.] The hero image on any given page should be used to direct visitors to the one or two key next steps. The majority of links on the website are accessed via distinctive blue buttons (H). The page below the hero image is broken into panels (I) of full-width color or large images which should be alternated in order to ensure the content is effective.
  9. 9. Most pages will need to contain text on a white/light gray background (J); these words provide your users with quick, engaging information, and guide them through their journey. Certain pages contain a narrow blue panel (K) that contains animated statistics relevant to the current subsection. Another common element is a row of three images supported by copy and linked text (L). Pages may contain a customisable lead generation/data capture/contact form (M). [To reduce spam, it is important to select ‘Display Captcha’ when publishing a new form.] At the bottom of each page there are three ‘footer’ areas: the social footer; quick links; and a copyright/legal statement. The social footer contains content from Twitter and Instagram, plus subscription links to AIESEC International on Twitter, LinkedIn, Facebook and Instagram (N). The quick links area (O) consists of three adjacent text boxes above up to four blue text links (P). One of the boxes contains up to five links to key sections of the site. The very bottom of each page contains AIESEC’s copyright and governance statement (Q).
  10. 10. 11 t Get in touch in f Instagram M N O P Q
  11. 11. 13 1. Logo
  12. 12. Logo surrounded by minimum safe area x 3x x x AIESEC favicon The AIESEC logo should be used in two forms only, as above and below
  13. 13. 15 1.1. How to display the AIESEC logo Where relevant and appropriate, the AIESEC logo will be present on all digital communication, and should not be altered in any way. Across digital, the version of the logo which should be used is the new AIESEC Blue on white, which can be inverted when on a blue background. The logo should not be displayed in any other color. When placing the logo on a page, make sure the logo is surrounded by a safe area which consists only of white or blue space. The width and height of this safe area is equal to the height of the band enclosing ‘AIESEC’. The favicon ‘A’ is a small (16x16px) icon seen in some desktop browser windows that is used as an abbreviated form of the logo, consisting of a white ‘A’ on an AIESEC Blue square. A larger version of this (500x500px) is used for social media profiles. Please note that the favicon is not the AIESEC logo, and should only be used for the above two purposes.
  14. 14. YouthSpeak logo in white on orange background Youth to Business logo Logos for Global Talent and Global Citizen
  15. 15. 17 1.2. Use of affiliated AIESEC logos In addition to the main AIESEC logo, there are other logos which relate to AIESEC’s programs and initiatives. When producing content for each initiative, make sure you use the current version of the logo, which will be available for download, along with usage guidelines, from the Media section of the global site.
  16. 16. 19 2. Colors
  17. 17. #037ef3 #f85a40 #f48924 #52565e #0a8ea0 #037ef3 #f3f4f7 #caccd1 AIESEC Blue #037ef3 Blue = AIESEC activities Red = volunteering; NGOsDark teal = internships; companies
  18. 18. 21 We have modernized and refreshed the core AIESEC Blue. This process has been driven by consistent feedback from all aspects of the wider AIESEC community. The output has led to a choice of color which represents more closely the youthful, vibrant and modern attributes of AIESEC as an organization. This new AIESEC Blue (#037ef3) is the main color used for the global navigation, buttons and links on the global site. It is also used to relate to content specific to AIESEC as an organization, its internal operations, and general student-related activities. 2.1. Updated AIESEC Blue In order to coordinate with the new blue, a palette of carefully selected colors has been developed. Dark teal (#0a8ea0) is used within areas of the global site which relate to internships and company partners; red/orange (#f85a40) is used to denote volunteering programmes and NGO partners. The most common use of these colors is for narrow stats panels and also buttons. If you are not sure what color an element should be, make it AIESEC Blue. 2.1.1. A new AIESEC color palette
  19. 19. Text is generally in dark gray, on a white or light gray background Small sections of white text on a dark gray background Heading 1 Heading 4 Heading 2 Heading 5 Heading 3 Heading 6 Alternating colors are used for related headings
  20. 20. 23 Light gray (#f3f4f7) is commonly used as a background color for panels of content within the site. Mid gray (#caccd1) can be used as a color for certain panels within the global site, for example as a background color for contact forms. Dark gray (#52565e) is the darkest color within the palette. When copy is displayed using this color, it is easy to read on both white and light grey backgrounds. Very rarely, it is used as a background color in combination with white text when a section needs to stand apart from the rest of the page. The other colors are generally only used for buttons or to visually distinguish between adjacent related elements, such as headings or numbering steps within a process. 2.2. Gray and other colors
  21. 21. 25 3. Font and typography
  22. 22. Lato is a modern, sleek and flexible humanist sans serif font.
  23. 23. 27 3.1. New digital font The mixture of serif and sans serif fonts which have been used AIESEC for the past few years have been replaced with a more modern sans serif web font family called Lato. Lato’s slightly rounded forms give it a younger, more organic feeling that distinguishes it from many other web fonts while making it easy to read. All weights of font across the website, from headings to body copy and links, are Lato. When preparing content for use across social which drives traffic into the main site, it is useful to construct this content using Lato. This will generate a more consistent user and brand journey.
  24. 24. Lato Black, 72pt Lato Bold, 48pt Lato Light, 48pt Lato Light, 30pt <h1> <h2> <h3> <h4>
  25. 25. 29 3.2. <h> tags – an overview <h> tags are used in web development to enable search engines to correctly interpret the hierarchy of copy within the site and understand how the content is structured. Using <h> tags appropriately improves the natural search ranking and indexing of the site; this helps AIESEC attract increased amounts of relevant traffic. <h> tags should be used whenever possible, instead of manually styling the text. The <h> tags on the global site are used as follows: This should only be used once per page. The use of a custom CSS tag (see section 3.3) on the main header image will render the <h1> tag in white, rather than gray. Any <h1> tagged headline should be concise, in order to ensure the headline does not break onto multiple lines. The white copy needs to be legible over the header image, which means selecting an image that does not contain too much white at the center, and checking readability and contrast once the page is created or an update has been made. <h1> text is set as Lato Black 72pt. 3.2.1. <h1> is for page headlines
  26. 26. 31 This tag should be used for all key headings within a page (apart from the headline) before paragraphs of body copy. <h2> should also be used for any supporting text required on the header image below the headline. <h2> text is set as Lato Bold 48pt. 3.2.2. <h2> is for page subheaders <h3> can be used for less important subheadings within a page. <h3> should be used before images. <h3> text is set as Lato Light 48pt. 3.2.3. <h3> is a light subheader This tag should only be used for subheadings which introduce a small section of copy. <h4> text is set as Lato Light, 30pt. 3.2.4. <h4> is the smallest heading size
  27. 27. <h2> Check out some of our events! </h2> <h2 style=”color:#ffffff;”> Check out some of our events! </h2> Check out some of our events! Check out some of our events! To manually change an attribute, insert the alteration into the <h> (or <p>) tag
  28. 28. 33 The default text color across the AIESEC global site is dark gray (#52565e). This color will automatically change to white when the text appears in a headline within a Color Section or the main header which has had a custom CSS class applied to it (such as mainHeader). Should the automatic color be hard to read, you may wish to manually adjust it as follows: Take the <h> tag parameter and insert: style=“color:#ffffff;” giving, for example: <h2 style=“color:#ffffff;”> In this example, the color will be white. Please refer to the swatches to find hex numbers for the AIESEC digital brand colors. Subheadings should only ever appear in white or dark gray unless they need to be differentiated. It is possible to use the same process to change the color of body copy by inserting similar values within the <p> tags (please remember to close the <p> tags after the copy, e.g. </p>). Do not try to adjust <h> tag font sizes or weights, as this cannot be overridden. 3.3. Changing the color of <h> tags
  29. 29. Theme Options
  30. 30. 35 The theme settings have been customised and specific CSS added to create the AIESEC template. This ensures the brand and layout are consistent. While we have not disabled updates to this area, ordinarily, no changes should be made to it. If for some reason you feel you do need to make a change, please ensure you have a good understanding of both WordPress and CSS, and be aware of two key things: i) It can have an impact across the whole of the site, including changing the display of the global nav ii) If you make changes and try to revert to the preset custom theme by pressing Reset, you will find that you default back to the original settings for Enfold, not the AIESEC custom theme. 3.4. Never change theme settings
  31. 31. 37 4. Images
  32. 32. No white space = busy White space = breathing space Preview images should be 309x341px 309px 341px
  33. 33. 39 Great photography is an important asset to help inspire and engage AIESEC’s audience. Photos show the different activities AIESECers get up to, and the change they make in the world. For images to work well, they need to be ‘framed’ by either white space or contrasting panel background colors such as light grey. When many images run together without white space, they become confusing to the user and each loses its impact. Therefore, images need some special attention. Please ensure when putting a new page together that full-width images or videos are not positioned on top of/next to each other. They must be broken up by a contrasting panel of some kind. Further into a page, you may wish to use a number of smaller images. Please ensure they have a consistent white space between them. One of the key mechanisms for displaying linked areas of the site/contextual promotion for other areas of the site is a row of three linked images. In order to make this feature of a page, first you need to ensure each of the images is available at 309x341px size. If you have uploaded a large image, you will find this size in the image size list tagged Preview. 4.1. Image layout tips
  34. 34. Rows containing three image links are assigned a custom CSS class A Color Section/panel containing three images and related links threeImagesBlock Custom CSS class
  35. 35. 41 It is important on many content pages to enable a user to find related topics quickly, or for AIESEC to cross-promote similar programs. In order to do this effectively, we have created a row consisting of three images supported by copy and links. To create a panel like this, you need to start by adding a Color Section to the page at the correct position and choosing a relevant background color for it; this may be white or light grey, depending upon the panels surrounding it. You will also need to specify a custom CSS class for it which should be ‘threeImagesBlock’. When you have created the Color Section, add three 1/3 columns to it and three Fullwidth buttons. The images used for each of the 1/3 column areas need to be set to Preview (309x341px). If you wish to use a relatively small image, it needs to be cropped to at least this size. 4.2. Related links
  36. 36. Partner logo grid as it appears on the website, with the area of the squares shown in gray Partner logo in a white square 500px 500px
  37. 37. 43 Partner organization (companies and NGOs) logos should be added at the highest quality available and ideally in a vector format or PNG, at least 500x500px. For visual consistency and equal weighting of each partner regardless of the shape of their logo, each logo should be resized and placed within a 500x500px white square before being uploaded to the WordPress Media Library. 4.2.1. Editing partner logos
  38. 38. Each logo sits within a 500x500px white square, surrounded by a 70px ‘safe zone’ 70px 70px 360px
  39. 39. 45 This is best carried out using an application such as Adobe Illustrator or Photoshop. Within a 500x500px white square, place a 360x360px square. This gives you 70px of padding. Divide this inner square into a 4x4 grid. Place the logo centrally at a size such that it is not overlapping more than eight of the small grid squares (which squares it touches depends on the orientation of the logo, but eight is a good rough guide to maintain visual balance between the logos). Remove the gridlines and export the file as a PNG, ensuring that the background is set to white and not transparent. 4.2.2. Editing a logo using a grid
  40. 40. 47 5. Writing new content
  41. 41. Confused? We’re here to help. Just select your question from one of the categories below FAQ SECTION: Click query from following list for answer AIESEC is warm and conversational AIESEC is not cold and mechanical
  42. 42. 49 Generally, you should keep the tone of voice of all content conversational and friendly; refer to AIESEC in the first person (‘we’) and your audience in the second person (‘you’). The first language of all AIESEC communication is American English which may be supported by a number of secondary languages, in order to enable AIESEC to reach a wider audience. No digital content should be led by non-English languages. It is often worth sharing new content or amendments to existing copy and images among two or three people to check for spelling errors, tone, relevance, comprehension and, in the case of images, appropriateness. Avoid corporate and AIESEC jargon* and keep things simple. If you are unsure whether or not the content you are creating is appropriate for AIESEC, or you need to fact-check something, request support from another member of your MC, or AIESEC International. It may be important to clarify things before publishing them to a wider audience. *As AIESECers, you will be aware of what ‘MC’, ‘GIP’, ‘Global Talent’ or ‘Team Member’ mean; however, students or partners who are unfamiliar with the inner workings of AIESEC will not understand these terms. Please try to avoid them, or use the full term and provide an explanation when it is first used in an article. 5.1. Tone of voice – general guidelines
  43. 43. Jumpstart your career by embarking on a professional internship abroad, develop your skills and gain relevant experiences that employers recognise. When writing for students, make it personable, inclusive and engaging Our interns bring language skills and regional insight to help you build your business in new territories. When writing for companies and NGOs, adopt a professional and trustworthy tone
  44. 44. 51 The majority of AIESEC’s audience is aged 18- 30, fully familiar with digital channels and very willing to engage with relevant marketing. In order for us to reach all current and prospective AIESECers, we need to continue to be authentic, personable and energetic. Special care should be taken to cater to a global audience. Avoid specific cultural references and potentially offensive content. 5.2. Writing for students AIESEC works with lots of high-profile organizations, and communication aimed at partners should adopt a professional and trustworthy tone. Take care to use relevant and accurate terminology while avoiding excessive jargon. It is worth noting that many companies or organizations will require sign-off if AIESEC is using quotes from their staff or attributing a comment to them. Such quotes should also be clearly attributed when published online. 5.3. Writing for companies/NGOs
  45. 45. Our belief is that sustainable, informed and globally-minded leadership can help us solve many of today’s challenges. Content about AIESEC as an organization should be friendly, professional and transparent Keep blog posts enngaging, and include images and videos My internship in Geneva
  46. 46. 53 To an audience who is unfamiliar with AIESEC, the language used for communication should be professional, reassuring, simple and transparent. Communicate AIESEC’s vision in a friendly and concise manner. 5.4. Writing about AIESEC A blog post is an opportunity to write in a persuasive and opinionated way; keep it authentic and varied, and don’t shy away from using visual elements (images and video) to illustrate your point. 5.5. Writing blog posts
  47. 47. 55 6. Site structure
  48. 48. Global navigation bar containing key links Mobile view of global navigation Expanded ‘hamburger’ menu
  49. 49. 57 It is unlikely you will need to update your global header once a site goes live (the exception being the potential addition of extra languages or key promotional links). There should be no more than eight text links within the navigation (nav), to ensure the user can navigate the site with ease. The AIESEC logo should always link to the homepage and will remain on the top left of the screen, unless the site is published in a language that requires the content to be read from right to left. This can be done by selecting Menus via the Appearance option on the WordPress admin view. On mobile devices, the global navigation is accessed via a ‘hamburger’ icon. When this is selected, the full navigation is displayed to a user. It is not possible to update navigation elements for specific devices. 6.1. Global header
  50. 50. Footer section containing social media links Footer section containing navigation links
  51. 51. 59 It is unlikely that the structure of the social footer will need to be changed once your site goes live. However, you can change both the the social account or hashtag that is being pulled into the display, and also the social accounts the user is linked to via the admin environment. 6.2.1. Editing the social footer To edit the quick links footer area, select Menus via Appearance in the WordPress admin area. From the dropdown menu at the top of the editor, select ‘Footer widget menu’. In order for the list of text links to display correctly, the menu should ideally contain five links. To edit the blue text navigation links along the bottom of the global footer, select Menus via Appearance. From the dropdown menu, select ‘Footer menu (Enfold Child Footer Menu (no dropdown))’. The horizontal footer will accommodate a maximum of four items; do not remove the ‘---justifier---’ element as this exists to neatly align the text links. 6.2.2. Editing the global footer
  52. 52. 61 7. Content structure
  53. 53. Make sure that grouped elements are in the same container, so that they stack correctly on a mobile screen
  54. 54. 63 The custom AIESEC theme is responsive, which means that content will be scaled, stacked or changed (the global navigation and social footer each has a specific mobile version) depending on the size of the device (screen) used to access it. Elements of a page need to be organised with the mobile user in mind. Due to the automatic reordering of content and promotional items when the site is viewed on a mobile device, you need to consider how you prioritise your content. For example, in a three-column section like Related Pages, the image, text and button for each related page must be held within one container in the editor. On a mobile, this will result in the three elements being stacked, while on a tablet, these elements will remain adjacent but be slightly reduced in size. 7.1. Responsive user journey
  55. 55. 550px Custom height in pixels threeImagesBlock Section custom height Section minimum height Custom CSS class Activate your potential
  56. 56. 65 When adding a new page or updating an existing page, choose the headline image for maximum relevance and impact. It should be a large image/high res to start with (1900x900px) and WordPress will scale this to the appropriate size for different uses. Either add a new page in the editor or select the page you wish to edit from the Pages menu. To add a full-width header image or video, start by clicking and dragging a Color Section from the Layout Elements tab onto the page canvas, and roll over the section to display the Edit button (see below). Add an image from the Media Library and ensure you specify the custom CSS class (at the bottom of the Color Section editor) as “mainHeader”. Please set the minimum image depth to 550 pixels, and ensure it is also set to Stretch to fit (found in the Background Repeat dropdown). 7.2. Creating a header image Roll over the Color Section to display editing options
  57. 57. A white heading is illegible on a bright background or image A white heading is legible on a darker background or image Bright header image = illegible white text Darkened header image = legible white text
  58. 58. 67 It is important to select header images that are not too bright when text needs to be legible on top of them. If text is proving difficult to read on top of a certain image, use Preview (if on a Mac) to darken the image file between 10-40%, and then upload the treated image. The only way your users will be able to navigate the site, learn about AIESEC and get involved, is if they can read the copy you have created for them. [For users relying on screen readers, it is important that you add a relevant title and <alt> tag to images within the Media Library.] As mentioned earlier, images are important to connect people to AIESEC. They should be bright and vibrant, not so dark that the original content/photo is impossible to see. If you find yourself having to darken the image to this extent, please pick a different image rather than continuing to reduce its impact. Headlines (written within an <h1> tag) should be concise (less than 24 characters) so they do not break onto multiple lines. The white text needs to be legible over the header image, which means selecting an image that does not contain too much white at the center, and checking readability once the update is made. 7.3. Accessibility & contrast
  59. 59. Alternate between white, blue and light gray (or full-width images) for consecutive sections 2,000 30,000126
  60. 60. 69 Alternate the background color (or use a full- width image) as you go down a page in order to differentiate between content elements. The Color Sections should be white, light gray (#f3f4f7), a full-width image/video or an animated number bar, mid gray (#caccd1) for contact forms, or dark gray (#52565e) for steps in a process. Identical Color Sections (e.g. two light gray sections or two full-width images) should never be stacked together. If you need to demarcate two light-colored sections, alternate between white and light gray boxes, rather than using lines. 7.4. Panels
  61. 61. A blue animated number band displaying three statistics and icons; the number should be set to 40pt and the description to 16pt
  62. 62. 71 A blue panel with animated numbers is used to display key statistics on some pages, such as the homepage. To create one within a page you have selected: Insert a Color Section and set its background color to blue. Set the Section Padding to Small Padding. Create either a three-column or five-column layout (other column structures do not work so well) within the Color Section by using three 1/3 or five 1/5 elements respectively. From the Content Elements tab, click and drag Animated Numbers into each container. Highlight the Animated Numbers element to edit it. Enter the statistic (remember for large numbers, you should include comma separators and, if you are using a rough number, you can add a ‘+’ after it). Complete the description of the statistic in the specified fields. To add an Icon, select ‘Yes, display an icon in front of number’ from the dropdown, and then pick an appropriate icon. The Number custom font size should be set to 40pt, and the description font size to 16pt. 7.5. Display of statistics
  63. 63. Get in touch now
  64. 64. 73 Every page should direct a user to take some kind of next action: ‘Get involved with AIESEC’, ‘Find out more’, ‘Join us’, ‘Get in touch’ etc. It is important that pages direct people to take action, since this is how AIESEC continues to grow and become more successful. The best calls to action are a mixture of a compelling image, concise copy and a relevant, engaging button label (‘Submit’ should be avoided at all costs, along with ‘Next’). All call to action buttons should be blue. Button labels should never be in CAPITAL LETTERS and, where relevant, should have a sense of urgency (‘Get in touch’ should become ‘Get in touch now’) if asking someone to take an action. 7.6. Calls to action
  65. 65. Make sure text links are blue
  66. 66. 75 It is important to link text within different sections of the site to help a user navigate. It is also useful, where relevant, to link a user to an external resource or site. This should always open the external resource in a new window (when you define the destination of linked copy, you can choose to have the page open in a new window). Text links within a paragraph or heading must be blue and not any other color. Make sure blue text is used only for links; if you want to accentuate a word within a paragraph without linking to another page, enclose the word in <strong> tags without changing its color. 7.7. Text links within paragraphs
  67. 67. About AIESEC > About internships > NGO partners > Row of links with the CSS class ‘threeImagesBlock’
  68. 68. 77 As previously mentioned, the sites may contain rows of three images which can be linked along with a button and/or paragraph of text underneath. We have explained how to create this structure; however, it is worth just adding a little extra detail around linking images, adding buttons, and styling the text. Edit a new 1/3 column container and add a Preview size image from the Media Library. Set the Image Alignment to Center; set Image Link to either be an internal link within the site (by choosing Page, News or Post) or an external link (by choosing Set Manually, and adding a destination URL). If you are adding an external link, please select Open in new window within the Open new tab/ window area. To add a button, you must use the Fullwidth Button (from the Content Elements tab) and place it under each image in the same container. Add a concise title and make it link to the same page as the image. You may wish to add an icon/chevron (>) after the button title, which you can select in the Button Icon area. If required, add a Text Block underneath the button, within the same container. Make sure the opening <p> tag is set to <p class =“thin18”>. 7.8. Three-column image links
  69. 69. Find out more Standard button Find out more Standard button on rollover About AIESEC About internships NGO partners Rectangular buttons under images Transparent button on a gray background Find out more Find out more
  70. 70. 79 There are three types of button used: The standard button. To place this on a page, drag and drop the Button element from the Content Elements tab. When placing a button, make sure the size is set to Large, and that the text does not break across two lines. Buttons should be colored blue, unless they are leading directly to the Internships or Companies sections (#0a8ea0) or the Volunteer or NGOs sections (#f85a40) of the website. The transparent button. Only used on the global nav (‘Join Us’), header images and contact forms, it becomes solid white upon rollover. To place this within a page, drag and drop a Button element into the relevant container, and then edit its color to Light Transparent. The rectangular button. These are used together with linked images; make sure the image and the button beneath it link to the same page. To place a rectangular button onto a page, drag the Fullwidth Button element from the Content Elements tab. Make sure the enclosing Color Section containing both the image and the button has the custom CSS class ‘threeImagesBlock’. 7.9. Three different button types
  71. 71. Shorter lines of text are easier to read 550px 900px Long lines of text are tiring on the eye
  72. 72. 81 Generally speaking, lines of text should not exceed ten words, as beyond this line length, copy becomes less readable. For <p> tag sized text, this equates to around 550 pixels on desktop. For larger sizes of text, fewer words should be used per line. 7.10. Keep text at a readable width
  73. 73. 1/5 1/53/5 1/2 1/2 1/1 1/3 1/3 1/3
  74. 74. 83 The AIESEC WordPress theme makes it simple to split a panel into several columns. Generally, rows containing three equal-width column sections (1/3) are used throughout the site. Occasionally, rows containing two equal-width columns (1/2) are used. These are only to allow for two buttons to be placed adjacently, and are generally not to be used for images or large blocks of text. Empty column sections can also be used to add white space on either side of an element that is aligned to the center of a page. Section dividers are not used in the site; instead, sections are marked by a change in the Color Section. 7.11. Using columns to create a layout
  75. 75. Header should be set to <h2> Description should be set to <h4> Fields set to Fullwidth Send enquiry
  76. 76. 85 Contact forms usually sit at the bottom of a page, just above the social footer. To add a contact form to a page or edit one: Add a new Color Section and click and drag Contact Form from Content Elements. If you need to add more detail around the role of the form or more emphasis to a call to action, you may wish to place a full-width Text Block above the contact form within the same container (use the Text Block editor, making sure that the header is <h2> and the description is <h4>). Highlight the Contact Form to begin editing it. The first thing to add is the email address to which you wish submissions to be sent. If you leave this empty, content will be sent to info@ ai.aiesec.org. You should add a Form Title and then select the relevant number and type of fields from the Add/Edit Contact Form Elements . Customise the Submit Button Label, Message Sent Label, E-Mail Subject and Autorespond Text. Select ‘Display Captcha’ from the Contact Form Captcha area and specify Custom CSS Class as ‘webform’. 7.12. Contact forms
  77. 77. 87 8. Update protocol
  78. 78. Can write posts Administrator Editor Author Can publish posts Can manage posts Has access to all features
  79. 79. 89 WordPress uses a concept of Roles, designed to give the site owner the ability to control what users can and cannot do within the site. A site owner can manage the user access to such tasks as writing and editing posts, creating Pages, defining links, creating categories, moderating comments, managing plugins, managing themes, and managing other users, by assigning a specific role to each of the users. The following is a summary of the three main roles within the AIESEC site admin: Administrator – somebody who has access to all the administration features within a single site. Editor – somebody who can publish and manage posts including the posts of other users. Author – somebody who can publish and manage their own posts. Upon installing WordPress, an Administrator account is automatically created. The default role for new users can be set in Administration Panels > Settings > General. 8.1. WordPress admin roles
  80. 80. Preview changes Make changes Update Remember to preview a page before editing it
  81. 81. 91 Experiments should never be undertaken on the live site. If you are making a change that you have not made before, find someone who has experience with it before committing any changes to live, as these have the potential to be timely and costly to fix. Once again, it is important not to edit elements which can be found in the main Theme Options area (found at the top of the admin dashboard), as this is an area where it is easy to make irreversible, costly mistakes. WordPress provides a forgiving ‘Preview Changes’ button within the editor, so if there is any doubt, always use this first and only commit the change using the Update button later once you are confident that you are making the desired change. 8.2. Be careful when editing
  82. 82. Thank you.
  83. 83. 93 Each site is different from others, and while WordPress is a fantastic editing tool, it can also be relatively complicated to use. There are a handful of ‘superusers’ within the AIESEC community who can potentially help you answer questions or undo errors. When you are supplied with this guide, you will also be directed to a relevant support person. If all else fails, please contact somebody responsible for digital marketing or Information Systems within your MC or AI. 8.3. Any questions?

×