This has all the modules that you’ll need with explanations here and there. Some modules may not have text fields so I try to explain what it is in the module above it. Images, unless specified, don’t have to be specially cropped, they will contain to the “containers” within modules, which is why I stick to general widths like 700, or 800 pixels. The only reason to lower a size is to keep image optimized, and speed up the load time of the page.

One way to do this is to use this site https://tinypng.com/
Most Subpage Hero Panos (the first module below) when saved at 1900 are still 1 MB or more. Use this site to optimize the image, download it, and then upload it onto the site. TinyPNG can be used to optimize any jpg or png before uploading, I use that instead of the Smush plugin.

The modules not in this guide are:

  • Photo Carousel- The “Photo Reel” on the homepage
  • Sample Hotel Maps- only used on the Sample Hotels page
  • Trip Search- This allows set searches for trips, used on pages like STEM, Classic, Explorer, and Insider
  • TrustBox Slider- Some set embedded item, it might be a trustpilot slider. The one’s used in Teacher landing page is just a normal module with a trustpilot embed code.
  • Subnav- This is the subnav that appears in the GL academy and Getting Ready pages. It reads all the pages that have the same parent. For instance, pages under “acis.com/academy/” will all appear in the subnav.

Save images at a min of 1900x700

Subpage Hero

Content with Image

Another commonly used module

All text aligns to the left from the Heading to the Content. Image is vertically centered to the content. The max-width for these images are 768px; best practice is to save images at 800px, and keeping the ratio of the height, but you can choose to crop images if it helps the design. Vertical images work best if there is more text to fill the space.

The module has an option to add 1 image, 1 Video, 2 Images Overlaying Each Other (example below), 2 Images One Tall next to Two Small Stacked (NOT USED), 3 Images Two Small on top of One Wide (NOT USED) and this media can be set on the left or the right.

I'm a button
Group among ruins in Venice

Content Center

Subheading of content center

Heavily used module. Good for centering content on a page and then left aligning paragraphs (like below). Remember to select all the text in the content box, and left align.

Do you want the Heading and Subheading left aligned too? Place all the text in the content box, rather than the separate heading and subheading fields, and use the style dropdown to select Heading 2 or 3 and then left-align. This module defaults to a width of 800px, but can be changed to 1120 px if it helps the design. Different background colors are available; for Azure, you may have to select all the text and make it white.

The button will always be centered

Content with Image (2 Overlap)

This option can be seen on the Teacher landing page, but it is most often used when representing trips like the “Subject Inspiration Pages”, where the original SVG trip maps are saved as JPGs and uploaded. Here is the copied style of trip specific usage of this module.

I’m a custom style, you can find me under Formats > Custom Styles > Grey Overnights- then start typing. 

I’m an H4 Heading

And a default paragraph- There are two tabs when editing any of these modules; “Visual” and “Text”, Text allows you to edit the content using basic HTML/CSS if needed. The maps are saved at 275 x 275 pixels

An example of this module using the video option can be seen on the STEM page near the top. When the video option is selected, a field to paste a video code/embed appears.

History teacher and students trip to Beijing Map of Dynastic China itinerary

Content Left, Image Right

Subheading area

This module (and the reverse module “content right, image left”) has more padding compared to “Content with Image” and do not have the option to switch, so you’ll have to copy and paste content from one module to the other to switch sides. There is also an automatic indent that pushes the text in except for the Heading text. Because of the extra padding, the image size appears a good bit smaller than “Content with Image”, and this module does not have a video or multiple images option.

 

Group among ruins in Venice
Group among ruins in Venice

Content Right, Image Left

Here is the reverse module, content remains the same, just different sides. Subheadings and Headings fields don’t have to be filled in, neither the buttons.

Content with Videos

Video Thumbnail
Thumbnail Caption
Video Thumbnail
Spain
Video Thumbnail
Costa Rican Rainforests
Video Thumbnail
Cooking Culture and Conversation in the DR

This module is “Quote Center”. Text only, always large, best to have less text.

The acorn and blue line below is a module called “Divider Line”. Choose an icon, and icon position.

Author Name Position title

FAQ

I'm the "FAQ" module, with a question field.

-And an answer field, with the same capabilities as other text editors, like adding bullets, links, adding icons, and choosing headings. There is no limit to rows of questions/answers.

If you want to separate faqs by subheaders, add another FAQ module, instead of more rows.

The module below is "Instagram Feed", it is all set up in the backend, there is a heading field but it does not work.

Instagram Feed

Follow us @acistours

Quote with Background

I can fit much more text than “quote center”, but I work best with a background. A box can be checked to have multiple quotes. You can also choose to have the quote be on the left or right.

Author field Position field
ACIS Tour Manager and Guide looking over phone

