H5P

Description

One of the great benefits with using H5P is that it gives you access to lots of different interactive content types, such as presentation, interactive video, memory game, quiz, multiple choice, timeline, collage, hotspots, drag and drop, cloze test (fill in the blanks), personality quiz, accordion, flash cards, audio recorder.

Another great benefit with H5P is that it allows you to easily share and reuse content. To use content created with H5P, you simply insert a shortcode [h5p Id="1"] where you wish for the content to appear. To reuse content, you just download the H5P you would like to edit and make your changes – e.g. translate to a new language or adjust it to a new situation.

H5P is:

  • Open Source
  • Free to Use
  • HTML5
  • Responsive

Gutenberg Blocks and Template Library by Otter

Description

Gutenberg Blocks and Template Library by Otter is a lightweight WordPress plugin that brings extra Gutenberg blocks to your site. So if you want to create complex pages and posts optimized for e-commerce, business, social media, blogs – you name it -comes with dozens of Gutenberg blocks that are all you need to build beautiful pages.

Live Demo

See what you can do with Otter:

A feature that is worth mentioning is the Section Block that allows you to build columns and various layouts in Gutenberg. Moreover, aside from the Gutenberg blocks, the plugin provides a beautiful library of pre-built Gutenberg-compatible templates that you can simply import via one click. The templates have block-friendly layouts that can be customized with no effort.

Every block can be customized in a few seconds, as they come with an easy and intuitive user

It has:

  • Section Block
  • Advanced Heading Block
  • Button Group
  • Service Block
  • Pricing Block
  • Testimonial Block
  • Google Maps Block
  • About Author Block
  • Post Grid Block
  • Font Awesome Block
  • Sharing Icons Block
  • Plugin Card Block

Easy Google Fonts

Description

For a quick video demo please view the vimeo screencast.

A simple and easy way to add custom google fonts to any WordPress theme without coding. This plugin integrates with the WordPress Customizer so you can preview google fonts on your site in realtime. It’s compatible with any theme.

It also allows you to create custom theme specific font controls in the admin settings area to control particular css selectors. Once created, these custom font controls are instantly available in the customizer no coding required!

WHAT DOES THIS PLUGIN DO?

  • This plugin allows you to take full control of your theme’s typography in any WordPress theme (no coding required).
  • It allows you to choose from over 600+ google fonts and font variants to insert into your website without coding.
  • Allows you to preview font changes on your website in realtimeusing the WordPress Customizer.
  • Create Unlimited Custom Font Controls: Create custom font controls in the admin area that are instantly available in the Customizer preview.
  • Allows you to preview what your theme will look like with the new google fonts before you save any changes.
  • Allows you to create your own font controls and rules in the admin area (no coding required).
  • Allows you to easily change the look of your website with the click of a button.
  • Automatically enqueues all stylesheets for your chosen google fonts.
  • Allows you to add google fonts to your theme without editing the themes main stylesheet which allows you to update your theme without losing your custom google fonts.

PLUGIN FEATURES

  • Live Customizer Preview: Preview google fonts without refreshing the page in real time right in the WordPress Customizer.
  • Over 600+ Google Fonts to choose from as well as a list of default system fonts.
  • Works with any WordPress Theme. No coding required.
  • Automatic Background Updates: Updates the google fonts list with the latest fonts automatically once.
  • Translation Ready: MO and PO files are included.
  • Seamless WordPress Integration: Uses the WordPress customizer for the live preview and has a white label admin area that looks like it is a part of WordPress.
  • Custom WordPress Customizer Control: One of a kind control only available with this plugin.

WHO IS THIS PLUGIN IDEAL FOR?

  • Anyone who is looking for an easy way to use google fonts in their theme without coding.
  • Theme Authors: you can use this plugin to add custom google webfonts to your theme.
  • Great for use on client projects or for use on existing websites.
  • People that are happy with their theme but want an easy way to change the typography.
  • Anyone with basic knowledge of CSS Selectors (in order to add custom font rules).

 

Collapsing Categories

Description

Collapsing Categories creates an expandable list of categories and
subcategories. It can also expand to show posts. The primary usage is as a
widget.

 

WIDGET INSTALLATION

Activate the plugin, then simply go the
Presentation > Widgets section and drag over the Collapsing Categories Widget.

Block Gallery – Photo Gallery Gutenberg Blocks

Description

Block Gallery is a suite of beautiful gallery Gutenberg blocks for photographers, artists, writers and content marketers. This is the smartest, most powerful photo gallery plugin for WordPress. Block Gallery is absolutely brilliant any way you look at it.

Good news! Block Gallery was selected as this year’s winner in the Best Solution category of the Automattic Design Awards at WordCamp US 2018. ????????

A SHORT DEMO OF BLOCK GALLERY

UNRIVALED, IN EVERY WAY

The first of its kind, Block Gallery offers an unrivaled drag and drop gallery building experience in Gutenberg. Drop your images in your choice of photo gallery block, customize display settings, hit publish.

UNPARALLELED CAPABILITIES

