How to modify an existing Aheto Layout

In theme, that is created with Aheto plugin, Aheto folder has a directory with widgets which have files for layouts.

  • For editing options in layout you need to find controller file of this layout.

In controller you have add_action with function of options, where:

  1. Name of widget’s directory 
  2. Function name

In function of options you have:  

  1. Path to preview images of layouts in widget 
  2. Slug of layout (the same as controller file name)
  3. Name of layout
  4. Preview image name of layout 

All your options in function has dependency, where:

  1. Slug of option, what need condition 
  2. Slug of option that will be control condition 
  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 of option
  2. Type of option. Note. It can be “url”, “text”, “textarea”, “attach_image”, “group”, “select”, “css_editor”, “switch", “typography”, “colorpicker”, “slider”, “link”, “responsive_spacing” and  “wysiwyg” 
  3. Heading of option
  4. Description of option
  5. Default value of option

Also you can have image sizer (for custom image size) in 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 (hase 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
  • For editing html structure in layout you need to find view file of this 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 custom css in Elementor admin panel for layout ) 
  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

  • For editing styles or scripts in layout you need to find .scss/.js file of this layout.

Note. All our styles and scripts are generated by Gulp.

  • For editing preview image in layout you need to find image file of this layout.

That’s all you need for editing layout in theme for Aheto.