StyledThemes

Adding a Photo or Slider to your Front Page

Adding a photo or a Slider will be very similar to each other because you will be using a widget for this. When using or needing a widget to display a header image or anything that you do not want the title to show, I recommend installing the “Advanced Text Widget” for this theme.

Getting the Advanced Text Widget

  1. Go to Plugins >> Add New
  2. Search for “Advanced Text Widget” and then click Install, and then activate it.

Adding Your Photo or Slider

For sliders, you will want to make sure that the slider is “Responsive” for best results, although not required. You will also want to make sure that the slider comes with Shortcode so that you can add this to the widget. Photos are easy enough because you simply upload and use some easy HTML code to get the photo to show.

For a Photograph, make sure you have this already because you will need to upload it to your Media Library. I recommend you crop and finalize your photograph in your preferred image program like Photoshop, Elements, or other. For sizing, I would recommend the following sizing:

  • Front Page: 1920 x 340
  • Page Banners: 1920 x 225

Let’s get started…

  1. Upload your image to the Media Library and then copy the url path to the full image
  2. Go to Appearance >> Widgets
  3. Drag the “Advanced Text Widget” to your Showcase Front Page sidebar position
    celestial-frontpage-positon
  4. Title your widget
  5. In the empty field, add the following html code:
    <img src="your-image-path" alt="My Nice Photo" />
  6. In the “Widget Visibility” settings, select “Front Page” and also place a check in the “Suppress Title Output” checkbox.
    celestial-adv-text-settings
  7. Click Save

Note: If you are using a slider shortcode, instead of adding the image path into the text area, you would paste the shortcode instead.

The Demo Slider: In case you are wondering what Slider I am using on the Celestial (Professional version) demo website, it’s the “Responsive Slider” by AlienWP

When all is done, your front page should now look like this:

celestial-header