latest version

Masjid Custom Shortcodes

With Masjid comes many custom shortcodes for (Visual Composer) VC that are used to show content created in Masjid.

Below you will find short information about this Visual Composer elements:

../_images/short.png

Donations Display

../_images/short1.png

This element will let you display Donations’ items in a grid view.

../_images/short2.png
- General Tab -
  • Number of columns - Number of columns to display the posts.
- Filter Tab -
  • Limit - Number of posts to display.
  • Order by - How the posts are ordered.
  • Sort Donation Order - How the posts order looks.
  • Specify Donation Categories - Only show posts under the categories of Donations’ item.
../_images/short3.png

Events Display

../_images/short4.png

This element will let you display the Events items in a slider.

../_images/short5.png
- General Tab -
  • Autoplay - Option to make the slider move automatically.
  • Autoplay speed [ms] - Speed of the slider when moving.
- Filter Tab -
  • Limit - Number of posts to display.
  • Order - How the posts are ordered.
  • Order by - How the posts order looks.
../_images/short6.png

Donations Forms

../_images/short7.png

This element will let you add the Donations items in the page.

../_images/short8.png
- General Tab -
  • Number of columns - Number of columns to display the posts.
  • Autoplay - Option to make the slider move automatically.
  • Autoplay speed [ms] - Speed of the slider when moving.
- Filter Tab -
  • Limit - Number of posts to display.
  • Order by - How the posts are ordered.
  • Sort Donation Order - How the posts order looks.
  • Specify Donation Categories - Only show posts under the categories of Donations’ item.
../_images/short9.png

Styled Google Maps

../_images/short10.png

This element will let you add a google map with a specific address.

../_images/short11.png
  • Address - The complete address of the location to show in the map.
  • Latitude - Latitude coordinates of the location.
  • Longitude - Longitude coordinates of the location.
  • Custom map height - Set the height of the map. You can leave it blank for a responsive map.
  • Zoom - Set the zoom in of the map.
  • Map marker - Choose an image to use as the map marker.
  • Map style code - Code for a customized map marker.
../_images/short12.png

Icon Box

../_images/short13.png

This element will let you create an icon box that displays an icon with title and description or a counter.

../_images/short14.png

  • Select display type - Type of icon box that will be shown.

    1. Type 1

      • Select icon type - Choose whether to show an image or an icon.

        1. Icon

          • Icon - Choose an icon to show in the icon box.
          • Icon Color - Color scheme of the icon.

        2. Image

          • Icon image - Choose an image to show in the icon box.

      • Select icon background shape - Background shape of the icon.

      • Select icon background color - Background color of the icon.

      • Select icon alignment - Location where the icon will show.

      • Title - Title of the Icon Box.

      • Title color - Font color of the title.

      • Select title alignment - Location where the title will show.

      • Description - Text description of the icon.

      • Description color - Text color of the description.

      • Select description alignment - Location where the description will show.

        ../_images/short15.png

    2. Type 2

      • Select icon background color - Background color of the icon.

      • Select icon type - Choose whether to show an image or an icon.

        1. Icon

          • Icon - Choose an icon to show in the icon box.
          • Icon Color - Color scheme of the icon.

        2. Image

          • Icon image - Choose an image to show in the icon box.

      • Select icon alignment - Location where the icon will show.

      • Title - Title of the Icon Box.

      • Title color - Font color of the title.

      • Select title alignment - Location where the title will show.

      • Description - Text description of the icon.

      • Description color - Text color of the description.

      • Select description alignment - Location where the description will show.

        ../_images/short16.png

Latest News

../_images/short20.png

This element lets you add the latest blog posts.

../_images/short21.png
-General Tab-
  • Number of columns - number of columns to show the latest blog post.
