Archives

Advanced Custom Fields

Use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data.

Add fields on demand. Our field builder allows you to quickly and easily add fields to WP edit screens with only the click of a few buttons!

Add them anywhere. Fields can be added all over WP including posts, users, taxonomy terms, media, comments and even custom options pages!

Show them everywhere. Load and display your custom field values in any theme template file with our hassle free developer friendly functions!

acf-home-fields

Made for developers

At the core of the Advanced Custom Fields plugin is the simple and intuitive API.

Use functions like get_field() and the_field() to quickly build powerful templates.

Simple Calendar – Google Calendar

Simple Calendar is the easiest way to add Google Calendar events to your WordPress site. Quick to setup. Fine-tune to your needs. Mobile responsive. Beautifully designed.

SIMPLE CALENDAR FEATURES

– Display events from any public Google Calendar.
– Keep managing events in Google Calendar. No need to create events in WordPress.
– Out-of-the-box designs that match your theme’s look and feel.
– Fully responsive and mobile-friendly monthly grid and list views.
– Customize event content display using simple tags. No coding required.
– Combine multiple calendars into single displays explicitly or using categories.
– Intuitive, simple display configuration changes for fine tuning.
– Advanced settings to adjust time zones, date/time formats and start of the week.
– Integration with Event Calendar Newsletter for quickly turning your events into a newsletter-friendly format.
– Additional functionality offered with add-ons.
– Translations available with more being added on a regular basis. Translations welcome!

 

 

How to integrate your Google Calendar

Please Note: your google Calendar must be set to Public in order for this integration to work.

If you need help making your Google Calendar public, please check the following article https://sites.temple.edu/knowledge-base/how-to-make-your-google-calendar-public/

  1. Navigate to the ‘Plugins’ tab from the Dashboard.
  2. In the search bar search for ‘simple Calendar’.
  3. Click the ‘Activate’ button.
  4. Once activated, click the ‘Settings’ link.
  5. Enter the following api key into the ‘Google API Key’ box AIzaSyBqjOgheI-cSVnxjLX-MsMrL8sEF1MtNj8
  6. Click the ‘Save Changes’ button. 
  7. Click the ‘Add New’ tab in the Calendars section of the dashboard.
  8. Click the ‘Google Calendar’ tab under ‘Calendar Settings’
  9. Enter your Calendar ID into the ‘Calendar ID’ box.
    1. If you need help finding this, please check the How to find your calendar ID support article.
  10. Hit the blue ‘Publish’ button.

you are all done and should now be able to see your Google Calendar integrated into your site.

Note: If you want to embed the Calendar on a specific page you can grab the ‘shortcode’ from Calendars –> All Calendars.

Hover Effects in Elementor

Hover Effects

Elementor provides Hover Effects that help to increase and improve your website’s engagement and design interaction.

Hover effects can be applied at the WidgetColumn, and Section level, and can be combined to create unlimited effect variations.

Wherever you see the Normal and Hover buttons  , you have the option to add hover effects.


Elementor – Adding Shape Dividers

Shape Divider

Shape dividers are graphic shapes that separate the sections of a page.


How to Add Shape Dividers

  1. Add a new Section
  2. Go to Section > Style > Shape Divider
  3. Choose to display at the Top or Bottom of your section
  4. Type: Click the dropdown to choose your Shape Divider style
  5. Color: Pick a color
  6. Width: Set the width of your Shape Divider
  7. Height: Set the height of your Shape Divider
  8. Flip: Flip the direction of your Shape Divider
  9. Bring to front: Force your Shape Divider to be in front of other objects

Elementor – How To Add Video Backgrounds

Section Background Video Options

You can set a video as the background of a Section, enabling you to create interesting hero headers and other engaging areas on your page. The background video options can be found within the section’s Style tab.


Style

Background

  1. Background Type: Click the video icon
  2. Video Link: Enter a YouTube or .mp4 link to the video
  3. Start Time: Specify start time in seconds
  4. End Time: Specify end time in seconds
  5. Background Fallback: Upload a cover image, to replace the background video on mobile and tablet devices, as background videos are disabled on mobile devices to avoid browser restrictions and bandwidth draining.

