How to make a web post

Posted on by

Web Development Topics:

What Is WordPress?

  • WordPress is a free, open-source website creation platform.
  • There are an estimated 64 million websites currently using WordPress.
  • Over 400 million people visit WordPress websites every month.
  • 661 new WordPress sites go live each and every day.
  • There are over 50,000 plugins available to enhance your WordPress website.
  • WordPress is available in 57 different languages, making it a truly global platform.
Click to the top of page

JCCAA Website Policy Statement

We advise all website users to be prudent and diligent, and take the necessary precautions and measures to comply with the JCCAA bylaws while utilizing JCCAA website to share or post information and materials about our organization or member organizations.

We urge all website users to keep away from those topics, contents or materials that are sensitive, controversial or inappropriate in nature such as but not limited to politics, religions, races, etc., which may result in discord, disruption, animosity or hostility within our organization or among our members.

We reserve the right to remove those publications that are deemed unsuitable in accordance with the above policy and to terminate the publishing privileges of those users that do not adhere to our policy.

For each JCCAA alumni web developer, please email your draft post title to: web.committee@jccaa.org by Wednesday. Then JCCAA web committee will publish your draft post on the following Friday. If you have any question about JCCAA website development, please also email to web.committee@jccaa.org.

Click to the top of page

How to login WordPress?

After you login, you enter WordPress Dashboard.

This is the Dashboard of WordPress.

You can change your password via “👤Profile” ➜ “New Password” ➜ “Set New Password”.  {Note: DONOT change “Display name publicly as”}. Then click “Update Profile”.

Click to the top of page

How to add a new Post in draft

From WordPress ⏲ Dashboard ➜ 📌Posts ➜ All Posts, click “Add New” to start a new post. {Notice: WordPress adopts “Post” word to represent all web pages you create. Therefore, WordPress uses “Page” to represent another meaning.}

This is a brand new post.
Click to the top of page

Add Title and Select Your school Category

It is required to enter Title and School Category for each new post.

If your Title contains any Chinese characters (i.e.海洋大學), click “Preview” might get “Bad Request” page, as below: {Note: DONOT click “Publish”}

If your Title contains any Chinese characters (i.e.海洋大學), click “Preview” might get “Bad Request” page.

To solve the above problem, you need to change the “Permalink” to be ALL ENGLISH letters inside the “URL Slug” field.

You need to change from “海洋大學” to “Ocean-University”, then click “Save draft”. {Note: DONOT click “Publish”}

Then click “Preview in new tab”. 

Preview your post in draft
Click to the top of page

How to change you post status between "Published" and Draft"?

In case you click “Publish” accidentally,  you can change post status from “Published” to “Draft” by following the two steps below:

  1. From ⏲ Dashboard ➜ 📌Posts ➜ All Posts, move cursor to the published post Title. The “Quick Edit” option appears. 
  2. Click “Quick Edit”. Change “Status” from “Published” to “Draft”. Then click “Update”.
Click to the top of page

How to edit your new post with “Elementor” widgets?

Now it is ready to edit your new post with Elementor, which provides many user-friendly tools, called widgets, for your web post editing. Click “Edit with Elementor”.

Click to the top of page

How to write your text contents ?

Three steps to write text contents in your new post:

  1. Drag the “Text Editor” widget into here (the white box here)
  2. Enter your texts into “Text Editor”, It will show up in your post. 
  3. Then click “Save draft”.  {Note: DONOT click “Publish”}
Click to the top of page

How to add a photo image?

Six steps to add image (width: 1024 pixel) into your post

  1. Drag the “Image” widget into here (the white box here)
  2. Move mouse to “Choose Image”. Then click “Choose Image”.
  3. From “Upload Files“ tab, “Select Files” of your photo from your PC.
  4. Option: You may add link (Custom URL) to this photo image by clicking “Link ➜ Custom URL”. 
  5. Option: After entering your desired URL, you may set to “Open in new window” by clicking Link Option symbol “✵”.
  6. Then click “Save draft”.  {Note: DONOT click “Publish”}
Click to the top of page