-Filters Tab-
  • Limit - Set results limit.
  • Skip X elements - Skip a number of elements from the results.
  • Order - How the posts order looks.
  • Order by - How the posts are ordered.
  • Specify Posts - Only selected posts are shown.
  • Exclude Posts - None of the selected posts will be displayed.
  • Specify Categories - Only show posts under the categories of blog posts.
  • Exclude Categories - None of the posts under the categories of blog posts well show.
  • Specify post tags - Only show posts with selected tags.
  • Keyword search - Show items with certain keyword.
../_images/short22.png

Prayer Clock

../_images/short23.png

This element will let you add a clock that indicates what prayer is scheduled with icon.

../_images/short24.png
-Part # Tab-
  • Icon - Choose an icon to use.
  • Select icon color - Color scheme of the icon.
  • Title - Title of this part.
  • Select title color - Text color of the title.

Note

The time that this element follows to indicate the scheduled prayer will be based on the time zone which the user’s computer is set.

../_images/short25.png

Prayer Grid

../_images/short26.png

This element lets you a grid for the prayer schedules.

../_images/short27.png
-General Tab-
  • Number of rows - number of rows for the grid.
-Prayer # Tab-
  • Prayer heading - Text in the header of the prayer box.
  • Prayer name - Text in the middle of the prayer box.
  • Prayer time - Text for the time that the prayer is scheduled. This is a static input.

Note

The time that this element follows to indicate the scheduled prayer will be based on the time zone which the user’s computer is set.

../_images/short28.png

Styled Video

../_images/short29.png

This element lets you a text-link for a popup video. You can add an icon or image beside the text-link.

../_images/short30.png
  • Video - Link for the video.
  • Frame color - Color scheme of the frame.
  • Frame Position - Location of the frame.
  • Text color - Text color of the text in the frame.
../_images/short31.png

Sermons Display

../_images/short35.png

This element lets you show items in Sermons post type.

../_images/short36.png
-Filter Tab-
  • Limit - Set results limit.
  • Order - How the posts order looks.
  • Order by - How the posts are ordered.
  • Specify sermon categories - Only show posts under the categories of gallery.
../_images/short37.png

Note

To get the same layout as the demo site:

../_images/short38.png

Set the Page template of the page where the sermons are displayed to Full Width Page.

Team Display

../_images/short39.png

This element lets you show items in the Sacraments post type.

../_images/short40.png
-General Tab-
  • Number of columns - number of columns to show the team members.
-Filters Tab-
  • Limit - Set results limit.
  • Skip X elements - Skip a number of elements from the results.
  • Order - How the team members order looks.
  • Order by - How the team members are ordered.
  • Specify Team members - Only selected team members are shown.
  • Exclude Team members - None of the selected team members will be displayed.
  • Specify Team Categories - Only show team members under the categories of blog posts.
  • Exclude Team Categories - None of the team members under the categories of blog posts well show.
  • Specify post tags - Only show posts with selected tags.
  • Keyword search - Show items with certain keyword.
../_images/short41.png

Testimonial Slider

../_images/short42.png

This element lets you show items in the Testimonials post type.

../_images/short43.png
-General Tab-
  • Autoplay - Option to make the slider move automatically.
  • Autoplay speed [ms] - Speed of the slider when moving.
-Filters Tab-
  • Limit - Set results limit.
  • Skip X elements - Skip a number of elements from the results.
  • Order - How the testimonials order looks.
  • Order by - How the testimonials are ordered.
  • Specify Testimonials - Only selected testimonials are shown.
  • Exclude Testimonials - None of the selected testimonials will be displayed.
  • Specify Testimonials - Only show testimonials under the categories of blog posts.
  • Exclude Testimonials - None of the testimonials under the categories of blog posts well show.
  • Specify post tags - Only show posts with selected tags.
  • Keyword search - Show items with certain keyword.
../_images/short44.png

Image Hotspot

../_images/short45.png

This element lets you show an image with tooltips with descriptions.

../_images/short46.png
-General Tab-
  • Image - Image to add tooltips on.
  • Tooltips display - How the tooltips will show.

Note

To add a tooltip click on the area where you like the tooltip to show, and the Hotspot Tooltip Content will show.

../_images/short47.png