AIESEC Digital Guidelines

AIESEC Digital Guidelines

1

AIESEC Digital Guidelines Overview

5

i. Style guide overview

7

ii. General page structure - main

9

iii. General page structure - footer

1. Logo

11

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 â&#x20AC;&#x201C; 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 â&#x20AC;&#x201C; 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

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

Overview

5

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.

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.

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.

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

A

E

B

C

D

Activate your potential

F G H I J

K

L

126

2,000

30,000

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 centrealigned. It may be supported by a further short paragraph of introductory copy (F).

Behind this copy there will be a suitable fullwidth 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

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).

M

Get in touch

N

t in

Instagram

f O

P Q 11

1. Logo

13

The AIESEC logo should be used in two forms only, as above and below x

3x

x

Logo surrounded by minimum safe area x

AIESEC favicon

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.

15

Logos for Global Talent and Global Citizen

Youth to Business logo

YouthSpeak logo in white on orange background

1.2. Use of affiliated AIESEC logos In addition to the main AIESEC logo, there are other logos which relate to AIESECâ&#x20AC;&#x2122;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.

17

2. Colors

19

2.1. Updated AIESEC Blue 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.1. A new AIESEC color palette 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.

21

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 2

Heading 3

Heading 4

Heading 5

Heading 6

Alternating colors are used for related headings

2.2. Gray and other colors 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.

23

3. Font and typography

25

Lato is a modern, sleek and flexible humanist sans serif font.

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â&#x20AC;&#x2122;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.

27

<h1>

Lato Black, 72pt

<h2>

Lato Bold, 48pt

<h3>

Lato Light, 48pt

<h4>

Lato Light, 30pt

3.2. <h> tags â&#x20AC;&#x201C; 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:

3.2.1. <h1> is for page headlines 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.

29

3.2.2. <h2> is for page subheaders 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.3. <h3> is a light subheader <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.4. <h4> is the smallest heading size This tag should only be used for subheadings which introduce a small section of copy. <h4> text is set as Lato Light, 30pt.

31

<h2> Check out some of our events! </h2>

<h2 style=â&#x20AC;?color:#ffffff;â&#x20AC;?> 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

3.3. Changing the color of <h> tags 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.

33

Theme Options

3.4. Never change theme settings 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.

35

4. Images

37

No white space = busy

White space = breathing space

309px

341px

Preview images should be 309x341px

4.1. Image layout tips 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.

39

A Color Section/panel containing three images and related links

threeImagesBlock

Custom CSS class

Rows containing three image links are assigned a custom CSS class

4.2. Related links 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 â&#x20AC;&#x2DC;threeImagesBlockâ&#x20AC;&#x2122;.

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.

41

500px

500px

Partner logo in a white square

Partner logo grid as it appears on the website, with the area of the squares shown in gray

4.2.1. Editing partner logos 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.

43

70px

360px

70px

Each logo sits within a 500x500px white square, surrounded by a 70px ‘safe zone’

4.2.2. Editing a logo using a grid 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.

45

5. Writing new content

47

FAQ SECTION: Click query from following list for answer AIESEC is not cold and mechanical

Confused? Weâ&#x20AC;&#x2122;re here to help. Just select your question from one of the categories below AIESEC is warm and conversational

5.1. Tone of voice – general guidelines 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.

49

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

5.2. Writing for students The majority of AIESECâ&#x20AC;&#x2122;s audience is aged 1830, 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.3. Writing for companies/NGOs 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.

51

Our belief is that sustainable, informed and globally-minded leadership can help us solve many of todayâ&#x20AC;&#x2122;s challenges.

Content about AIESEC as an organization should be friendly, professional and transparent

My internship in Geneva

Keep blog posts enngaging, and include images and videos

5.4. Writing about AIESEC To an audience who is unfamiliar with AIESEC, the language used for communication should be professional, reassuring, simple and transparent. Communicate AIESECâ&#x20AC;&#x2122;s vision in a friendly and concise manner.

5.5. Writing blog posts A blog post is an opportunity to write in a persuasive and opinionated way; keep it authentic and varied, and donâ&#x20AC;&#x2122;t shy away from using visual elements (images and video) to illustrate your point.

53

6. Site structure

55

Global navigation bar containing key links

Mobile view of global navigation

Expanded â&#x20AC;&#x2DC;hamburgerâ&#x20AC;&#x2122; menu

6.1. Global header 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 â&#x20AC;&#x2DC;hamburgerâ&#x20AC;&#x2122; icon. When this is selected, the full navigation is displayed to a user. It is not possible to update navigation elements for specific devices.

57

Footer section containing social media links

Footer section containing navigation links

6.2.1. Editing the social footer 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.2. Editing the global 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.

59

7. Content structure

61

Make sure that grouped elements are in the same container, so that they stack correctly on a mobile screen

7.1. Responsive user journey 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.

63

Activate your potential

Custom height in pixels

550px

threeImagesBlock

Section minimum height

Section custom height

Custom CSS class

7.2. Creating a header image 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 â&#x20AC;&#x153;mainHeaderâ&#x20AC;?.

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).

Roll over the Color Section to display editing options

65

A white heading is illegible on a bright background or image

Bright header image = illegible white text

A white heading is legible on a darker background or image

Darkened header image = legible white text

7.3. Accessibility & contrast 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.

67

126

2,000

30,000

Alternate between white, blue and light gray (or full-width images) for consecutive sections

7.4. Panels Alternate the background color (or use a fullwidth 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.

69

A blue animated number band displaying three statistics and icons; the number should be set to 40pt and the description to 16pt

7.5. Display of statistics 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.

71

Get in touch now

7.6. Calls to action 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.

73

Make sure text links are blue

7.7. Text links within paragraphs 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.

75

About AIESEC >

About internships >

NGO partners >

Row of links with the CSS class ‘threeImagesBlock’

7.8. Three-column image links 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 =â&#x20AC;&#x153;thin18â&#x20AC;?>.

77

Find out more

Find out more

Standard button

Standard button on rollover

Find out more

Find out more

Transparent button on a gray background

About AIESEC

About internships Rectangular buttons under images

NGO partners

7.9. Three different button types 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’.

79

900px

Long lines of text are tiring on the eye

550px

Shorter lines of text are easier to read

7.10. Keep text at a readable width 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.

81

1/1

1/3

1/3

1/2

1/5

1/3

1/2

3/5

1/5

7.11. Using columns to create a layout 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.

83

Header should be set to <h2> Description should be set to <h4>

Fields set to Fullwidth

Send enquiry

7.12. Contact forms 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’.

85

8. Update protocol

87

Administrator

Can write posts

Can publish posts

Can manage posts

Has access to all features

Editor

Author

8.1. WordPress admin roles 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 â&#x20AC;&#x201C; somebody who has access to all the administration features within a single site.

Editor â&#x20AC;&#x201C; somebody who can publish and manage posts including the posts of other users.

Author â&#x20AC;&#x201C; 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.

89

Make changes

Preview changes

Update Remember to preview a page before editing it

8.2. Be careful when editing 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 â&#x20AC;&#x2DC;Preview Changesâ&#x20AC;&#x2122; 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.

91

Thank you.

8.3. Any questions?

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 â&#x20AC;&#x2DC;superusersâ&#x20AC;&#x2122; 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.

93