Task 4 – Pages & Widgets

by

Portfolio

  1. Using your color palette Hex numbers from last week, adjust Globals Colors, Fonts, Typography in your website in Elementor Settings
  2. Update Header background color and adjust widget sizes & positions
  3. Add your Logo to Site Settings in Elementor, so it can appear in header
  4. Create Primary Menu with posts/categories & add Menu widget to Header

HTML Practice

W3Schools

CodePen

  • This addition adds a navigation menu by creating a div with an ID of “navigation”, then creating a set of 5 anchors <a> that link to their corresponding divs later in the page. See if you can map the href names to their IDs later in the document.
  • Add new code at the beginning of your HTML, after the “First build the HTML step-by-step” comment, but before the “Add an h1…”
Like This: 

<!-- 10. Add a <div> at top for the navigation menu. -->
<div id="navigation">
<!-- 11. Add a <span> for special text formatting. -->
<span id="logo">🇮🇹</span>
<!-- 12. Add <a>s that link to ids in the page. -->
<a href="#introduction-heading">Introduction</a>
<a href="#florence-heading">Florence</a>
<a href="#rome-heading">Rome</a>
<a href="#naples-heading">Naples</a>
<a href="#reserve-heading">Reserve a trip</a>
</div>

Post

  1. Subject: Task 4-yourname
  2. Category: Task 4
  3. Codepen URL/ embed
  4. Clickable portfolio URL
  5. Current palette colors