{"id":160,"date":"2021-12-06T18:14:35","date_gmt":"2021-12-06T18:14:35","guid":{"rendered":"https:\/\/enlitly.com\/blog\/?post_type=docs&p=160"},"modified":"2023-03-08T17:10:44","modified_gmt":"2023-03-08T17:10:44","slug":"how-to-use-site-blocks","status":"publish","type":"docs","link":"https:\/\/enlitly.com\/blog\/docs\/how-to-use-site-blocks\/","title":{"rendered":"How to edit your site"},"content":{"rendered":"\n

There are 3 types of blocks in Enlitly<\/p>\n\n\n\n

1. Tagged as \u201cElement<\/em>“<\/strong><\/p>\n\n\n\n

These are the ones where you will be able to use the row, column, and drag and drop element concept.<\/p>\n\n\n\n

At present, the below elements are available<\/p>\n\n\n\n

  1. Text<\/li>
  2. Image<\/li>
  3. Video<\/li>
  4. Button<\/li>
  5. Divider<\/li>
  6. Form<\/li>
  7. Embed<\/li>
  8. Counter<\/li><\/ol>\n\n\n\n

    To build this block from scratch, follow the below steps<\/p>\n\n\n\n

    1. Click on “Add Block”<\/strong>. This will show up all available blocks. Drag and drop the block named as “Scratch”<\/strong>. <\/li>
    2. Then click on “Add Row<\/strong>“. Adding a row will automatically add a column inside. The row and the row options are shown using red color. When you click on red color settings option, you will see settings that are specific to the row. <\/li>
    3. You can add up to columns by clicking on “Add Column<\/strong>” (Options in Blue color). The columns and column options are shown using blue color. <\/li>
    4. Click on “Add Elements<\/strong>“. This will show a list of available elements. Drag one of the elements in the column. Element and element options are shown in green color. When you click on green color settings option, you will see settings that are specific to the row. You can set the margin, color and change other element specifc properties.<\/li><\/ol>\n\n\n\n

      You can delete an element, column, or row using the delete option. <\/p>\n\n\n\n

      You can also drag and drop elements from one column to another.<\/p>\n\n\n\n

      Note that deleting a row will delete all the columns and elements inside, and it’s a one-click delete to maintain ease of use. In case, you have built a complex block with lots of elements, we recommend saving the block as a user block<\/strong>.<\/p>\n\n\n\n

      2. Tagged as \u201cUnique<\/em>\u201d<\/strong><\/p>\n\n\n\n

      These are special blocks that use the show and hide element concept. Because of their unique design, the element drag and drop is not available for these blocks.<\/p>\n\n\n\n

      3. Tagged as \u201cDynamic<\/em>\u201d<\/strong><\/p>\n\n\n\n

      These are dynamic blocks through which the system pulls information defined in other areas of the platform. <\/p>\n\n\n\n

      At present, below dynamic blocks are available:<\/p>\n\n\n\n

      1. All products <\/strong>– This block shows all published products. Each product shows sales page and buy option (which is already linked to checkout page).This is a product specific block. It is available on product pages only.<\/li>
      2. Product <\/strong>– This is a product specific block, which shows the product along with sales page and checkout page links. This is a product specific block. It is available on product pages only.<\/li>
      3. Curriculum <\/strong>– This block pulls all information about modules and lessons. If you have marked a lesson for preview, site visitors will be able to visit your site and click on the preview option. This option is available in front of each lesson. It will take user to content dashboard, where user can watch preview lesson. If a lesson is not marked for preview, it shows as locked. This is a product specific block. It is available on product pages only.<\/li>
      4. Upsell <\/strong>– Upsell block pulls all upsell products that you added to the product in hand. It shows product image, description, ales page and checkout page links. This is a product specific block. It is available on product pages only.<\/li>
      5. Checkout <\/strong>– Checkout block contains all pricing options defined for the product in hand as well as products added as order bumps to the product in hand. This is a product specific block. It is available on product pages only.<\/li>
      6. Pricing <\/strong>– Pricing block gives an easy way to define pricing packages. Like what goes in each price defined for the product in hand. It shows checkout link button in the end. This is a product specific block. It is available on product pages only.<\/li><\/ol>\n\n\n\n

        Here is a video on how to edit your site:<\/p>\n\n\n\n

        \n