3 Column, Rollover Images
Subheading
This module is not being used. No real place for it- 3 columns but allows 4 rollover boxes.
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.
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 centeredContent 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.
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.
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
Thumbnail Caption
Spain
Costa Rican Rainforests
Cooking Culture and Conversation in the DR
This is the content area that explains the video. A Wistia Video ID is needed to display the video (can be found in the embed and share codes). The background color height is controlled by the amount of text written here. Best used for 2-3 videos where there isn’t enough content for a carousel, but “Content with Image” only allows one video to display.
This module was designed to look and act similar to the way multiple videos are displayed on the Itinerary pages (which is based on backend code, and not a module). An example of this used on the site is on the top of the USA page.
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.
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 @acistoursQuote 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.
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
Just Headings can be used
Text about above image, links can be added, most text editor features are available
2 Column Slider
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.
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 button2 Column Equal with Backgrounds
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.
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).
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.
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.
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.
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
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 ButtonHeading
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 Button2 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.
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
- 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.
3 Column Boxes
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.
Heading
There is also an additional option to set ALL the images on the top, middle, or bottom.
Heading
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.
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.
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.
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
Heading
Heading
Heading
Heading
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.
CTAPanel 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.