How to use "button" to open a PDF file in a new window?

  1. Upload your PDF file into JCCAA WordPress:
  2. From Dashboard ➜ Media ➜ Add New, select PDF file from your PC.
  3. After uploading, copy PDF’s URL to clipboard. (i.e. https://www.jccaa.org/wp-content/uploads/2022/03/JCCAA-Web-dev-class-names.pdf)
  4. Goto the Elementor, drag the “Button” widget into here (the white box here).
  5. Enter Text “Click here to view the PDF file” in the Button.
  6. Enter Link (of PDF’s URL) “https://www.jccaa.org/wp-content/uploads/2022/03/JCCAA-Web-dev-class-names.pd”.
  7. Select Link Option “Open in new window” via clicking symbol “✵”.
  8. Select Alignment to be “Center”.
  9. Select Size to be “Large”.
  10. Finally click “Save draft”.  {Note: DONOT click “Publish”}
Click here to the top of page
Click to top of page

How to embed a PDF file document?

Use plugin “PDF-Embedder” by “Text Editor” widget with the text contents: [ pdf-embedder url = “https://drive.google.com/…” ]

Follow the following steps to embed a PDF file document into your post:

  1. Get PDF’s URL from either Google Drive or uploading your PDF file into JCCAA WordPress.

1.1.  Option: Upload your PDF file into JCCAA WordPress

1.2. From Dashboard ➜ Media ➜ Add New, select PDF file from your PC.

1.3. After uploading, copy URL to clipboard. (i.e. https://www.jccaa.org/wp-content/uploads/2022/03/JCCAA-Web-dev-class-names.pdf)

  1. Drag the “Text Editor” widget into here (the white box here)
  2. Enter the following text into “Text Editor” field:

[ pdf-embedder url=”https://www.jccaa.org/wp-content/uploads/2022/03/JCCAA-Web-dev-class-names.pdf” ]

  1. Then click “Save draft”.  {Note: DONOT click “Publish”}

* How to preview your post in draft?

From Dashboard ➜ Posts ➜ All Posts, Move cursor to your post name (draft), then click “Preview”.

Preview and click to try it in a new window.
Click to the top of page
  1. Drag the “Button” widget into here (the white box here).
  2. Enter Text “Click here to open the Zoom meeting” in the Button.
  3. Enter Link “https://us02web.zoom.us/j/85417089124?pwd=dU45dU53RnJPUlhBbm4reVNINzl2QT09”. 
  4. Select Link Option “Open in new window” via clicking symbol “✵”.
  5. Select Alignment to be “Center”.
  6. Select Size to be “Large”.
  7. Select Icon library via clicking symbol “●”.
  8. Select user circle icon “☻”. Then click “Insert”.
  9. Change Button background color.
  10. Change Button’s Motion Effects.
  11. Finally click “Save draft”.  {Note: DONOT click “Publish”}
This is icon library, containing many icons for you to choose.

Change Button background color by tabbing “Style ⚈”. Then select Color Picker via clicking Color symbol “🟩”.

You can choose any kind of colors in Color Picker popup window.

Change Button’s Motion Effects by tabbing “Advanced ⚙︎”. Then select “Motion Effects” ➜ “Entrance Animation” ➜ “Bouncing” ➜ “Bounce in Left”. Finally click “Save draft”.  {Note: DONOT click “Publish”}

How to use “Button” widget to send an email (open to compose email in a new window)?

  1. Drag the “Button” widget into here (the white box here).
  2. Enter Text “Click here to send an email” in the Button Text.
  3. Enter Link “mailto: SomeoneName@gmail.com”. 
  4. Select Link Option “Open in new window” via clicking symbol “✵”.
  5. Select Alignment to be “Center”.
  6. Select Size to be “Large”.
  7. Select Icon library via clicking symbol “●”. Then select Envelope icon “✉️”. 
  8. Finally click “Save draft”.  {Note: DONOT click “Publish”}
Preview and click to try it in a new window.
Click to the top of page

How to post a Google Drive photo album?

Prerequisite: You already have Google Drive photos album as:

https://photos.app.goo.gl/YcXcJEgYEvt99NHA8 

  1. Make a screenshot image of Google photo album. The image width is 1024 pixel.
  2. Use the “Image” widget to choose this image from your PC. 
  3. Enter image Custom URL field as a prerequisite Google Drive album’s URL: https://photos.app.goo.gl/YcXcJEgYEvt99NHA8
  4. Set Link option as “Open in new window”.
  5. Finally click “Save draft”.  {Note: DONOT click “Publish”}
Screenshot image of Google photo album

Use the “Image” widget to choose the above image from your PC.

Preview and click to try it in a new window.
Click to the top of page

How to embed a YouTube video?

Prerequisite: You already have YouTub video URL as:

https://youtu.be/8fhl8fdlsLA

  1. Drag the “Video” widget into here (the white box here)
  2. Select Source: “YouTube”. Enter Link: https://youtu.be/8fhl8fdlsLA
  3. Finally click “Save draft”.  {Note: DONOT click “Publish”}
Preview and click to try it in a new window.
Click to the top of page

How to embed a Google Map?

  1. Drag the “Google Maps” widget into here (the white box here)
  2. In the Location field, enter your address or attraction name (i.e. Houston Museum of Natural Science).
  3. Finally click “Save draft”.  {Note: DONOT click “Publish”}
Preview and click to try it in a new window.
Click to the top of page

The internal anchor link is linked within the same web page. When you click on an internal anchor link in the “FROM” section (widget), you will scroll automatically to the referred  “TO” section (widget) and display it on the same web page. The internal link name is followed by the hash sign(#), called CSS ID. You have to assign this CSS ID to refer section of the same web page.  The following steps show how to assign CSS ID and to link to #CSS ID, using “Web-Topics” as example: 

  1. Assign the CSS ID in the “TO” section (widget). Tab the widget “✫Advanced” ➜ “CSS ID”, enter CSS ID name: “Web-Topics”.
  2. Link the #CSS ID in the “FROM” section (widget). Tab the widget “✎Content” ➜ “Link”, enter #CSS ID name: “#Web-Topics”.
Click to the top of page

Do not change your “Nickname” and “Display name publicly as” in “Profile”. And do not enter any text in "Tags" field from "Quick Edit".

In order to recognize easily who publishes the web post, please do not change your “Nickname” and  “Display name publicly as” in “Profile”.

Do not enter any text in “Tags” field from “Quick Edit”. This “Tags” field is reserved to be used by JCCAA web administrator.

Click to the top of page

Useful References

Elementor widgets references:

WordPress reference:

The complete recording of the Alumni Website Development Training class is uploaded into YouTube, as below:

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

Click to the top of page