Readying An Image For Website

Step 1 figure out your size

Decide what size you need before you start looking for images

This is important so that we know what kind of image we need.

Do you need a portrait or a landscape image or in the case of the header an extremely long landscape image.

Step 2 find good images

Choose large high quality images that will downsize well that are either royalty free or are owned by you.

 

Step 3 figure out your size

Decide what size you need before you start looking for images

This is important so that we know what kind of image we need.

Do you need a portrait or a landscape image or in the case of the header an extremely long panoramic landscape image.

Step 4 Online Image Resources

When looking for images online to fill a space look for sites that will allow you to use the image royalty free.

Some image examples

Step 5 Image editing

Image editing can be rather a labored process that can end up costing you money you don’t have.

This method outline using free software to achieve the image editing process.

Free image resizer

RSS Feed

RSS Feed

RSS feeds allow websites to pull information from another website and share it on their website.
The Feed display is made up of
  1. Section Name
  2. Post Title
  3. Post excerpt
In the Dashboard  menu
  1. Select Page
  2. Select Add New
  3. Add page title
  4. category for the page
    1.  Enter RSS as the category
  5. Select either Save Draft or Publish
  6. Click Edit with Elementor
In the Elementor menu
  1. Select RSS Feed Widget (not the RSS widget) and drag it over. This widget is located in the WordPress section of widgets.
While in the “Edit RSS Feed” widget and in the Content section
  1. Feed Url: http://www.wisconsinlakes.org/feed/
  2. Give this section a Title
  3. Number of feeds to show set to 6
  4. Click Apply near the top of the page
  5. Click UPDATE
While still in the Edit RSS Feed Widget and in the Content section
  1. Set List Type to List Only
  2. Click Apply
  3. Click UPDATE
  1. On the Advanced tab, copy and past the following code into the Custom CSS section
    1. code below
      .entry-content ol, .entry-content ul {
      margin-left: 18px;
      }

      .rfw-class .widget_dock li > div.text_div {
      font-size: 14px;
      }
      .rfw_dock h3 {
      font-size: 16px;
      font-weight: 600;
      }

  2. Click Apply
  3. Click UPDATE

Event Aggregator

Event Aggregator

Page aggregator helps define what information is seen by a given page.

On the page, the post aggregator contains the teaser information for the rest of the post.

  1. Post Featured Image
  2. Post Title
  3. Post meta data (date, author, comments)
  4. Post excerpt
  5. Link to post
In the Dashboard, menus are found under the Appearance tab.
  1. Select Page
  2. Select Add New
  3. Add page title
  4. Category for the page
    1.  Enter Event as the category
  5. Select either Save Draft or Publish
  1. Click Edit with Elementor
Select the Posts widget (under the “Pro” heading) and drag it over.
  1. Set Skin to Classic
  2. Columns set to 4
  3. Posts per page set to 8
  4. Image size set to Large
  5. Leave Meta Data as is
  6. Click UPDATE
  7. Change “Read More Text” if you wish
  8. Click UPDATE
  9. Click on Query
  1. Set Source to Posts
  2. Select Include
  3. Include by Term
  4. Set Term to Category: Event
  5. Set Order by to Date
  6. Set Order to DESC for descending order
  7. Click UPDATE
 
 
  1. Set Pagination to Numbers+Previous/Next
  2. Page Limit empty
  3. Set alignment to centered
  4. Click UPDATE

Page Aggregator

Page Aggregator

Page aggregator helps to define what information is seen on a given page.

On the page, the post aggregator contains the teaser information for the rest of the post.

  1. Post Featured Image
  2. Post Title
  3. Post Meta Data (date, author, comments)
  4. Post excerpt
  5. Link to post
In the Dashboard, menus are found under the Appearance tab.
  1. Select Page
  2. Select Add New
  3. Add page title
  4. Category for the page
    1.  Enter Aggregator as the category
  5. Select either Save Draft or Publish
  1. Click Edit with Elementor
Select the Posts widget (under the “Pro” heading) and drag it over.
  1. Set Skin to Classic
  2. Columns set to 4
  3. Posts per page set to 8
  4. Image size set to Large
  5. Leave Metadata as is
  6. Click UPDATE
  7.  Change “Read More Text” wording if you wish
  8. Click UPDATE
  9. Click on Query
  1. Set Source to Posts
  2. Select Include
  3. Include by Term
  4. Set Term to Category: post
  5. Set Order by to Date
  6. Set Order to DESC for descending order
  7. Click UPDATE
 
 
  1. Set Pagination to Numbers+Previous/Next
  2. Page Limit empty
  3. Set alignment to centered
  4. Click UPDATE

Gallery

Gallery

The gallery is made up of collection of images that you choose to display.

In this lesson we will go over making a new gallery.

Step 1: create a new page for the gallery

  1. Add title
  2. Add a category
  3. Click Add New Category
  4. Click either Save Draft or Publish

Step 2: Edit with Elementor

  1. Click Edit with Elementor

Step 3: Add Image gallery

  1. Grab and drag in the image gallery widget, which is in the “General” section of widgets.

Step 4: Add images

  1.  Click Add Images

Step 5: Select Images

  1. Select images you wish to add to this gallery
  2. Click Create a new gallery

Step 6: Arrange Image gallery

  1. Grab and drag the images to rearrange images
  2. Click Insert gallery

Step 7: Image Size

  1. Change Image Size to Large
  2. Click UPDATE

Step 8: Image Spacing

  1. In the Style tab, et Spacing to Custom
  2. Set slider to 15
  3. Click on UPDATE
Font Resize
Contrast