Month: October 2018

Seven Special Halloween Website Design Tricks and Treats from Elementor

Photo Credit: Elementor Blog 

Seven Special Halloween Website Design Tricks and Treats from Elementor

October 31, 2018

Elementor 萬聖節送這個禮物，一定要收下，好好學起來喔！

Elementor Blog 1 –> Click here
Elementor Blog 2 –> Click here

 

Woo Commerce Snippets

Featured Image - WooCommerce

Woo Commerce Snippets

Oct 19, 2018

8月份因為時間緊迫，為了做這頁WooCommerce捐款，不懂程式，前後請了一位印度工程師幫我做弊寫了四次的程式，共花了US$90。現在要解碼了，還真痛苦，希望能看得懂，別再花錢了。

1- Remove Product Image 用CSS就好了：

Appearance > Customize >

.woocommerce-product-gallery {
display:none;
}

2- Change Button Color

Appearance > Customize > Color > Woo Commerce

3- Change Text-Name Your Price/Add to Cart

  • WooCommerce > Settings > Name Your Price

Change the following:

  • Minimum Price Text
  • Name Your Price Text
  • Add to Cart Button Text for Single Product

4-Change Add to Cart Text

https://www.isitwp.com/change-default-add-to-cart-button-text-in-woocommerce/

1
2
3
4
5
add_filter('single_add_to_cart_text', 'woo_custom_cart_button_text');
  
function woo_custom_cart_button_text() {
    return __('Donate Now', 'woocommerce');
}

This snippet didn’t work on me.

Used the plugin: https://wordpress.org/plugins/wc-custom-add-to-cart-labels/

 

Multilingual Plugin – WPML

Background Image: Confetti by Penelope Dullaghan

Multilingual Plugin - WPML

October 19, 2018

做文化節網站時，常常因為翻譯頁出現問題，本可以在15-20分鐘完成一頁卻因為翻譯plugin多花的時間，真是欲哭無淚呀！今天要做WACT網站-捐款頁時，又發現法文翻譯頁也出現同樣問題，不該再拖延找出問題的根源了。（哭）

這些問題，可能是Elementor還沒和WPML完全相容，也可能是我沒跟上WPML的更新技術，做文化節網站時是沒時間多研究的，現在把WPML相關資訊收集在這，希望可以解決問題。

Translating Images with Media Translation

10/19 WPML Ticket: After updating from WPML Multilingual CMS 3.9.4 to 4.0.7, the images on the translated French page won’t show, but you can still see the images on the backend. Please see attached 3 screen shots.

WPML Ticket - Images shown on backend
Images shown on the backend – translated page
WPML Ticket - Images not shown on frontend - translated page
Images not shown on frontend – translated page
Images shown on the original page
Images shown on the original page

10/22 WPML Reply: 

Are you using the WPML Media Translator?

We’ve released a new version of WPML and extensions. Please update all to the lastest versions. You can download here: https://wpml.org/account/downloads/

After that, please go to WPML > Settings > Post Types Translation and check if the “Media (attachment)” post type is set as “Translatable – only show translated items”. Then scroll down to Media Translation apply the settings for the future media and run the scan for the existing content.

10/22 Steps:

When you need to show images with content that you translated using WPML’s Translation Management, you should never edit that content manually using the WordPress “post editor.” If you do, your edits will be lost the next time you update this content using Translation Management.

WPML Media Translation

有時真是蠻挫折的，一整早上找一個以前不曾是問題的問題答案，還是找不到，只好再寄一次求救信。10/22 12:27pm

SiteGround

Background Image: Confetti by Penelope Dullaghan

Web Hosting: SiteGround (cPanel)

在Hosting上的作業不是每天操作的，我也常常會忘記程序，之前總是一一手寫在筆記本了，喜歡每次看著筆記操作這些過程，就把筆記記錄在此嚕！

October 18, 2018

How to delete a subdomain site?