An innovative transform system lets you instantly change your photos galleries into another form. Go from a fullscreen masonry gallery to a casual carousel, with just a single click. You won’t find another Gutenberg gallery plugin with this kind of capability. Guaranteed.

HIGHLY RESPONSIVE

Our Gutenberg gallery blocks are second-to-none, featuring fullscale responsive support. And with fine controls for mobile and desktop styles, you can set custom styling for each gallery.

A SUPER-FAST EXPERIENCE

We’ve built a highly interactive and intuitive experience with a focus on speed and ease of use. Drag. Drop. Transform. Style.

INCLUDED GALLERY GUTENBERG BLOCKS

  • Masonry Gallery – (demo)
  • Fullscreen Stacked Gallery – (demo)
  • Carousel Slider – (demo)

 

 

Widgets

Widgets allow you to place common elements (such as links to other sites, index of content on your site, a log in area, or list of upcoming events from a Google Calendar) at a consistent location on every page of your site (called a Sidebar).  The theme you use will dictate which areas of the screen (sidebars) can be used for widgets, and the theme may also provide unique widgets.  Therefore, the available widgets and sidebars vary depending on the theme and plugins you’ve chosen for your website.

Adding a Widget

To add a widget to your Temple Website Hosting website:

  1. Click the Appearance section of your dashboard.
  2. Select Widgets.
  3. In the middle of your screen, you will see a list of the available widgets. On the right side of your screen, you will see all of the available content areas on your site where you could place those widgets. To place a widget in a content area, click the Primary Aside title to expand the content area if not already expanded.
  4. Drag the widget into the Primary Aside area.

Some widgets will open up and provide some modification options. When you have selected all of your preferred options, click Save.

Finally, should you wish to display a page on your website that does not include your sidebar(s) of widgets, instructions are available on the Knowledge Base.

Please note that the widgets are tied to your theme. When you switch themes, you will lose all of your widget settings and need to start afresh.

Widgets in Gutenberg

https://www.youtube.com/watch?v=DvGZAsCnmpY

Using the Text Widget

http://wordpress.tv/2009/08/03/the-text-widget-for-wordpress/

Using the RSS Links Widget

http://wordpress.tv/2009/10/03/the-rss-links-widget/

Using the Search Widget

http://wordpress.tv/2009/08/03/the-search-widget-for-wordpress/

Using the RSS Widget

http://wordpress.tv/2009/08/03/the-rss-widget-for-wordpress-com/

Using the Pages Widget

http://wordpress.tv/2009/08/03/the-pages-widget-for-wordpress/

How to change your sites Theme

You can change your site’s theme at any time on sites.temple.edu, just as a precaution though changing themes may change the layout of your site. The new theme may change where you have your META data, or your home page menu depending on what theme you are using.

 

Changing your Theme

When you are logged into the site that you want to change the theme of, go to the Dashboard. Hover over the ‘Appearance‘ tab, a sub-menu will appear. Select ‘Themes‘.

 

From here you will see a menu of all available themes on sites.temple.edu. If the existing themes on Sites.temple.edu don’t meet your needs, and you find a theme that you would like to be added on sites.temple.edu, please submit a tuhelp ticket.

 

Hovering over Themes will give you three options to choose from:

Theme Details – Gives you details about the selected theme.

Live preview – Lets you see how the default settings of this theme will look on your site. You can navigate through your site to see how the theme works with different pages and blog posts. You can also apply various theme customizations to see if the options work for you. If you like the changes you can click ‘Activate & Publish’. If you don’t like the theme, click the X to the left of ‘Activate & Preview’ to go back to your original theme and settings. You will be warned that any changes you made will be lost.”

Activate – This will update your site to use this theme. You will most likely need to tweak the theme settings (header image, color scheme, etc.) to your liking.

 

Once you have found a Theme that you like for your Site, click the ‘Activate‘ button to enable it for your site.

 

Parallax in Gutenberg

What is Parallax?

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.

Setting up Parallax in Gutenberg editor

  1. open the Page you want to add the Parallax to.
  2. Click the check icon to add a new block.
  3. in the search bar search for ‘Cover’
  4. select the ‘Cover’ block.
  5. Upload or select the image you want to use for the Parallax.
  6. Click on ‘Block’ on the menu on the right side of the screen.
  7. Check the ‘Fixed Background’ button under ‘Cover Settings’
  8. Change the ‘Background Opacity to what ever setting you would like (the higher you change this, the darker the image will be.)
  9. Click on the image and write the text that you want.
  10. If you want the Parallax to take up the whole screen of the page, you can select the ‘Full width’ option above the block.

 

 

How to build a Landing page in Gutenberg

Creating a Landing page with Gutenberg editor

It is good to use themes that were created specifically for the Gutenberg editor. A few good ones to use on your single page site would be Neve, Twentynineteen, or Reykjavik

Step 1: Choose your page layout

layout

To give your page enough space, you’ll want to choose a layout without a sidebar.

You can select a layout from the right side under the document section. Using either of the layouts with no sidebar is a good choice. For the test design, I have chosen no sidebars with the content centered (rather than full-width).

Step 2: Plan out your basic landing page design

