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:
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.
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 centeredThis 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.
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.
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.
-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.
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.
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.
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.
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).
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.
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.
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.
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.
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).
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 ButtonLorem 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 ButtonThis 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.
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.
This module is specifically used on the Travel Deals page, and so far has only used shorter Headings, not like the above
Lorem ipsum sit dolor amet
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.
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.
There is also an additional option to set ALL the images on the top, middle, or bottom.
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.
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.
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.
You don’t have to fill all four columns, making this a good module for increasing or decreasing items.
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.
In order to showcase the meeting flyers, images were made and placed in the content box, rather than the Image field.
Like this
And just text.
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.
Lorem Ipsum sit dolor amet
Numbers
This module is not being used. No real place for it- 3 columns but allows 4 rollover boxes.
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 CTADon’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.
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.
CTALorem 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.