Step 1: Delete the WordPress installation (This will delete all the files, database, and database user.

Tutorial: https://www.siteground.com/tutorials/cpanel/softaculous-remove-scripts/

  • Autoinstallers
  • Softaculous
  • Choose <All Installations> button (looks like a wooden box)
  • Click the red REMOVE (X) button
  • Click Remove Installation to delete all the files, database and database user.

Step 2: Delete the folders from File Manger

Step 3: Delete the Subdomain

It will still stay in My Account for 24 hours.

 

March 23, 2018

How to create a subdomain in cPanel?

  1. cPanel > DOMAINS > Subdomains
    • Create a Subdomain >
    • Subdomain: xxxxx.joyofliving.site
    • Document Root: /public_html/xxxxx
    • Create
    • URL: 403 Forbidden Error
  2. cPanel > SECURITY >Let’s Encrypt 
    • Install new Let’s Encrypt Certificate > Domain: xxxxx.joyofliving.site >
    • Let’s Encrypt SSL Type: Let’s Encrypt SSL
    • Install
    • Successfully Installed SSL <OK>
    • Under Select an Action >
      • HTTPS Enforce [on]
      • External Links Rewrite [on]
      • OK
    • URL: still shown 403 Forbidden Error, but got https padlock
  3. cPanel > AUTOINSTALLERS/WordPress or WORDPRESS TOOLS/WordPress Installer (Version 4.9.8)
    • Install Now
    • Choose Protocol: https://
    • Choose Domain: xxxxx.joyofliving.site >
    • Site Settings:
      • Site Name: xxxxx
      • Site Description: xxxxx
    • Admin Account: 
      • Amin Username: xxxxx
      • Admin Password: xxxxx
      • Admin Email: xxxxx 
    • Install
    • Installed Successfully
  4. ddddd

Google Tag Manager

Background Image: Confetti by Penelope Dullaghan

Google Tag Manager

November 9, 2019

Coming here made me just realize that I’ve started GTM a year ago.  The goal of toady….Complete Google Analytics Academy – Google Tag Manager course.  GoGoGo…

Google Tag Manager Fundamentals

Managing multiple analytics and marketing tags for your site can be a challenge. Redundant or incorrect tags can distort data measurement and reduce your site performance. In this self-paced course, you’ll learn how Google Tag Manager can simplify the tag implementation and management process for marketers, analysts, and developers.
 
  • Unit 1: Starting out with Google Tag Manager (10:00am – 11:33am)
    1. Lesson 1: Course Introduction (2:37)
    2. Lesson 2: Start with a measurement plan (Article)
    3. Lesson 3: Develop a tag implementation strategy  (2:07)
      • Decide which of your existing site tags you can move into Tag Manager.  Migrate all if possible
      • Decide what static and dynamic values you’ll want to pass from your websit
      • Choose which tags can collect the data you need
    4. Lesson 4: Tag Manager overview  (3:51)
      • To begin using GTM, a Container Snippet  (JavaScript code) will need to place on each page of the website
      • Each Tag Manager account has at least one container.
      • A Tag Manager Container includes the tags and triggers.
      • A trigger determine which tag should fire or collect data.
      • There are three parts in a trigger: Variables, Operators, & Values

Vocabulary

  • deploy: arrange, allocate, mix, blend 配置，調配，部署

October 17, 2018

Jeffalytics

Google Tag Manager Tutorial Part #1/5: Do you need tag management?

  • GTM is not neccessary if you are adding one tag only (i.e. just standard Google Analytics)
  • But you want to use advanced features in Google Analytics, then GTM can be your bff

Google Tag Manager Tutorial Part #2: How GTM Works

 

The Difference Between GMT and UTC

Background Image: Confetti by Penelope Dullaghan

The Difference Between GMT and UTC

October 15, 2018

https://www.timeanddate.com/time/gmt-utc-time.html

The Difference Between GMT and UTC

Greenwich Mean Time (GMT) is often interchanged or confused with Coordinated Universal Time (UTC). But GMT is a time zone and UTC is a time standard.

Illustration image

The Royal Observatory in the UK.

©iStockphoto.com/stocknshares

Although GMT and UTC share the same current time in practice, there is a basic difference between the two:

  • GMT is a time zone officially used in some European and African countries. The time can be displayed using both the 24-hour format (0 – 24) or the 12-hour format (1 – 12 am/pm).
  • UTC is not a time zone, but a time standard that is the basis for civil time and time zones worldwide. This means that no country or territory officially uses UTC as a local time.

UTC, GMT and Daylight Saving Time

Neither UTC nor GMT ever change for Daylight Saving Time (DST). However, some of the countries that use GMT switch to different time zones during their DST period.

For example, the United Kingdom is not on GMT all year, it uses British Summer Time (BST), which is one hour ahead of GMT, during the summer months.

Useful Website Tools

Featured Image- Dominik Scythe

Photo by Dominik Scythe on Unsplash

Useful Website Tools

Mar 19th, 2018

工欲善其事，必先利其器。

  1. https://www.scamadviser.com/
  2. https://builtwith.com/
  3. http://whatwpthemeisthat.com/
  4. Google Chrome Extension – What Font
  5. Google Chrome Extension – ColorZilla
  6. https://www.dnswatch.info
  7. https://www.freepik.com/
  8. Hexadecimal Color Picker  https://www.webpagefx.com/web-design/color-picker/
  9. CSS庫鑑：https://css-tricks.com/almanac/
  10. Text Editor: https://atom.io/
  11. Google basic web page: Anatomy ​ of an HTML document
  12.  

Treehouse: Web Design

Photo by Sabri Tuzcu on Unsplash

Treehouse: Web Design

October 14, 2018

1/26/2017就開始Treehouse的課程，其中Web Design系列課程我都沒有完成1/4，如今課程都已更新過，我這種跳躍式的專注力，每天胡思亂想要如何上進，卻也從未完成一件事。今天再次提起勁來，重新來過。給自己一個目標，今年底完成Web Design系列課程，有做到，再想別的事！

 

Course 1: Introduction to HTML and CSS

October 14, 2018

  1. Getting Familiar with HTML and CSS
    • 滑鼠效應：讓圖轉起來 
    • header .profile-image:hover {
      transform: scale(2) rotate(360deg);
      } 
    • Web Development: Front End Development & Back End Development
  2. HTML: The Structural Foundation of Web Pages and Applications
  3. Make It Beautiful With CSS
  4. Adding a New Web Page
    • Text Editor: https://atom.io/
    • Google basic web page: Anatomy ​ of an HTML document
    • <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>
    • Link Stylesheet: <link rel=”stylesheet” href=”resume.css”>

Course 2: HTML Basics

October 15, 2018

  1. Getting Started with HTML
  2. Structuring Your Content
  3. Images, Text and Links
  4. Going Further with HTML

想跟我一起當同學嗎？
點入左圖，報名去吧！

Opt-In Page

Photo by Timo Stern on Unsplash

Opt-In

October 13, 2018

Part 1: Build the basic page

Tools:

  • Theme: Generate Press or Astra
  • Elementor Free or Pro
  • Popup Maker plugin
  • Email marketing provider:
    1. MailChimp (cheap but limited)
    2. ConvertKit
    3. Active Campaign
    4. drip (Dave’s favorite)

Part 2: Enhance it with Elementor

TYPOGRAPHY:

  • TypeKit Font: Elementor > Settings > Integrations > TypeKit > Enter TypeKit Kit ID
  •  SPAN tag: <span style=”color:#c0d322″>Green Color</span>
Ex: Let's try if the html code turn them to Green Color
  • html code for bold print: SEND ME MY FREE GUIDE
send me my free guide

Part 3: Add the popup, form & thanks page

  1. Thank you page
  2. Popup Maker Plugin (Free) by WP Popup Maker
    • Need to copy CSS Class  
    • Create the Popup design in Elementor template (Page-Elementor Canvas)
    • Take Elementor template shortcode and paste in Popup Maker
  3. Opt-In Form Choices
    • Elementor Pro
    • Email Provider’s Embed Code
    • WordPress form plugin – Caldera Forms
    • Concert Pro
    • Convertbox

Part 4: Hook it up to your email provider

Website Template Ideas

Background Image: Flower Bucket by Eleanor Lutz

Website Template Ideas

October 13, 2018

Free Soccer Club Layout for Divi https://www.elegantthemes.com/layouts/health-fitness/soccer-club-home-page/live-demo 

March 25, 2018

今天發現這個網站 Wellness Mama https://wellnessmama.com/

這個網站用的設備值得我進一步研究的：Spears Marketing https://spearsmarketing.com/wm

朋友選擇到台灣渡假，這個網站功勞很大：https://guide.michelin.com/tw/en/taipei/news-and-views/taipei-michelin-guide-bib-2018/news

+ More