Next, you want to make a plan for the general design of your landing page so that you know which elements you’ll need to include.

Beyond thinking about which elements you’ll need, also consider how you want to arrange those elements.

One common approach is to use a Z-pattern. This pattern is good for pages with minimal content.

The Z-rule is based on the fact that a user starts viewing the page from left to right on the menu bar, then goes to the bottom-left corner and then again goes to the right side (provided that the page isn’t content heavy). This design is used by some popular platforms like Shopify, Facebook and many more.

z-pattern

Feel free to use any design type for your landing page as long as it follows good basic web design principles.

Step 3: Use blocks to add elements to your landing page

Now that you have the important info, you’re ready to start building your page. Usually, it’s easiest to just start building at the top of the page and move down.

For our example, we will start with the main headline and subheading.

Heading, subheading, and background image

select cover

The Cover block is a good option for the top of your page because it lets you include a large image, as well as text on top of that image.

we will use it to include a heading and subheading on top of a background image with an orange overlay.

add block

Once you’ve added the cover block, upload a beautiful image for your landing page. To make your text more visible, you can use the right sidebar to add the overlay color and background opacity.

To add the text, you just need to click and type.

Primary call to action (CTA)

Once you’ve finished with the Cover block, you can add your primary CTA underneath by using the Button block. You can use the right sidebar to customize the colors of your button. You can see that I’ve added a Get Started button underneath the cover:

You can link this to a gravity forms page. With gravity forms, you can create a contact me page, registration for an event, and much more.

 

cover structure

And here’s how everything so far comes together in the live preview:

cover preview

Product details/overview box

To add a good-looking product details box, you can use the Media & Text box. As the name suggests, this block creates a two-column layout with an image on one side and any type of text on the other. I decided to use a list for the text. You can see it below:

realign

To improve the layout, you can add space between the previous section and this section by adding a Spacer block. You can adjust the distance between the two blocks via the blue dot on the spacer block.

next block

Once you’ve added the content and the image in the Media & Text block. It will look like this:

media and text

Final call to action (CTA)

To add the final CTA at the end of your landing page, you can use another Button block. Or, if you’d prefer to use a form instead, the Gravity Forms plugin allows you to embed any type of form.

Putting it all together

After using all those blocks to create a landing page with the block editor, here’s another look at the final landing page design:

Final Landing Page Using the New Block Editor in WordPress

 

Building your First Page with Elementor

Build Your First Page

Elementor uses three main building blocks: SectionsColumns, and Widgets.

Sections are the largest building blocks, and inside them are groups of ColumnsColumns sit inside of Sections and are used to house the WidgetsWidgets are placed inside of Columns.
You control the SectionColumn, and Widgets with their handle.

Editing

To edit the SectionColumn, or WidgetRight Click their handle.

 

 

Section

  1. Click the  icon to create a Section, or click the  icon to use a pre-designed Page or Block from our library
  2. Set your Column structure
  3. Right click to Edit, Duplicate, Copy, Delete etc.Use the Section handle  to: add a section, drag a section, or delete. To see additional options, such as to duplicate the section, right click on the dot grid in the center of the section handle.

 

 

Column

  1. Set the Columns Width. You can do it under Layout, or drag the dashed line between the Columns.
  2. To add more Columns Right Click > Add New Column
  3. Insert Widgets to your Columns

 

Widget

  1. Insert Widgets inside your Columns
  2. A Widget width is set by the Column width

 

 

Adding templates in Elementor

Adding Templates

Templates are pre-designed Pages & Blocks that can be inserted into any page with just one click.

  1. from the editing screen, Click the  icon.
  2. Click the magnifying glass icon   to preview a template.
  3. Click INSERT to select the required template.
  4. Give your favorite templates a heart and save them to My Favorites.
  5. Click the arrow in the top right corner  to upload a .json or .zip file.

Elementor Pro

Here at Sites.temple.edu we are pleased to announce that we offer Elements Pro as an editor.

To use the ‘Elementor Pro‘ Plugin, you must first have the ‘Elementor‘ plugin activated.

After, you will have to submit a TuHelp ticket requesting Elementor Pro access on your site.

 

Elementor Pro Features

there is a lot of additional functionality added to Elementor when you enable ‘Elementor Pro’ onto your site.

Some of the additional functionality from the plugin is:

  • 300+ Pro Templates & Blocks
  • Custom Fonts & Adobe TypeKit
  • Slides & Carousels
  • Custom CSS
  • Scrolling Effects
  • Animated Headlines
  • Flip Box
  • 15+ Other Design Widgets
  • Popup Builder
  • Sticky Elements
  • Social Buttons & Integrations
  • Social Proof Widgets
  • Call To Action Widget
  • Form Widget
  • Request Parameters
  • Custom Field Integrations

Creating a new Page with Elementor

Create a new page with Elementor

 

    1. On the top left side of the WordPress dashboard, click Pages > Add New
    2. Click Edit with Elementor to enter Elementor Page Builder

  1. When adding a new page with Gutenberg editor. Use the ‘Edit with Elementor’ button within Gutenberg