1

AIESEC Digital Guidelines

AIESEC Digital GuidelinesOverview 5i. Style guide overview 7

ii. General page structure - main 9

iii. General page structure - footer 11

1. Logo 131.1. How to display the AIESEC logo 15

1.2. Use of affiliated AIESEC logos 17

2. Colors 192.1. Updated AIESEC Blue 21

2.1.1. New AIESEC color palette 23

2.2. Gray and other colors 25

3. Font and typography 273.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 374.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 475.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

6. Site structure 556.1. Global header 57

6.2.1. Editing the social footer 59

6.2.2. Editing the global footer 59

7. Content structure 617.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 878.1. WordPress admin roles 89

8.2. Be careful when editing 91

8.3. Any questions? 93

5

Overview

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.

7

i. Style guide overviewThe 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.

2,000 30,000126

Activate your potentialE

A B C D

F

G

K

I

J

L

H

9

ii. General page structure - mainThe 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.

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

11

t

Get in touch

in

f

Instagram

M

N

O

P

Q

13

1. Logo

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

15

1.1. How to display the AIESEC logoWhere 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.

YouthSpeak logo in white on orange background

Youth to Business logo

Logos for Global Talent and Global Citizen

17

1.2. Use of affiliated AIESEC logosIn 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.

19

2. Colors

#037ef3

#f85a40

#f48924

#52565e

#0a8ea0 #037ef3

#f3f4f7 #caccd1

AIESEC Blue

#037ef3

Blue = AIESEC activities

Red = volunteering; NGOsDark teal = internships; companies

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

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

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

25

3. Font and typography

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

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.

Lato Black, 72pt

Lato Bold, 48pt

Lato Light, 48pt

Lato Light, 30pt

<h1>

<h2>

<h3>

<h4>

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

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

<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

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

Theme Options

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

37

4. Images

No white space = busy

White space = breathing space

Preview images should be 309x341px

309px

341px

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

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

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

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

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

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

70px

70px

360px

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

47

5. Writing new content

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

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

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

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

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

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

55

6. Site structure

Global navigation bar containing key links

Mobile view of global navigation Expanded ‘hamburger’ menu

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

Footer section containing social media links

Footer section containing navigation links

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

61

7. Content structure

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

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

550px

Custom height in pixels

threeImagesBlock

Section custom height

Section minimum height

Custom CSS class

Activate your potential

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

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

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

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

2,000 30,000126

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

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

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

Get in touch now

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

Make sure text links are blue

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

About AIESEC > About internships > NGO partners >

Row of links with the CSS class ‘threeImagesBlock’

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

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

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

Shorter lines of text are easier to read

550px

900px

Long lines of text are tiring on the eye

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

1/5 1/53/5

1/2 1/2

1/1

1/3 1/3 1/3

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

Header should be

set to <h2>

Description should be set to <h4>

Fields set to Fullwidth

Send enquiry

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

87

8. Update protocol

Can write posts

Administrator Editor Author

Can publish posts

Can manage posts

Has access to all features

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

Preview changes

Make changes

Update

Remember to preview a page before editing it

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

Thank you.

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?