Slider, Media with Copy

This module allows us to create a carousel of either images or videos (or both). This is the “Why ACIS” carousel. The module will crop and resize images so they are all equal in height

Student in Costa Rica with Butterfly

Just Headings can be used

Text about above image, links can be added, most text editor features are available

 

Video

 

Video

1 /

2 Column Slider

ACIS Tour Manager and Guide looking over phone

An example of this in use is on the Student Stories page for the Artwork contest winners. Be careful when placing images, the arrow will always sit where the tallest image stops so we want a consistent height (this is one module we don’t want images to automatically crop). Use a “template”, open a canvas in Photoshop at 600 width x 450 and place the images on it and centered, the white space will keep all images consistent whether vertical or horizontal. Here’s an example of an image edited for this module. Both example images I used in this module are 600 x 400 so they work well.

The below module is called “Slider, Large Images”, it has no text options, only the ability to upload photos The photos don’t automatically crop like the “Slider, Media with Copy”, so if they don’t match in height or width, they look like the below example. The arrows will sit below the longest height.

ACIS Sightseeing Photo

The Student Stories area uses more size variations/headings.

There are many options to dress up this area,

it just doesn’t have dedicated Heading and Subheading fields besides the above main heading.

Also has a button
1 /

2 Column Equal with Backgrounds

Test

Test

Learn More

Student taking photos inside a church
Students standing in a hall in the Vatican museum
Photo contests on instagram
Group Photo Europe
1 /

Text Banner with CTA

WYSIWYG Content

The most generic custom field with freedom to do most anything with no extra custom fields, just one large content box. The container width is larger than other modules. These can be use to embed items on a page, by selecting the text tab and pasting the code. When switching back to the Visual tab, you most likely won’t see the final results, that would have to be previewed. Forms can be embedded in these too, by inserting its shortcode in the Visual Tab. In many modules on this page, if there is a text editor with a Text tab, video embed codes can be pasted in. Using the “Add Media” button that is usually available, anything uploaded to the media gallery can be placed alongside the text, and the size can be set to this specific area. The image below, is set to display at a Thumbnail size and aligned center.

1 Column, Left, Copy Only

Has a subheading field

This module is usually used with another module that doesn’t have a heading field, it is then “Joined” with the joining options within all modules to reduce some of the extra space and show that they are connected. “Content with Image” can also be used by not adding an image. The difference is that this module has an indent, is longer on the right side, and has the same type of padding as the “Content Right, Image Left” modules.

Students and local children planting trees in China

3 Column, Left

This module for example, doesn’t have a general heading, only headings relating to each column, so the above module should be used if a title needs to be used to describe the content here. The image has an option to be placed above or below the text (but still above the button).

A student with local children on a Service Learning trip

Second Column

When using this module with images, keep all three above or below, but not interchanging unless the text is perfectly laid out to balance it. Same with the buttons, make sure all three have buttons, or use none at all.

Images placed here must be the same size, they do not crop automatically.

Student holding a tree sapling

Third Column

This module is regularly used one on top of each other to form a grid when no images are used. The ACIS Travelers are in Good Hands grid on the Safety page is made up of three of these modules, joined, and with no images and no buttons.

2 Column, 2/3

The Left column is always larger

Good to use if you want this text to have more of a focal point, or the Right content is made of short info like a list of links. An example of this is on the bottom of the Safety Page, with an addition of a custom style of a line and an icon. To add this divider line, go to Formats > Custom Styles >Divider Line Right Align.

To add the icon, in the same spot click the Font Awesome dropdown and look for you icon of choice. As you can see, the header on the right doesn’t align with the subheading on the left. If it needs a large title, you can combine it with one of the other modules that only has the heading field filled. That way it will balance out better.

Right Col Heading

I could possiibly work as side info to contribute to the left, but most often this is made like a list

Link
Link
Link

Here’s a divider line…the icon’s a little off.

2 Column, 2/3 with Image

Subheading

Similar module as above, with the option to add an image and position it right or left. An example of this module in use are the individual trips on the Service Learning page. It has a lot of spacing between text and image.

a coral reef and fish

2 Column Boxes

This module is used on the home page. It’s very basic, and will always have a dark fading overlay when adding an image. Images will resize and crop to the center, so there is no need to make both the same, or crop them beforehand. A default width of 800px is is a safe base for most images! (Except for the subhero pano, 1900px is the best width size).

Box Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie nunc non blandit massa enim nec dui nunc.
Box CTA Text

Box Title

You have to use the button fields, since not adding a link or button text will do this.

Social

2 Column Equal

Subheading text

An example of this module in use is on the very bottom of the Student Landing page.

