Have a unique tip to share or just want to comment on how we're doing?
RAISE YOUR HAND...
...if you have ever had the thought, "I wish I knew more about the website tools in Finalsite and someone would give me ideas on how to apply them to my pages." Chances are that your hand is up. We all could use a few tip and tricks of the trade to make our pages pop and free us from using all of our time adding titles to resources.
Now raise your hand if you struggle to keep what you have on your pages fresh and up-to-date. This is where most of you find yourself - stuck with a creative dilemma.
Welcome to The Blogger, a monthly melting-pot of info for the TSD Webmaster or Web Editor. Multiple posts, plenty of practical tools, tips and tactics with tons of great content will help you unleash your creative potential. You'll be raising your hand to a high-five because your site looks awesome!
November Topics & Tips
- Customize Posts for Inline Photos
- How to Create Awesome Tables
- How to Edit Resource Properties
- using a collage to display multiple pictures
- How Often Should we update content
- Optimizing Photos
Customize Posts for Inline Photos
You're adding content to your page and all of a sudden you realize that the images are all different heights and sizes. This makes for a page that looks sloppy and out of alignment. Let's use Posts with settings to create a streamlined look on your pages instead of just dropping them into a gallery.
Below are examples using a Gallery with a Grid Layout and a Post Board with a Grid Layout.
So how did we do this?
For small groupings or rows of different sized images, it's great to use a Post Board to align your images. Here's how:
-
Save your images in Resources with Title and Alt Text
- Create a New Post Board
- Title and Add your Thumbnail image to the Post
- Add a Start Date and Feature Date
- Add additional information about the photo, date of event, names, where it was taken. Maybe a link to a video or Gallery of images.
Once you have created your Post Board, add it to your page as a Post Element. Click the associated Edit Element Gear and set the following in the Edit Post Element Settings:
- Formatting > Post Thumbnail > Shape to Rectangle.
- By setting it to Rectangle it "optimizes the image to fit" and will change all to the same height and length.
How to Create Awesome Tables
Tables can be used to display information in a compact presentation. Let's learn how to create a dynamic table.
- Add a Content Element
- Select the Table icon from the tools menu
- From the Table Properties setup, input how many rows, and columns. You can add or remove as needed once your table has been created by right-clicking on the table and selecting Table Properties, Cell, Row or Column.
- If your Table will have a header, set where it will be located, then set the alignment.
- Specify the Width/Height and set the Spacing/Padding, if needed. This can be adjusted in Table Properties, as well.
- Set the Class pull down menu to Table Styled
- Click Save
- Now you can add your content (See sample Below)
Table | Header | Column | Row |
---|---|---|---|
Table | Header | Column | Row |
Table | Header | Column | Row |
Table | Header | Column | Row |
How to Edit Resource Properties
Now that you have your Resources loaded, it's much easier to manage them, if you know the quick tricks of editing the properties. There are up-to six (6) base tools on the resource toolbar. Let's explore what they are and how to implement them beyond general use.
Resource Tool Icons - Click Image
Let's expand our knowledge and get familiar with the additional features on the Resource panel.
- TITLE - Used to identify or display where it is used (can be used for hover-overs on home page). Must be added so that the resource will display on the page.
- NAME - Filename imported (has extension, i.e., .jpg, pdf, png)
- DESCRIPTION - Additional information or links to display where Resource is used (can be edited for hover-overs on home page)
- ALT TEXT - Also know as Alternative Text, is used for users that have the reader turned on for assistance. This text is read to the user in lieu of seeing the resource. Must be added so that the resource will display on the page.
- TAGS - Adding a tag is useful, tags are for internal use only, but a good tagging system can save time when looking for resources.
using a collage to display multiple pictures
You've just had an event and there are multiple pictures from staff, students and parents that you'd like to display. What are your options, (1) the never-ending slideshow, (2) the forever-long grid of photos, (3) cutting over half of the photos because of (1) and (2); Not to mention, you have to put title and alt text on ALL of them.
Well, there is a solution. Here's a PRO-TIP that's easy and has tremendous benefit.
Check out how Athens HS is using this feature to display their Athletics photos.
Check out how Troy College & Career is using it in their Spotlight section.
Benefits:
- Able to display multiple images in fewer panels
- Easy to navigate for user on mobile devices
- Only have to title a few panels rather than multiple photos
- Nice layout and page appeal
- Use online collage makers like Fotojet, PhotoCollage, Photovisi, Fotor or more
- A collage panel can be used as one of the images in your Spotlight section and link to a photo gallery page with more collage panels.
How Often Should we update content
Because news is ever-changing it is a great idea to create new content/posts frequently. Here are some great tips to get the creative juices flowing. Make your school’s website a main source of information for parents, students and the community. To do that, you’ll need to keep it updated with current and interesting info.
GUIDELINE: Post something new at minimum - 2x per month. Here are some ideas to help you feature items in the News & Announcements and Spotlight sections of your school website. Start with items on your school calendar and go from there.
Get kids involved. MS/HS – ask the writing for broadcasting, morning news, yearbook or photography club/class to share info or help with interviews (teachers may be able to add extra credit, just ask). ELEM – Ask 4th and 5th grade teachers for student help during a recess once a week to interview or take pictures/video.
Send a “Profile Form” to teachers and have them fill it out – keep it and photos in your Resources. Ask parent volunteers to do the same. Feature a few per month.
If you are not able to update information – change out the graphics/photos/videos in the News & Announcements or Spotlight section and keep the same info. This gives your site a fresh look. In need of Post images: Send a request to Melissa.
nEW CONTENT | wHAT TO wRITE aBOUT |
---|---|
Upcoming Events: Speakers, athletic events, meetings, field trips, assemblies, school holiday parties, graduations, etc. |
Create content around your upcoming calendar. Parents will be regular visitors to the site, if they know that news of events will be posted regularly – add forms and additional info in the post content. |
Summarize Past Events and Successes: Recap on past events, highlighting key points and take aways. You can also use the end of week, month, season, semester, or year to highlight your achievements, graduations, field trips, etc… |
Highlight events by having a follow-up interview with guests, speakers, show fundraising totals and success. Highlight how many students attended and get quotes from them on how much they enjoyed the event/assembly, etc… Post photos and videos. |
Local and National News: What’s happening in the world around your school and how does it affect your audience. |
The weather – is there a predicted snowstorm coming and tips to prepare, daylight savings time (give a brief history of how it started and why we participate), Community Events – MLK Day, Nature Center, Summer Camps for students, Local Tutors List, etc… |
Re-Occuring Content: Use this area to showcase a person in your school on a weekly or monthly basis. |
Student of the Month - Interview the student and one of their teachers to add to your news article. Take pictures or video. Athlete of the Week - Interview the athlete and/or the coach. Take lots of photos and show awards, if any. Staff Spotlight – Feature a teacher, write a bio and take photos. Kids love to read about their teachers, especially if they have pets. Take photos or have teacher/staff member share pictures to use. This Week in Sports - Give a quick recap of final scores and notable plays from this past week. |
Testimonials (from parents, staff and students): Interview staff, parents, alumni and students and ask them “What makes (my school) special? Switch the question every few months. |
Add a post on your homepage, create a “Contact form” in the Form Manager to gather quotes, testimonials and well wishes form those that visit the site. Have your principal note it in their newsletter. Create a page of these quotes, add images. Now you have a great way to brag about your school. |
Optimizing Photos
Page load or speed times can affect the amount of time it takes to upload the images on your page. Large photos \can slow down your site. Even though Finalsite optimizes your Resources to some degree, but it may not do enough. Here are some tips to help you optimize them for best viewing.
- Export your images at or close to the size that they will be used on your page. Don't upload a 9000 pixel-wide photo for use as post image on your homepage. Resize it to fit (use Resource Properties if you don't have access to another tool) with a photo editing tool like Photoshop, Pixlr (online), BeFunky (online) or another tool. Many of the Photo Collage tools have an image editor built in them, as well.
- Compress your image to reduce the size by using a tool like Compressor.io
- Having a high dpi image is great for printing, but can slow down the web. Example: Image is 300dpi or 600dpi for printing, but only needs to be at least 72dpi to be viewed at the same quality. Check the dpi of your image.
The example below shows that if you reduce the size of the photo, very little change happens and it reduces the load time. This is very beneficial if you upload multiple photos into a slideshow or grid.
Photos that are JPEG/JPG format upload faster and load times will increase for the user. Only use PNG files when uploading graphics. If you need to optimize your PNG files to upload faster and can't change the photos to JPEG/JPG, use the tool TinyPNG to optimize your photos or files. It will reduce the percentage of the image file size.
December Topics & Tips
- Getting to Know the Content Element Toolbar
- exploring the tools
- A bit of Holiday Fun: CSS Animated Snowflakes
Getting to Know the Content Element Toolbar
In this Blogger edition, we're going to breakdown all of the tools and how to best apply them within your pages.
The Content Toolbar is located at the top of the Content Element. It's a one-stop location to add text, like a word processor, format text-related elements and resources.
To add a Content element, select it form the Modules Tools available when you click ADD ELEMENT from your page.
The Content element is the most basic building block in Composer, and it can accept any kind of text, image, or rich content. Content elements can contain images, embeds, links, or any other content you want to add.
exploring the tools
- TOOL - Embed & Paste Code
- TOOL - Accessibility Checker
- TOOL - Undo/Redo Arrows
- TOOL - BOLD & ITALIC
- TOOL - PARAGRAPH FORMAT
- TOOL - BLOCK QUOTE
- TOOL - PASTE CODE
- TOOL - SUPER/SUB SCRIPT
TOOL - Embed & Paste Code
Embed & Paste Code tool:
The Paste Code tool allows you to "embed" HTML or Javascript content right onto your page. The Embed tool allows you to add code to a page and displays all of the code used for this Content element box.
Whether you're simply embedding a URL via an I-Frame code or something with more rich material like a interactive widget, these are the tools to use. Most sites generate HTML codes for use in your website, if not, brush up on your HTML and Java language skills. We'll explore more about coding in a future edition.
Let's give it a try and add a simple Weather Forecast Widget code to the Paste Code tool.
TOOL - Accessibility Checker
accessibility checker tool:
This tool allows the user to check if the items they have added to the page meets common accessibility guidelines. A window will pop up letting you know if there are issues that you need to fix or if everything looks good.
For example: If you did not add Alt. Text to an image, The accessibility checker offers a "Quick Fix" button. To use it, type the desired alt text into the "Alternative text" field, and click the green button.
When the issue has been resolved, a notice will appear at the top of the screen.
TOOL - Undo/Redo Arrows
undo/redo tool:
The left arrow allows the user to go back a step and undo what was just done. For example: I just added a photo and isn't quite the image I need. I can click the left arrow and undo the addition of the image. Left pointing arrow is the Undo arrow.
The right arrow allows the user to reapply a step after undoing it. For example: I just clicked the Undo arrow and removed the photo that I added; I then decide that the I'd like to re-add the photo, so instead of adding it through Resources again, I just need to click the right arrow (Redo arrow) and reapply the photo. Right pointing arrow is the Redo arrow.
TOOL - BOLD & ITALIC
Bold & italicize tool:
The B tool allows the user to enhance the thickness of applied text. This feature has been turned off in most text editing areas, but not all, so you'll have to see if usable when applying text. Please use the Paragraph Format tool to enhance type per our theme settings.
The I tool is used to emphasize the angle of a letter or word. Both of these tools are also available in the Paragraph Format tool, as Address and Headings. Example: Straight, Italicized.
TOOL - PARAGRAPH FORMAT
PARAGRAPH FORMAT tool:
The Paragraph Format tool includes theme-based and sized headers and formatted text options.
Examples:
- Normal
- Standard line-spacing, 12pt text, and uppercase/lowercase formatting.
-
Heading 1
- Enhanced header line-spacing, 36pt text, and uppercase formatting, website theme coloring standard.
-
Heading 2
- Enhanced header line-spacing, 28pt text, and uppercase/lowercase formatting.
-
Heading 3
- Enhanced header line-spacing, 24pt text, and uppercase/lowercase formatting.
-
Heading 4
- Enhanced header line-spacing, 22pt text, and uppercase/lowercase formatting.
-
Heading 5
- Enhanced header line-spacing, 19pt text, and uppercase/lowercase formatting.
-
Heading 6
- Enhanced header line-spacing, 15pt text, and uppercase formatting.
-
Formatted
- Enhanced line-spacing, text can be sized by user, and uppercase/lowercase formatting, data font display.
-
Address
- Standard line-spacing, text can be sized by user, and uppercase/lowercase formatting, Italicized display.
-
Normal (Div)
-
HTML line-spacing (narrower than Normal), text can be sized by user, and uppercase/lowercase formatting.
-
TOOL - BLOCK QUOTE
block quote tool:
Block quotes can be used for quotes of the day, alumni, teacher, parent or student testimonials. Allows for a design feature to be displayed on your page in a formatted way.
- Add the text for your block quote, including optional citation, all on one line. Select the text. From the toolbar select the Block Quote tool.
- If a citation was included, now select the citation text and choose "citation" from the Styles Drop-down Tool menu.
Example (Before Block Quote) :
You never know what you can do until you try, and very few try unless they have to.
Example (With Block Quote and Citation and Italicizing) :
You never know what you can do until you try, and very few try unless they have to.
TOOL - PASTE CODE
paste code tool:
Much like the Embed Code tool, this tool allows for a larger code building window, without seeing the complete script that is used within the Content window.
We will learn more about how to write simple Java and HTML code in a future edition. Now we will show you how to add a script code to the Paste Code tool window to add an embedded animation and/or widget.
Example:
TOOL - SUPER/SUB SCRIPT
SUPER/SUBSCRIPT toolS:
SUBSCRIPT: Abbreviated as sub, Subscript refers to words or character that are half the height of a standard character and printed lower than the rest of the text. Below is an example of subscript text, which shows "Subscript Text" halfway below the bottom line of the "Normal Text." Most commonly used in Chemistry, Math or Programming
Example:
Normal Text Subscript Text
SUPERSCRIPT: Abbreviated as sup, a superscript is a character(s) half the height of a standard character and printed higher than the rest of the text. An example of superscript is shown below. Most commonly used in Writing References, Numbers (ordinal indicators), Math, Copywriting and Trademarks.
Example:
Normal Text Superscript Text
- TOOL - ALIGNMENT
- TOOL - REMOVE FORMAT
- TOOL - DIVIDING LINE
- TOOL - IMAGE
- TOOL - VIDEO
- TOOL - INSERT SPECIAL CHARACTER
- TOOL - MATH TEXT
- TOOL - INSERT ABBREVIATION
TOOL - ALIGNMENT
ALIGNMENT tool:
Allows you to align text, images or other items created or added to the Content Element, to the left, right, center or justify.
Example (Align Left):
Align Left is where all items, text, etc are aligned to the left-side margin in the Content window. Highlight items and select from the drop-down menu.
Example (Align Right):
Right Left is where all items, text, etc are aligned to the right-side margin in the Content window. Highlight items and select from the drop-down menu.
Example (Center):
Center is where all items, text, etc are aligned to the a center point within the Content window. Highlight items and select from the drop-down menu.
Example (Justify):
Justify is where all text is spaced to fill each line from left-side margin to right-side margin in the Content window with the last line remaining constant. Highlight items and select from the drop-down menu.
TOOL - REMOVE FORMAT
TOOL - DIVIDING LINE
TOOL - IMAGE
image tool:
Although this is just one of a few image tools in Finalsite, it provides the most flexibility and adjustment of your image. Allows you to insert a photo, graphic or other artwork with the .jpg, .jpeg, .png extension. The image can be adjusted in size by dragging the corner and links added to create a clickable navigation element. Images must be added to the Resources folder with title and alt text before using this tool to place them in the Content window. Below are links to Royalty-Free photos that don't require attribution (author consent) and have CC0 (Creative Commons Zero license = This means you can copy, adapt or distribute the images — even for commercial purposes). So go wild, there's no excuse for not keeping your sites interesting and up-to-date. Use Images to help tell a story and capture the viewers attention.
Example:
Find Royalty-Free photos at the following:
TOOL - VIDEO
Media tool:
This is just one of a few media/video tools in Finalsite. Although it allows you to insert video content, it is not the most efficient way to insert video. Media must be uploaded, accessed and managed through the old Finalsite Media Manager platform rather than Resources. This means you may have to upload videos twice if you intend to use them in multiple locations.
Multimedia Manager - Upload Video by creating a Channel or Folder:
Multimedia Manager - Browse for Uploaded Video to Insert in Content window:
Multimedia Manager - Navigate to Select the Video:
Example (inserting Congrats Grads 2019 video):
It is suggested that you use this Media/Video tool infrequently. It is more difficult to manage than other Resource tools. Finalsite has no immediate plans to migrate items from this platform to Resources (their new management platform), but at some point this may happen.
TOOL - INSERT SPECIAL CHARACTER
insert special character tool:
This tool is often referred to as the "Trademark" or "Copyright" tool because it is used most frequently by copy writers to add the TM symbol to their copy. This tool allows the writer to add symbols directly in their copy without having to sub/superscript text or perform acrobatics with keyboard functions to insert characters. There is a host of characters that are ready for you to insert just by clicking. There's also a viewer to the right to preview what the symbol looks like before use.
Examples (accent marks, also known as diacritics or diacriticals):
- Résumé
- Entrepôt
- Zöe
- Über
- Soupçon
- Señor
- ©
- ®
- ™
- ¢, £
- ½, ¼, ¾
- ♦, •, ¿
- →, ⇒, ⇔
- ÷, ¤
TOOL - MATH TEXT
TOOL - INSERT ABBREVIATION
insert abbreviation tool:
Allows you to create an abbreviation for a set of words or title that will abbreviate itself throughout your document. This can also be used in reverse to change an abbreviation to a full name or title. Can be used for Accessibility Readers, where abbreviations don't read properly.
Example (Original Text):
The Technology Resource Center is offering webmasters the opportunity to read the full transcript of the Troy School District Blogger page.
Example (Abbreviating Troy School District and Technology Resource Center):
The TRC is offering webmasters the opportunity to read the full transcript of the TSD Blogger page.
TOOL - FONT SIZE & NAME
font size & name tool:
Font name is set with the theme font FRANKLIN GOTHIC of for all of our websites and can not be changed.
The change Font Size has a default size of 16.0 pt. Other font sizes can be set, but be aware that to view the actual display size, you will need to toggle the Composer button OFF.
Examples:
Default - 16.0 pt
-
8, 9, 10, 11, 12
-
14, 16, 18, 20
-
22, 24, 26, 28
-
36, 48
-
72
TOOL - UNDERLINE
TOOL - FONT COLOR
TOOL - BULLET LIST
TOOL - TEXT DIRECTION
text direction tool:
This tool is used very rarely and doesn't even have an associated icon. This tool allows the user to start the reading direction of text from: (Note: Punctuation is moved in Right to Left)
- Right to Left
- Left to Right
Examples:
The quick brown bear ran around the lazy dog and surprised the sleeping cat.
The quick brown bear ran around the lazy dog and surprised the sleeping cat.
TOOL - BACKGROUND COLOR
background color tool:
Allows you to "add a background color to the Content window or table cell you are working in. It acts more like a Highlighting tool, than a Background color tool. To apply true Background color, find color images that can be applied to a Container in the SHARED RESOURCES folder.
This is an example of how the background color applies itself to areas where content is (text) in the Content window.
TOOL - NUMBERED LIST
TOOL - INDENT/OUTDENT
TOOL - STRIKETHROUGH
strikethrough tool:
Allows you to "edit" text within the Content element. This tool is typically used to correct mistakes or revisions to previously posted text to keep a history of changes. It can also be used as an editing tool to recommend what should be changed or deleted.
Example:
We the People of the United States and surrounding neighborhoods, in Order to form a more perfect Union at Troy Union Elementary, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, as well as OneTroy, do ordain and establish this Constitution for the United States of America.
TOOL - INLINE STYLES
INLINE styles tool menu:
Allows you to add interior/inline styling to the Content Element window.
INLINE STYLE TOOLS EXAMPLES
CITATION / CALL OUT / LEAD IN
Citation:
Addition of small text to a main object typically used in a document where you need to cite your sources, such as a research paper or to reduce the size of an author's name in a quote block.
Examples (Citation applied to the Byline):
A quote is a quote is a quote
By Unknown
Call Out:
Emphasizes a grouping of words in a paragraph, a quote, or as a header.
Example:
A quote is a quote is a quote
Lead In:
A line of text that is slightly larger than the paragraph or sentence to follow. Emphasized with a grey color. This can be applied to a letter or a group of words.
Examples:
A quote is a quote is a quote the unknown author said. The above text is a lead in to the rest of my paragraph.
A quote is a quote is a quote the unknown author said. The above text is a lead in to the reset of my paragraph.
CONTENT CALL OUT HEADER
Allows you to showcase images or content in a unique way and draw attention to your page. PRO TIP: Use this as a showcase a Staff Member of the Month with a Biography. All of your current staff images have been uploaded to the SHARED RESOURCES folder.
This is a sample Call Out Header Box and the steps to create it:
- Add a Content Element window to your page
- Type the words that will display in the Call Out Box
- Highlight the Header or Title (if there is one) and select Content CallOut Header from the Styles list. This will BOLD the header from the rest of the text.
- Save
- Click the Edit Element gear
- Add a Custom Class (if you combine these, add a space after each one in the CC field)
-
module
-
module dark
-
photo-left
-
7. Expand +Design and add the photo to the Header or Footer section. This will depend on if you want your image on top or bottom.
8. Save
This is a sample Call Out Header Box with the image to the left.
This is a cute puppy and it deserves to have it's picture showcased on this page in a Callout Header Box.
BUTTONS
TABLE STYLED
To style a Table - use the instructions we learned in a previous edition. See below:
Tables can be used to display information in a compact presentation. Let's learn how to create a dynamic table.
- Add a Content Element
- Select the Table icon from the tools menu
- From the Table Properties setup, input how many rows, and columns. You can add or remove as needed once your table has been created by right-clicking on the table and selecting Table Properties, Cell, Row or Column.
- If your Table will have a header, set where it will be located, then set the alignment.
- Specify the Width/Height and set the Spacing/Padding, if needed. This can be adjusted in Table Properties, as well.
- Set the Class pull down menu to Table Styled
- Click Save
- Now you can add your content (See sample Below)
Table | Header | Column | Row |
---|---|---|---|
Table | Header | Column | Row |
Table | Header | Column | Row |
Table | Header | Column | Row |
TOOL - LINKS
links tool:
Allows you to "link" a Resource or External URL to an Image, Word, Button, etc....
Games to Play Online - Linked to a URL
Games to Play Online - Linked to Site File
Games to Play Online - Linked to Site Page
Games to Play Online - Linked to Media (media must be uploaded to the Multimedia Manager old platform to be linked here)
links tool: Anchors
Anchor links allow you to create a link that points to a different location on the current page. Creating anchor links is a two-step process:
-
Create a “target” location in the page where the user will end up.
-
Create a link that points to that anchor.
The target location on the landing page is really just a spot on the page that's been given a specific name. This is done in the text editor inside a Content element.
Note: Anchor links created using the method below only work within the same content element. An anchor link can only be placed in one element and linked to another manually.
Open the text element, place your cursor in the location where you want users to end up, and click the “Link” button. Select "Add Anchor" from the Link button menu. You'll be prompted to give your anchor a name.
If you're only adding one anchor, the name can be completely arbitrary. If you're editing a document with an intricate structure that may require multiple anchors, take a moment to think about how you should name them. Each anchor on the page must have a unique name. Avoid spaces in anchor names, as they can introduce some unwanted complexity.
Creating a link to your target
Now that you've established an anchor, you can create a link to it from somewhere else on the page. Highlight the text, image, or other resource that will link to the anchor and click the "Link" button again. This time, select "Add Link."
In the Link Settings window that pops up, select the "Anchor" link type, then use the "Anchor" dropdown menu to choose the target for this link. Any anchors that you've created on the page will appear in the dropdown.
Click the blue OK button, and you're done. The text you highlighted will now become a link that takes users to the anchor that you created.
Let's give it a try. Can you guess where my target/anchor is? Let's read more about External URLs.
TOOL - TABLE
Table tool:
Tables can be used to display information in a compact presentation. The best way to create a table is to start by estimating how many columns and rows you will need and if you will have a header or not. The remainder of the content can be adjusted in the Table Properties (right-click on created table).
- Add a Content Element
- Select the Table icon from the tools menu
- From the Table Properties setup, input how many rows, and columns. You can add or remove as needed once your table has been created by right-clicking on the table and selecting Table Properties, Cell, Row or Column.
- If your Table will have a header, set where it will be located (left-side column or across the top), then set the alignment.
- Specify the Width/Height and set the Spacing/Padding, if needed. This can be adjusted in Table Properties, after your table has been created.
- Set the Class pull down menu to Table Styled - this will give you the banded effect with color. If you do not want this effect, do not select this feature.
- Click Save
- Now you can add your content - keep in mind that the cell size will adjust to the longest string of characters.
- You can add images, text and other features inside cells.
PRO-TIP: This is a perfect tool to use in a pinch when you want to adjust the size of single resource images and keep them inline without the added work to create a gallery or posts. Make sure you adjust the border size to 0 and keep width to 100%.
A bit of Holiday Fun: CSS Animated Snowflakes
Embed
Enjoy these snowflakes for your website, no need to learn Javascript!! Just a quick CSS animation (IE10+).
Just use the Embed Element to add this HTML script to your webpage and enjoy beautiful falling snowflakes. Happy Holidays!!
❅
❆
❅
❆
❅
❆
❅
❆
❅
❆
❅
❆
If you know how to write code - then go ahead and adjust a container on an (interior page). If not, I've made an embed code for you that you an use on any interior page on your site. Here's how to do it:
- ADD A CONTENT ELEMENT TO YOUR PAGE:
- CLICK ON THE EMBED CODE ICON OR THE EMBED ICON AND COPY THE CODE TO THE LEFT IN THE FIELD
- CLICK SAVE, PUBLISH YOUR PAGE.
Whether you have the snow fall continuously or from an action, like opening an accordion, it's a cool feature.
These are the grey snowflakes that will show up better on a white background:
Just use the Embed Element to add this HTML script to your webpage and enjoy beautiful falling snowflakes. Happy Holidays!!
<style>
/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
</div>
<div class="snow" />
<style>
.editor-stage .snow {
height:50px;
background: #b9ebfa;
}
.snow{
position:fixed;
pointer-events:none;
top:0;
left:0;
right:0;
bottom:0;
height:100vh;
background: none;
background-image: url('https://s3-eu-west-1.amazonaws.com/static-ressources/s1.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s2.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s3.png');
z-index:100;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
</style>
<p>
HTML Embed code for falling snow