\n
Combining Text and Images in E-Learning Design #250: Challenge | Recap
\n
Whether you’re building rapid page-turners or highly interactive courses, text and images will likely be two of your most-used elements.
\n
Common slide layouts include text on the left with images on the right. You can mix things up by reversing the text and image layouts. And for those who like to really shake things up, image and text blocks can be stacked on top of each other.
\n
\n
But you aren’t limited to layouts that separate text and images.
\n
For greater impact and variety, try placing text on top of images. This is a common design technique found in magazines, movie posters, and multimedia start screens. Here are some common ways text can be placed over images:
\n
\n
The challenge for course designers is finding ways to place text over images while maintaining readability. And that’s what this week’s challenge is all about!
\n
Challenge of the Week
\n
This week, your challenge is to share an example to demonstrate how text and images can be used in e-learning.
\n
You can share static graphics such as screenshots or mockups, or you can share an interactive graphic or cover slide.
\n
NOTE: Your entry can be anything from a rough concept to a polished example. The challenges are open to everyone, regardless of experience or skill level. If you need technical or creative help with your project, please ask in our forums and reference the challenge number you’re working on.
\n
New Entries Only!
\n
We hosted the text and image challenge just over 100 entries ago. To keep things fresh, we’re asking that you share only new examples this week. You’re more than welcome to re-work a previous example.
\n
Last Week’s Challenge:
\n
Before you share your creative text and image examples, check out the creative ways course builders design light and dark e-learning templates:
\n
\n
Using Light and Dark E-Learning Templates #249: Challenge | Recap
\n
Have a picture-perfect week, E-Learning Heroes!
\n
New to the E-Learning Challenges?
\n
The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
","kudosSumWeight":0,"postTime":"2019-09-14T05:43:05.000-07:00","images":{"__typename":"AssociatedImageConnection","edges":[{"__typename":"AssociatedImageEdge","cursor":"MjUuM3wyLjF8b3wyNXxfTlZffDE","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIzNTQ4LTY3MDMzaTJDNThBMjI3MDNDNUVBNTc?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuM3wyLjF8b3wyNXxfTlZffDI","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIzNTQ4LTM5NTY2aTZGNDI4MjdCOTk4NDA1RTA?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuM3wyLjF8b3wyNXxfTlZffDM","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIzNTQ4LTk2MTA1aTBGOTEwRTYwQUFGNkIyMDg?revision=1\"}"}}],"totalCount":3,"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"attachments":{"__typename":"AttachmentConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[]},"tags":{"__typename":"TagConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[{"__typename":"TagEdge","cursor":"MjUuM3wyLjF8b3wxMHxfTlZffDE","node":{"__typename":"Tag","id":"tag:E-Learning Challenge","text":"E-Learning Challenge","time":"2015-11-11T20:02:32.000-08:00","lastActivityTime":null,"messagesCount":null,"followersCount":null}}]},"timeToRead":2,"rawTeaser":"","introduction":"","coverImage":null,"coverImageProperties":{"__typename":"CoverImageProperties","style":"STANDARD","titlePosition":"BOTTOM","altText":""},"currentRevision":{"__ref":"Revision:revision:1123548_1"},"latestVersion":{"__typename":"FriendlyVersion","major":"1","minor":"0"},"metrics":{"__typename":"MessageMetrics","views":187},"visibilityScope":"PUBLIC","canonicalUrl":null,"seoTitle":null,"seoDescription":null,"placeholder":false,"originalMessageForPlaceholder":null,"contributors":{"__typename":"UserConnection","edges":[]},"nonCoAuthorContributors":{"__typename":"UserConnection","edges":[]},"coAuthors":{"__typename":"UserConnection","edges":[]},"blogMessagePolicies":{"__typename":"BlogMessagePolicies","canDoAuthoringActionsOnBlog":{"__typename":"PolicyResult","failureReason":{"__typename":"FailureReason","message":"error.lithium.policies.blog.action_can_do_authoring_action.accessDenied","key":"error.lithium.policies.blog.action_can_do_authoring_action.accessDenied","args":[]}}},"archivalData":null,"customFields":[],"revisions({\"constraints\":{\"isPublished\":{\"eq\":true}},\"first\":1})":{"__typename":"RevisionConnection","totalCount":1}},"Conversation:conversation:1123548":{"__typename":"Conversation","id":"conversation:1123548","solved":false,"topic":{"__ref":"BlogTopicMessage:message:1123548"},"lastPostingActivityTime":"2021-06-11T16:22:37.000-07:00","lastPostTime":"2021-06-11T16:22:37.000-07:00","unreadReplyCount":216,"isSubscribed":false},"ModerationData:moderation_data:1123548":{"__typename":"ModerationData","id":"moderation_data:1123548","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIzNTQ4LTY3MDMzaTJDNThBMjI3MDNDNUVBNTc?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIzNTQ4LTY3MDMzaTJDNThBMjI3MDNDNUVBNTc?revision=1","title":"uploads_rte_bxswnyfr_Combining-Text-and-Images-Elearning_CHALLENGE.png","associationType":"BODY","width":1512,"height":760,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIzNTQ4LTM5NTY2aTZGNDI4MjdCOTk4NDA1RTA?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIzNTQ4LTM5NTY2aTZGNDI4MjdCOTk4NDA1RTA?revision=1","title":"uploads_rte_wifgjbkz_combinging-image-text-layouts.png","associationType":"BODY","width":760,"height":276,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIzNTQ4LTk2MTA1aTBGOTEwRTYwQUFGNkIyMDg?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIzNTQ4LTk2MTA1aTBGOTEwRTYwQUFGNkIyMDg?revision=1","title":"uploads_rte_fngchuwd_Light-and-Dark-Mode-Templates_CHALLENGE.png","associationType":"BODY","width":1512,"height":760,"altText":null},"Revision:revision:1123548_1":{"__typename":"Revision","id":"revision:1123548_1","lastEditTime":"2019-09-14T05:43:05.000-07:00"},"BlogReplyMessage:message:1123628":{"__typename":"BlogReplyMessage","id":"message:1123628","conversation":{"__ref":"Conversation:conversation:1123548"},"author":{"__ref":"User:user:1154325"},"revisionNum":1,"uid":1123628,"depth":2,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"subject":"Re: How are You Using Text and Images in E-Learning Design? #250","readOnly":false,"editFrozen":false,"moderationData":{"__ref":"ModerationData:moderation_data:1123628"},"parent":{"__ref":"BlogReplyMessage:message:1123585"},"body":"Hello!
Here's my demo:
https://filedn.com/layUfATUCp200BIaKm5jwWj/Demos/AJsELCs/%23250/ELC250%20Layout%20Demo/story_html5.htmlComments and feedback are most welcome!
I do have a question: You will notice a Play button I made once you open the link. The reason for that is because I have a bit of audio on the cover and it will not play automatically in Chrome, only after you refresh the link, so...it's completely missed in the very beginning. Has any of you experienced this and know if there's been a fix posted, as I looked at some threads and nothing so far...suspecting it's my browser as well.
I also ended up in the first place with the audio being cut out, because I have an Exit button to close the tab window, and that brought the awful grey screen with a play button in the beginning. I got rid of that with some help from another thread that suggests you put a blank slides that jumps to your cover when timeline ends, less than 1 sec. But that took away the automatic play of my audio on the cover. :) Also, in my current Chrome browser the Exit button doesn't work, it works on mobile, tablet, explorer...not my Chrome though, tested on another pc and it worked. Any suggestions on this one as well?
Enjoy the Pancake demo :)
Thanks!
","body@stringLength":"1543","rawBody":"Hello!
Here's my demo:
https://filedn.com/layUfATUCp200BIaKm5jwWj/Demos/AJsELCs/%23250/ELC250%20Layout%20Demo/story_html5.htmlComments and feedback are most welcome!
I do have a question: You will notice a Play button I made once you open the link. The reason for that is because I have a bit of audio on the cover and it will not play automatically in Chrome, only after you refresh the link, so...it's completely missed in the very beginning. Has any of you experienced this and know if there's been a fix posted, as I looked at some threads and nothing so far...suspecting it's my browser as well.
I also ended up in the first place with the audio being cut out, because I have an Exit button to close the tab window, and that brought the awful grey screen with a play button in the beginning. I got rid of that with some help from another thread that suggests you put a blank slides that jumps to your cover when timeline ends, less than 1 sec. But that took away the automatic play of my audio on the cover. :) Also, in my current Chrome browser the Exit button doesn't work, it works on mobile, tablet, explorer...not my Chrome though, tested on another pc and it worked. Any suggestions on this one as well?
Enjoy the Pancake demo :)
Thanks!
","author":{"__ref":"User:user:200988"},"postTime":"2019-09-16T10:29:41.000-07:00","customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"repliesCount":6},"Revision:revision:1123628_1":{"__typename":"Revision","id":"revision:1123628_1","lastEditTime":"2019-09-17T09:54:35.000-07:00"},"QueryVariables:ReplyList:message:1123628:1":{"__typename":"QueryVariables","id":"ReplyList:message:1123628:1","value":{"id":"message:1123628","first":10,"sorts":{"postTime":{"direction":"ASC"}},"repliesFirst":3,"repliesFirstDepthThree":1,"repliesSorts":{"postTime":{"direction":"ASC"}},"useAvatar":true,"useAuthorLogin":true,"useAuthorRank":true,"useBody":true,"useKudosCount":true,"useTimeToRead":false,"useMedia":false,"useReadOnlyIcon":false,"useRepliesCount":true,"useSearchSnippet":false,"useAcceptedSolutionButton":false,"useSolvedBadge":false,"useAttachments":false,"attachmentsFirst":5,"useTags":false,"useNodeAncestors":false,"useUserHoverCard":false,"useNodeHoverCard":false,"useModerationStatus":true,"usePreviewSubjectModal":false,"useMessageStatus":true}},"ROOT_MUTATION":{"__typename":"Mutation"},"CachedAsset:text:en_US-components/community/NavbarDropdownToggle-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/community/NavbarDropdownToggle-1744833251000","value":{"ariaLabelClosed":"Press the down arrow to open the menu"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/users/UserAvatar-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/users/UserAvatar-1744833251000","value":{"altText":"{login}'s avatar","altTextGeneric":"User's avatar"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/ranks/UserRankLabel-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/ranks/UserRankLabel-1744833251000","value":{"altTitle":"Icon for {rankName} rank"},"localOverride":false},"CachedAsset:text:en_US-components/tags/TagView/TagViewChip-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/tags/TagView/TagViewChip-1744833251000","value":{"tagLabelName":"Tag name {tagName}"},"localOverride":false},"CachedAsset:text:en_US-components/users/UserRegistrationDate-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/users/UserRegistrationDate-1744833251000","value":{"noPrefix":"{date}","withPrefix":"Joined {date}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeAvatar-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeAvatar-1744833251000","value":{"altTitle":"Node avatar for {nodeTitle}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeDescription-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeDescription-1744833251000","value":{"description":"{description}"},"localOverride":false},"CachedAsset:text:en_US-components/messages/ThreadedReplyList-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/messages/ThreadedReplyList-1744833251000","value":{"title":"{count, plural, one{# Reply} other{# Replies}}","title@board:BLOG":"{count, plural, one{# Comment} other{# Comments}}","title@board:TKB":"{count, plural, one{# Comment} other{# Comments}}","title@board:IDEA":"{count, plural, one{# Comment} other{# Comments}}","title@board:OCCASION":"{count, plural, one{# Comment} other{# Comments}}","noRepliesTitle":"No Replies","noRepliesTitle@board:BLOG":"No Comments","noRepliesTitle@board:TKB":"No Comments","noRepliesTitle@board:IDEA":"No Comments","noRepliesTitle@board:OCCASION":"No Comments","noRepliesDescription":"Be the first to reply","noRepliesDescription@board:BLOG":"Be the first to comment","noRepliesDescription@board:TKB":"Be the first to comment","noRepliesDescription@board:IDEA":"Be the first to comment","noRepliesDescription@board:OCCASION":"Be the first to comment","messageReadOnlyAlert:BLOG":"Comments have been turned off for this post","messageReadOnlyAlert:TKB":"Comments have been turned off for this article","messageReadOnlyAlert:IDEA":"Comments have been turned off for this idea","messageReadOnlyAlert:FORUM":"Replies have been turned off for this discussion","messageReadOnlyAlert:OCCASION":"Comments have been turned off for this event"},"localOverride":false},"ModerationData:moderation_data:1123676":{"__typename":"ModerationData","id":"moderation_data:1123676","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"BlogReplyMessage:message:1123676":{"__typename":"BlogReplyMessage","author":{"__ref":"User:user:200988"},"id":"message:1123676","revisionNum":1,"uid":1123676,"depth":3,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"parent":{"__ref":"BlogReplyMessage:message:1123628"},"conversation":{"__ref":"Conversation:conversation:1123548"},"subject":"Re: How are You Using Text and Images in E-Learning Design? #250","moderationData":{"__ref":"ModerationData:moderation_data:1123676"},"body":"