It was also used within some Subject inspiration pages to show case the lesson plans at the bottom of the page (Spanish page). In this example, I added media manually within the content box and aligned it center, I also didn’t use the Heading or Subheading fields, since those would show up above the image.

A Button

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet porttitor eget dolor morbi non arcu risus quis varius.

A Button

2 Column with Diagonal Photo

SubHeader

This is commonly used as CTA at the bottom of the page. Or an interruption in the design for some diversity in modules (the deals page has the module in the center). The height of this module is dependent on the text inside, which means more of the top and bottom of the photos will be cropped. It’s used in many places but you can find them on the parent and teacher landing pages. The background is always blue.

Button

2 Column with List

Subheading

This is the module used for the “Our Service Guarantee” area on the Teacher landing page. It’s not used often for more general pages, but still an option if you want listed items laid out like this. The items will list out from left to right, rather then down the left column and then right.

  • Hover over me Hover over me Descriptions can be added, but the longer the box, the more of the list item below gets covered.
  • List Item List Item Hello
  • List Item List Item
  • List Item List Item

3 Column Blue Background with White Heading

This module is specifically used on the Travel Deals page, and so far has only used shorter Headings, not like the above

Heading

Lorem ipsum sit dolor amet

Max of 3

But can be kept at 2 if needed. The height is based on the longest column, and if links are used within this text, they turn the same color as the background, so use “color:white;” styling and underline it. Or else just use the CTA field.

ACIS Students Switzerland Cable Car

3 Column Boxes

ACIS Students Switzerland Cable Car

This module is used on the leadership page, when using images in this module, you should make sure they’re all the the same size since they don’t crop automatically (but the image widths don’t change the size of the boxes/columns, they just resize to fit within it). The Heading text is always in the Viva font.

CTA
ACIS Students Switzerland Cable Car
Group Photo Europe

Heading

Group Photo Europe

There is also an additional option to set ALL the images on the top, middle, or bottom.

Group Photo Europe
Student in Costa Rica with Butterfly

Heading

Student in Costa Rica with Butterfly

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse in est ante in nibh mauris. Nulla porttitor massa id neque aliquam vestibulum morbi blandit.

Student in Costa Rica with Butterfly

4 Column Diagonal Overlays

Overlay Heading 1

Used a lot with Rewards items.

CTA

Heading 2

Overlay Heading 2

Overlay Content

Heading 3

Overlay Heading 3

Overlay Heading 3

Text

Heading 4

Overlay Heading 4

4 Column Image Grid

Column Heading

Used on the public facing rewards page to showcase Global Conferences. Unlike some of the 3 column modules, the “Add Row” button doesn’t disable after the fourth item, but will automatically break and continue with another row of four columns.

Heading

The images are automatically resized to fit, so they don’t need to all be the same size. Obviously horizontal images work best than vertical. These boxes can also be linked if needed. This one is.

Heading Only

Heading

A fifth item

You don’t have to fill all four columns, making this a good module for increasing or decreasing items.

Students playing chess on a ferry in Washington D.C.

4 Column Left

This is only used on the About Us page to show our locations and on the meeting flyers page. Because of its small image size, the round icons on the about us page works.

Students dancing at the Quebec Sugar Shack

Heading

In order to showcase the meeting flyers, images were made and placed in the content box, rather than the Image field.

Heading

Like this

Heading

And just text.

4 Column, Numbers

Just a fun module to showcase numbers/stats. The field for numbers only say “headline”, but the text is too large and uses Viva script so stick with numbers.

See

Lorem Ipsum sit dolor amet

500

Numbers

10

1

3 Column, Rollover Images

Subheading

This module is not being used. No real place for it- 3 columns but allows 4 rollover boxes.

Heading

Apparently the first box starts over here.

Heading

Content

Heading

Content

Heading

Content/ Last Box

2 Column Story

This module hasn't been used

This was used originally on the Teacher landing page to include a “story” from a group leader or someone. In the end we didn’t use it, for the benefit of the layout and because we weren’t happy with the design of this module. There is a field to insert a Person’s photo, and “person caption” but the caption doesn’t appear. It also has a youtube embed field, but I’ve never tried it.

A CTA

3 Panels on Full Image

Don’t use this module, it doesn’t work.

The module below it is called “Full Width Image”, does as it says, but hasn’t been used anywhere.

Panels

Panel 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse in est ante in nibh mauris. Nulla porttitor massa id neque aliquam vestibulum morbi blandit.

CTA

Panel 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse in est ante in nibh mauris. Nulla porttitor massa id neque aliquam vestibulum morbi blandit.

Student on a bridge in Florence

Content with Fading Background

Don’t use this module. It doesn’t seem to be working and the button appears despite nothing in the CTA fields…