How to extend a widget with a new layout

You can create new layout to Aheto from your theme following these steps:

Step 1. You need to have the folder aheto in the root of the theme.

Step 2. In your theme aheto folder have to has a directory with widget name (the same name as in Aheto plugin shortcodes folder ) in that you want to add a new layout. 

Step 3. Go to controller directory and create controller file for new layout:

Note. Use prefix for layout file's name, for example a slug of your theme.

  • In controller file you have to have function of options and action for it, where are:
  1. Name of widget’s directory
  2. Function name

  • In function you need to have such elements:
  1. Path to preview images of layouts in widget 
  2. Layout slug (the same as controller file name) 
  3. Layout name
  4. Name of layout preview image

  • All your function options should have dependency:

    1. Slug option which needs dependency 

    2. Slug option that controls option 1

    3. Value of control option (can be string or array). Note. Slug of layouts option is “template” 

  • Options in function for layout are in “add_params” and has:
  1. Slug option
  2. Type of option (can be “url”, “text”, “textarea”, “attach_image”, “group”, “select”, “css_editor”, “switch", “typography”, “colorpicker”, “slider”, “link”, “responsive_spacing” or  “wysiwyg” ) 
  3. Heading of option
  4. Description of option
  5. Default value of option

  • Also you can add image sizer (for custom image size) to your layout, where:
  1. Name of group (tab) in Elementor admin panel
  2. Prefix for option (same role as the slug)
  3. Conditions for image sizer option

  • Also you can add button params to your layout, where:
  1. Prefix for option (same role as the slug) 
  2. Name of group (tab) in Elementor admin panel 
  3. Enable/disable options for icons in buttons,
  4. Conditions for button params option

Step 4. Create view file for new layout (with the same name as controller file):

  • In view file of layout we have :
  1. Extract option
  2. Get custom css for the layout ( if you added it in Elementor admin panel ) 
  3. Custom attributes for layout’s wrapper 
  4. Path to widget directory 
  5. Check for css files for option “Custom CSS including” (Aheto Dashboard->Optimization->Custom Css Including, if the option is enabled, all css files from layouts on page moved in one css file) 
  6. Include css (or js) file for layout 
  7. HTML structure for layout

Step 5. Add .scss/.css file for layout styles and/or .js/.min.js files for layout scripts. Note. All our styles and scripts are generated by Gulp.

Step 6. Add preview image for layout  in the preview folder.

That’s all you need for creating a new layout to Aheto.