Mouse Effects in Elementor

Mouse Effects – Mouse Track

Set an element to move in relation to the visitor’s mouse movement.

mouse

Advanced or Style > Background

Motion Effects

  1. Mouse Effects: Slide to ON
  2. Mouse Track: Click pencil edit icon
    Direction: Choose from Opposite or Direct. Opposite will move the element in the opposite direction of the mouse movement. Direct will move the element in the same direction as the mouse movement.
    Speed: Set the speed from 0 to 10
  3. Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devices.

Elementor Templates

Template Library

Elementor Template Library gives you access to hundreds of designer-made Page layouts and Blocks, all with premium high-end stock images, which you can use freely on your site.


Inserting Templates

  1. Click the  icon to add a Page template, Block, or your own saved template from the editing screen.
  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.

Saving Pages as Templates

  1. Click the green button located at the bottom of the panel
  2. Choose Save Template
  3. Give a name to your template and save


Saving Sections as Templates

  1. Choose the section you want to save and right-click the Section Settings 
  2. Give it a name and click Save

How to Export Templates

You can export your saved templates.

  1. Click the  icon in the Elementor editor
  2. Under My Templates click the 3-dots  and click Export

How to Import Templates

You can import templates you’ve exported or downloaded.

  1. Go to Templates > Saved Templates or Templates > Theme Builder or Templates > Popups
  2. Click the Import Templates button
  3. Choose the file you want to import and click the Import Now button
  4. Your imported template will now be displayed in your Templates list

Typography on Sites.temple.edu

Here on Sites, we offer different ways for a user to change the typography on their site. In this article, we will go through the different methods to do so.

 

What is Typography?

Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each web browser.

With WordPress, you have the ability to change these settings in a handful of different ways.

 

How to Change Font Size, Color, Family & Style in Elementor Page Builder

Many Elementor Widgets offer the ability to edit text color and typography settings. These design options are located in the widgets’ Style tab.

Style

Text Color: Choose the color of your text

Under the Widget Setting > Style, click the icon to access the typography settings.

Typography

  1. Family – Choose your font family
  2. Size – Choose a size for your font
  3. Weight – Choose the weight of the font
  4. Transform – Choose the Transform properties for the font
  5. Style – Choose between Normal, Italic, and Oblique
  6. Decoration – Choose the text Decoration
  7. Line-Height – Use the slider to set your line-height
  8. Letter Spacing – Use the slider to set your letter spacing

 

 

 

How To Change Font In Gutenberg Editor and Classic Editors.

 

  • The first step is to navigate to the ‘plugins‘ tab on the menu.

  • once in the plugins menus, search for ‘Easy Google Fonts‘ and click the ‘activate button underneath it.

 

 

  • Now, go to Appearance → Customise to change font in Gutenberg Editor.

  • Click on Typography and to change Content font go to Default Typography → Paragraphs

 

  • Now, under Paragraphs, choose the font family you want.
  • You can change the font family by clicking on the Edit Font dropdown arrow and then clicking on Font Family dropdown arrow.
  • Once done click the Blue ‘Publish‘ button in the top right corner of the menu.

Download Leaflet Map

Description

