Web Design

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

 

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

Revolution Slider Tutorials – Ken Burns

米蠍屋筆記

Background Image: Flower Bucket by Eleanor Lutz

Revolution Slider Tutorials - Ken Burns

April 5, 2018

1  Muhammad Qasim – 2017.03.19

Scale: (in %) From 150 to 100, Don’t use % less than 100

2 . WP Tuts – 2016.02.17

這位老師解釋的很清楚，多看幾次！

3.   Elegant Marketplace – 2016.1.13

Import Demo – Classic Carousel Slider, delete other sliders only leave Ken Burner slide

  • Minimum 3000 px wide (upto 5000 px) and very high quality image
  • 3個觀念要懂的：
    1. Scale (%) From ___ To ___
    2. Horizontal Offset (px) From ____ To ____ (以中心點用正負px來設定起點和終點）
    3. Vertical Offset (px) From ____ To ____ (以中心點用正負px來設定起點和終點）

SEO Tools

Background Image: Flower Bucket by Eleanor Lutz

SEO Tools

April 1st, 2018

看了許多SEO的教學影片，來把它們收集在一起吧！

1. WP Crafter

這位大師建議的工具有：

2. Neil Patel

I like his 3 powerful SEO Tips:

  • Make your content thorough
  • Make sure to have keywords in SEO Title and Meta Description
  • Use Google Search Console

這是值得follow的大師

7 Free Tools in Google SEO

  1. Quick Sprout Analyzer
  2. Yoast SEO Plugin
  3. Google Search Console
  4. Google Trends
  5. Websiteresponsivetest.com
  6. Screaming Frog
  7. Google PageSpeed Insights

3. Neil Patel – 10 Outdated (But Commonly Used) Social Media Tactics You Need to Ditch

Read the Blog here –> https://neilpatel.com/blog/social-media-tactics

My Notes:

  1. Links, links and more links
  2. Same content, different platforms
  3. Writing about what you want
  4. Black hat social media tactics
  5. Following to be followed
  6. Impersonal automated “thank you” messages
  7. Giving out all the goodies at once
  8. Throwing a sales pitch at your audience
  9. Thinking organic traffic will make you rich
  10. Only publishing text and image-based content

Social Listening Tools:

  1. Mention: https://mention.com/en/
  2. IFTTT: https://ifttt.com/
  3. Hootsuite: https://hootsuite.com/
  4. Keyhole: http://keyhole.co/

TweetReach: https://tweetreach.com/ How far do your tweets travel? (hashtag, username or keyword)

#1: How to write something awesome? [RELEVANT]

  1. Be honest
  2. Write something informative, interesting, and relevant to the audience.  Engage with commenters.
  3. Experience is key.  
  4. A little you, a lot of them. Ex: EF https://www.linkedin.com/feed/update/urn:li:activity:6390497273226321920

#2 我從這篇 https://www.instagram.com/p/BPZjiHNgsoq/ (709,999 views) 進去，followed AdidasOriginals，10秒內https://www.instagram.com/get_yeezy4you/ 和 https://www.instagram.com/siqchiq/ 馬上follow me back

 

 

Elementor 2.0 is Coming Soon

Photo: Midnight by Eleanor Lutz

Elementor 2.0 is coming soon

WPCrafter

Darrel Wilson

Blocks = Templates

Elementor 2.0 will come out in March 2018 (soon)

  • Customize 404 pages
  • WooCommerce shops
  • Advanced Custom Fields

WooCommerce theme – Flatsome

Other Elementor Tutorials

May 22, 2018

Z-Index

Photo: Silverton Lookout, BC

How to Use Z-Index in Elementor

X軸：左右
Y軸：上下
Z軸：前後

讀這篇說明：https://docs.elementor.com/article/242-z-index

試做看看：

Z-Index 1
Z-Index 2
Z-Index 3
Z-Index 4

在 Column Settings > Advanced裡，利用正負Margin及Z-index來做出立體前後的效果．

+ More