Skip to content

2. Basic Settings

Jump to bottom
Jessglynne edited this page Nov 14, 2021 · 4 revisions

Preloader

This option allows you to enable or disable the preloader for the site. It is displayed while the content is being loaded.

Starting astroid 2.2.3, you can select either an image or any animation from the animations library or can even choose from the FontAwesome’s animation library as a preloader type. The image option let’s you display either your logo or any other image (gif animations and such), while the page is being loaded.

When you select the Image as the preloader type, it gives you options to customize the display of the image as per your need:

  • Background Repeat: You can select the appropriate value from the dropdown for Background Repeat.
  • Select a Background Size: You can select the appropriate value from the dropdown for Background Size.
  • Select a Background Position: You can select the appropriate value from the dropdown for Background Position.
  • Preloader Background Color: You can select a background color for the preloader with this option.

When you select Animation as preloader type then it gives you options to customize:

  • Preloader Animation: Choose the animation of the preloader from the given list.
  • Preloader Color: Set the color of the preloader icon.
  • Preloader Background Color: Select the background color of the preloader icon which is displayed as the site loads.
  • Preloader Size: Set the size of the preloader in pixels by sliding over the indicator.

When you select Font Awesome as preloader type then you have the following options to customize it:

  • Preloader Animation: Choose the animation of the preloader from the FontAwesome library.
  • Preloader Color: Set the color of the preloader icon.
  • Preloader Background Color: Select the background color of the preloader icon which is displayed as the site loads.
  • Preloader Size: Set the size of the preloader in pixels by sliding over the indicator.

Back to Top

The Back to top button will instantly redirect the user to the top of the page with just a click. It is displayed at the bottom right corner of the page as the user scrolls down, also you can easily disable this option if you don’t need it.

  • Back To Top: Choose whether you want to enable/disable the icon.
  • Icon: Choose the icon for your back-to-top button.
  • Icon Size: Set the size of the icon in pixels by sliding over the indicator.
  • Icon Color: Set the icon color for the button.
  • Icon Background Color: Set the background color of the icon.
  • Icon Shape: Select icon shape either Circle, Round or Square.
  • Back To Top Button on Mobile: Choose whether you want to enable/disable the icon on mobile devices.

Layout Settings

We have two main layouts Wide & Boxed. The Wide layout is the default layout for the site that displays the content spanning the entire width of the viewport, whereas in Boxed layout the content will be contained within a box and you can also customize the background using the different options available.

Site Layout

Select the layout for your site, either Wide or Boxed.

BOXED Layout options:

  • Background Image: Choose the background image for the site.

  • Background Repeat: Choose whether you want to repeat the background image or not from the different options available: Inherit, Repeat All, Repeat Horizontally , Repeat vertically, or No repeat.

  • Background Size: Adjust the size of the background image selected from the option provided: Cover, Contain and Inherit.

  • Background Position: Adjust the position of the image where you want it to be displayed from the options: Inherit, Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, Center Bottom.

  • Background Attachment: You can choose whether the image will move with the page scroll or not using: Scroll, Fixed or Inherit.

Smooth Scroll

Enabling smooth scroll loads smooth-scroll.js file to make sure the anchor tags within the page scroll smoothly. You can also control the speed at which the scroll will happen. This is a very useful option for creating one-page websites.

How to do transparent header in Astroid!

Astroid is very flexible when it comes to modifying the layout of certain areas, including doing a transparent header. Add the following classes to your header section using the layout manager (doc).

header-transparent position-absolute

Add the following CSS in your astroid custom css section (doc).

.astroid-header-section { background: transparent; z-index: 9999; border-bottom: 1px solid rgba(255, 255, 255, 0.26); }

Make sure your header doesn’t have any background color selected in the backend section level or the colors section and change that color to transparent as well.

That’s it. This should do it. You may add the class pb-2 (padding-bottom 2 (range is between 1 – 5)) to create additional padding towards the bottom between the header and the section below.

Clone this wiki locally