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. 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
6. 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. 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.
9. 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.
10. 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).
14. 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. 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.
16. YouthSpeak logo in white on orange background
Youth to Business logo
Logos for Global Talent and Global Citizen
17. 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.
21. 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
22. 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. 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
27. 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.
29. 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
30.
31. 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
32. <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. 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
35. 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
38. No white space = busy
White space = breathing space
Preview images should be 309x341px
309px
341px
39. 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
40. 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. 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
42. 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. 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
44. Each logo sits within a 500x500px white square,
surrounded by a 70px ‘safe zone’
70px
70px
360px
45. 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
48. 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. 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
50. 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. 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
52. 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. 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
56. Global navigation bar containing key links
Mobile view of global navigation Expanded ‘hamburger’ menu
57. 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
59. 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
62. Make sure that grouped elements are in the same container,
so that they stack correctly on a mobile screen
63. 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
64. 550px
Custom height in pixels
threeImagesBlock
Section custom height
Section minimum height
Custom CSS class
Activate your potential
65. 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
66. 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. 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
68. Alternate between white, blue and light gray (or
full-width images) for consecutive sections
2,000 30,000126
69. 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
70. A blue animated number band displaying three statistics and icons;
the number should be set to 40pt and the description to 16pt
71. 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
73. 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
75. 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
76. About AIESEC > About internships > NGO partners >
Row of links with the CSS class ‘threeImagesBlock’
77. 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
78. 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. 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
80. Shorter lines of text are easier to read
550px
900px
Long lines of text are tiring on the eye
81. 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
83. 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
84. Header should be
set to <h2>
Description should be set to <h4>
Fields set to Fullwidth
Send enquiry
85. 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
89. 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
91. 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
93. 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?