Add a map generated with LeafletJS: an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through OpenStreetMap, or MapQuest (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.

MAPS

Simply create a map with:

[leaflet-map]

Lookup an address with:

[leaflet-map address="chicago"]

Know the latitude and longitude of a location? Use them (and a zoom level) with:

[leaflet-map lat=44.67 lng=-63.61 zoom=5]

Add a marker under your map shortcode, like so:

[leaflet-map]
[leaflet-marker]

Want more? Make more (and fit the map to contain all of them):

[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]
[leaflet-marker address="oslo"]
[leaflet-marker address="cairo"]
[leaflet-marker address="toronto"]

You can even add popups (to any shape) with their names:

[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]Tokyo[/leaflet-marker]
[leaflet-marker address="oslo"]Oslo[/leaflet-marker]
...

Add a link to the popup messages the same way you would add any other link with the WordPress editor.

OTHER SHAPES, GEOJSON, AND KML

Add a line to the map by adding [leaflet-line]. You can specify the postions with a list separated by semi-colon ; or bar | using lat/lng: [leaflet-line latlngs="41, 29; 44, 18"] or addresses: [leaflet-line addresses="Istanbul; Sarajevo"], or x/y coordinates for image maps.

Add a circle to the map by adding [leaflet-circle]. You can specify the position using lat and lng and the radius in meters using radius. You can also customize the style using Leaflet’s Path options. Example: [leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1].

Or you can add a geojson shape via a url (make sure you are allowed to access it if it’s not hosted on your own server): [leaflet-geojson src="https://example.com/path/to.geojson"]. Add custom popups with field names; try out the default src file and fields like so (note fitbounds needs to be on leaflet-geojson (for now)):

[leaflet-map]
[leaflet-geojson fitbounds]{name}[/leaflet-geojson]


name is a property on that GeoJSON, and it can be accessed with curly brackets and the property name.

IMAGE MAPS

Alternatively, you could use a plain image for visitors to zoom and pan around with [leaflet-image src="path/to/image/file.jpg"]. See screenshots 3 – 5 for help setting that up.

Page Builder Gutenberg Blocks – CoBlocks

Description

CoBlocks is the most innovative collection of page building WordPress blocks for the new Gutenberg WordPress block editor.

With additional blocks and true row and column building, CoBlocks gives you a true page builder experience for Gutenberg.

CoBlocks is powerful but lightweight: it adds functionality to the WordPress editor without bloat. This is the plugin you’ve been waiting for, and it will make you rethink what WordPress is capable of.

SEE FOR YOURSELF

MAKE BEAUTIFUL WEB PAGES WITH GUTENBERG, AND COBLOCKS

CoBlocks is the last page builder you’ll ever need: you get a winning mix of additional WordPress blocks, and page builder functionality. With CoBlocks you have everything you need to make beautiful web pages with the new block editor:

  • Resizable Row/Columns Blocks
  • Shape Divider Block
  • Hero Block (New!)
  • Buttons Block (New!)
  • Features Block
  • Media Card Block
  • Icon Block
  • Map Block
  • Accordion Block
  • Alert Block
  • Author Profile Block
  • Click to Tweet Block
  • Dynamic Separator Block
  • Gif Block
  • GitHub Gist Block
  • Highlight Block
  • Pricing Table Block
  • Social Sharing Block

And we’re adding new Gutenberg blocks all the time!

BREAKTHROUGH PAGE BUILDER SYSTEM

CoBlocks features an innovative block system that allows you to create stunning web pages, and even entire websites, with the new WordPress editor.

You get the extra blocks you need and the layout and design functionality for a true page builder experience.

Use the exceptional Row and Columns blocks to add dynamically generated content areas with specific responsive margin and padding settings that only CoBlocks provides.

Style these with innovative new blocks such as the Shape Divider, which lets you split up your content with beautiful dividers.

Each of the WordPress blocks within CoBlocks have been precisely fined tuned to offer a familiar, yet powerful, customization experience. Tailor each block to your taste using our custom controls and settings. Change fonts, set margin and padding, pick colors and more.

CUSTOM TYPOGRAPHY CONTROLS

The breakthrough Typography Control Panel within CoBlocks lets you design web pages with alluring typographic elements. Set fonts, sizes, weights, transformations and more, in our CoBlocks blocks, and in core WordPress blocks.

TURN OFF BLOCKS WITH THE BLOCK MANAGER

Easily toggle off any WordPress block in the Gutenberg editor with the new CoBlocks Block Manager. No more unnecessary WordPress Gutenberg blocks standing in the way for you, or your clients.

WATCH IT IN ACTION

GOING BEYOND GUTENBERG BLOCKS

The vision for CoBlocks is to create a suite of Gutenberg blocks to help folks make beautiful websites easily. These newest releases of CoBlocks is the ultimate expression of that vision.